Plugins

DiviMenus

DiviMenus - $39.20

A powerful menu builder that brings the coolest designs and popups to Divi!

Floating DiviMenus

Floating - $7.20

Choose the Pages and the Location to float your DiviMenus!

Sharing DiviMenus

Sharing - $7.20

A DiviMenus add-on that brings the coolest Social Sharing buttons to Divi!

DiviMenus On Media

On Media - $7.20

Display DiviMenus on Images & Videos to add stunning Media options!

DiviSignatures

DiviSignatures - $15.20

Design Email Signatures with Divi and paste them into your Mail Settings!

DiviPasswords

DiviPasswords - $7.20

Password Protect sections, rows, columns and modules with Divi!

DonDivi

Layouts

Check these awesome layouts out. Already a DonDivi user? Download them from your account area!

Extra Tools

DonDivi plugins also include Exclusive Extra Tools to help you. Save money and forget additional plugins!

DonDivi

About us

We create premium tools for improving your creativity and simplifying the way to design stunning websites.

Special Bundle!

DiviMenus & Family

DiviMenus & Family - $69

This stunning Bundle includes the DiviMenus plugin and its 3 new Add-ons:
Floating + Sharing + On Media.

Members

Log in

Access your downloads, layouts and support. If you have purchased at Elegant Themes > Register.

Documentation

Access all the detailed information about our plugins and get the most out of them!

FAQ & Support

Already a DonDivi user? Send us a ticket from your user area and we will reply as soon as possible.

Contact us

👋 It’s The Divi
Anniversary Sale!

Day(s)

:

Hour(s)

:

Minute(s)

:

Second(s)

GET THE DEAL BEFORE IT’S GONE!

Creating Fullpage Scrolling with Scroll Snap

Fullscreen sections that you can scroll between!

Take advantage of this handy trick to scroll vertically or horizontally between fullscreen elements.

Choose the parent container you want the child elements to scroll into, set the size for the container and define its Overflow as Auto.

You can choose a Section to scroll Rows, a Column to scroll Modules…

Let’s scroll vertically some “Fullwidth Headers”!

We just need to identify a Divi “Fullwidth Section” as the parent container, and each “Fullwidth Header” inside as a child element. 

  • Paste this into Fullwidth Section > Advanced > CSS ID:
dd-container-y
  • Paste this into each Fullwidth Header > Advanced > CSS Class:
dd-snap
  • Paste this into your Page Settings > Advanced > Custom CSS::
#dd-container-y {
   scroll-snap-type: y mandatory!important;
}
.dd-snap {
   scroll-snap-align: end!important;
}
  • Go to Divi > Theme Options, and disable Smooth Scrolling:

💡 Note that when the parent container is scrolled, it will snap to the child elements you’ve defined instead of scrolling your page content, so if you really want to keep scrolling your current page, you must limit the size (height or width) of the parent container avoiding making it fullscreen and leaving a margin around it to place the cursor in that area and continue scrolling the page.

🥳 That’s it!

Let’s scroll horizontally some “Fullwidth Headers”!

We just need to identify a Divi “Fullwidth Section” as the parent container, and each “Fullwidth Header” inside as a child element.

  • Paste this into Fullwidth Section > Advanced > CSS ID:
dd-container-x
  • Paste this into Fullwidth Section > Advanced > Main Element:
display: flex;
  • Paste this into each Fullwidth Header > Advanced > CSS Class:
dd-snap
  • Paste this into each Fullwidth Header > Advanced > Main Element:
flex: none;
  • Paste this into your Page Settings > Advanced > Custom CSS::
#dd-container-x {
   scroll-snap-type: x mandatory!important;
}
.dd-snap {
   scroll-snap-align: end!important;
}
  • Go to Divi > Theme Options, and disable Smooth Scrolling:

💡 Note that when the parent container is scrolled, it will snap to the child elements you’ve defined instead of scrolling your page content, so if you really want to keep scrolling your current page, you must limit the size (height or width) of the parent container avoiding making it fullscreen and leaving a margin around it to place the cursor in that area and continue scrolling the page.

🥳 That’s it!

Let’s scroll vertically regular “Sections”!

In case we want to scroll snap regular Sections, we just need to identify the “#et-main-area” as the parent container, and each “Section” inside as a child element.

  • Paste this into each Section > Advanced > CSS Class:
dd-snap
  • Paste this into your Page Settings > Advanced > Custom CSS::
#et-main-area {
scroll-snap-type: y mandatory!important;
height: 100vh;
overflow: auto;
}

.dd-snap {
scroll-snap-align: end!important;
}

🥳 That’s it!

👉 Subscribe to our YouTube channel

More Videos