Buttons and CTA

Now that you've seen the main principles of content editing, here are some subtleties that will allow you to customize the user experience of your digital platform, and make it look even more professional.

Calls to action

This expression is used to identify the places / moments where you want the person to act on your site. This ranges from the "read more" link to launching a player, and of course the "buy" button.

However, be careful, reducing the Call to action to a "button" is to miss out on all the creativity that a "call to action" can have!

In the content blocks, we have automatically applied this approach to 3 possible renderings of "labels" (= texts), which can be transformed into "call to action" (= link).

In terms of use :

  1. In the content editor of a block, write the label (= the word or set of words that will be clickable) to be transformed into a call to action
  2. Select the text and click on the icon "insert/modify a link"
  3. In the small window that appears, you can directly copy the URL of the page to which the link will point and click on the blue arrow button, 'Apply'. This creates a "standard" link, without any specific design. You can also type in the first few characters of a word and the tool will search for content containing those letters. You just have to select the right destination in the list before validating the link.
  4. To vary the style of the button, click on the little wheel to the right of the blue button. This opens a pop-up window where you can choose the desired button style ('none,' 'primary' or 'secondary').
  5. In this window you can also select one of the pages on your site from the list, so that the link points to it.
  6. Click on 'Add link' to finish the manipulation.

A primary button, a secondary one, ... what is it?

Three levels of buttons does not only mean 3 different aesthetics, but also and especially 3 levels of importance in the actions requested. Making good use of them plays on the good readability / accessibility of your site.

The visual rendering of the different buttons is linked to the graphic charter of your site, which means that it can vary greatly from one site to another - while keeping the logic of hierarchical importance of the actions.

As its name suggests, the 'primary' button is the most important. It is visually stronger and implies a priority action (placing an order right away for example).

The 'secondary' button is the one that implies a less important action (e.g. consult documentation before placing an order).

Finally, the "none" button does not mean the absence of a button, only the absence of a specific design. It is a standard link, an underlined word or group of words. This type of link does not necessarily require an action, it is there "in case" your visitors want more details on this or that point.