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.

add two buttons side by side

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.

Leave a comment

echo "";