CALL TO ACTION (CTA)
Video CTA Section
A clean and conversion-focused Video CTA section that lets you highlight a demo, tutorial, or promo video alongside a strong call-to-action. Perfect for onboarding, product demos, or showcasing key features in under a minute.
See How It Works in Just 60 Seconds
Watch the quick demo and discover how easily you can achieve [your benefit here] with WordPress.
Prefer reading? See the full guide.
Pattern Markup
<!-- wp:group {"style":{"spacing":{"padding":{"top":"56px","right":"24px","bottom":"56px","left":"24px"}},"border":{"radius":"18px"},"color":{"background":"#f6f7fb"}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group has-background" style="border-radius:18px;background-color:#f6f7fb;padding-top:56px;padding-right:24px;padding-bottom:56px;padding-left:24px"><!-- wp:group {"align":"wide","layout":{"type":"constrained"}} -->
<div class="wp-block-group alignwide"><!-- wp:columns {"verticalAlignment":"center"} -->
<div class="wp-block-columns are-vertically-aligned-center"><!-- wp:column {"verticalAlignment":"center"} -->
<div class="wp-block-column is-vertically-aligned-center"><!-- wp:ub/advanced-video {"channelDetails":{"kind":"youtube#channel","etag":"lPij3S0HTTAp_GCt14jH8zzlQZ0","id":"UCxykRl62bcPmukp8aXtpjGQ","snippet":{"title":"Ultimate Blocks","description":"","customUrl":"@ultimateblockswp","publishedAt":"2018-05-16T06:42:24Z","thumbnails":{"default":{"url":"https://yt3.ggpht.com/BcZXeTbTjL-6BzY_keOwzVIVBKJ2pLDBhXruCWlIu1FghxbvRqUgLMDsNB8DVbhric3v359o=s88-c-k-c0x00ffffff-no-rj","width":88,"height":88},"medium":{"url":"https://yt3.ggpht.com/BcZXeTbTjL-6BzY_keOwzVIVBKJ2pLDBhXruCWlIu1FghxbvRqUgLMDsNB8DVbhric3v359o=s240-c-k-c0x00ffffff-no-rj","width":240,"height":240},"high":{"url":"https://yt3.ggpht.com/BcZXeTbTjL-6BzY_keOwzVIVBKJ2pLDBhXruCWlIu1FghxbvRqUgLMDsNB8DVbhric3v359o=s800-c-k-c0x00ffffff-no-rj","width":800,"height":800}},"localized":{"title":"Ultimate Blocks","description":""},"country":"US"}},"blockID":"8c7ae689-a4e9-405a-9d12-e4665470e0d8","url":"https://www.youtube.com/watch?v=gHLLdoIl8XE","videoSource":"youtube","videoEmbedCode":"\u003ciframe width=\u00221280\u0022 height=\u0022720\u0022 src=\u0022//www.youtube.com/embed/gHLLdoIl8XE\u0022 frameborder=\u00220\u0022 allow=\u0022accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\u0022 referrerpolicy=\u0022strict-origin-when-cross-origin\u0022 allowfullscreen\u003e\u003c/iframe\u003e","videoLength":83,"origWidth":1280,"origHeight":720,"shadow":[{"angle":151,"radius":2,"color":"#9a9a9a","transparency":8,"blur":2,"spread":2}],"channelId":"UCxykRl62bcPmukp8aXtpjGQ","borderRadius":{"topLeft":"0px","topRight":"0px","bottomLeft":"0px","bottomRight":"0px"},"border":{"style":"none","width":"0px"},"isBorderComponentChanged":true,"isResponsiveSettingsRemoved":true} /--></div>
<!-- /wp:column -->
<!-- wp:column {"verticalAlignment":"center"} -->
<div class="wp-block-column is-vertically-aligned-center"><!-- wp:heading {"style":{"typography":{"fontSize":"36px","lineHeight":"1.2"}}} -->
<h2 class="wp-block-heading" style="font-size:36px;line-height:1.2"><strong>See How It Works in Just 60 Seconds</strong></h2>
<!-- /wp:heading -->
<!-- wp:paragraph {"style":{"typography":{"fontSize":"18px"},"color":{"text":"#565656"}}} -->
<p class="has-text-color" style="color:#565656;font-size:18px">Watch the quick demo and discover how easily you can achieve <em>[your benefit here]</em> with WordPress.</p>
<!-- /wp:paragraph -->
<!-- wp:buttons {"layout":{"type":"flex","justifyContent":"left"}} -->
<div class="wp-block-buttons"><!-- wp:button {"textColor":"background","style":{"border":{"radius":"12px"},"spacing":{"padding":{"top":"14px","right":"22px","bottom":"14px","left":"22px"}},"typography":{"fontSize":"16px","fontWeight":"700","fontStyle":"normal"},"color":{"background":"#d20a4e"}}} -->
<div class="wp-block-button"><a class="wp-block-button__link has-background-color has-text-color has-background has-custom-font-size wp-element-button" href="#your-cta-link" style="border-radius:12px;background-color:#d20a4e;padding-top:14px;padding-right:22px;padding-bottom:14px;padding-left:22px;font-size:16px;font-style:normal;font-weight:700">Get Started Now</a></div>
<!-- /wp:button -->
<!-- wp:button {"textColor":"background","className":"is-style-outline","style":{"border":{"radius":"12px"},"spacing":{"padding":{"top":"14px","right":"22px","bottom":"14px","left":"22px"}},"typography":{"fontSize":"16px","fontWeight":"700","fontStyle":"normal"}}} -->
<div class="wp-block-button is-style-outline"><a class="wp-block-button__link has-background-color has-text-color has-custom-font-size wp-element-button" style="border-radius:12px;padding-top:14px;padding-right:22px;padding-bottom:14px;padding-left:22px;font-size:16px;font-style:normal;font-weight:700"><strong>Learn More</strong></a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->
<!-- wp:paragraph {"style":{"typography":{"fontSize":"14px"}},"textColor":"muted"} -->
<p class="has-muted-color has-text-color" style="font-size:14px">Prefer reading? <a href="#learn-more">See the full guide</a>.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->How to Use This Pattern
Simply copy the pattern and paste it to the editor.