Sections folded out on hover Divi: Using Divi’s new movable sizing options not only helps us build highly responsive websites, but also creates unique interactions. Using these options, you can customize any website you create and customize your page structure based on current design trends.
In this tutorial, in particular, we’ll show you how to create sections folded out on hover Divi. We will create a new page and allow the display of all section titles, but each section will only open on hover (desktop) or 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 hover section designs!
Sections folded out on hover Divi: Design stage
Before we dive into the tutorial, we’ll go over the technique used to create flyover 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 to 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 can also add a divider module and something that indicates the line unfolds on hover or touch. It is important to separate the section title from the rest of the section content. So make sure you leave enough space between the section title and everything that follows.
3. Adjust the rest of the content of the 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. Modify the default and hover heights of 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 return to 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.
6. 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 visitors will enjoy.
Start of conception!
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 on your WordPress website and open the section settings. Change the default background color of your section to a color of your choice.
- Background Color: # 000000
Hover over the background-color
Change this background color to hover.
- Background color: #ffffff
Add row 1
Column structure
Continue by adding the first row to your section using the following column structure:
Add a text module
Add H2 content
Add a text module to your next newline. Add an H2 copy with the ‘▼’ symbol as the section unfolds.
H2 text parameters
Go to the Module Design tab and change the H2 text settings.
- Heading 2 Font: Trebuchet
- Title 2 Font Weight: Ultra Bold
- Heading 2 text Alignment: left
- Heading 2 Text color: # ff0f3b
- Title 2 Text size: 100 pixels (desktop), 80 pixels (tablet), 60 pixels (phone)
- Heading 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 divisor: Yes
Color
Then go to the Design tab and change the color of the separator.
- Color: # ff0f3b
Sizing
Also, change the module sizing parameters.
- Divider Weight: 2px
- Width: 14%
Add row 2
Column structure
Next row! This is where you will need to place all the content 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 as needed:
Add a text module to column 1
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 text module to column 2
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 sizing parameters to 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)
Hovering flight
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.
- Transition duration: 800ms
- Transition delay: 500 ms
Read more: How to use the blog display formats on Divi
Clone the whole section as many times as you want
Once you’ve created the first hover section, you can clone it as many times as you want.
Change section titles
Of course, you’ll want to change the section titles of the duplicates.
Change H2 Text Colors
To create variations in the design, we are also going to change the text colors of the modules highlighted in the print screen below.
- Heading 2 Text color: # c4c4c4
Change the colors of the separator
With the separator colors that accompany the text modules.
- Color: # c4c4c4
Final 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.
For website maintenance service contact us.