Friday, October 19, 2018
DiviTips

The best tips for Divi by Elegant Themes

best tips for divi by elegant themes

Here I’ll show you some of the best tips for Divi Theme. The most popular theme at this time has so many configuration and customization options that it’s almost impossible to know them all.

Even if you are experienced with Divi, you’ll always find some cool hacks to do some amazing stuff. And this is one of the main reasons of why Divi Theme has achieved such a success. Its incredible flexibility allows to do almost anything, it has unlimited possibilities.

So without no more introduction, here you have the best tips for Divi. I am sure you’re going to like this.

Try these cool tips for Divi Theme

1 Add hover effects to modules

This is a very nice effect that can be applied to almost anything. Buttons, images, columns, sections and even elements inside modules can be customized using CSS, and hover effect is done this way.

First step is to grab the class of your button, which is different in every WordPress installation.

Grab it from advanced tab in the settings of the button module.

Now copy the class name and complete your code like this:


.et_pb_button_0:hover {
transform:scale(1.05) translateY(-3px);
box-shadow:1px 15px 35px -10px rgba(0,0,0,0.4);
}

Replace .et_pb_button_0 for your class and add :hoverat the end of it.

Now you can paste the whole thing into additional CSS box you’ll find in appearance>>customize

Voilá! Now you have a cool button that grows its size when hovering it. ¿Isn’t that a nice effect?

As we said before, you can do the same to almost every element in Divi if you use the right CSS class.

2 Animated gradient backgrounds

Animated gradient backgrounds will add a very nice looking to your pages.

Again, we’ll use some CSS to achieve this. If you are experienced with CSS language I’m sure you are already imaging how to do it.

If not, go ahead reading and you’ll learn one of the best tips for Divi we’ve found out there.

First go to this website and create your animation. Add two colors and set speed, scroll and angle until you are satisfied with the effect.

You’ll see how CSS code changes in real time when you select different options. After you finish, copy the code. You can use notepad or any text editor to paste it for now, just to make things clear.

The code you’ve copied from the Animated Gradient background online generator should look like this:

Now you need to create a custom CSS class. Choose any name you want for the new class. To prevent conflicts use long names, just to be sure there is no other class with same name.

Now add your custom class to previous code like this:

Notice we’ve added the new class at the beginning and we’ve also enclosed first block of code with bracklets. Starting with opening “{“ and finishing with closing “}” bracklet.

Now copy this latest CSS and paste it into additional CSS you’ll find in appearance>>customize in your WordPress dashboard.

Final step now. You must enter the class name in the section you want the effect. Go to Section Module Settings and type your class name without the dot it has at the beginning.

And that’s all, you should now have a nice background gradient animation on the whole section.

You can try this procedure in modules also and almost in any place where custom classes can be used.

3 Switch logo for mobile devices

This is very useful to improve UX for mobile device users. Using a smaller logo can speed things up, and also can give a more professional and good looking feeling.

Follow these simple steps to change logo in smartphones:

  1. Upload your logo to be used in mobile devices
  2. Add the following code in custom CSS under appearance>>customize tab.
  3. Now edit code and replace the url. Were you see content: url(“http://site.com/logo.png”); replace it with the your image url. The one you’ve just uploaded.
  4. Save and test it on your smartphone.

If you don’t know where to grab the url of your image, open it in media library and you’ll see it there.

4 Add Google Fonts

Follow these steps to add Any Google Font you want to your Divi WordPress theme installation:

  1. Go to Google fonts page and select the font you want by pressing the “add” icon.
  2. Open the popup for the selected font
  3. You’ll see a line of code surrounded starting with a <link> html tag. Copy it, we’ll need it next
  4. Open Divi theme options in WordPress dashboard sidebar
  5. Go to integration tab and paste the script in box titled as “Add code to the <head> of your blog, you may need to enable header code before doing it.
  6. Go back to Google Fonts were you copied the previous script and look for CSS rules
  7. Copy the CSS found there and paste it into Divi options>>General>>Custom CSS at the bottom of page
  8. You need to specify were the google font will be applied. for example if you want to be used globally in all website you should create a CSS script like this

That will turn all fonts in you website to this specific google font style.

If you want titles with desired font, the script would be:

If you want to change to google font only in paragraphs, then use :

So this way you can access each html tag of the webpage to change into the google font you’ve linked to. Use element inspector of your browser to grab the CSS selector of any element of your pages.


I hope you liked these tips for Divi, if so please show your gratitude sharing with your friends.

¿Do you have some other cool tricks for Divi? Tell everybody about it leaving a comment.

Seba Rossi
the authorSeba Rossi
Experienced Web Editor with more than 1500 published articles. Passionate about Web development and with advanced knowledge of SEO, amateur guitarist and lover of tasty beer with the company of good and old friends.

Leave a Reply