719-646-4524 in Colorado Springs

The Divi theme offers a lot of flexibility, but the CTA (Calls to action) buttons in the full-width header are always along the bottom of the module (underneath the heading and subheading). Sometimes it makes sense to have one or both of the buttons line up on the top of the header above the headings.

Moving the buttons may seem like it would take special modifications. Luckily, you can get the desired effect by editing right inside the module settings. Here we have a simple way to move one or both of those CTA buttons up above the heading and sub-heading.

***You will need the Divi Theme for this example. You can get it from Elegant Themes.***

First, you will want to create your full-width section. Then add the full-width header module. You should also go ahead and create the CTA button(s) that you plan on using in your header.

Next, you will want to go to the full-width header module “advanced” tab. That’s the tab that lets you add custom css to the module:

For the left CTA alignment:

Under the custom CSS area for the “Header Container” you will want to add the following code:

padding-top:5%;

Go to the custom CSS area for “Button One” and then you will want to add the following code:

position: absolute;
top:0;

This will force “Button One” to the top of the full-width header. If you want both buttons at the top, then you just have to add the same code you used for “Button One” into the “Button Two” css box, as well.

If you want to move the buttons slightly up or down, you can adjust the top setting to a percentage in the “Header Container” css area. Be aware that certain percentages may not work well for mobile settings.

For the center or justified CTA alignment:

Add the following to your button css:

left: 50%;

and adjust as necessary.

For the right CTA alignment:

Add the following to your button css:

right: 0;

Adjust the percentage as necessary.

That’s it! Now your button(s) should line up with the top of the image instead of the bottom. Go ahead and give it a try!

"Disclosure: Some of the links in this post are "affiliate links." This means if you click on the link and purchase the item, I will receive an affiliate commission."