Block Pattern: Call to Action With Two Buttons
Adds a centered call-to-action pattern with a heading, a sentence and a main button plus an outline button, for the end of landing and service pages.
Opens WPIDE on
Code
add_action( 'init', function () {
if ( ! function_exists( 'register_block_pattern' ) ) {
return;
}
if ( ! WP_Block_Pattern_Categories_Registry::get_instance()->is_registered( 'wpide-sections' ) ) {
register_block_pattern_category( 'wpide-sections', array( 'label' => 'Site Sections' ) );
}
$content = '<!-- wp:group {"layout":{"type":"constrained"}} --><div class="wp-block-group">'
. '<!-- wp:heading {"textAlign":"center"} --><h2 class="wp-block-heading has-text-align-center">Ready when you are</h2><!-- /wp:heading -->'
. '<!-- wp:paragraph {"align":"center"} --><p class="has-text-align-center">Start your free 14-day trial. No credit card needed.</p><!-- /wp:paragraph -->'
. '<!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center"}} --><div class="wp-block-buttons">'
. '<!-- wp:button --><div class="wp-block-button"><a class="wp-block-button__link wp-element-button" href="#">Start free trial</a></div><!-- /wp:button -->'
. '<!-- wp:button {"className":"is-style-outline"} --><div class="wp-block-button is-style-outline"><a class="wp-block-button__link wp-element-button" href="#">Talk to sales</a></div><!-- /wp:button -->'
. '</div><!-- /wp:buttons --></div><!-- /wp:group -->';
register_block_pattern( 'wpide/cta-two-buttons', array(
'title' => 'Call to action: two buttons',
'description' => 'Centered heading, text and two buttons.',
'categories' => array( 'wpide-sections', 'call-to-action' ),
'keywords' => array( 'cta', 'signup', 'buttons' ),
'content' => $content,
) );
} );
Notes
Set a background color on the Group block after inserting to make the section stand out.
How to add this snippet
- Install WPIDE on your WordPress site (it is free) and open Code Snippets.
- Use snippet above adds it from the library in one click. Or copy the code into a new snippet with the same code type.
- It is added inactive: review the code and settings, then switch it on.