sections folded out on hover divi

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

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.

Leave a comment

echo "";