Add two buttons side by side: Having clear calls to action on your pages is a necessity for most websites. And what better way to draw attention to some of your most important CTAs than by placing them in your header?
In today’s tutorial, we’ll show you how to add two buttons side by side to your overall header using Divi’s Theme Builder. One of the buttons is primary, the other secondary.
1. Go to Divi Theme Builder and create a global header
Go to Divi Theme Builder
Start by going to Divi Theme Builder and click on “Add a global header”.
Create a global header
Continue by clicking on “Build Global Header”.
2. Build an overall header design
Add a new section
Spacing
Once inside the template editor, you will notice a section. Open section settings and remove all default top and bottom padding.
- Top padding: 0px
- Bottom padding: 0px
Z index
Also, make sure to increase the z index of the section in the visibility settings. This will ensure that the overall header content will appear at the top of the entire page and publish content.
- Z index: 99999
Add a new row
Column structure
Once you have completed the section settings, add a new row to the section using the column structure.
Sizing
Without adding any modules, open the row settings and let the row occupy the entire width of the section container.
- Use custom gutter width: Yes
- Gutter width: 1
- Equalize Column Heights: Yes
- Width: 100%
- Max width: 100%
Spacing
Also, change the left and right row padding values.
- Left padding: 2vw (desktop), 10vw (tablet and phone)
- Right padding: 2vw (desktop), 10vw (tablet and phone)
Main element
To center all column content, we’ll add these two lines of CSS code to the main element of the row.
display: flex;align-items: center;
Remove desktop display properly on tablet and mobile.
display: block;
Column 1
Frontier
Continue by opening the settings in column 1 and add a right border on the desktop only.
- Right border width: 1px (desktop), 0px (tablet and phone)
- Right border color: # d8d8d8
Z index
Also increase the z index of the column.
- Z index: 11
Column 2
Main element
Then open the settings for column 2 and add the following lines of CSS code to the main column element to turn it into two columns.
display: grid;grid-template-columns: 50% 50%;
Add a menu module to column 1
Select the menu
It’s time to start adding modules! Add a menu module to column 1 and select a menu of your choice.
Download logo
Then upload a logo.
Disposition
Switch to the module design tab and ensure the following layout settings apply:
- Style: left aligned
- The direction of drop-down menu: down
Text menu
Then change the menu text settings.
- Active link color: # ef6f49
- Font menu: Montserrat
- Menu font-weight: Semibold
- Menu font style: uppercase
- Text color menu: # 333333 (default), # ef6f49 (hover)
- Menu text size: 0.7vw (desktop), 1.8vw (tablet), 2.5vw (phone)
- Letter spacing menu: 1px
Drop-down menu text
Also, make changes to the drop-down text settings.
- Drop-down menu background-color: #ffffff
- Drop-down menu line color: # ef6f49
Icons
Next, change the color of the hamburger menu icon.
- Hamburger menu icon color: # 000000
Sizing
Also, add maximum logo width to sizing settings.
- Max logo width: 9vw (desktop), 12vw (tablet), 15vw (phone)
CSS Logo Menu
And complete the module settings by adding a line of CSS code to the menu logo in the advanced tab.
- margin-right: 10vw;
Add a code module to column 1
Add custom CSS code to the module
The next and last module we need in column 1 is a code module. Add the following lines of CSS code to customize the space between menu items:
<style>.et-menu>li {padding-left: 1.5vw !important;padding-right: 1.5vw !important;}</style>
Add the first button module to column 2
Add a copy
Let’s move on to the next module! Add the first button module and enter a copy of your choice.
Add a link
Then add a link to the button module.
Alignment
Switch to the module design tab and change the button alignment.
- Button Alignment: Right
Button settings
Style the button as well.
- Use custom styles for the button: Yes
- Button text size: 0.8vw (desktop), 1.7vw (tablet), 2.5vw (phone)
- Button Text Color: # 000000
- Button background color: # edeef0 (default), # d6d7d8 (hover)
- Button Border Width: 0px
- Button border radius: 0px
- Button letter spacing: 2px
- Button font: Montserrat
- Button Font Weight: Semi Bold
- Button font style: uppercase
Spacing
Complete the module settings by adding custom padding values on different screen sizes.
- Top padding: 1vw (desktop), 2vw (tablet), 3vw (phone)
- Bottom padding: 1vw (desktop), 2vw (tablet), 3vw (phone)
- Left padding: 2vw (desktop), 4vw (tablet), 6vw (phone)
- Right padding: 2vw (desktop), 4vw (tablet), 6vw (phone)
Clone button module
Once you have completed the first button module, clone it.
Edit link
Open the duplicate buttons module and change the URL.
Change alignment
Also, change the alignment of the module.
- Button alignment: left
Change button settings
Also, make changes to the button settings.
- Button Text Color: #ffffff
- Button background color: # ef6f49 (default), # e06945 (hover)
Hover transformation ladder
Complete the button settings by adding a transformed scale hover effect.
- Right: 110%
- Low: 110%
Read more: How to add a text block animation to your titles on Divi
3. Save the changes to the theme generator and the preview result
Once your global header is done, save any changes you made to the theme builder and show the result on your website!
Final thoughts
In this tutorial, we have shown you how to add two buttons side by side to your overall header using Divi’s theme builder.
One of the buttons we added is primary, the other is secondary. Adding buttons to your overall header helps you highlight some of your website’s most important CTAs.
For website maintenance service contact us.