My Favorite CSS and HTML for Divi

Divi is a great drag and drop WordPress page builder but sometimes there are things I just want to have on a website I’m designing that can’t be done with the standard Divi options.

Knowing CSS and HTML means endless opportunities for your website. But I’m guessing, if you’re reading this you want a quick tip to help you tweak something on your Divi website.

Keep reading!

How to Center the Footer & Credits Bar

More often than not, I like to design websites with footers and credit bars that are center aligned. When I’ve built a website with all the content centered, there’s nothing that screams “I forgot to finish the website!” more than a footer that is left aligned.

Unfortunately, Divi defaults to all of the content within the footer and credit bar to be left aligned and the only way around this is to add some custom CSS to the theme.

So this is what you do…

  1. Go to Divi and Theme Options
  2. On the General tab, scroll down to where you see the Custom CSS field
  3. Copy and paste the code below into the Custom CSS field
  4. Do a happy dance!

.ds-vertical-align {

     display: flex;

     flex-direction: column;

     justify-content: center;

}

.footer-widget {

     display: flex;

     flex-direction: column;

     justify-content: center;

     padding-bottom: 50px;

}

#footer-info {

     width: 100%;

     margin:0 auto;

     text-align: center !important;

}

@media only screen and (min-width: 980px) {

     #footer-bottom .et-social-icons {

     margin-bottom:-28px; }

}

How to Stack Navigation Links in the Footer

Continuing on with customizing the footer in Divi, you ALWAYS want to have your most important navigation links in the footer. For those site visitors who scroll down to the bottom of the page without taking any action, this is where they’ll choose where to go next on your website.

Sometimes having stacked navigation links looks and fits better in the column than having a horizontal footer navigation.

This is how you can stack navigation links in the footer:

  1. Go to Appearance and then Widgets
  2. Find your footer widget
  3. Drag Custom HTML into the footer widget
  4. Copy and paste the code below into the Custom HTML section
  5. Update the red text below with your navigation links
  6. Update the blue text below with your navigation page names
  7. Find where it says “black” in the code and update to whatever color you want the font to be
  8. Do another happy dance because you’ve now made 2 tweaks to your website using code!

<center>

<a href=”YOUR HOMEPAGE URL GOES HERE” style=”color:black”>HOME</a>

<br>

<a href=”YOUR SALES PAGE URL GOES HERE” style=”color:black”>SERVICES</a>

<br>

<a href=”YOUR BLOG URL GOES HERE” style=”color:black”>BLOG</a>

<br>

<a href=”YOUR CONTACT PAGE URL GOES HERE” style=”color:black”>CONTACT</a>

</center>

How to Vertically Align Columns

Think about all those times you add an image and then place text to one side of it. You have this vision that the text will be vertically aligned to the image (there will be equal white space on top and below the text) but it doesn’t happen, does it?

Well now it can!

This is how you can vertically align columns

  1. Go to Divi and Theme Options
  2. On the General tab, scroll down to where you see the Custom CSS field
  3. Copy and paste the code below into the Custom CSS field

.ds-vertical-align {

   display: flex;

   flex-direction: column;

   justify-content: center;

}

 

4. Go to the page you want to vertically align columns on
5. Open the row settings for the row module you want to vertically align columns in
6. Under Design, click on Sizing and set “Equalize Column Heights” to yes
7. Under Advanced, click on CSS ID & Classes
8. Paste the class ds-vertical-align to the Column CSS Class fields (Column 1 CSS Class, Column 2 CSS Class, etc.)
9. Do an extra special happy dance because now your content is vertically centered!

 

How to add a Custom Font to Specific Words in a Sentence

Chances are you have a script font or some other fancy font in your branding. Distinct fonts like this are great for adding personality to your brand and making your marketing stand out against your competitors.

But how in the world do you change just a single word or phrase in the middle of a sentence or paragraph to that fancy font?

Whatever you do, DO NOT create a graphic. I see a lot of people create graphics in Adobe or Canva because that’s the only way they can figure out how to use the font. Don’t do that. It hurts your SEO. They spent extra money on the font so obviously they want to use it.

There’s a different way, one that doesn’t negatively affect your SEO but does let you add that bit of your brand personality to your website.

Here’s how to add a custom font to specific words in a sentence

  1. Upload your font to your website
  2. Add a text module to your page
  3. In the “Visual” text editor add all of your copy
  4. Once your copy is added, click on the “Text” text editor (this is where you see the code for any formatting you’ve added to the text already)
  5. Find that word or phrase that you want to be in a different font
  6. Click directly to the left of the first letter in the word or phrase and paste the following HTML: <span style=”font-family: YOUR FONT NAME HERE”>
  7. Add your font name in place of the red text (Keep in mind that your font name may be all one word or have hyphens. For example, my font name is all one word, poppitandfinch, because that is how I uploaded it into Divi)
  8. Now click directly to the right of the last letter in the word or phrase and paste the following HTML: </span>
  9. Go back to the “Visual” text editor and you should see that the word or phrase is now in your fancy script font!

There are a bunch of different bits of CSS and HTML that you can add to your Divi theme to have a really customized website. Leave a comment below and let me know what some of your favorites are!

-Kristen

You might also like…

*Hey hey! This post contains affiliate links. I don’t promote products, tools, or services I’ve never used before or that I don’t absolutely love. By clicking the link and making a purchase, I may receive a percentage of the sale.

Kristen Leigh | Web Design Studio | Customize your Divi website using easy CSS and HTML

Grab Your FREE Guide!

*I promise to never spam you or share your email address with anyone else!