The Divi Link module lets you add a single, fully customizable link anywhere in your layout and style it like any other module.
You can use it to build custom menus and navigation items from scratch, then pair it with dynamic content and menu looping so each link pulls the correct label and URL from your pages or WordPress menus as your site grows.
Add The Divi Link Module
When you load the Visual Builder, Divi automatically adds a Section.
Click the Green Plus icon
to insert a Row.Click the Gray Plus icon
inside the Row, which will show the list of all available Divi modules.Find the Link module and click on it to load it. Alternatively, you can use the Search option to find it.
The Divi Link Module Use Cases
Custom navigation links in a hand-built menu: Use the Link module to build a fully custom menu instead of relying on a WordPress menu. Each Link module becomes a single menu item that you can style like any other Divi module (hover states, spacing, icons).
Clickable cards and tiles: You drop a Link module around or alongside a card design so the entire card behaves like a single, accessible link. The Link module handles the actual anchor, while the rest of the layout (image, text, badges) lives in other nested modules.
Context-aware links inside menu loops: Enable looping on a container and set the query type to Menu, then place a Link module inside that loop. Each Link module instance automatically receives the correct menu text and URL from the current menu item via Dynamic Content.
Link Module Settings Breakdown
Once you've added the Link module, its settings will automatically appear. This is where this module's content and design styles are configured. These settings are organized into three groups via the tabs at the top of the module:
The Content tab
Inside the Content tab, you can add or remove Carousel Slides, change the Carousel settings, change the default arrow icons, customize the background styles, and much more.
Text - Define the Link module's text.
Icon - Choose an icon that will be display along side the Link's text.
Link - Make the entire Link module clickable, creating a seamless way to direct users to another page, section, or external site.
Elements - Let you insert nested elements.
Background - Choose the Link module's background styles.
Loop - Enables the loop builder.
Order - Choose the display order of the Link module. This is most useful when using it inside the Loop builder.
Meta - Choose the Element's Label text and the Visibility:
Element Label: Select the Link module's label text to help you keep things organized and easy to understand in the Visual Builder.
Force Visible - Select how the Link module's visibility works when the module is hidden by other options:
Never - If the Link module is hidden by other visibility settings, it will remain hidden
While in Builder - If the Link module is hidden by other visibility settings, it will become visible only when the Visual Builder is active
While Editing Element - If the Link module is hidden by other visibility settings, it will become visible in the Visual Builder only when you are editing the module.
The Design tab
All the design styles and options for the Link module are in this tab.
Layout - Choose the Layout Style. It allows you to change how the child modules are being displayed.
Icon - Choose the Link module's icon styles such as Icon Color, Icon's font size, Icon's background styles, and more.
Text - Choose the Link's text styles such as Font, Font Style, Text Alignment, Text Color, Text Size, and more.
Sizing - Choose the Link module's sizing.
Spacing - Choose the spacing for the Link module.
Border - Choose the border styles for the Link module.
Box Shadow - Choose the Box Shadow styles for the Link module.
Filters - Choose the Link module's filters, including hue shifts, saturation adjustments, and blending modes.
Transform - Choose the Link module's advanced design effects, including scaling, rotating, skewing, and translating.
Animation - Choose the Link module's animation styles to add personality and interactivity while maintaining a polished, professional feel.
The Advanced tab
The Advanced tab provides tools for experienced designers, including options for adding CSS IDs and Classes, controlling visibility, managing transitions, adjusting element positions, and creating scroll effects.
Attributes - Allows you to assign unique CSS ID or reusable CSS classes, enabling advanced custom styling through your child theme’s stylesheet or Divi’s custom CSS settings.
CSS - Allows you to add custom CSS code to fine-tune your Link module, enabling advanced styling that perfectly aligns with your vision.
HTML - Choose the semantic HTML tag for the Dropdown module.
Conditions - Allows you to create dynamic, personalized content, ensuring the right message reaches the right audience at the right time.
Interactions: Create custom interactions, such as showing or hiding the Link module, and many more.
Visibility - Choose the visibility of the Link module for different devices.
Transitions - Choose how long the Link's module animation takes, adding subtle, impactful animations that enhance user experience and make your modules stand out.
Position - Choose precise control of the Link's module placement and create dynamic, visually engaging designs.
Scroll Effects - Control how the Link module behaves and transforms during scrolling.
What's the next step?
Save your changes and exit the Visual Builder
To save the page design, you can type CMD + S on a Mac or CTRL + S on a PC.
You can also:
Click on the Save button.
Click on the Exit button.
