All About Buttons

Introduction

This tutorial explains how to add, link, and customize buttons for your design.

Step-by-Step Tutorial: Adding and Customizing Buttons

Step 1: Add a Button

1. Identify the Placement:
   • Determine where you want the button to appear on your webpage.
2. Access the Pattern Library:
   • Open the “Block Inserter” (the Blue + in the top left of the screen) and search for “Button.”
   • Select the desired button block from the search results or add one of the available patterns.
3. Click on the block or pattern:
   • Click on the button block or pattern to add it to your design.
   • If it appears in the wrong location, drag and drop it to the desired spot.

Step 2: Add a Link to the Button

1. Select the Button:
   • Click on the button to activate its settings.
2. Add an External Link:
   • Use the toolbar at the top to click the link icon (If your toolbar is not at the top, it may be floating above your block on the page).
   • Enter the URL of the external website you want to link to.
3. Enable New Tab Option (recommended):
   • For external links, click the pencil icon, select “Advanced,” and enable “Open in a New Tab.” This ensures your page stays open while the user visits the external site.
4. Link Internal Pages or Blogs:
   • Type the name of your internal page or blog in the link field.
   • The system will auto-suggest matching pages or blog posts.
   • No need to enable “Open in a New Tab” for internal links.

Step 3: Customize Button Text

1. Edit Button Text:
   • Replace the default text with your desired label (e.g., “Read This,” “Learn More”).

Step 4: Adjust Button Layout

1. Position the Button:
   • Use the alignment options on the top toolbar (e.g., left, center, or right).
2. Format Text:
   • Adjust the text alignment (e.g., centered).
   • Use options like bold or italic to style the text.

Step 5: Advanced Customizations

1. Access the Settings Panel:
   • Click the “Settings” icon on the right-hand side.
2. Change Button Size:
   • Adjust the button size relative to the column width.
3. Add Icons:
   • Include icons within the button if desired.
4. Modify Styles:
   • Switch to the “Styles” tab to change the button’s appearance.
   • For example, adjust the button’s text color (e.g., change to white).
5. Customize Fonts and Appearance:
   • Use the options on the right-hand side to edit fonts, colors, and overall appearance.

Step 6: Finalize and Save

1. Review the Design:
   • Check the button’s position, link functionality, and appearance.
2. Save Your Work:
   • Ensure all changes are saved.