July 14, 2023

Adding a Bricks Builder Back to Top Button

Play Video

A Bricks Builder Back to Top Button can be a great addition to increase the user experience on your WordPress website. Navigating can be a tedious task, especially when dealing with long pages. It allows users to quickly navigate back to the top of the page, saving them from endless scrolling. This tutorial by Web Squadron will show you how to add a Bricks Builder Back to Top Button.

Understanding the Basics

A ‘Back to Top’ button is a small button typically located at the bottom corner of a webpage. When clicked, it takes the user back to the top of the page.

Creating a Bricks Builder Back to Top Button

The first step in creating a ‘Back to Top’ button is deciding where to position it. A good practice is to add it to the header. This ensures that it’s visible across the entire website.

Here’s how to add a button in Bricks Builder:

  1. Add a button to your header.
  2. Remove the text in the button.
  3. Add an icon to the button. For example, you can use the ‘Chevron up’ icon from Font Awesome Solid.

You can adjust the button size and color to match your website’s theme.

Positioning the Back to Top Button

Once you’ve created the button, the next step is to position it. By default, the button’s position is set to static. You need to change it to fixed. This ensures that the button remains visible as the user scrolls up and down the page.

Here’s how to adjust the button’s position:

  1. Go to the Style tab.
  2. Scroll down to ‘Positioning’.
  3. Change the position from static to fixed.

You can adjust the button’s position on the screen to your liking.

Making the Back to Top Button Functional

After positioning the button, you need to make it functional. This involves assigning a CSS ID to the top section and linking the button to this ID.

Here’s how to do it:

  1. Go to the top section of your page.
  2. Go to the Style tab and scroll down to ‘CSS ID’.
  3. Assign a CSS ID to the top section. For example, you can call it ‘top-section’.
  4. Go back to the button and go to the Content tab.
  5. In the ‘Link’ field, enter ‘#top-section’ (or whatever CSS ID you assigned to the top section).

Testing the Back to Top Button

It’s important to test the ‘Back to Top’ button to ensure it works as expected. To do this, you need to view your website on the front end. As you scroll down the page, the button should remain visible. When you click it, it should take you back to the top of the page.

Additional Resources

For more information on using Bricks Builder and improving your website’s user experience check out their Documentation:


Adding a Bricks Builder back to top button to your website is not that difficult and can greatly improve user navigation.

Required Resources

Bricks Builder Logo
Payment required
Credit to Web Squadron
Web Squadron is a popular YouTube channel dedicated to providing informative tutorials, tips, and insights on web development and design. With a strong focus on WordPress and website builders like Bricks Builder, the channel aims to help users of all skill levels, from beginners to advanced developers, create and optimize their websites. By offering easy-to-understand, step-by-step guidance, Web Squadron provides practical and valuable content.
Adding a Bricks Builder Back to Top Button
Welcome back!
Enter your Helwp credentials to sign in.

No Account yet? Sign Up

My Account
Give Feedback
Describe your feedback *
Rate Helwp
Problem *
Describe the problem
Want us to reply?
Your E-Mail
Affiliate Disclosure

At Helwp, we’re committed to transparency and honesty. Therefore, we want to inform you that some of the links on our website are affiliate links. This means that, at no additional cost to you, we may earn a small commission if you click through and make a purchase.

We only promote products or services that we genuinely believe in. These affiliate commissions help us to maintain the website and continue to provide you with free, high-quality WordPress content.

If you are interested in how you can support us even further, check out our support page.