How To Create A Browser Back Button In Divi Tutorial by Pee Aye Creative

How To Create A Browser Back Button In Divi

In this tutorial I will show you how to use a normal Divi Button module as a browser back button to always go back to the previous page!

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 CSS ID for browser back button in Divi

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!

35
Last updated May 18, 2021 @ 2:49 am

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

Nelson is the owner of Pee-Aye Creative Co in the beautiful state of Pennsylvania. He loves helping small businesses, exploring, building websites with Divi, and teaching others.
Divi Adventure Club Product And Course Membership by Pee Aye Creative

Become A Member!

Gain access to everything we offer!

Learn More

Leave A Response!

17 Comments

  1. Rafal

    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?

    • Nelson Lee Miller (aka The Divi Teacher)

      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;}

      • jim

        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.

      • Nelson Lee Miller (aka The Divi Teacher)

        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.

  2. W32

    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!

    • Nelson Lee Miller (aka The Divi Teacher)

      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;
      }

  3. Paul

    Thanks for this, great tip!

  4. Cory

    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!:)

    • Nelson Lee Miller (aka The Divi Teacher)

      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;”

  5. Gabriela

    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!

    • Nelson Lee Miller (aka The Divi Teacher)

      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.

  6. Alan

    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

  7. jack

    looks like you need a ; after the ) to make it work

Recent Posts

Welcome Hemant To Our Team

Welcome Hemant To Our Team

I would like to introduce you to our new team member, Hemant Gaba, who has been helping out with everything behind the scenes!

Pin It on Pinterest

0

Your Cart