How to Add Links to Buttons Using Spectra Builder

In this guide, you’ll learn how to:

• Add a link to a Call To Action button
• Add a Button block using drag and drop
• Configure links and link behavior for buttons

1. Add a Link to a Spectra Info Box Call To Action Button #

The Info Box block in Spectra includes an optional Call To Action button that can be easily linked.

Step-by-Step Instructions

1. Open your page or post in the WordPress Block Editor.
2. Click the “+” (Add Block) button.
3. Search for Info Box and select the Spectra Info Box block.
4. Click the Info Box to open the Block Settings panel on the right.
5. Scroll to the Call To Action section.
6. Enable Call To Action.
7. Enter the Button Text (for example: Learn More or Get Started).
8. In the Link field, add:
   • A full URL (e.g., https://example.com/services), or
   • An internal page by typing its name and selecting it from the list
9. (Optional) Enable:
   • Open in New Tab
   • Add Nofollow
10. Click Update or Publish to save your changes.

Your Info Box CTA button is now fully clickable and functional.

2. Add a New Spectra Button Block (Drag & Drop) #

Spectra also provides a standalone Button block that you can place anywhere on your page.

Step-by-Step Instructions

1. Open your page or post in the Block Editor.
2. Click the “+” (Add Block) button.
3. Search for Button under the Spectra blocks.
4. Select Spectra Button (not the default WordPress button if you want advanced styling options).
5. The button will be added to your layout instantly.
6. Click inside the button to edit the text.

3. Add a Link to a Spectra Button #

Once the Spectra Button block is added, you can link it using one of the following methods.

Method 1: Toolbar (Quick Method)

1. Select the Spectra Button block.
2. Click the Link icon in the block toolbar.
3. Paste or type the destination URL.
4. Press Enter to apply.

Method 2: Block Settings (Advanced Control)

1. Select the Spectra Button block.
2. Open the Block Settings panel on the right.
3. Locate the Link or Action section.
4. Enter the destination URL.
5. Configure optional settings:
   • Open in new tab
   • Add nofollow
   • Accessibility labels (if available)
6. Click Update or Publish.

Best Practices for CTA Button #

• Use clear, action-oriented text (e.g., Contact Us, Download Now)
• Avoid generic labels like Click Here
• Ensure strong contrast between the button color and background
• For external links, enable Open in New Tab