Skip to main content
< All Topics

Call To Action

The Call To Action (CTA) block is a powerful tool designed to drive conversions, guide visitors, and highlight important actions on your website by combining an eye-catching heading, supporting description, and an interactive action button into one cohesive section.

Overview

Creating compelling calls to action is key to a successful website. The WPMozo Call To Action block offers an all-in-one Gutenberg element that lets you style headers, descriptions, and custom buttons with full typography and alignment controls. You can also customize icons, normal/hover button transitions, and container backgrounds (including gradient overlays) to match your brand styling perfectly.

How to use

  • Click the “+” button to add a new block in the Gutenberg editor.
  • Search for “Call To Action” under the WPMozo category and insert it into your layout.
  • Use the inline text editor to enter your title and description directly.
  • Configure button text, links, target, and icons in the sidebar settings panel.
  • Customize the container layout, colors, borders, and margins under the style tab.

Content settings

  • Title: Enter the main heading text for the CTA block.
  • Description: Add the supporting description copy underneath the heading.
  • Show Button: Toggle to display or hide the main Call-to-Action button.
  • Button Text: Set the text label displayed on the button (e.g., Learn More).
  • Button URL: Enter the link destination for the CTA button.
  • Link Target: Choose whether to open the URL in the same tab or a new window.

Style settings

Title text

Adjust the styling for the main CTA heading.

  • Heading tag: Select the heading level (H1-H6) to maintain correct HTML structure.
  • Alignment and color: Align the title (left, center, right) and select a custom text color.
  • Typography: Adjust the font size, line height, letter spacing, font style, and font weight.

Description text

Style the main description text inside the CTA block.

  • Alignment and color: Set text alignment and choose custom text color.
  • Typography: Control font size, line height, letter spacing, and casing options.

Button settings

Customize the button appearance for default and hover states.

  • Icon customization: Enable a custom icon, choose from the library, set the icon position (before/after text), and optionally show the icon only on hover.
  • Colors and casing: Set custom text and background colors or gradients for both normal and hover states.
  • Borders and sizing: Configure custom border width, border colors, border radius, padding, margins, and container size.
  • Typography: Style the button font size, casing, and weight options.

Container settings

Style the main container holding all the CTA elements.

  • Vertical alignment: Set the vertical alignment of the content inside the container (top, center, bottom).
  • Backgrounds: Choose custom background colors or gradient layouts for the block wrapper.
  • Borders and spacing: Configure block margin, padding, borders, and border radius properties.

Pro Tip: Keep your CTA message short and action-oriented. Using a contrasting background gradient along with a distinct hover effect on your button is highly effective at boosting user click-through rates.