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.
Note the site title and tagline at the top middle of the header which is dynamically displayed.
Free download
Join the Divi Newlsetter and we'll email you a copy of the Divi Ultimate Landing Page Layout Pack, plus tons more resources, free and amazing Divi 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.
Once completed, the overall header template will be available in Divi Theme Builder.
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.
And, some people don't even realize the tagline exists, let alone take the time to update it. Additionally, when using the Divi theme, the site title and tagline won't be visible on your site by default, so it's easy to overlook them. However, the site title and tagline are essential elements 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.
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 find the JSON file of website template by default.
Then go to Divi> Theme Builder.
Click the portability icon in the top right. In the pop-up portability window, choose the JSON file from website template default and click the Import button.
Once the template is added to the theme builder, delete the footer template and click to edit the overall header.
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.
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).
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.
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 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.
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
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
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.
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%
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.
Final result
To see the result, open any page on your site. You should see the dynamic site title and tagline displayed beautifully!
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
