a
M
DonDivi Builder logo

DonDivi Builder

The #1 Collection of Premium Divi Modules!

DonDivi Builder Modules:

Content Toggle

DonDivi Gallery - Icon White

Gallery

DonDivi Grid - Icon White

Grid

DonDivi Hotspots - Icon White

Hotspots

DonDivi Nav Menu - Icon White

Nav Menu

DonDivi Popup - Icon White

Popup

DonDivi Tabs - Icon White

Tabs

DonDivi Timeline - Icon White

Timeline

DiviMenus

DiviMenus

The #1 Menu Builder!

DiviMenus Extra Add-ons:

Floating

Floating

Sharing

Sharing

On Media

On Media

DiviMenus Family

DiviMenus & Family

Special Bundle!

DiviSignatures

DiviSignatures

Sign Emails with Divi!

DiviPasswords

DiviPasswords

Protect any Content!



Layouts

Get inspired and download them from your account.



Log In

Access your Account.
Not a member? → Sign up


Extra Tools

DonDivi plugins also include Exclusive Extra Tools.

i

Documentation

Learn and get the most of our plugins.

About Us

We create premium tools for improving your creativity.



FAQ & Support

How can we help you? Check our FAQ or submit a ticket.

Show Link Type

CShow Link Type
Overview
How it works
Resources
URL Link Type
Popup Link Type
Show Link Type
Sub Link Type
Share Link Type

Show Link Type

Available in:

  • DiviMenus module
  • DiviMenus Flex module

Overview

This Link Type allows you to control the page elements visibility when clicking or hovering the item where this Link Type has been set (e.g. Menu items in DiviMenus).

This opens up a lot of possibilities related to visibility!

For example, you can create buttons to show and hide elements, content toggles and visibility filters.

Basically, you can design the elements of your page and decide which ones to show or hide when clicking or hovering the item where the Show Link Type has been set.

Note: If you are using the DiviMenus module, the Show Link Type will also be triggered when clicking or hovering clickables Menu Item Titles.

How to show page elements

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 Show option from the Link Type dropdown.

If you are using either the DiviMenus or the DiviMenus Flex module you must enter the Menu Item you want it to show an element (or elements) and open the Link module toggle.

Show Link Type

Once you have selected the Show Link type option for an item, you can set the Show behavior by using the following module fields:

Element CSS ID

Type here the CSS ID of the element you want to associate with this item. You can bind any element of the current page to the Menu Item. You can also bind multiple elements by typing their CSS IDs separated by commas.

Note: The ID name is case sensitive, must contain at least one character, cannot start with a number and must not contain whitespaces (spaces, tabs, etc.).

Element CSS Class

Type here the CSS Class of the element (or elements) you want to associate with this item. You can bind any CSS class to the Menu Item, as well as multiple CSS classes separated by commas.

Show On Hover

Here you can choose whether or not this Link Type should be triggered when hovering over the item. If enabled, the element will be displayed on item hover and click.

Toggle Visibility

This is the expected behavior of the element when you click the item.

If the Toggle Visibility field is turned on, the element will become visible if it was hidden and the other way around.

If you turn off the Toggle Visibility field, you will show the element, no matter the previous visibility state.

Keep Visible

Here you can define the expected behavior once the element has been shown. If you turn on this module field, the element will be visible even though you click on another Menu Item, otherwise the element will be invisible.

This option can be useful to reproduce the different steps of a procedure.

Hide On Menu Button Click

Here you can choose whether or not to hide the element when closing the DiviMenu.

Default is YES.

Hide On Page Click

Here you can choose whether or not to hide the element when clicking outside.

Default is NO.

Initial State

Finally, you might want to set the element initial visibility state when page is loaded. By default is hidden.

Open URL

This field will be visible if the Show On Hover field is enabled.

DiviMenus Show Open URL

This field will allow you to open the URL introduced in the URL field rather than showing an element (or elements) when clicking the Menu Item.

This way you will be able to open a URL on Menu Item click and show an element (or elements) on Menu Item hover.

Keep in mind that this option won’t work on touch screen devices (mobiles, tablets, etc) in order to be able to show elements when tapping the Menu 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.

Design > Link > Enter Effect

This field will allow you to animate the page element (or elements) when appearing.

> Custom Effects

Design > Link > Exit Effect

This field will allow you to animate the page element (or elements) when disappearing.

> Custom Effects

Visual Builder / Theme Builder behavior

The hidden elements will be displayed with a 0.5 opacity (this way you will be able to see them and easily edit them).

If you are editing your custom Headers, Footers and Body templates in the Visual Builder instead of Theme Builder, the hidden elements from those Theme Builder templates will be displayed completely hidden so they don’t distract you. Remember that you can change to the wireframe view to edit hidden elements.

Show Link Type in action

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

DonDivi Layouts

Grocery: https://dondivi.com/layouts/grocery/

Red Megamenu: https://dondivi.com/layouts/red-megamenu/

OZ: https://dondivi.com/layouts/oz/

Black Friday alert: https://dondivi.com/layouts/black-friday-alert/

Marker: https://dondivi.com/layouts/marker/

XMAS: https://dondivi.com/layouts/happy-xmas/

Delivery: https://dondivi.com/layouts/delivery/

Macarons: https://dondivi.com/layouts/macarons/

Youtube

https://www.youtube.com/channel/UCAZnylpT-IMQHitH-I2g9yw/playlists

 

Documentation

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

DonDivi Builder logo

DonDivi Builder

Content Toggle

DonDivi Gallery - Icon White

Gallery

DonDivi Grid - Icon White

Grid

DonDivi Hotspots - Icon White

Hotspots

DonDivi Nav Menu - Icon White

Nav Menu

DonDivi Popup - Icon White

Popup

DonDivi Tabs - Icon White

Tabs

DonDivi Timeline - Icon White

Timeline

DiviMenus

DiviMenus

Floating

Floating

Sharing

Sharing

On Media

On Media

DiviSignatures

DiviSignatures

DiviPasswords

DiviPasswords

Be Creative

Get inspired and create the coolest designs!

YouTube Channel

Layouts

Documentation

Join our Newsletter!

Thanks and Stay Tuned

Join


CONTACT US.

5 + 5 =






PLUGINS

DonDivi Builder
DiviMenus
Floating
Sharing
On Media
DiviSignatures
DiviPasswords

DONDIVI

DonDivi
About us
Layouts
Extra Tools
Documentation
FAQ

MEMBERS

Your Account
Affiliates
Changelog
License Renewal
Refund Request

Privacy & Terms

© DonDivi | From Spain with ♥