Just like other similar plugins like Elementor and Brizy, you can also use columns to make it easier to set the layout of the page you want to create with Divi Builder before adding the actual design elements (which are called modules in Divi Builder). Also, you can customize a column first or later once you are done adding the modules to it. If you want it, you can add a hover effect to a column to make it looks pretty. Divi Builder comes with a built-in setting option to add a hover effect to a column.
Not just column, you can also add a hover effect to other elements in Divi Builder, including section, row, and module. This article will show you how to add a hover effect to a column. Before getting started, take a look at the screencast below.
As you can see, the column turns a bit tilted when the cursor is pointed to it. On the screencast above itself, there are two Divi Builder modules added: Person and Button. The two modules are placed in the same column.
Divi Builder itself makes use of CSS transform for the hover effects. That being said, when you add a hover effect to a certain element, you have implemented CSS transform to your page, but without needing to deal with CSS code. Here is how to add a hover effect to a column in Divi Builder.
Adding a hover effect to a column in Divi Builder
First off, add a new regular section by clicking the blue plus icon on the canvas area and then insert a row. When inserting a row, you can select the column structure according to your need. In this example, we use a row with a three-column structure.
Once the row is added, click the grey plus icon on one of the columns to add the modules. You can then customize the modules accordingly. Once you are done adding and customizing the modules, you can then start to add the hover effect to a column.
To start adding a hover effect to a column, open the row settings panel by clicking the gear icon on the row handle (the green handle).
Once the row settings panel appears, specify the column you want to add the hover effect to and click the gear icon to switch the panel to the column settings panel (from the row settings panel).
Once the panel switched to the row settings panel, go to the Design tab and open the Transform block. On the Transform block, click the cursor icon followed by the Hover tab (which is also represented with a cursor icon).
Select the transform style you want to use by clicking one of the tabs beneath the Hover tab then use your mouse to set the transform value (you can also set the transform value manually by typing your desired value).
You can repeat the steps above to add the hover effect to other columns. Once you are done, don’t forget to click the green checklist icon on the bottom-right corner of the settings panel to apply the changes.
Setting the transition duration of the hover effect
By default, the transition duration (the transition from the normal state to the hover state) is 300ms. If you want to set a slower or faster pace, you can switch back to the column settings panel. On the column settings panel, go to the Advanced tab and open the Transitions block. You can set the transition duration on the Transition Duration option. From this block, you can also set the transition delay as well as transition speed curve.
The bottom line
In Divi Builder, you can use different stylings on both the normal state and the hover state. You can make use of this feature to add a hover effect to a column and other elements. To set a different setting to the hover state, you can simply click the cursor icon every time you want to set a certain setting on the settings panel.
Elegant Themes (the Divi developer) now has a cloud service — called Divi Cloud — to allow you to store your Divi assets to the cloud so that you can access them for any website you build with Divi. This feature is extremely useful for agencies.
