CTAs

CTAs, or calls to action, allow you to direct a user to do something else after reading your content. If you’re doing content marketing right, you should be inserting CTAs regularly to make sure you’re building a relationship with readers and, hopefully, turning them into customers.

Examples

Side CTA

How to make side CTA

Full-width CTA with photo on the background

<!--CTA 01 (grids, 4 cols)-->
<div data-ce-tag="grid" class="stk-snippets-cta-01 stk-grid stk-layout__overhangs_both">
  <div data-ce-tag="grid-col" data-col-width="1" class="stk-grid-col stk-grid-col_empty">
    <p class="stk-reset ce-element--empty stk-element_no-text"></p>
  </div>
  <div data-ce-tag="grid-col" data-col-width="2" class="stk-grid-col valign-middle stk-grid-col_last stk-theme_00000__pad_ver_3">
    <h2 class="stk-reset stk-theme_00000__style_large_header align-center stk-theme_00000__color_4507_custom_color_1 stk-theme_00000__mb_05">Solomon R. Guggenheim Museum</h2>
    <p class="stk-reset align-center stk-theme_00000__color_4507_custom_color_1">1071 Fifth Avenue at 89th Street, Manhattan, New York City</p>
    <a data-stk-button="1" class="stk-reset stk-theme_00000__stk-btn_basic align-center" href="https://example.com/">Visit</a>
  </div>
  <div data-col-width="1" class="stk-grid-col stk-grid-col_empty" data-ce-tag="grid-col">
    <p class="stk-reset ce-element--empty stk-element_no-text"></p>
  </div>
</div>

<div data-ce-tag="grid" class="stk-snippets-cta-01 stk-grid stk-layout__overhangs_both">
  <div data-ce-tag="grid-col" data-col-width="1" class="stk-grid-col stk-grid-col_empty">
    <p class="stk-reset ce-element--empty stk-element_no-text"></p>
  </div>
  <div data-ce-tag="grid-col" data-col-width="4" class="stk-grid-col valign-middle stk-grid-col_last stk-theme_00000__pad_ver_3">
    <h2 class="stk-reset stk-theme_00000__style_large_header align-center stk-theme_00000__color_4507_custom_color_1 stk-theme_00000__mb_05">Solomon R. Guggenheim Museum</h2>
    <p class="stk-reset align-center stk-theme_00000__color_4507_custom_color_1">1071 Fifth Avenue at 89th Street, Manhattan, New York City</p>
    <a data-stk-button="1" class="stk-reset stk-theme_00000__stk-btn_basic align-center" href="https://example.com/">Visit</a>
  </div>
  <div data-col-width="1" class="stk-grid-col stk-grid-col_empty" data-ce-tag="grid-col">
    <p class="stk-reset ce-element--empty stk-element_no-text"></p>
  </div>
</div>

<!--CTA 01 (grids, 10 cols)-->
<div data-ce-tag="grid" class="stk-snippets-cta-01 stk-grid stk-layout__overhangs_both">
  <div data-ce-tag="grid-col" data-col-width="1" class="stk-grid-col stk-grid-col_empty">
    <p class="stk-reset ce-element--empty stk-element_no-text"></p>
  </div>
  <div data-ce-tag="grid-col" data-col-width="8" class="stk-grid-col valign-middle stk-grid-col_last stk-theme_00000__pad_ver_3">
    <h2 class="stk-reset stk-theme_00000__style_large_header align-center stk-theme_00000__color_4507_custom_color_1 stk-theme_00000__mb_05">Solomon R. Guggenheim Museum</h2>
    <p class="stk-reset align-center stk-theme_00000__color_4507_custom_color_1">1071 Fifth Avenue at 89th Street, Manhattan, New York City</p>
    <a data-stk-button="1" class="stk-reset stk-theme_00000__stk-btn_basic align-center" href="https://example.com/">Visit</a>
  </div>
  <div data-col-width="1" class="stk-grid-col stk-grid-col_empty" data-ce-tag="grid-col">
    <p class="stk-reset ce-element--empty stk-element_no-text"></p>
  </div>
</div>

<!--CTA 01 (grids, 12 cols)-->
<div data-ce-tag="grid" class="stk-snippets-cta-01 stk-grid stk-layout__overhangs_both">
  <div data-ce-tag="grid-col" data-col-width="2" class="stk-grid-col stk-grid-col_empty">
    <p class="stk-reset ce-element--empty stk-element_no-text"></p>
  </div>
  <div data-ce-tag="grid-col" data-col-width="8" class="stk-grid-col valign-middle stk-grid-col_last stk-theme_00000__pad_ver_3">
    <h2 class="stk-reset stk-theme_00000__style_large_header align-center stk-theme_00000__color_4507_custom_color_1 stk-theme_00000__mb_05">Solomon R. Guggenheim Museum</h2>
    <p class="stk-reset align-center stk-theme_00000__color_4507_custom_color_1">1071 Fifth Avenue at 89th Street, Manhattan, New York City</p>
    <a data-stk-button="1" class="stk-reset stk-theme_00000__stk-btn_basic align-center" href="https://example.com/">Visit</a>
  </div>
  <div data-col-width="2" class="stk-grid-col stk-grid-col_empty" data-ce-tag="grid-col">
    <p class="stk-reset ce-element--empty stk-element_no-text"></p>
  </div>
</div>

.stk-snippets-cta-01 {
  background-blend-mode: multiply;
  background-color: rgba(0,0,0,.5);
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: cover;
}

.stk-snippets-cta-01 h2,
.stk-snippets-cta-01 h3,
.stk-snippets-cta-01 h4,
.stk-snippets-cta-01 h5,
.stk-snippets-cta-01 p,
.stk-snippets-cta-01 a {
  opacity: .9;
}

Select the code component with the same number of columns as in the grid system of your post.

Replace style id `stk-theme_00000` with yours before adding it to your Style Manager. For more info, please go to the Introduction page.

You can also adjust fade color in the component CSS.

Full-width CTA with side illustration

<!--CTA 02 (grids, 4 cols)-->
<div data-ce-tag="grid" class="stk-snippets-cta-02 stk-grid stk-grid__layout_reverse">
  <div data-ce-tag="grid-col" data-col-width="3" class="stk-grid-col valign-middle align-center-m stk-grid-col_last stk-snippets-css__pt_120px stk-snippets-css__pl_90px stk-snippets-css__pb_120px stk-snippets-css__pl_90px stk-snippets-css__pt_0-m stk-snippets-css__pr_20px-m stk-snippets-css__pl_20px-m">
    <h3 class="stk-reset stk-theme_00000__style_medium_header stk-theme_00000__mb_05">Wanna start asking more of your data?</h3>
    <p class="stk-reset">We can help: <a class="stk-reset" href="https://example.com/">schedule a demo</a> or <a class="stk-reset" href="https://example.com/">start a free trial</a> today</p>
  </div>
  <div data-col-width="1" data-ce-tag="grid-col" class="stk-grid-col align-center-m stk-snippets-css__pr_60px stk-snippets-css__pr_20px-m stk-snippets-css__pl_20px-m">
    <figure data-ce-tag="image-figure" class="stk-reset stk-image-figure stk-theme_00000__mb_0">
      <div data-ce-tag="mask" class="stk-mask"></div>
    </figure>
  </div>
</div>

<div data-ce-tag="grid" class="stk-snippets-cta-02 stk-grid stk-grid__layout_reverse">
  <div data-ce-tag="grid-col" data-col-width="4" class="stk-grid-col valign-middle align-center-m stk-grid-col_last stk-snippets-css__pt_120px stk-snippets-css__pl_90px stk-snippets-css__pb_120px stk-snippets-css__pl_90px stk-snippets-css__pt_0-m stk-snippets-css__pr_20px-m stk-snippets-css__pl_20px-m">
    <h3 class="stk-reset stk-theme_00000__style_medium_header stk-theme_00000__mb_05">Wanna start asking more of your data?</h3>
    <p class="stk-reset">We can help: <a class="stk-reset" href="https://example.com/">schedule a demo</a> or <a class="stk-reset" href="https://example.com/">start a free trial</a> today</p>
  </div>
  <div data-col-width="2" data-ce-tag="grid-col" class="stk-grid-col align-center-m stk-snippets-css__pr_60px stk-snippets-css__pr_20px-m stk-snippets-css__pl_20px-m">
    <figure data-ce-tag="image-figure" class="stk-reset stk-image-figure stk-theme_00000__mb_0">
      <div data-ce-tag="mask" class="stk-mask"></div>
    </figure>
  </div>
</div>

<!--CTA 02 (grids, 10 cols)-->
<div data-ce-tag="grid" class="stk-snippets-cta-02 stk-grid stk-grid__layout_reverse">
  <div data-ce-tag="grid-col" data-col-width="6" class="stk-grid-col valign-middle align-center-m stk-grid-col_last stk-snippets-css__pt_120px stk-snippets-css__pl_90px stk-snippets-css__pb_120px stk-snippets-css__pl_90px stk-snippets-css__pt_0-m stk-snippets-css__pr_20px-m stk-snippets-css__pl_20px-m">
    <h3 class="stk-reset stk-theme_00000__style_medium_header stk-theme_00000__mb_05">Wanna start asking more of your data?</h3>
    <p class="stk-reset">We can help: <a class="stk-reset" href="https://example.com/">schedule a demo</a> or <a class="stk-reset" href="https://example.com/">start a free trial</a> today</p>
  </div>
  <div data-col-width="4" data-ce-tag="grid-col" class="stk-grid-col align-center-m stk-snippets-css__pr_60px stk-snippets-css__pr_20px-m stk-snippets-css__pl_20px-m">
    <figure data-ce-tag="image-figure" class="stk-reset stk-image-figure stk-theme_00000__mb_0">
      <div data-ce-tag="mask" class="stk-mask"></div>
    </figure>
  </div>
</div>

<!--CTA 02 (grids, 12 cols)-->
<div data-ce-tag="grid" class="stk-snippets-cta-02 stk-grid stk-grid__layout_reverse">
  <div data-ce-tag="grid-col" data-col-width="8" class="stk-grid-col valign-middle align-center-m stk-grid-col_last stk-snippets-css__pt_120px stk-snippets-css__pl_90px stk-snippets-css__pb_120px stk-snippets-css__pl_90px stk-snippets-css__pt_0-m stk-snippets-css__pr_20px-m stk-snippets-css__pl_20px-m">
    <h3 class="stk-reset stk-theme_00000__style_medium_header stk-theme_00000__mb_05">Wanna start asking more of your data?</h3>
    <p class="stk-reset">We can help: <a class="stk-reset" href="https://example.com/">schedule a demo</a> or <a class="stk-reset" href="https://example.com/">start a free trial</a> today</p>
  </div>
  <div data-col-width="4" data-ce-tag="grid-col" class="stk-grid-col align-center-m stk-snippets-css__pr_60px stk-snippets-css__pr_20px-m stk-snippets-css__pl_20px-m">
    <figure data-ce-tag="image-figure" class="stk-reset stk-image-figure stk-theme_00000__mb_0">
      <div data-ce-tag="mask" class="stk-mask"></div>
    </figure>
  </div>
</div>

.stk-snippets-css__pt_120px {padding-top: 120px;}
.stk-snippets-css__pr_60px {padding-right: 60px;}
.stk-snippets-css__pb_120px {padding-bottom: 120px;}
.stk-snippets-css__pl_90px {padding-left: 90px;}

@media (min-width: 769px) {
  .stk-snippets-cta-02 {
    background: center bottom / 100% 100% no-repeat url("data:image/svg+xml,%3Csvg fill='none' height='712' width='1024' viewBox='0 0 1024 712' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m0 0 1024 150v372l-1024 150z' fill='%23fff5d3'/%3E%3C/svg%3E%0A");
  }
}

@media (max-width: 768px) {
  .stk-snippets-cta-02 {
    background: center bottom/100% 80% no-repeat url("data:image/svg+xml,%3Csvg fill='none' height='712' width='1024' viewBox='0 0 1024 712' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m0 0 1024 110v492l-1024 110z' fill='%23fff5d3'/%3E%3C/svg%3E%0A");
  }

  .stk-snippets-css__pt_0-m {padding-top: 0;}
  .stk-snippets-css__pr_20px-m {padding-right: 20px;}
  .stk-snippets-css__pl_20px-m {padding-left: 20px;}
}

@at-root {
  :not(#stk):not(.stk) .stk-media-mobile .stk-post .stk-snippets-cta-02 {
    background: center bottom/100% 80% no-repeat url("data:image/svg+xml,%3Csvg fill='none' height='712' width='1024' viewBox='0 0 1024 712' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m0 0 1024 110v492l-1024 110z' fill='%23fff5d3'/%3E%3C/svg%3E%0A");
  }

  :not(#stk):not(.stk) .stk-media-mobile .stk-post .stk-snippets-css__pt_0-m {padding-top: 0;}
  :not(#stk):not(.stk) .stk-media-mobile .stk-post .stk-snippets-css__pr_20px-m {padding-right: 20px;}
  :not(#stk):not(.stk) .stk-media-mobile .stk-post .stk-snippets-css__pl_20px-m {padding-left: 20px;}
}

Select the code component with the same number of columns as in the grid system of your post.

Replace style id `stk-theme_00000` with yours before adding it to your Style Manager. For more info, please go to the Introduction page.

You can also adjust background shape and color in the component CSS.

Content Experience Impact

You know that CTAs are important to help turn your readers into followers or, better yet, paying customers. But in an article full of eye-catching images, animations, pull-quotes, data visualizations, and more, a subtle CTA is going to get overlooked. With the help of components, you can include text of different sizes, buttons, images, background colors, and more so that your CTA just begs to be seen and clicked on.

Dos

Use multiple types of CTAs down the page to catch users who use different scanning and reading patterns. Experiment with options that go in the side column, horizontal CTAS between content sections, and even stylized, immersive CTAs that span the full width of the page.
Make sure your CTA button color has good contrast to your background color so it’s nearly impossible to miss.

Don'ts

Don’t use a generic text like “Learn More” or “Get Started” on your CTA button. Instead, be as specific as possible in explaining what the user should expect by clicking on the button and what the value is for them.

Learn More

“Learn More” Links: You Can Do Better Nielsen Norman Group

A Complete Guide to Content Marketing CTAs Audience Ops

Call for Attention: UI Design Tips on CTA Buttons UX Planet

Extra Inspiration

PreviousBulleted Lists NextRelated Links

Last updated 2 years ago

Was this helpful?