Skip to main content
Search

Button Block

Posted

Introduction

A Button Block is a clickable element you can place on your page to guide visitors to take an action—like buying a product, signing up for a newsletter, or visiting another page. Buttons are important because they help users know what to do next.

1. Adding a Button Block

  1. Open the Components Panel on the left side of the editor.
  2. Find the Button Block component.
  3. Drag and drop it into a column inside your section.

Important: Buttons need to be inside a column to align properly with other content. Columns keep your layout organized so buttons don’t float randomly on the page.

2. Editing Button Text

  1. Click the button on the canvas.
  2. The text becomes editable—type in the label you want (like “Buy Now” or “Learn More”).
  3. Click outside to save your changes.

Think of the button like a sign pointing visitors to what you want them to do next.

3. Linking a Button

  1. With the button selected, go to the Settings Panel (or right-hand toolbar).
  2. Enter the URL or page you want the button to lead to.
  3. Choose whether it opens in the same tab or a new tab.

4. Styling a Button

Buttons can be customized in the Styles Panel. Here’s what you can do:

  • Background Color: Choose the color behind the text.
  • Text Color: Make the button text stand out.
  • Font Size & Weight: Adjust the size and boldness of the label.
  • Padding & Margin: Increase space inside and around the button.
  • Border & Radius: Round the corners or add a border for style.

Tip: A good button color stands out from the background but still fits your page design.

5. Using Buttons Effectively

  • Make the text clear and action-oriented (“Subscribe Now” works better than “Click Here”).
  • Keep a consistent style for all buttons across the page.
  • Place buttons in logical spots: near sections where you want users to take action.
  • Avoid too many buttons in one area—it can confuse visitors.

6. Tips for Beginners

  1. Always place buttons inside a column.
  2. Use short, simple text that tells the visitor what to do.
  3. Test your buttons to make sure the links work.
  4. Preview your page to see how the buttons look on mobile and desktop.
Table of Contents