Skip to Main Content

How to Add a Dynamic Site Title and Slogan to a Global Divi Header

Divi: the easiest WordPress theme to use

Divi: The best WordPress theme of all time!

With over 701.000 downloads, Divi is the most popular WordPress theme in the world. It is complete, easy to use and comes with more than 62 free templates. [Recommended]

Knowing how to add a dynamic site title and a slogan to a Divi overall header will be useful when creating Divi websites. And there are a few good reasons to do so. On the one hand, not all sites have a logo. A site title is a good logo replacement. Another reason is to boost your brand by including vital information on your site where everyone will see it.

In this tutorial, we'll show you how to add a dynamic site title and slogan to a Divi global header. This solution will dynamically extract the site title and tagline from the WordPress backend. Plus, you will have all of Divi's powerful design options to customize the title and slogan however you want!

Possible Outcome

Here is a preview of the design we will build in this tutorial.

Dynamic site title global header template 6

Note the site title and tagline at the top middle of the header which is dynamically displayed.

Divi title modification example

Free download

Join the Divi Newlsetter and we'll email you a copy of the Ultimate Divi Landing Page Layout Pack, along with tons of other free and amazing Divi resources, tips and tricks. Follow it and you'll be a Divi master in no time. If you are already subscribed, simply enter your email address below and click download to access the layout pack.DOWNLOAD

To import the template, go to Divi> Theme generator.

Click on the portability icon at the top right of the page.

In the portability pop-up window, select the import tab and choose the download file from your computer.

Then click on the import button.

Choose a divi template

Once completed, the overall header template will be available in Divi Theme Builder.

Modify global divi header

In what follows we will move on to the design.

The title of the site and the slogan on WordPress

Every WordPress site has a site title and a tagline. The site title is basically the name of the site and the tagline is a short phrase that usually explains what it is.

It is not uncommon to add the site title when installing WordPress and forget it.

Easily create your website with Elementor

Elementor allows you to easily create any website design with a professional look. Stop paying expensive for what you can do yourself. [Free]

Customize divi title

And, some people don't even realize the tagline exists, let alone take the time to update it. In addition, when you use the Divi theme, the site title and slogan will not be visible on your site by default, so it is easy to ignore them. However, the site title and tagline are essential parts of the website and will be recognized by search engines.

You can locate and update the site title and tagline in WordPress at any time by going to the WordPress dashboard and navigating to Settings> General.

Or, you can take another route using the theme customizer to update the site title under the general settings.

Customize wordpress identity

Now that we know where the site title and slogan are on the WordPress backend, let's explore how we can add them to a Divi header!

How to add a dynamic site title and slogan to a global header in Divi

Importing the pre-designed global header template

For this tutorial, we're going to focus on how to add the dynamic site title and tagline to an existing header instead of creating a full header from scratch. It will save you time and improve clarity. So, to start this header design, we're going to import a predefined global header template from our fourth theme generator pack .

Once you have downloaded the pack of creation of Thème , unzip the file, and locate the default website template JSON file.

Then go to Divi> Theme Builder.

Click on the portability icon at the top right. In the portability pop-up window, choose the default website template JSON file and click the Import button.

Divi model import

Once the template is added to the theme builder, delete the footer template and click to edit the overall header.

Remove template from footer

Adding a dynamic site title and tagline to the header

Inside the template layout editor, you will see the premade header already designed. We can start making our customizations right away.

Are you looking for the best WordPress themes and plugins?

Download the best plugins and WordPress themes on Envato and easily create your website. Already more than 49.720.000 downloads. [EXCLUSIVE]

Move logo

To start, drag the image module that displays the logo (dynamically) from the middle column of the top row to the left column of the top row.

Add a call-to-action module to display the site title and tagline

Then add a new Call to Action module to the middle column of the top row (where the logo was).

Customize the call to action

We will use the Call to Action module to display the site title and tagline.

But before you start adding content, first select NO to use the background color.

Configure call-to-action actions

Add a dynamic site title

Under the content settings, hover over the title entry box and click on the “Use dynamic content” icon. Then select "Site Title" from the list.

Add a dynamic site slogan

Then, hover the mouse over the body area and select the "Use dynamic content" icon. Then select "Site Tagline" from the list.

Add a divi site slogan

Add a dynamic homepage link

It is common for the site title to redirect to the homepage on click, especially if you are replacing the logo. To redirect the entire course to the home page, add the home page link as dynamic content to the course link URL.

Add a link to the homepage

Design of the text of the title and the slogan of the site

Now the site title and tagline are displayed on the header dynamically. All we have to do now is add some styling. Remember, we need to customize the title text to design the site title and the body text to design the tagline.

Jump over to the design tab, and update the following:

  • Title Font: Heebo
  • Title Font Weight: Bold
  • Title Font Style: TT
  • Title Text Size: 32px (desktop), 24px (tablet and phone)
  • Title Letter Spacing: 0.3em
  • Body Font: Roboto
  • Body Font Style: italic
  • Body Text Color:
  • Body Text Size: 13px
  • Body Letter Spacing: 0.1em
  • Body Line Height: 1em
Customize divi title font

To help with centering, take out the default padding below the body text by adding the following custom CSS to the Promo Description:

padding-bottom: 0px
Add custom divi css code

Additional Design Adjustments

For this last part of the tutorial, we are going to make some additional design adjustments to the header to make sure the items remain vertically centered in each column and to give the button a unique design. We'll also add a before and after squiggly line to the tagline (just for kicks).

Vertically Centering the Columns / Content

Right now the top row is the “Equalize Column Heights” active which uses the flex property. We can capitalize on this by adding a small css snippet to make sure all the columns remain vertically centered within the row. To do this, open the settings for the top row and add the following CSS to the Main Element:

align-items: center;

Updating the Column with the Button

Next, open the settings for column 3 in the top row and take out the background color and padding.

Easily create your Online Store

Download free WooCommerce, the best e-commerce plugins to sell your physical and digital products on WordPress. [Recommended]

Customize the divi contact button

Updating the Button Background

Then open the button module setting and update the background with a new background gradient as follows:

  • Gradient background Left color: #ffffff
  • Right background gradient color: # 1dbf73
  • Gradient Direction: 135deg
  • Start Position: 10%
  • End Position: 0%
Customize the background of the divi button

Adding before and after characters to the slogan

Each dynamic content item can be changed by clicking on the gear icon. To add before and after characters to the slogan, open the settings of the call to action module containing the slogan and click the edit icon on the dynamic content of the site slogan. Then add the characters to the before and after entries.

Display the divi slogan

Final result

To see the result, open any page on your site. You should see the dynamic site title and tagline displayed beautifully!

Final result divi

Latest Thoughts

It is really nice that you can customize an overall header with a dynamic site title and tagline. This seems like something that will be useful for many sites. I also like the idea of ​​including the site title and tagline in addition to the logo for even stronger brand representation.

Source: Elegant Theme

This article features 0 comments

Leave a comment

Your email address will not be published. Required fields are marked with *

This site uses Akismet to reduce unwanted. Learn more about how your comments data is used.

Back To Top
0 shares
Share
tweet
Save