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:
<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
});
});
</script>
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.