All Collections
FAQ's and Troubleshooting
Creating a Browser Back Button in Divi: Step-by-Step Guide
Creating a Browser Back Button in Divi: Step-by-Step Guide

Learn how to implement a functional browser back button within your Divi website with our step-by-step guide.

Fozla Rabbi avatar
Written by Fozla Rabbi
Updated over a week ago

The browser back button takes you back to the page you were on before. It's like a "rewind" button for the internet. In this article, we'll show you how to add your own back button to your website using Divi's Button Module, so your visitors can easily go back to the previous page they were on.

Achieving a browser back button with Divi is a straightforward process that involves a few essential steps:

Step 1: Create a Button Module

  • Begin by adding a Button Module to your desired location, whether it's a page, a theme builder template, or the global footer.

  • Style the Button Module to align with the design of your website.

  • Insert an arrow icon on the left side of the button to represent the back action.

  • Customize the button text to say "Previous Page" or any other label that suits your needs.

Step 2: Add a Custom CSS Class Name to the Button Module

  • Access the Button Module's settings.

  • Navigate to Advanced > CSS ID & Classes > CSS Class.

  • Provide the Button Module with a unique CSS class name; for this example, we'll use "et-browser-back-button." This ensures that the CSS class doesn't interfere with other button modules on your site.

  • If you're unsure about adding a CSS class name, refer to our guide for detailed instructions.

Step 3: Add a Script to Create the Browser Back Button

In this final step, you'll incorporate a script to enable the browser back button functionality for the button you've created:

  • Access your WordPress Dashboard.

  • Navigate to Divi > Theme Options > Integration section.

  • In the "Add code to the < head > of your blog" field, paste the following script:

jQuery(function($) {
// Select your button by its ID or class
var backButton = $(".et-browser-back-button")
// Add a click event handler
backButton.on("click", function(e) {
e.preventDefault(); // Prevent the default link behavior
history.back(); // Go back one page in history

This script will empower your button to act as a browser back button when clicked. It's a simple yet effective way to enhance user navigation on your Divi-powered website.

Did this answer your question?