Adding subtle interactions to your website can really boost the overall user experience visitors have. One of the things that’ll make your website look that more fancier, while still respecting user-friendliness, is making row content appear on hover. This is a great approach for showcasing services, products, features and more.

In this tutorial, we’ll show you how to create a specific design from A to Z, but once you get the approach, you can make it work for any kind of website you’re working on. At the end of this blog post, we’ll also share the JSON file of this design that you can download for FREE and use without any restrictions.

Let’s get to it!

Preview

Before we dive into the tutorial, let’s take a quick look at the outcome on different screen sizes.

Desktop

hidden row content

Mobile

hidden row content

Let’s Start Creating!

Add New Section

Default Background Color

Start off by adding a new section to a new or existing page and change the section background color.

  • Background Color: #e0e0e0

hidden row content

Hover Background Color

Modify this background color on hover.

  • Background Color: #000000

hidden row content

Spacing

Move on to the design tab and add some custom spacing values. To make this tutorial work, we’ll only use viewport units. This will help assure that everything stays in place, no matter the screen size.

  • Top Margin: 5vw
  • Bottom Margin: 5vw
  • Left Margin: 3vw
  • Right Margin: 3vw
  • Top Padding: 0px
  • Bottom Padding: 0px

hidden row content

Add Row #1

Column Structure

Continue by adding a new row using the following column structure:

hidden row content

Gradient Background

Without adding any modules yet, open the row settings and add a gradient background.

  • Color 1: #ff5b79
  • Color 2: rgba(255,255,255,0)
  • Gradient Type: Radial
  • Radial Direction: Center
  • Start Position: 15%
  • End Position: 15%

hidden row content

Sizing

Make some changes to the sizing settings of the row as well.

  • Make This Row Fullwidth: Yes
  • Use Custom Gutter Width: Yes
  • Gutter Width: 1

hidden row content

Spacing

And add some custom padding values in the spacing settings.

  • Top Padding: 9vw
  • Bottom Padding: 9vw
  • Column 1 Left Padding: 5vw
  • Column 1 Right Padding: 5vw
  • Column 2 Left Padding: 5vw
  • Column 2 Right Padding: 5vw

hidden row content

Add Text Module to Column 1

Add Content

Time to start adding the modules! The first module we’ll need is a Text Module in column 1. Add H3 content and a link.

hidden row content

Link Text Settings

Then, go to the link text settings and make some changes to the appearance of the link.

  • Link Font: Didact Gothic
  • Link Font Style: Underline
  • Link Underline Style: Solid
  • Link Text Color: #ffffff
  • Link Text Size: 20px

hidden row content

Heading Text Settings

Modify the H3 text settings as well.

  • Heading 3 Font: Didact Gothic
  • Heading 3 Text Color: #ffffff
  • Heading 3 Text Size: 50px

hidden row content

Visibility

Last but not least, disable the module on desktop. We only need this module to show up on smaller screen sizes.

hidden row content

Add Divider Module to Column 2

Visibility

The second and last module needed in column 1 is a Divider Module. Make sure the ‘Show Divider’ option is enabled.

  • Show Divider: Yes

hidden row content

Color

Then, change the divider color.

  • Color: #ffffff

hidden row content

Spacing

Add some custom margin values to the Divider Module as well.

  • Top Margin: 11vw (Desktop), 80px (Tablet),
  • Bottom Margin: 50px (Tablet & Phone)

hidden row content

Add Text Module #1 to Column 2

Add Content

On to the second column! Add a Text Module with some H4 content of choice.

hidden row content

Heading Text Settings

Then, go to the H4 text settings and make some changes.

  • Heading 4 Font: Didact Gothic
  • Heading 4 Font Weight: Bold
  • Heading 4 Text Color: #ffffff
  • Heading 4 Text Size: 2vw (Desktop), 40px (Tablet), 30px (Phone)

hidden row content

Add Text Module #2 to Column 2

Add Content

Right below the previous Text Module, go ahead and add another one with some paragraph content of choice.

hidden row content

Text Settings

Go to the text settings next and make some changes.

  • Text Font: Didact Gothic
  • Text Color: #ffffff
  • Text Size: 0.9vw (Desktop), 18px (Tablet & Phone)
  • Text Line Height: 2em

hidden row content

Spacing

Add some custom margin values too.

  • Top Margin: 2vw
  • Right Margin: 15vw

hidden row content

Add Row #2

Column Structure

Once you’re done modifying the first row and all of its modules, you can go ahead and add a new row using the following column structure:

hidden row content

Sizing

Without adding any modules yet, open the row settings and make some changes to the Sizing settings.

  • Make This Row Fullwidth: Yes
  • Use Custom Gutter Width: Yes
  • Gutter Width: 1

hidden row content

Spacing

Remove all default padding in the row spacing settings as well.

  • Top Padding: 0px
  • Bottom Padding: 0px

hidden row content

Visibility

Last but not least, hide this row on tablet and phone.

hidden row content

Add Text Module to Column

Add Content

The only module we need in this row is a Text Module. Add some H3 content and a link.

hidden row content

Default Background Color

Then, go to the background settings and add a background color to the Text Module.

  • Background Color: #e0e0e0

hidden row content

Hover Background Color

Modify this background color on hover.

  • Background Color: rgba(255,255,255,0)

hidden row content

Default Text Settings

Next, go to the text settings and make some changes.

  • Link Font: Didact Gothic
  • Link Font Style: Underline
  • Link Underline Style: Solid
  • Link Text Color: #ffffff
  • Link Text Size: 0px
  • Link Letter Spacing: -1px

hidden row content

Hover Link Text Settings

Modify the link text size on hover as well.

  • Link Text Size: 1.7vw

hidden row content

Default Heading Text Settings

Continue by making some changes to the H3 text settings.

  • Heading 3 Font: Didact Gothic
  • Heading 3 Font Weight: Bold
  • Heading 3 Text Color: #000000
  • Heading 3 Text Size: 12vw
  • Heading 3 Letter Spacing: -0.8vw

hidden row content

Hover Heading Text Settings

Modify some of the H3 text settings on hover.

  • Heading 3 Text Color: #ffffff
  • Heading 3 Text Size: 4vw
  • Heading 3 Letter Spacing: -0.2vw

hidden row content

Spacing

Then, go to the spacing settings and add some custom margin and padding values.

  • Top Margin: -34.3vw
  • Bottom Margin: -5vw
  • Top Padding: 10vw
  • Bottom Padding: 10vw
  • Left Padding: 26.5vw

hidden row content

Hover Spacing

Modify the spacing values on hover.

  • Top Margin: -34.1vw
  • Bottom Margin: -5vw
  • Top Padding: 12vw
  • Bottom Padding: 12vw
  • Left Padding: 11.5vw

hidden row content

Transitions

Increase the transition duration of the Text Module as well.

  • Transition Duration: 400ms

hidden row content

Clone Section

Once your first section is completed, go ahead and clone the entire section up to as many times as you want. In the next part of the tutorial, we’ll show you the changes you need to make to each duplicate.

 

row appear on hover

Change Section Hover Background Color

The first thing you’ll need to modify is the section hover background color.

  • Background Color: #ff5b79

row appear on hover

Change Row #1 Gradient Background

Change the row #1 gradient background as well.

  • Color 1: #000000

row appear on hover

Change Text Color & Copy

Along with the text color and all the copy.

  • Heading 3 Text Color: #ff5b79

row appear on hover

Change Text Module Spacing

Last but not least, change the left padding of the Text Module in row #2. The amount of left padding you’ll need to use depends on the length of the content you’re using.

  • Left Padding: 21vw

row appear on hover

Download The Layout for FREE

To lay your hands on the layout, you will first need to download it using the button below. To gain access to the download you will need to subscribe to our Divi Daily email list by using the form below. As a new subscriber, you will receive even more Divi goodness and a free Divi Layout pack every Monday! If you’re already on the list, simply enter your email address below and click download. You will not be “resubscribed” or receive extra emails.

.et_bloom .et_bloom_optin_1 .et_bloom_form_content { background-color: #4843d2 !important; } .et_bloom .et_bloom_optin_1 .et_bloom_form_container .et_bloom_form_header { background-color: #ffffff !important; } .et_bloom .et_bloom_optin_1 .carrot_edge .et_bloom_form_content:before { border-top-color: #ffffff !important; } .et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_right .et_bloom_form_content:before, .et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_left .et_bloom_form_content:before { border-top-color: transparent !important; border-left-color: #ffffff !important; }
@media only screen and ( max-width: 767px ) {.et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_right .et_bloom_form_content:before, .et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_left .et_bloom_form_content:before { border-top-color: #ffffff !important; border-left-color: transparent !important; }
}.et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !important; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_fields i { color: #f92c8b !important; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_custom_field_radio i:before { background: #f92c8b !important; } .et_bloom .et_bloom_optin_1 .et_bloom_border_solid { border-color: #f7f9fb !important } .et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !important; } .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2, .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2 span, .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2 strong { font-family: “Open Sans”, Helvetica, Arial, Lucida, sans-serif; }.et_bloom .et_bloom_optin_1 .et_bloom_form_container p, .et_bloom .et_bloom_optin_1 .et_bloom_form_container p span, .et_bloom .et_bloom_optin_1 .et_bloom_form_container p strong, .et_bloom .et_bloom_optin_1 .et_bloom_form_container form input, .et_bloom .et_bloom_optin_1 .et_bloom_form_container form button span { font-family: “Open Sans”, Helvetica, Arial, Lucida, sans-serif; } p.et_bloom_popup_input { padding-bottom: 0 !important;}

Download For Free

Download For Free

Join the Divi Newlsetter and we will email you a copy of the ultimate Divi Landing Page Layout Pack, plus tons of other amazing and free Divi resources, tips and tricks. Follow along and you will be a Divi master in no time. If you are already subscribed simply type in your email address below and click download to access the layout pack.

You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!

Preview

Now that we’ve gone through all the steps, let’s take a final look at the outcome on different screen sizes.

Desktop

hidden row content

Mobile

hidden row content

Final Thoughts

In this post, we’ve shown you how to reveal hidden row content on hover. The outcome we’ve created is made using Divi’s built-in options only. We’ve also shared the JSON file at the end of the tutorial which will hopefully help you create your own alternative designs as well. If you have any questions or suggestions, make sure you leave a comment in the comment section below!

The post How to Make Hidden Row Content Appear on Hover with Divi (Free Download!) appeared first on Elegant Themes Blog.



Source link

error: Content is protected !!