How to Create Hover Sections with Divi’s New Sizing & Overflow Settings - Best Webhosting

ULTRAFAST, CHEAP, SCALABLE AND RELIABLE! WE STRONGLY RECOMMEND ACCU WEB HOSTING COMPANY

Watch Wordpress Elegant Themes Video: How to Create Hover Sections with Divi’s New Sizing & Overflow Settings.
Using Divi’s new draggable sizing options do not only help you create highly responsive websites, but they can also really help create unique interactions. By playing around with these options, you can customize any website you’re creating and customize your page structures to meet current design trends.

In this tutorial, specifically, we’re going to show you how to create hover sections with Divi. We’ll create a new page and allow all the section titles to show, but each section will only open on hover (desktop) or on click (mobile). As soon as you open another section, the one you opened previously will automatically close.

We’ll start off 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 as well!

Read more: https://www.elegantthemes.com/blog/divi-resources/how-to-create-hover-sections-with-divis-new-sizing-overflow-settings

Published: Tuesday, August 20, 2019 10:24 AM
Category: Wordpress Elegant Themes

74 Views

Related Videos

Popular
How to Reveal Images Using Horizontal Hover Grids & Hidden Overflow with Divi

by Best Webhosting Added 4 years ago 101 Views / 0 Likes

Since Divi’s new sizing options have come out, we’ve created a few tutorials that show you how to create hover reveals. In those tutorials, the hidden content was placed vertically. In some cases, however, you might want to create a horizontal reveal instead. In this post, we’re going to show you how to reveal images using hover grids and Divi’s overflow options. Making this work asks for a slightly different approach. We’ll use a one-column row and p
How to Create a Scroll Gallery Mockup with Divi’s New Overflow Options

by Best Webhosting Added 4 years ago 66 Views / 0 Likes

Looking for a creative way to display images on your website? Make sure you keep on reading because, in this post, we’ll show you how to create a scroll gallery mockup using Divi’s built-in options only. Concretely, we’re going to turn a section into a mockup and have all the rows in the section be part of the mockup. Once you get the technique, you’ll be able to feature any kind of content you want in a mobile mockup and add interaction to your pages
Popular
How to Create a Fixed Contact Form Corner Popup with Divi’s Sizing Options

by Best Webhosting Added 4 years ago 102 Views / 0 Likes

Multistreaming with https://restream.io/ Every week, we provide you with new and free Divi layout packs which you can use for your next project. For one of the layout packs, we also share a use case that’ll help you take your website to the next level. This week, as part of our ongoing Divi design initiative, we’re going to show you how to add a fixed contact form corner popup to your page using Divi’s sizing options. This approach will help you set u
How to Create Pop Out Sections with Divi’s Boxed Layout

by Best Webhosting Added 4 years ago 86 Views / 0 Likes

In this tutorial, I’ll be showing you how to use Divi’s box layout and the Divi Builder to create pop out sections and rows on your website. All it takes is a small amount of custom CSS that extends the section or row past the page container. You can then make additional adjustments and styling using the Divi Builder. Watch the video here: https://www.elegantthemes.com/blog/divi-resources/how-to-create-pop-out-sections-with-divis-boxed-layout
Popular
How to Create Showstopping Hero Sections with Divi

by Best Webhosting Added 4 years ago 110 Views / 0 Likes

Hero sections; they serve all kinds of purposes. They’re the first thing visitors see when they visit your website, they immediately show the style of your website and they influence the way your visitors feel and behave on your site. We’re already used to all kinds of hero sections out there, but most of them include a hero image, a tagline and a call to action. There are other possibilities as well, though. In this post, we’ll show you another appro
Divi Quick Tip 08: How to Create Modules That Overlap Sections

by Best Webhosting Added 4 years ago 87 Views / 0 Likes

In this Divi Quick Tip we show you how to create a module that appears to overlap two sections. This is perfect for achieving that "broken grid" effect and adding another level of novelty to a Divi built page. Read the accompanying blog post: http://goo.gl/OHSEdG Subscribe to our YouTube Channel: https://goo.gl/oxCa4h Subscribe to Divi Nation on iTunes: https://goo.gl/w8fccT Subscribe to Divi Nation via RSS: http://goo.gl/vz04Vc Get Divi Nation on Fac
Divi Feature Update LIVE - The New Draggable Sizing And Spacing Controls For Divi

by Best Webhosting Added 4 years ago 98 Views / 0 Likes

Multistreaming with https://restream.io/ Introducing Draggable Sizing for Divi. This new UI innovation allows you to quickly adjust the width, height, margin and padding of any module, row or section with ease. Instead of having to open a settings panel and type in sizing values manually, you can instead drag to adjust the elements right on the page and see the results instantly. It’s quick, it’s easy and it really leverages Divi’s Visual Builder tech
Popular
How to Use Empty Sections in Divi to Create Unique Design Elements

by Best Webhosting Added 4 years ago 116 Views / 0 Likes

Every week, we provide you with new and free Divi layout packs which you can use for your next project. For one of the layout packs, we also share a use case that’ll help you take your website to the next level. This week, as part of our ongoing Divi design initiative, we’re going to show you how to use empty sections in Divi to create unique design elements. We’re going to use these empty sections on the Jeweler Layout Pack‘s landing page. However, y
3 Helpful Ways to Use Overflow Options in Divi

by Best Webhosting Added 4 years ago 97 Views / 0 Likes

Divi’s built-in Overflow Options make it super simple to add overflow css properties (ie. visible, hidden, scroll) to any element on the page. This is helpful for creating unique designs and scrollable content with ease. In this post, I’m going to go through what these overflow options actually do. And, I’ll walk through three helpful ways to use overflow on your own Divi site. Read more: https://www.elegantthemes.com/blog/divi-resources/3-helpful-way
How to Create Full Screen Sections with Top and Bottom Scroll Links with Divi

by Best Webhosting Added 4 years ago 97 Views / 0 Likes

Divi’s fullwidth header module comes with a full-screen option that will set the height of the header to equal the height of your browser window. This is a great way to boost UX and design by keeping everything visible to the user (above the fold) no matter what size their screen may be. But you don’t have to stop at one header. In this post, I’m going to show you how you can actually use the fullwidth header module to create multiple “full screen” se
Popular
How to Create Beautiful & Engaging Dynamic Blog Post Hero Sections with Divi

by Best Webhosting Added 4 years ago 101 Views / 0 Likes

Every time a new update comes out, the design possibilities you have increase. Combining dynamic content and hover options, for instance, can bring stunning results. To demonstrate that, we’ll show you how to create 3 stunning dynamic blog post hero sections using Divi’s built-in options only. We’ll guide you step by step through each one of the examples that will inspire you to create your own variations as well. Read more: https://www.elegantthemes.
Popular
Divi Theme Customization: How to Create Diagonal Lines Between Sections in Divi Theme

by Best Webhosting Added 4 years ago 103 Views / 0 Likes

In this divi theme customization, I show you how to add arcs and diagonal lines between sections with the divi theme! You can read more at elegant themes blog. Visit Elegant themes here:https://www.elegantthemes.com/blog/divi-resources/15-fun-divi-section-divider-styles-you-can-use-on-your-next-project To learn how to make this website, visit my divi theme tutorial here! https://www.youtube.com/watch?v=GqJuTs69lCo&t=1945s The divi theme for wordpress