Plugins

DiviMenus

DiviMenus - $49

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

Floating DiviMenus

Floating - $9

Choose the Pages and the Location to float your DiviMenus!

Sharing DiviMenus

Sharing - $9

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

DiviMenus On Media

On Media - $9

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

DiviSignatures

DiviSignatures - $19

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

DiviPasswords

DiviPasswords - $9

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 module 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

Sub Link Type

Available in:

  • DiviMenus Flex module

Overview

This Link Type allows you to show either a Divi Layout or a WordPress menu that will be part of the element where this Link type has been set (e.g. Menu items in DiviMenus Flex).

This opens up a lot of possibilities related to submenus! Therefore, this is the preferred Link Type when it comes to show either sub elements, dropdowns menus or mega menus.

You should be familiar with this way of displaying submenus since the Elegant Themes main menu follows this approach as you can see in the Elegant Themes menu that we have recreated using the Sub Link Type.

How the Sub Link Type works?

Even though using this Link Type is pretty straightforward, we are going to guide you through all the steps so you can see how this Link Type works.

First, you have to select the Sub option from the Link Type dropdown.

If you are using the DiviMenus Flex module you must first enter the Menu Item that will show the submenu and open the Link module toggle.

DiviMenus URL Link Type
DiviMenus URL Link Type

Once you have selected the Sub Link type option for an item, you will be able to show the submenu by setting the following module fields:

Content > Sub Source

Choose the Divi Library option if you want to display a Divi Layout as a dropdown layout (you can use this option to display a mega menu).

Choose the WordPress Menu option if you want to display a WordPres menu as a dropdown menu.

Sub Link Type - Source

Content > Divi Library

Here you can select the Divi Library layout that you want to show as part of the item.

In the examples below we will use a row layout with several blurbs.

Content > WordPress Menu

Here you can select the WordPress menu  that you want to show as part of the item.

You can see all the available WordPress menus in the WordPress Admin Page > Appearance > menus.

We have created for this documentation the following example menu.

Sub Link Type - WordPress Menu example

This WordPress menu has four menu items. One of the menu items will contain a submenu with three menu items.

By default the WordPress menu inherits the DiviMenu’ Menu Item style and the menu width is 240px.

We will show you how to customize both the menu width and the menu style later in this documentation.

Sub behavior

The display behavior will depend on the DiviMenu orientation:

If the DiviMenu orientation is horizontal, the element will be displayed over the page elements on Menu Item hover and will disappear when hovering out the element.

Please hover over these example Menu Items to see this behavior in action:

On the other hand, if the orientation is vertical, the sub element will be displayed inline (or relative to) the page elements on Menu Item Click and will remain visible.

Content > Link > Sub Width

You can set a custom width here and override the Divi Library layout or WordPress menu width.

This field is responsive and we recommend that you use fixed units as pixels in horizontal DiviMenus.

For the Divi Libray dropdown (horizontal orientation) we haven’t introduced any values here since we have previously set the width in the Divi layout and that width worked for the purpose of this article, but we could have changed that width by entering another width values.

As for the WordPress menu dropdown (horizontal orientation), we haven’t introdues any values since the 240px default width also worked for us.

We set a 100% width for tablet and mobile for both examples in vertical orientation so the dropdowns took up all the available space. 

Design > Sub> Alignment

Here you can choose the aligment of the element.

 

CENTER

LEFT

RIGHT

Content > Link > Collapsible

This field is available for WordPress menus only.

Here you can choose whether the sublevels should be collapsed or not. If enabled, the  Collapse Icon field will be available so you can set both a close icon (desktop value, default arrow down) and an open icon (hover value).

If you have not set a URL for the WordPress Menu Item you will also be able to open and close the submenu by clicking the Menu Item. Since we have set a URL, we will have to click the collapse icon to open the submenu (clicking the Menu Item will open the URL).

Content > Link > Show Arrow

Here you can choose whether an arrow should be displayed. If enabled, these new field will be available:

The Arrow Offset field will allow you to set the distance between the Menu Item and the sub element.

The Arrow Direction will allow you to change the arrow direction (upwards / downwards). If the arrow is upwards (default), it will be located at the top of the sub element; if the direction is downwards, it will be located at the bottom of the Menu Item instead.

Sub Link Type - Show Arrow

We have set a box shadow to the WordPress menu for the sake of this example. We will show you how to style WordPress menus in the Sub Style chapter.

Design > Sub> Arrow Color

Here you can set a custom color for the arrow.

This field will be available if the Show Arrow field is enabled.

The default color is #fff (white). Let us change the color for the WordPress menu example.

Content > Link > Open URL

This field will allow you to open the URL introduced in the URL field rather than showing a sub element (submenu / dropdown) when clicking the item.

This way you will be able to open a URL on item click and show an element on itm hover.

Keep in mind that this option won’t work on touch screen devices (mobiles, tablets, etc) in order to be able to show the submenu when tapping the item.

Also, if the Enable Active State toggle field is enabled, the Menu Item will become active when the introduced URL matches the current page URL.

Let’s update our example to open the DiviMenus Flex documentation on item click.

Sub Style

If you are using Divi layouts you won’t need any fields here since you will be able to style the layout in the Divi Library.

If you are using WordPress menus you will be able to style them from the DiviMenus Item settings modal.

Design > Sub

We offer the following fields to override / style the WordPress Menu Items.

Menu Item background will allow you to set a custom background color for all the WordPress Menu Items.

Menu Item Padding will allow you to set custom paddings (top / bottom / left / right) for all the WordPress Menu Items.

Sub Menu Item Padding will allow you to also set custom paddings, but only for the WordPress Menu Items that are displayed in submenus.

Likewise, you will able to set the font, font style, text color, text size, letter spacing and line height for all the WordPress Menu Items.

Design > Box Shadow > WordPress Menu

This advanced field will allow you to set a box shadow for the WordPress Menu.

Advanced > Custom CSS

The WordPress Menu field will allow you to set custom CSS for the WordPress Menu.

The WordPress Menu Item field will allow you to set custom CSS for all the WordPress Menu Items. 

The WordPress Sub Menu Item field will allow you to set custom CSS for all the WordPress Sub Menu Items (Menu items that are inside a submenu). 

Sub Link Type in action

Below, we are listing some resources that might be helpful for a better understanding of this Link Type.

DonDivi Layouts

Working / Loading: https://dondivi.com/layouts/working-loading/

Elegant Themes: https://dondivi.com/layouts/elegant-themes/

Youtube

Recreating Elegant Themes Menu: https://www.youtube.com/watch?v=LMluksCvvEg