Subscribe On YouTube

Join other subscribers and enjoy other Divi video tutorials!

How To Create A Browser Back Button In Divi

Nelson Miller Profile Orange
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!

▶️ Please watch the video above to get all the exciting details! 👆

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.

add CSS ID for browser back button in Divi

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.

    jQuery(document).ready(function() {

        jQuery("#pa-back-button").attr('href', '#');

        jQuery("#pa-back-button").click(function(e) {
            // 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!

Subscribe For More Things Like This!

At the start of each month, we send out a recap newsletter from the month before with family news, Divi news, our latest tutorials, and product news. Occasionally, if the news is too exciting to wait, we will send out another email separate from the monthly newsletter. That’s what you get when you subscribe, and of course you can unsubscribe if you are no longer interested!

Blog Post Optin

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy


Comments By Others

  1. jack

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

  2. Alan

    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

  3. 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) <span class="comment-author-role-label author-label">Author</span>

      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.

  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) <span class="comment-author-role-label author-label">Author</span>

      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. Paul

    Thanks for this, great tip!

  6. 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!!


    • Nelson Lee Miller (aka The Divi Teacher) <span class="comment-author-role-label author-label">Author</span>

      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;

  7. 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) <span class="comment-author-role-label author-label">Author</span>

      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) <span class="comment-author-role-label author-label">Author</span>

        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.

Recent Posts


Your Cart