Adding a Bricks Builder Back to Top Button

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:

• Bricks Builder Documentation

Conclusion

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