Wednesday, April 1, 2020

5 CSS effects for your Divi theme

Css effects

Divi has become one of the most popular themes for WordPress do the highly customizable design and the Divi Builder, a plugin that allows you to format the contents in the public interface directly.

Last week we explain to you how to set up a Divi mega menu and today we will show you some CSS effects so you can give that special touch to your website.

Parallax effect in the images

This is the effect that causes images to scroll smoothly at a different speed from the rest of the page when the user scrolls. You achieve it like this:

  • Add a section with a standard width.
  • Click on Settings section.
  • Activate the Use parallax effect option.
  • In the type of Parallax, choose True.
  • Add a row (you can add the columns you need)
  • Enter the text module with the elements you want.
  • In the settings of the section, activate the option Use parallax effect; in the type of parallax: true.
  • Add a row of the type you need, in my case with 3 columns.
  • Enter the text module with the elements you want.

Customize “Read more” button

You can custom the button that accompanies the entries to change the color of the button, alignment (center, right, left), transform the text from lowercase to uppercase, border style, color of the letter and fill in pixels
Enter Theme Options, then Custom CSS and paste the following code:

Show entries in two columns

This option will allow you to display the entries in two columns, both in the categories and in the labels and even in the results of the searches within the page.

Copy the following code in the Theme Options, in the Custom CSS section.

Customize the number of comments

The text that appears at the end of the entry and refers to the number of comments can also be customized in terms of font, color and size with this code:

Show circular avatars in the comments

In the comments of the entries, Divi shows the avatar of the users with a square border. With this code you can make them look round.

¿Did you like these CSS effects? Tell us leaving a comment below.
Jefferson Maldonado
the authorJefferson Maldonado
UX WordPress Designer
Ux & Web Designer. Portafolio: Divi Blogger, WordPress Expert, UX Designer, Business Consultant.

1 Comment

Leave a Reply