How to Add Dynamic Links to Divi Button Modules

Posted on September 26, 2023 by 2 Comments

How to Add Dynamic Links to Divi Button Modules
Blog / Divi Resources / How to Add Dynamic Links to Divi Button Modules

The Divi Button Module offers many design options, enabling great freedom when crafting attractive links in your designs. Whether you’re altering the background color or adding a box shadow, your creative possibilities are endless. This isn’t limited to the standard Button Module; it applies anywhere a button is active within Divi.

The primary purpose of a button is navigation, guiding you to a different location, whether that’s within or beyond your website. Links can lead to numerous places on the internet, the options are endless. In the context of a Divi site, dynamic content streamlines linking between a variety of pages, posts, and media. To illustrate how to add dynamic links to your Divi buttons, we’ll employ the free Plumbing Layout Pack in this guide. It’s now easier than ever to enhance your Divi site’s navigability.

Why Use Dynamic Links

In HTML, links come in two forms: absolute or relative. An absolute link provides the exact address you aim to reach, and it typically includes either https:// or www. On the other hand, a relative link pertains to a page or directory that aligns with the current page you’re browsing. For instance, https://google.com is an absolute link. But if you were on the Elegant Themes website, and wanted to link to /modules, it would direct you to our modules gallery page. You wouldn’t be able to link from Google’s home page to the modules page on the Elegant Themes website because they are separate domains. Even if Google had a URL of /modules, it wouldn’t take you to the Elegant Themes modules page due to their unrelated nature.

Keeping track of the URLs of the pages and posts you’ve created can become a tricky task as your website expands. Memorizing short or basic URLs is straightforward. However, you may find it increasingly challenging as you start optimizing your content for SEO and incorporating long-tail keywords into your content URLs. This approach could lead to lengthier URLs that are harder to recall. This is when dynamic links prove their value.

Relative Links, Dynamic Links, and Divi

In Divi, it is possible to link to a variety of destinations within your WordPress install, without having to know the URL. You can simply search for a few keywords and be able to link directly to these places on your site.

Within dynamic links, you can link to:

  • The current page: the page you are working on
  • The author page: the page of the author of the page/post
  • Your homepage: your website’s home page
  • Posts: posts within your website
  • Pages: pages on your website
  • Media: Files that can be found in the media gallery (this doesn’t link directly to the file, but the media’s page on your site)
  • Projects: The project custom post type in Divi
  • Products: If you have WooCommerce installed, you can dynamically link to a WooCommerce product
  • Manual Custom Fields: Custom fields that you have manually created

Dynamic content that you can link to within Divi

As you add more custom post types to your website, they may also appear as dynamic content that you can link to within Divi.

Adding Dynamic Links to Divi Buttons

To demonstrate how dynamic links can work for you, let’s start by installing the Plumbing Landing Page Layout.

Install the Layout Pack

To start, we’ll install the page layout. We first need to create a new page in WordPress. From the WordPress dashboard, hover over the Pages menu item from the left-hand menu. Then, we click Add New.

Add new page for Marketing Agency Landing Page

Once inside the default WordPress editor Gutenberg, set a title for your new page. Next, click on the purple Use Divi Builder button.

Activate the Divi Builder

You will then be presented with three options. We’re going to click on the purple, middle button, Browse Layouts.

Browse the free layouts provided with Divi

This will open up Divi’s vast layout library which comes packed with pre-designed pages for you to choose from. We’ll be selecting the Plumbing Layout Pack.

Choose the Plumbing Layout Pack

From the Plumbing Layout Pack, select the Landing Page Layout.

Select the Landing Page Layout from the Plumbing Layout Pack

Then, click on the blue Use This Layout button. Wait for the layout to install on your new page. Finally, click the green Publish button to make your page and new layout live.

We’ll work with the button found within the Header section of the layout.

We will be using the main button within the header section of this layout

Adding Your Links: Linking to Pages

Now that our layout is installed, we can begin dynamically linking to various places within our WordPress install. To begin, we click on the Button Module’s gear icon. This will open the settings menu of the button.

Open Button Module settings menu

Next, we click on the Link tab. Notice the icon for dynamic content. This is where we’ll be able to link to various places throughout our website. Click on the Dynamic Content icon.

Adding dynamic links to Button Module Link tab

Since we’ll link to a page on our website, let’s click on the Page Link option.

Link to Pages on your WordPress site

This will reveal a list of pages on our site. If you have many pages on your site, you can use the search box to help narrow your results.

All your pages within your WordPress site

Once you have found the page that you are looking to link to, click on it. This will link it to your button. Then, click on the green checkmark to select your page.

Choose your page from the list of pages on your site

Once you have done this, you’ll notice that the Link URL textbox now shows that you have a Page Link.

Your selected dynamic page link

Should you need to, you can click on the gear icon to update this link, changing it to another page. Or, you can click on the trash can icon to remove the dynamic link altogether. To save your changes, click on the green checkmark at the bottom of the Button Module settings box. Now, you’ve added a dynamic page link to your button. Another added beauty of using dynamic links in Divi is that should you change the URL of the dynamically added page, you don’t need to worry about changing every instance of it. As long as the link was made dynamically, it will automatically update wherever it is being called.

Now, let’s add a dynamic link to a blog post within our website.

Adding Your Links: Linking to Posts

To begin, we’re going to remove the previously added dynamic link. To start, click on the gear icon of the header button.

Open Button Module settings menu

Notice that because we already have a dynamic link, we see that the link textbox is filled. We will click on the trash can icon to remove this dynamic link.

Preparing to delete added dynamic link

Once we’ve deleted the link, we will go back and click on the Dynamic Content icon.

Adding dynamic links to Button Module Link tab

This time, however, we will select the Post Link as we want to link to a blog post.

Select Post Link

With our list of blog posts presented to us, we can select the one that we want to link to. Then, click the green check mark to save your selection.

Select your blog post and save your choice

Notice that the link no longer says Page Link, but Post Link as we are linking to a blog post. Finally, click on the green check mark to save your changes.

Save your post selection

Rounding it All Up

With Divi’s Button Module, you can unleash your creativity with your links. This tool makes it easy to connect to various destinations on your website. Adopting dynamic links with your Button Module is a smart way to save time, eliminating the hassle of manually searching for links. Not only time but energy too – you won’t need to remember to update any altered links. With dynamic links, easily craft long-tail keyword URLs without the burden of memorizing URLs. The use of dynamic links throughout your linking and design process is highly recommended. With Divi, it’s a breeze!

Divi Marketplace

Are You A Divi User? Find Out How To Get More From Divi! 👇

Browse hundreds of modules and thousands of layouts.

Visit Marketplace
Divi Marketplace
Divi Cloud

Find Out How To Improve Your Divi Workflow 👇

Learn about the new way to manage your Divi assets.

Get Divi Cloud
Divi Cloud
Divi Hosting

Want To Speed Up Your Divi Website? Find Out How 👇

Get fast WordPress hosting optimized for Divi.

Speed Up Divi
Divi Hosting
Premade Layouts

Check Out These Related Posts

Get a Free Writer Layout Pack For Divi

Get a Free Writer Layout Pack For Divi

Posted on May 20, 2024 in Divi Resources

Hey Divi Nation! Thanks for joining us for the next installment of our weekly Divi Design Initiative; where each week, we give away a brand new Layout Pack for Divi. This time around, the design team has created a beautiful Writer Layout Pack that’ll help you get your next Writer website up and...

View Full Post
Get a Free Skin Care Layout Pack For Divi

Get a Free Skin Care Layout Pack For Divi

Posted on May 13, 2024 in Divi Resources

Hey Divi Nation! Thanks for joining us for the next installment of our weekly Divi Design Initiative; where each week, we give away a brand new Layout Pack for Divi. This time around, the design team has created a beautiful Skin Care Layout Pack that’ll help you get your next Skin Care website up...

View Full Post

2 Comments

  1. Dynamic links in Divi are designed to be lightweight and efficient. They won’t significantly impact your website’s performance, so you can use them without worrying about speed issues.

  2. One problem I’ve had with the usage of the dynamic links is within the Visual Builder editor itself. If you have only a few dynamic link buttons, the visual builder editor takes forever to load–ET even verified this very issue and it still hasn’t been fixed since the release of the dynamic links feature.

Leave A Reply

Comments are reviewed and must adhere to our comments policy.

Join To Download Today