how to hyperlink in divi

3 min read 26-01-2025

Hyperlinking is a fundamental aspect of web design, allowing you to connect different pages within your website or link to external resources. Divi, a popular WordPress theme, offers several easy ways to create hyperlinks, whether you're working with text, images, or other elements. This comprehensive guide will walk you through the various methods, ensuring you can master hyperlinking in Divi with ease.

Hyperlinking Text in Divi

This is the most common type of hyperlink. Let's explore how to add links to your text within the Divi Builder.

Method 1: Using the Visual Builder

Open the Divi Visual Builder: Navigate to the page you want to edit and activate the Divi Builder.
Select the Text Element: Locate the text module where you want to add a link. Click on it to select it.
Highlight the Text: Highlight the specific words or phrases you want to hyperlink.
Add the Link: In the text module's settings on the right-hand side, look for the "Link" option. Click it.
Enter the URL: Paste the URL you want to link to into the field provided. You can link to internal pages on your website or external websites.
Open in New Tab (Optional): Check the box labeled "Open Link in New Tab" if you want the link to open in a new browser tab. This improves user experience by keeping your site open.
Save Changes: Click the "Save" button to update your page.

Method 2: Using the Code Editor (Advanced Users)

For more control, you can directly add hyperlinks using HTML within Divi's code editor:

Switch to Code View: In the text module, switch to the "Code View" tab.
Add the Link: Wrap the text you want to link with the <a> tag, including the href attribute specifying the URL. For example: <a href="https://www.example.com">Click Here</a>.
Save Changes: Save your changes.

Remember to use appropriate anchor text that clearly indicates where the link leads. Avoid generic phrases like "click here." Instead, use descriptive text that reflects the linked content.

Hyperlinking Images in Divi

Adding hyperlinks to images is equally straightforward.

Select the Image Module: In the Divi Visual Builder, select the image module you wish to link.
Access the Link Settings: In the image module's settings, you'll find a field labeled "Link."
Enter the URL: Enter the URL you wish to link the image to.
Open in New Tab (Optional): Again, you can choose to open the link in a new tab for a better user experience.
Save Changes: Save your changes.

Hyperlinking Other Elements

You can also hyperlink other Divi modules, such as buttons and even entire sections, using a similar process. The exact location of the "Link" setting might vary slightly depending on the module, but the principle remains the same. Look for the "Link" option within the module's settings.

Troubleshooting Hyperlinks in Divi

If your hyperlinks aren't working, check the following:

Correct URL: Ensure you've entered the URL correctly without typos.
Visual Builder Conflicts: Sometimes conflicts with other plugins can interfere with Divi's functionality. Try temporarily deactivating other plugins to see if that resolves the issue.
Caching: Clear your browser cache and any caching plugins you might be using.
Theme Conflicts: In rare cases, a theme conflict may be the cause. Try switching to a default theme temporarily to test.

Conclusion

Adding hyperlinks in Divi is a simple process once you understand the basic steps. Whether you're linking text, images, or other elements, Divi provides an intuitive interface to make the process quick and easy. By following the methods outlined above and troubleshooting potential issues, you can effectively enhance your Divi website's navigation and user experience. Remember to always test your links after making changes to ensure they are working correctly.