Plugins

DiviMenus

DiviMenus - $36.75

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

Floating DiviMenus

Floating - $6.75

Choose the Pages and the Location to float your DiviMenus!

Sharing DiviMenus

Sharing - $6.75

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

DiviMenus On Media

On Media - $6.75

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

DiviSignatures

DiviSignatures - $14.25

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

DiviPasswords

DiviPasswords - $6.75

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

Replacing Divi Slider navigation to Vertical

Easily create a new Vertical Divi Slider!
Follow these steps to change your Divi Slider’s default Horizontal Navigation Into a Vertical Navigation in no time.

PREVIEW:

Singular

Your content goes here. Edit or remove this text inline or in the module Content settings.

Beautiful

Your content goes here. Edit or remove this text inline or in the module Content settings.

Exclusive

Your content goes here. Edit or remove this text inline or in the module Content settings.

Paste this into Slider → Advanced → CSS Class:
dd-slider

By assigning this CSS Class only to the module you want to modify, you will prevent these styles from being applied to other modules on the same page.

Paste this into Page Settings → Advanced → Custom CSS:
.dd-slider .et_pb_slide_image, .dd-slider .et_pb_slide:first-child .et_pb_slide_image img.active, .dd-slider .et_pb_slide_description {
animation-timing-function: ease-in-out;
animation-name: fadeIn;
animation-duration: .7s;
animation-delay: .7s;
}
.dd-slider .et_pb_slide_description {
text-shadow: none;
}
.dd-slider.et_pb_slider {
display: flex;
align-items: center;
}
.dd-slider .et_pb_slides {
order: 2;
flex: 1;
}
.dd-slider .et-pb-slider-arrows {
order: 3;
bottom: 0;
right: 0;
z-index: 11;
background: transparent;
}
.dd-slider .et-pb-arrow-next, .dd-slider .et-pb-arrow-prev, .dd-slider.et_pb_slider:hover .et-pb-arrow-prev , .dd-slider.et_pb_slider:hover .et-pb-arrow-next {
opacity: 1;
position: relative;
display: flex;
bottom: 0; 
left: auto;
right: auto;
font-size: 35px;
margin: 12px!important;
padding: 3px;
background: transparent;
}
.dd-slider .et-pb-controllers {
order: 1;
position: relative;
bottom: 50%;
left: 0;
width: auto;
transform: rotate(90deg);
height: 0;
}
.dd-slider .et-pb-arrow-prev:before {
content: "\21";
}
.dd-slider .et-pb-arrow-next:before {
content: "\22";
}
This code places the Navigation elements (Arrows and Dots) on both sides of the Slider, and also matches the “Fade In” Animation for Images and Descriptions!

🥳 That’s it!

Want to create all kinds of Navigation Menus even more easily?

👉 Subscribe to our YouTube channel

More Videos