Example page – CTA blocks

This page has examples of CTA blocks.  There is a separate page for the other blocks available in a default style page.

CTA categories

The same set of CTAs can appear on basic pages, on listings pages and in the right-hand column on product pages. Where a CTA can appear is defined by the categories you assign it to.

There are four categories for CTAs. CTAs can be assigned to more than one category.

  • CTAs categorised with Portrait can appear in a ‘three up’ CTA block or in a single cell within a listing.
  • CTAs categorised with Sidebar can appear in the sidebar on a product page
  • CTAs categorised with Landscape can appear in a ‘two up’ CTA block, in a ‘Single-double’ CTA block, and in a double cell within a listing.
  • CTAs categorised with Full width can only appear in a ‘Full width’ CTA block.

CTA types

There are seven types of CTA. There are examples of all six on this page.

  • Icon – ‘info only’
    These can be categorised as either portrait or landscape so that they can appear in any location except full-width blocks.
  • Icon – ‘with link’
    These can be categorised as either portrait or landscape so that they can appear in any location except full-width blocks.
  • Generic card
    Generic cards are optimised for portrait spaces so you should categorise them as such.
  • Background photo
    These can be categorised as either portrait or landscape so that they can appear in any location except full-width blocks.
  • Cut-out photo
    These are optimised for landscape spaces, and you should categorise them as such.
  • Full-width multi-link
    These should always be categorised as full-width only. The image can be a background image or a cut out.
  • Quicklinks
    These are usually 2 or three up in a row, quick links to pages in the site when you may not need an image.

Single doubles are so called because originally they were designed to use up two grid columns on  listings pages

Full width background CTAs and Cut-outs

Get 15% off for you and a friend

Recommend a friend or colleague to Human Givens College and we’ll give you 15% off your next purchase!

Introduce someone new to our training...

and you can both enjoy 15% off a course - and they don't have to be the same one!

Light background full width

An example of a full width cta with a light background image and dark text. If the text is very long what then happens to the image and the buttons?

Full width background call to action with abstract image

Abstract images might work better for these full width options, and dependent on the amount of copy needed as a description.

Example cut out multi-link book

This is an example of a full width cut out CTA using a book image, you can write as much as you want here but the depth is defined by the size of the image, which is 768x768.

Back to top