Using Divi's new draggable sizing options not only helps us create highly responsive websites, but also helps us create unique interactions. Using these options you can customize any Website you create and customize the structure of your pages based on current design trends.
In this tutorial, in particular, we will show you how to create hover sections with Divi. We will create a new page and allow the display of all the section titles, but each section will only open on hover (desktop) or on click (mobile). As soon as you open another section, the one you previously opened will be automatically closed. We'll start by explaining the general approach and continue by recreating the example you can see below from scratch. We hope this tutorial encourages you to create your own hover section designs!
Let's go!
Preview
Before diving into the tutorial, let's take a quick look at the result.
Design stage
Before we dive into the tutorial, we'll go over the technique used to create rollover sections. You can apply this technique to any type of Website you build, with any style.
1. Add the first section to your page
Suppose you start a new design on a brand new page. The first thing to do is add a new regular section.
2. Add a new line including a section title
Then you can continue by adding a new line with a text module including your section title. You could also add a divider module and something that indicates the line expands on hover or touch. It is important to separate the section title from the rest of the contents of the section. So make sure to leave enough space between the section title and everything that follows.
3. Adjust the rest of the contents Section
The design elements that follow the section titles are entirely up to you. You can make a section as long or as short as you want and use any design style.
4. Change the default heights and hover over the section
Once you've refined the section and all of its design elements, it's time to create the rollover effect. The default height of your section is designed to match only the section title. In hover, the section will resume its initial size.
5. Hide vertical overflow
Another important part of this technique hides the vertical overflow. Once you set a default maximum height for your section that is less than the initial section height, an overflow is created. To make sure the overflow doesn't show, you need to make sure it's hidden in the section visibility settings.
5. Repeat the steps for all sections of the page.
Repeat the same steps for all sections of your page to create an obvious user experience that your visiteurs will appreciate.
Start of the design!
Add a new section
Default background color
Now that we've followed the approach in this post, it's time to start putting things into action! Add a regular first section to a brand new page of your Website WordPress and open the section settings. Change the default background color of your section to a color of your choice.
- Background color: # 000000
Fly over the background color
Change this background color hovering.
- Background color: #ffffff
Add row 1
Column structure
Continue adding the first line to your section using the following column structure:
Add a text module
Add H2 content
Add a text module to your next new line. Add an H2 copy with the '▼' symbol as the section unfolds.
H2 text settings
Go to the Module Design tab and change the H2 text settings.
- Heading 2 Font: Trebuchet
- Title 2 Font weight: Ultra Bold
- Title 2 Text Alignment: Left
- Title 2 Text color: #ff0f3b
- Title 2 Text Size: 100 pixels (desktop), 80 pixels (tablet), 60 pixels (phone)
- Title 2 Letter spacing: -5px
Add a division module
Visibility
The second and last module we need in this row is a division module. Make sure to enable the "Show separator" option in the visibility settings.
- Show Divider: Yes
Colour
Then go to the Design tab and change the color of the separator.
- Color: #ff0f3b
sizing
Also change the sizing parameters of the module.
- Divider weight: 2px
- Width: 14%
Add the 2 line
Column structure
Next row! This is where you will need to place all the contents that you want to display after hovering (desktop) or clicking (tablet and mobile). We use the following column structure, but note that you can add as many rows and modules as you want and customize them to your needs:
Add a text module to the 1 column
Add content
Place a text module in the first column with the content of your choice.
Text settings
Go to the Design tab of the text module and change the orientation of the text.
- Text orientation: Justify
Add a text module to the 2 column
Add content
Also add a text module to the second column with the content of your choice.
Text settings
Again, change the orientation of the text in the module's text settings.
- Text orientation: Justify
Add the sizing parameters to the section
Default sizing
Once you've completed your section, it's time to create the hover effect. Open the section settings and change the maximum height for different screen sizes:
- Maximum height: 300px (desktop), 280px (tablet), 260px (phone)
Hover
Also turn on the hover option on maximum height and add a value large enough to cover all elements, regardless of screen size. This value ensures that all of your elements appear without exceeding the initial size of the section container.
- Maximum height: 5000px
Vertical overflow
Then go to the Advanced tab of the section and change the vertical overflow. This will hide all the content that goes beyond the section container.
- Vertical overflow: hidden
Transitions
To create a smooth transition, we also change the transition settings in the Advanced tab.
- Duration of the transition: 800ms
- Transition time: 500 ms
Clone the whole section as many times as you want
Once you've created the first flyover section, you can clone it as many times as you want.
Change section titles
Of course, you will want to change the duplicate section titles.
Change the colors of the H2 text
To create variations in the design, we will also change the text colors of the modules highlighted in the print screen below.
- Title 2 Text color: #c4c4c4
Change the colors of the separator
With the separation colors that accompany the text modules.
- Color: #c4c4c4
Preview
Now that all the steps have been completed, let's take a last look at the result.
Latest Thoughts
In this article, we've shown you how to creatively use Divi's new draggable sizing options to create unique interactions using hover sections on any website you create. We started by explaining the approach and continue by recreating the design example from scratch. You could also download the JSON file for free! If you have any questions or suggestions, be sure to leave a comment in the comments section below.
