Button Block

The Button block creates clickable call-to-action buttons in your email templates. Buttons are essential for driving user actions like “View Order”, “Complete Registration”, or “Download Now”.

Adding a Button Block

1. While editing your email template, click the “+” button to add a new block
2. Search for “Button” or find it in the “Design” category
3. Click to insert the block

Button Settings

Button Text

Enter the text that appears on the button. This should be a clear, action-oriented phrase.

Examples:

• “View Order”
• “Complete Registration”
• “Download Now”
• “Shop Now”

Link URL

Set the destination URL when the button is clicked. You can:

• Enter a direct URL (e.g., https://example.com/order)
• Use merge tags to create dynamic links (e.g., {order_url})
• Link to WordPress pages or posts

Link Settings

• Open in New Tab: Choose whether the link opens in a new browser tab/window
• Link Rel: Set relationship attributes for the link (e.g., nofollow, noopener)

Alignment

Control how the button is aligned within its container:

• Left: Button aligns to the left
• Center: Button aligns to the center (default)
• Right: Button aligns to the right

Colors and Styling

Background Color

Set the button’s background color. Choose from:

• Preset color palette
• Custom colors using the color picker
• Gradient backgrounds

Text Color

Set the color of the button text. Ensure sufficient contrast with the background color for readability.

Typography

Customize the button text appearance:

• Font Size: Control the size of the button text
• Font Family: Choose a font family
• Font Weight: Make text bold or regular
• Font Style: Apply italic styling
• Text Transform: Uppercase, lowercase, or capitalize
• Text Decoration: Add underline or other decorations
• Letter Spacing: Adjust spacing between letters
• Line Height: Control vertical spacing

Borders

Add borders to your button:

• Border Color: Choose a border color
• Border Width: Set the thickness of the border
• Border Style: Solid, dashed, dotted, etc.
• Border Radius: Round the corners of the button

Spacing

Padding

Add internal spacing inside the button. This creates space between the button text and the button edges, making the button larger and easier to click.

Button Width

Control the width of the button:

• Auto: Button width adjusts to fit the text
• Full Width: Button spans the full width of the container
• Custom Width: Set a specific width value

Best Practices

1. Clear Call-to-Action: Use action-oriented text that clearly communicates what happens when clicked
2. High Contrast: Ensure button text has sufficient contrast with the background for accessibility
3. Adequate Size: Make buttons large enough to be easily clickable on mobile devices
4. Strategic Placement: Place buttons prominently where users expect them
5. Test Links: Always test button links before sending emails
6. Use Merge Tags: Leverage merge tags for dynamic links (e.g., order URLs, user-specific pages)
7. Mobile-Friendly: Buttons should be at least 44×44 pixels for easy mobile tapping

Examples

Example 1: Primary CTA Button

Goal: Create a prominent “View Order” button

• Text: “View Order”
• Background Color: Brand primary color (e.g., blue)
• Text Color: White
• Alignment: Center
• Padding: Generous (e.g., 15px top/bottom, 30px left/right)
• Border Radius: 5px
• Font Weight: Bold

Example 2: Secondary Button

Goal: Create a less prominent secondary action button

• Text: “View Account”
• Background Color: Light gray or transparent
• Text Color: Dark gray
• Border: 1px solid gray
• Alignment: Center
• Border Radius: 3px

Example 3: Full-Width Mobile Button

Goal: Create a mobile-optimized full-width button

• Text: “Shop Now”
• Width: Full width
• Background Color: Brand color
• Text Color: White
• Padding: 18px vertical, 20px horizontal
• Font Size: 16px
• Font Weight: Bold

Troubleshooting

Button Not Clickable

• Verify the link URL is properly set
• Check that the URL is valid and accessible
• Test the link in a browser before sending

Button Not Displaying Correctly

• Some email clients have limited CSS support
• Test in multiple email clients (Gmail, Outlook, Apple Mail)
• Avoid complex gradients or effects that may not render
• Use web-safe fonts or system fonts

Merge Tags Not Working

• Ensure merge tags are properly formatted (e.g., {order_url})
• Verify the data source is configured correctly
• Test with actual data to confirm merge tags resolve correctly

Mobile Display Issues

• Use adequate padding for touch targets
• Consider full-width buttons on mobile
• Test on actual mobile devices when possible
• Avoid very small button sizes