※ver20221122以上
Let' TRY
新規受講生募集開始
CTAを意識した効果的な誘導ボタンだって作れます
CTA（コールトゥーアクション）と呼ばれるユーザーの行動喚起を促すボタンもAFFINGERならこんな風に作れます。
資料請求は無料です
上部の例は「グループブロック」「カラムブロック」「カバーブロック」「カスタムボタン」を基本として作成されています。
コード紹介
下部コードをカスタムHTMLブロックにコピーして、ブロックに変換することでサンプル例を作成できます。
コードを確認する
<!-- wp:group {"style":{"spacing":{"padding":{"top":"0","right":"0","bottom":"0","left":"0"}}},"className":"has-st-border has-st-solid-border has-st-medium-border-width gap-0 colum-2-p15","layout":{"type":"constrained"},"stBorderStyle":"solid"} -->
<div class="wp-block-group has-st-border has-st-solid-border has-st-medium-border-width gap-0 colum-2-p15" style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0"><!-- wp:columns {"className":"gap-0"} -->
<div class="wp-block-columns gap-0"><!-- wp:column {"width":"33.33%"} -->
<div class="wp-block-column" style="flex-basis:33.33%"><!-- wp:cover {"url":"https://ul.h3z.jp/yUGk17NX.png","id":18766,"dimRatio":0,"minHeight":200,"isDark":false} -->
<div class="wp-block-cover is-light" style="min-height:200px"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-0 has-background-dim"></span><img class="wp-block-cover__image-background wp-image-18766" alt="" src="https://ul.h3z.jp/yUGk17NX.png" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"タイトルを入力...","fontSize":"large"} -->
<p class="has-text-align-center has-large-font-size"><span class="huto"><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-white-color">Let' TRY</mark></span></p>
<!-- /wp:paragraph -->
<!-- wp:paragraph {"align":"center","textColor":"white"} -->
<p class="has-text-align-center has-white-color has-text-color">新規受講生募集開始</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:cover --></div>
<!-- /wp:column -->
<!-- wp:column {"width":"66.66%","style":{"spacing":{"padding":{"top":"var:preset|spacing|30","right":"var:preset|spacing|30","bottom":"var:preset|spacing|30","left":"var:preset|spacing|30"}}}} -->
<div class="wp-block-column" style="padding-top:var(--wp--preset--spacing--30);padding-right:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30);padding-left:var(--wp--preset--spacing--30);flex-basis:66.66%"><!-- wp:heading {"level":4,"className":"is-style-st-heading-custom-diagonal"} -->
<h4 class="is-style-st-heading-custom-diagonal">CTAを意識した効果的な誘導ボタンだって作れます</h4>
<!-- /wp:heading -->
<!-- wp:paragraph -->
<p>CTA（コールトゥーアクション）と呼ばれる<span class="st-mymarker-s">ユーザーの行動喚起を促すボタン</span>もAFFINGERならこんな風に作れます。</p>
<!-- /wp:paragraph -->
<!-- wp:st-blocks/my-button {"selectedIcon":"st-svg-file-text-o","textFontSize":"90","customBackgroundGradient":"linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)","width":90,"reflection":true,"className":"mb10"} -->
<p class="wp-block-st-blocks-my-button st-mybtn st-reflection st-mybtn-noborder mb10" style="min-width:90%;background:linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%);border-width:0px;border-radius:60px;font-size:90%;font-weight:bold;box-shadow:none"><a href="#" style="font-weight:bold"><i class="st-fa st-svg-file-text-o st-css-no" aria-hidden=""></i>今すぐ資料請求<i class="st-fa st-svg-after st-svg-chevron-right st-css-no" aria-hidden=""></i></a></p>
<!-- /wp:st-blocks/my-button -->
<!-- wp:paragraph {"align":"center","fontSize":"small"} -->
<p class="has-text-align-center has-small-font-size">資料請求は無料です</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group -->
