Call To Action Block

The Call to Action (CTA) block is one of DigiBlocks’ most versatile and powerful blocks, designed to create compelling sections that drive user engagement and conversions. Whether you’re promoting a product, or guiding visitors to take specific actions, this block provides everything you need to create professional and effective call-to-action sections.

Block Overview

The Call to Action block combines rich text content with customizable buttons in a variety of professionally designed layouts. It supports multiple design styles, from simple text-based CTAs to complex split-screen layouts with background images, making it suitable for any website design aesthetic.

Adding a Call to Action Block

In the WordPress editor, click the + button to add a new block
Search for “Call to Action” or browse to the DigiBlocks category
Click on the Call to Action block to add it to your page
The block will appear with default content that you can immediately customize

Understanding CTA Styles

The Call to Action block offers nine distinct styles, each designed for different use cases and visual preferences:

Basic Style

The default style presents a clean, centered layout with title, content, and buttons stacked vertically. Perfect for general-purpose CTAs and maintains excellent readability across all devices.

Split Style

Creates a two-column layout with an image on one side and content on the other. Ideal for product promotions, service highlights, or any scenario where visual impact is important. The image can be easily changed through the media library integration.

Cover Style

Displays content over a full-background image with an adjustable overlay. Excellent for hero sections, banner promotions, or when you want maximum visual impact with overlay text.

Box Style

Adds a distinct border and shadow around the entire CTA, creating a card-like appearance that stands out from surrounding content. Works well in content-heavy pages where you need the CTA to be clearly defined.

Modern Style

Features a bold left-side accent line that gives the CTA a contemporary, professional appearance. Perfect for business websites and modern design aesthetics.

Gradient Style

Applies a beautiful gradient background that automatically adjusts text colors for optimal contrast. Great for creating eye-catching CTAs that demand attention.

Minimal Style

Uses subtle styling with a top border accent and clean typography. Ideal for sophisticated designs where you want the CTA to integrate naturally with your content.

Callout Style

Creates a highlighted box with a colored left border, similar to a sidebar callout. Perfect for important announcements or highlighting key information.

Banner Style

Designed to look like a promotional banner with a colored top border. Excellent for announcements, special offers, or time-sensitive promotions.

Configuring Basic Settings

Content Structure

Title Settings:

Add your main headline using the title field
Choose from H1-H6 heading tags for proper SEO structure
Apply rich text formatting like bold and italic
Enable title highlighting to emphasize specific words or phrases

Content Text:

Add supporting text that elaborates on your offer or message
Use the content field for descriptive text that provides context
Keep content concise but informative to maintain user attention

Layout Options:

Toggle Horizontal Layout to display content and buttons side by side
Adjust Content Width to control how much space the content occupies
Set Min Height for consistent vertical spacing across different devices

Button Configuration

The Call to Action block supports multiple buttons, allowing you to offer primary and secondary actions:

Adding Buttons:

Navigate to the Buttons section in the Options tab
Click Add Button to create additional action buttons
Configure each button individually with unique settings

Button Properties:

Button Text: The clickable text displayed on the button
Button URL: The destination link when clicked
Open in new tab: Option to open links in a new browser tab
Add noopener noreferrer: Security attribute for external links
Primary Button: Designates the main call-to-action button
Full Width Button: Makes the button span the full available width

Button Alignment:

Choose from left, center, or right alignment for the button group
Alignment affects how buttons are positioned within their container
On mobile devices, buttons automatically stack vertically for better usability

Styling Your CTA

Color Customization

Text Colors:

Title Color: Controls the main heading color
Text Color: Sets the color for body content
Both support full color picker with opacity controls

Button Colors:

Button Color: Background color for primary buttons
Button Text Color: Text color inside buttons
Individual buttons can override global colors when Custom Colors is enabled

Background Options: The block supports three background types:

Solid Color: Simple background color with opacity support
Image Background: Upload and position background images with overlay controls
Gradient Background: Two-color gradients with automatic color blending

Hover Effects: Configure hover states for enhanced interactivity:

Title and text hover colors
Button hover colors (background and text)
Background hover colors for subtle transitions
Box shadow hover effects for depth

Typography Controls

Title Typography:

Font family selection from available system and Google Fonts
Font size with responsive controls for desktop, tablet, and mobile
Font weight, style, and text transformation options
Line height and letter spacing for fine-tuning readability

Content Typography:

Independent typography controls for body text
Optimized for readability with appropriate line heights
Responsive font sizing ensures legibility on all devices

Button Typography:

Dedicated font controls for button text
Typically uses medium font weight for better clickability perception
Consistent sizing across all buttons in the CTA

Border and Spacing

Border Controls:

Choose from nine border styles including solid, dashed, and dotted
Responsive border width controls for each side
Border radius controls for rounded corners
Border color picker with opacity support

Spacing Options:

Padding: Internal spacing within the CTA block
Margin: External spacing around the CTA block
Button Padding: Internal spacing within buttons
Button Border Radius: Rounded corners for buttons
All spacing controls are fully responsive with device-specific values

Box Shadow Effects

Add depth and visual interest with box shadow controls:

Normal State Shadows:

Horizontal and vertical offset controls
Blur and spread radius adjustments
Shadow color with opacity controls
Inner or outer shadow positioning

Hover State Shadows:

Independent shadow controls for hover effects
Smooth transitions between normal and hover states
Perfect for creating interactive feedback

Advanced Features

Title Highlighting

Create emphasis within your titles using the highlight feature:

Enter the specific text you want to highlight in the Title Highlight field
Choose from highlight types:
- Background: Adds a colored background behind the text
- Text: Changes the text color
- Underline: Adds a colored underline beneath the text
Select the highlight color using the color picker
The highlight automatically applies to matching text in your title

Animation Effects

Enhance user engagement with entrance animations:

Navigate to the Advanced → Animation section
Choose from available animation effects
Use the Preview Animation button to test the effect
Animations trigger when the element comes into view during scrolling

Visibility Controls

Control when your CTA is displayed across different devices:

Device-Specific Visibility:

Hide on Desktop: Prevents display on desktop screens (992px and above)
Hide on Tablet: Hides on tablet devices (768px to 991px)
Hide on Mobile: Conceals on mobile devices (767px and below)

Editor Behavior: Hidden elements appear with reduced opacity in the WordPress editor, allowing you to edit them while understanding they won’t display on the frontend for the specified devices.

Custom HTML and CSS

HTML Anchor:

Add a unique anchor ID for direct linking to the CTA section
Use format: #your-anchor-name in URLs to jump directly to this block
Helpful for single-page websites and long-form content navigation

Additional CSS Classes:

Add custom CSS classes for advanced styling
Separate multiple classes with spaces
Useful for theme-specific styling or custom JavaScript targeting

Style-Specific Features

Split Style Configuration

When using the Split style, additional options become available:

Image Management:

Upload background images through the media library
Images automatically resize and crop to fit the container
Change Image option appears on hover for easy replacement

Layout Controls:

Vertical Align: Position content at top, center, or bottom of the container
Reverse Columns on Mobile: Places image above content on mobile devices
Responsive behavior automatically stacks columns on smaller screens

Cover Style Settings

The Cover style includes specialized background controls:

Overlay Configuration:

Overlay Opacity: Control transparency of the color overlay (0-100%)
Overlay Color: Choose the overlay color with opacity support
Background images remain visible beneath the overlay

Background Positioning:

Background Position: Nine position options for image placement
Background Size: Cover, contain, or auto sizing options
Background Repeat: Control image repetition behavior

Modern Style Customization

The Modern style features an automatic accent line that:

Uses the button color for the accent line
Positions vertically along the left side
Scales proportionally with content height
Adds sophisticated visual hierarchy

Responsive Design

Mobile Optimization

Automatic Responsive Behavior:

Content automatically reflows for smaller screens
Typography scales appropriately for readability
Buttons stack vertically and expand to full width
Split layouts convert to single-column stacks

Device-Specific Controls:

Padding and margin values can be set independently for desktop, tablet, and mobile
Typography sizing adjusts per device for optimal reading experience
Border and spacing controls maintain visual consistency across screen sizes

Tablet Considerations

Medium Screen Optimization:

Tablet-specific settings bridge the gap between desktop and mobile
Content remains readable without overwhelming smaller screens
Button layouts adapt gracefully to available space

Best Practices

Content Strategy

Title Effectiveness:

Keep titles concise and action-oriented
Use power words that encourage action (Discover, Get, Start, Join)
Ensure titles clearly communicate the value proposition

Supporting Content:

Limit body text to 1-2 sentences for better conversion
Focus on benefits rather than features
Create urgency when appropriate (limited time, exclusive access)

Button Text Optimization:

Use specific action verbs (Download, Subscribe, Get Started)
Avoid generic terms like “Click Here” or “Submit”
Make button text match the promised outcome

Design Guidelines

Color Selection:

Ensure sufficient contrast between text and background colors
Use brand colors consistently across CTAs
Consider color psychology (blue for trust, red for urgency, green for growth)

Visual Hierarchy:

Make primary buttons more prominent than secondary actions
Use whitespace effectively to guide user attention
Maintain consistent styling across multiple CTAs on the same page

Mobile Considerations:

Test CTAs on actual mobile devices, not just browser resize
Ensure buttons are large enough for touch interaction (minimum 44px height)
Optimize loading times for images used in Split and Cover styles

Performance Optimization