# 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**

![](https://968208232-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4s6jR1oBjS5hb7lopO%2F-ME2x6CLT8ZGlKGh0UIw%2F-ME34aG9MHz0XTWoIiD1%2FGroup%2075.png?alt=media\&token=f0b5afd2-dc24-4af1-92d1-8ce896fc2c66)

#### How to make s**ide CTA**

{% embed url="<https://drive.google.com/file/d/10-gXylNoYRjKEqeOUNSwZTmynsCjwlq9/view?usp=sharing>" %}

### Full-**width CTA** with photo on the background

![](https://968208232-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4s6jR1oBjS5hb7lopO%2F-ME2x6CLT8ZGlKGh0UIw%2F-ME34aG8ceVdyRtVgwVM%2FGroup%2076.png?alt=media\&token=8fa846d0-53f1-4feb-aa80-6b116998ac5f)

{% tabs %}
{% tab title="4 columns grid HTML" %}

```markup
<!--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>
```

{% endtab %}

{% tab title="6 columns grid HTML" %}

```markup
<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>
```

{% endtab %}

{% tab title="10 columns grid HTML" %}

```markup
<!--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>
```

{% endtab %}

{% tab title="12 columns grid HTML" %}

```markup
<!--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>
```

{% endtab %}

{% tab title="CSS" %}

```css
.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;
}
```

{% endtab %}
{% endtabs %}

{% hint style="warning" %}
**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](https://setka.gitbook.io/components-library/getting-started/introduction) page.

You can also adjust fade color in the component CSS.
{% endhint %}

### Full-width CTA with side illustration

![](https://968208232-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4s6jR1oBjS5hb7lopO%2F-ME2x6CLT8ZGlKGh0UIw%2F-ME34aG6XPZTPnLDMjih%2FGroup%2077.png?alt=media\&token=698016e1-bbe7-4fe9-a6c3-92dafc8bfca3)

{% tabs %}
{% tab title="4 columns grid HTML" %}

```markup
<!--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>
```

{% endtab %}

{% tab title="6 columns grid HTML" %}

```markup
<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>
```

{% endtab %}

{% tab title="10 columns grid HTML" %}

```markup
<!--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>
```

{% endtab %}

{% tab title="12 columns grid HTML" %}

```markup
<!--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>
```

{% endtab %}

{% tab title="CSS" %}

```css
.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;}
}

```

{% endtab %}
{% endtabs %}

{% hint style="warning" %}
**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](https://setka.gitbook.io/components-library/getting-started/introduction) page.

You can also adjust background shape and color in the component CSS.
{% endhint %}

## **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.

{% hint style="success" %}

### **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.&#x20;
  {% endhint %}

{% hint style="danger" %}

### **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.
{% endhint %}

## **Learn More**

[**“Learn More” Links: You Can Do Better**](https://www.nngroup.com/articles/learn-more-links/)\
\&#xNAN;*Nielsen Norman Group*

[**A Complete Guide to Content Marketing CTAs**](https://audienceops.com/complete-guide-content-marketing-ctas)\
\&#xNAN;*Audience Ops*

[**Call for Attention: UI Design Tips on CTA Buttons**](https://uxplanet.org/call-for-attention-ui-design-tips-on-cta-buttons-5239413aded2)\
\&#xNAN;*UX Planet*

## **Extra Inspiration**

![](https://968208232-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4s6jR1oBjS5hb7lopO%2F-MG7r8j7GiPT49_GTyUA%2F-MG7rHIN6mzZqO219GUX%2FScreen%20Shot%202020-08-10%20at%201.02.16%20PM.png?alt=media\&token=db93f5a5-b69e-4235-8606-7c2571b7e449)

![](https://968208232-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4s6jR1oBjS5hb7lopO%2F-MG7r8j7GiPT49_GTyUA%2F-MG7roZQQ2qaRD7nHtGO%2Fmiro3.png?alt=media\&token=c4161a54-a8a6-444e-9b93-8b626282fb6b)

![](https://968208232-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4s6jR1oBjS5hb7lopO%2F-MG7r8j7GiPT49_GTyUA%2F-MG7rsKa5JYRsbsGPrX3%2Fmiro2.png?alt=media\&token=5d0301fa-8d58-4a4f-a50b-af07fde45543)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://setka.gitbook.io/components-library/engagement-and-sales/ctas.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.