CTA (Call to Action) Layouts

Call to action layout

A Call to Action (CTA) is a critical component of digital marketing and website design, strategically placed to drive user engagement and conversions.

Typically, a CTA includes compelling, action-oriented text like “Buy Now,” “Sign Up,” or “Learn More,” often supported by visual elements such as buttons or banners that stand out on the page.

Effective CTAs are designed with clear, concise language and persuasive messaging that addresses the user’s needs or desires, making it easy for visitors to take the next step.

Additionally, CTAs are often accompanied by incentives, like discounts or free trials, to enhance their attractiveness and effectiveness.

Properly placed and well-designed CTAs can significantly increase the overall conversion rate and contribute to the success of marketing campaigns and business objectives.

On this page, you’ll find a variety of CTA designs, each tailored to different purposes and styles.

Feel free to explore the examples below and find the perfect CTA design that fits your project’s requirements.

Section 1

This section allows a user to subscribe to a newsletter. Newsletters allow businesses to maintain regular contact with their customers, keeping them informed about new products, services, promotions, and company news.

CTA image mobile sized

The mobile view

CTA image for desktops

The desktop view

Mobile View:

  • A background image spans the width of the screen.
  • The section content comprises a headline, title, description and up to two buttons.
  • The content is arranged vertically.

Desktop View:

  • A background image spans the width of the screen.
  • The section content comprises a headline, title, description and up to two buttons.
  • The content is arranged aligned with the left edge of the main content area.

Please Note:

  • The background image will be displayed at different aspect ratios on desktop and mobile. So parts of it will be cropped out, the image needs to be considered for this effect.
  • There needs to be sufficient contrast between the text and image, in this case a semi transparent layer was placed over the image to achieve sufficient contrast.

View in a browser:

  • Please click the button to see the page section in a browser, scroll down to find the correct section.
  • Try narrowing the browser window to see section in mobile view.
View in a Browser

Section 2

This section provides contact details via a phone number and button to a form.

a phone call with a yellow phone and a yellow circle

The mobile view

a yellow circle with a black background with white text

The desktop view

Notes

  • Comprises a super title, title, icon, with a question and phone number.
  • A button is provided to request a free quote.

View in a browser:

  • Please click the button to see the page section in a browser, scroll down to find the correct section.
  • Try narrowing the browser window to see section in mobile view.

View in a Browser

Section 3

Please note that so called hero images (the large prominent banner image at the top of a webpage) can be used as CTAs. We’ve put an example here but please see also the hero image patterns.

View Hero Image Layouts
Hero image for mobile

The mobile view

Hero image for desktop

The desktop view

Mobile View:

  • A background image spans the width of the screen.
  • The section content comprises a headline, title, description and up to two buttons.
  • The content is arranged vertically.

Desktop View:

  • A background image spans the width of the screen.
  • The section content comprises a headline, title, description and up to two buttons.
  • The content is arranged aligned with the left edge of the main content area.

Please Note:

  • The background image will be displayed at different aspect ratios on desktop and mobile. So parts of it will be cropped out, the image needs to be considered for this effect.
  • There needs to be sufficient contrast between the text and image, in this case a semi transparent layer was placed over the image to achieve sufficient contrast.

View in a browser:

  • Please click the button to see the page section in a browser, scroll down to find the correct section.
  • Try narrowing the browser window to see section in mobile view.
View in a Browser