Search

How to Create Back to Top Button in Brizy

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 our project. Read our affiliate disclosure.
Akbar Padma

Akbar Padma

Akbar is a WordPress expert and a writer staff at WPPagebuilders. He mainly writes about Gutenberg, Elementor, Divi, and other WordPress page builders.
Want to save yearly expense up to $219? why not?

2 thoughts on “How to Create Back to Top Button in Brizy”

  1. Hi, thanks for the tip! I don’t actually get how u make it hidden when the users are on the top of the page, revealing it when they scroll down. Your seem to work but I don’t get how… I have my working button in the bottom right corner but it just stays there all the time… what am I missing?

    Reply
  2. Hi There!

    Am I missing something, or this really works only one time per pageload?
    I set scroll down 20% as trigger, after clicking the button and getting to the top, if I start scrolling down again, the popup doesn’t appear again.

    Thanks in advance

    Reply

Leave a Comment