Buttons Block

Content Editing
Buttons block

Overview

The Buttons block allows you to add interactive call-to-action elements to your content. Our theme includes custom styling and variations to ensure buttons match your brand and work effectively across different backgrounds.

Adding a Button

  1. In the WordPress block editor, click the “+” icon to add a new block
  2. Search for “Button” or find it in the “Design” category
  3. Select the “Button” block

Basic Customization

  • Text: Click on the button to edit the text
  • Link: Use the toolbar to add a URL or select a page from your site
  • Open in new tab: Enable this option in the toolbar for external links

Button Variations

Our theme includes the following button styles:

Default Button

  • Green gradient background
  • Blue text
  • Hover effect: Blue background with white text

Outline Button

  • Transparent background with border
  • Blue text
  • Hover effect: Blue background with white text

Dark Background Button

  • Green gradient background
  • Blue text
  • Hover effect: Orange gradient background
  • Perfect for use on dark or colorful backgrounds

How to Apply Button Variations

  1. Select your button block
  2. Open the block settings sidebar (right panel)
  3. Look for the “Styles” section
  4. Choose either “Default”, “Outline”, or “Dark Background”

Button Block Settings

Additional options in the sidebar include:

  • Typography: Change font size, weight, and other text properties
  • Border: Adjust border radius for rounded corners
  • Dimensions: Control button padding and spacing
  • Link Settings: Make the entire button clickable or just the text

Button Placement

  • Add multiple buttons in a row with the “Buttons” block
  • Control spacing between buttons in the block settings
  • Align buttons left, center, or right using the alignment toolbar options

Best Practices

  • Use clear, action-oriented text (e.g., “Download Guide” instead of “Click Here”)
  • Maintain consistent button styles throughout your site
  • Ensure sufficient contrast between button text and background
  • Use the “Dark Background” variation when placing buttons on dark-colored sections

By following these guidelines, you’ll create effective and visually appealing call-to-action buttons that enhance user experience and engagement on your website.