How to Create Back to Top Button in Brizy

Updated: August 29, 2022

What makes Brizy very special to other page builders out there? Simple and easy to use. Brizy is one of the easiest tools to create and design websites, blogs, online shops, and many more with WordPress. One of the essential parts of web design is navigation. Because navigation contributes to user experience, it helps you allow users to access the information they want as quickly as possible by presenting an enjoyable, intuitive layout while increasing ease of use.

This article will show you how to create back to top button in Brizy. The back-to-top button is a shortcut that allows users to navigate to the top of the page quickly. It will be helpful when users get to the bottom of a long page and want to return to the top page. So, they only need to click the button without scrolling up.

How to Create Back to Top Button in Brizy.

Go to your Brizy editor. You can create new content (post/page) or select existing content. On the Elements panel, pick the Button element and then drag and drop it into the canvas area.

Next, you can edit and style up the button. In this example, we will edit the text and the icon.

  • Text: TOP
  • Icon: Arrow up (⬆️)

Now, we will make the button clickable and link to the top of the page. On the Button settings, go to the Link and click on it.

There are two methods of making the button link to the top of the page that you can choose as your preference.

  • Link to

On the Link toolbar, go to the URL -> Link to option and then fill a hashtag (#) on the field. This option requires you to add CSS id to the top block.

  • Block

On the Link toolbar, go to the Block and click on it. Next, you can choose any of the blocks you want to link with the button. So, when the users click the button, it will bring them to your selected block. For example, you can link the button to the heading block.

As you can see from the GIF above, the button is already clickable. So now, no matter where users are on this page, it jumps them to the top if they click the button.

Next, it’s time to set the position of the button. Commonly, the location of the back-to-top button is on the bottom corner of the page (left/right). We also need to make the button hide when the users are on the top of the page, revealing it when they scroll down.

On the button settings bar, click the gear icon to open the settings panel. After that, go to the Position and set the position to Fixed.

Once you select a fixed position, set the button’s position by setting the value of the Horizontal Offset and Vertical Offset option. You can place the button anywhere you want as your preference. In this example, we place the button on the corner-left-bottom of the page.

That’s it; the back-to-top button is hidden when the users are on the top of the page and revealed when they scroll down. Don’t forget to click the Save Draft button if you want to save the project.

The Bottom Line

One thing that any page builder may not have, but Brizy has, is simplicity. Brizy can retain simplicity while pushing forward and expanding the features. With Brizy, creating a back-to-top button is very seamless. This article shows you how to create back to top button in Brizy. Play around with all the button settings and make your back-to-top button stunning.

This page may contain affiliate links, which help support WP Pagebuilders. Learn more

Leave a Comment

Pin It on Pinterest

Thanks for commenting

Help us grow by sharing this post with your friends!

Join 500+ WordPress users receiving tips and insights on creating with WordPress in the no-code era.

Hello.

How long have you been using WordPress? If you are an old WordPress user, then you have been a witness how WordPress has evolved massively. It has gone from a merely blogging tool into a comprehensive website builder. You can now use WordPress to create any type of website. From e-commerce website, LMS, listing website, membership website, to social media website.

Do you know what’s more interesting?

You can create your website with WordPress without touching a single line of code. At WP Pagebuilders, we write a lot about how to get the most out of WordPress in the no-code era. Subscribe and be first to know our newest content.