Join subscribers on our YouTube channel and enjoy other Divi video tutorials!
1. Add A Button Module To Your Page Or Theme Builder Template
Most likely you would want to use this solution in a Theme Builder template, but there are certainly other use cases as well. But in this tutorial I will be showing you how to do this with a blog post example and also an events example using our Divi Events Calendar plugin.
Place Your Divi Button Module
Go to wherever it is you want the back button, whether that e a page or a Theme Builder template, and add a Divi Button module.
Style The Button
You can go ahead and style the button now to match your website. One thing you could do to help this be really obvious is to place an arrow icon on the left side that shows all the time. I think that would be a good idea.
Customize The Button Text
You probably want to write something specific in the button text to indicate that clicking the button will take you back. This could be as simple as “Back” or “Go Back” or whatever you want
Add A CSS ID To The Button
Once the button is added to your layout and the design is just right, you can proceed with the next important step. Open the module settings and go to the Advanced tab to the CSS IDs & Classes toggle. There you will see an input field called CSS ID. In that field, write “pa-back-button” like that and this will connect with the snippet that we add in the next step. This is allowing us to target this specific button module. So you could add this ID to any button on your site that you want to act as a back button.
2. Add A Code Snippet To Create A Browser Back Button In Divi
Now that the Divi Button module is added and our CSS ID is added to the module, we are ready to copy and paste a code snippet that will create the functionality. This code snippet uses the browser default behavior to go backwards one page.
Where To Paste The jQuery Code
1. Divi Assistant
If you are using our Divi Assistant plugin, simply paste the code in the jQuery tab in the custom code window in the Divi Visual Builder.
2. Child Theme
If you are using a child theme, paste this code into the scripts.js file (don't forget to remove the <script> tags at the beginning and end). If you don't have a child theme, you can generate a child theme directly on your site or download our free child theme.
3. Divi Theme Options Integration
Otherwise, paste this code in your Divi>Theme Options>Integrations tab in the "Add code to the < head > of your blog" code area.
If you need help understanding where to paste the code, please check out our complete guide about where to add custom code In Divi.
// prevent default behavior
// Go back 1 page
Test It Out
Once you code is added, go ahead and test this out. Try going to a few pages on your site and then go to wherevery you have this button, and click it. See how it works? Pretty cool! If you like this let me know in the comments!