A Good Solution For Something You May Have Never Considered
Why Would This Be Needed?
This tutorial at first glance could seem a bit unnecessary. You could reason that modern browsers all have some sort of back button. Or if you need a button on a post to go back to the archive page, just link the button to the archive page, right? Well, hold on! This could actually be bad practice, as doing so could take the user to a completely different page than what they expect. For example, if you have a “Back To Main Blog Feed” button on your posts, the user may be confused because they may have come to the post from the home page, or some other page. In this case, a browser back button solves the problem. So in this tutorial I am going to show you how to use a normal Divi Button module to act as a browser back button to always go back to the previous page the user was on before.
Join subscribers on our YouTube channel and enjoy other Divi video tutorials!
Start By Adding 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.
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.
If you are using our free Divi child theme, place this snippet into the scripts.js file and remove the <script> tags at the beginning and end. Otherwise, place this in your Divi>Theme Options>Integrations tab in the "Add code to the < head > of your blog" code area.
<script>
jQuery(document).ready(function() {
jQuery("#pa-back-button").attr('href', '#');
jQuery("#pa-back-button").click(function(e) {
// prevent default behavior
e.preventDefault();
// Go back 1 page
window.history.back();
});
});
</script>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!
Thanks for the tips. One question (as I am brand new with divi builder):I do need to customize the button more, but I do not know how to add a second class to it next to the et_pb_button inside the class= quotation marks. I would like to change both text and colors, change the font, etc. Could you show me an exemple how to create such button?
Hi Rafal,
You are welcome! Thanks for asking. You can do that with some CSS like this. Add a class inside the quotation marks, then use that same class like this in your Divi>Theme Options>Custom CSS .my-custom-button { color: #000000; font-family: Poppins; font-weight: bold;}
Hi Nelson, add a class or replace the original ET button class? And can you give an example here how it would look like in the html code. I’m trying and trying but it’s not doing the trick for me.
Hi Jim,
The class “et_pb_button” is located in the code, that is what I am referring to as the ET button class. You could replace this with your own custom class.
Hi Nelson!! I’m using your code on a website but I’d love it to “add an icon” when hovering as all the other buttons that I’m using.
I tryed changing the “et_pb_button” class for “et_pb_button et_pb_button_0 et_hover_enabled et_pb_bg_layout_dark”, that matched the style and also moves the text when hovering but doesn’t show the icon.
Is that possible?? Could you help with that??
I am also not being able to vertically center the button.. definetely not my day..
Thanks in advance!!
Rgds!
Hello,
So the Divi button icon is using the :after pseudo class. So you would want to take a normal button and inspect it and find the icon content and styles. So something like this:
.et_pb_button:after {
content: “\24”;
font-family: ETModules;
line-height: inherit;
font-size: inherit!important;
opacity: 1;
margin-left: .3em;
left: auto;
}
Thanks for this, great tip!
My pleasure, Paul!
Thank you Nelson very much! That’s so cool!
I do have a couple questions: If I already have a red button with white text already centered on my page, can I add any of this CSS code to the Advanced > Custom CSS for my button to work?
If not, what would I need to then add to “your” code to get this button, to be red with white text, and for it to align to the center?
Thanks so much Nelson for the tutorial!:)
Hi Corey, you need to customize this button, not a regular one. You can add the color and alignment in the CSS in the style=”” part. So maybe style=”background: red; text-align: center;”
Hi, the button is a button to go back, so the icon should show in hover at the beginning, pointing back, I think.
How can I do it? is CSS? Thanks for your help!
Hi Gabriela,
You will need to use a pseudo class. So what you can do is set up a regular Divi button module like that, then use the browser tools to inspect it, and copy the code from the before pseudo class. If you need help you can set that up the way you want with a temporary button and send me the link.
I copied css :before of divi button for to add to class of my history.back() button but this don’t work. Yes, I need help. Here are the two buttons http://compone.cl/elnahue/project/boton-volver/, maybe you can see them. Thanks!
Hi,
this snippet would appear to be what I need.
I Can’t make it work. Seems to be some error on saving. One attempt saw the button but it disappeared. Also triggered a back before I had even finished typing the instructions divi 4.6.1
weird – its not that complicated
any thoughts would be appreciated
Cheers
Al
Hi Alan,
Not sure, it should work fine, just adding code to a code module.
looks like you need a ; after the ) to make it work
But it does work…