All Collections
Landing Pages
Let's start !
How do you add a CTA that links to the top of a landing page?
How do you add a CTA that links to the top of a landing page?
Florent avatar
Written by Florent
Updated over a week ago

The primary functionality of a landing page is the submission of a form by your visitor, which explains the absence of the CTA block in the editor.

Here's how to integrate a CTA on your landing pages.

In this article we will look at :

Integrating code into an HTML block

1 - Select the HTML block and integrate it into your landing page

2 - Integrating the code into the HTML block

  • Copy this code

<a href="lien" style="padding: 8px 14px; background: rgb(42, 219, 119); color: rgb(255, 255, 255); font-size: 16px; font-weight:bold; text-decoration:none; font-family:Arial, sans-serif; text-transform: uppercase; border-radius: 55px; width: 300px; display:block; margin:0 auto; margin-top: 0px; margin-bottom: 0px; text-align:center;"> Tapez votre texte ici!</a>
  • Delete existing default code and paste new code

CTA layout

We propose two levels of CTA customization: a "simple" modification to manage the basic elements of your layout (Option 1), and an "advanced" modification offering more possibilities in terms of customization, but for which CSS knowledge may be required (Option 2).

1 - Simple formatting

  • Below are the basic formatting properties of your CTA :

  • Color modification

The numbers for modifying colors are indicated above in RGB. To find the value of your color, you can use the Google color selector, or you can indicate these colors in hexadecimal.

In the code, you'll need to indicate the value as follows :

  • Text modification

Replace "Type your text here!" in the code with the desired wording for your CTA.

  • Margin management

To manage the spacing between the CTA and the elements above and below it, you need to specify a value in pixels after the two following properties: margin-top and margin-bottom.

For example, for a margin of 30 pixels, the code should be configured as follows :

2 - Advanced formatting

You will find a list of all the CSS properties of your CTA and their technical explanations :

  • Link = link of the page to which the CTA should redirect

  • Padding = Inner margin between the edge of the CTA and the text, the value must be indicated in pixels (8 left inner margin, 14 right inner margin)

  • Background = Background color of the CTA (in the example it's green) Can be indicated in rgb value or hexadecimal.

  • Color = CTA text color. Can be set to rgb or hexadecimal.

  • Font-size = Text font size (value in px).

  • Font-weight = Font style (customer to check font weight possibilities).

  • Text-decoration = Add decoration to text (underlining, strikethrough etc.)

  • Font-family = Font type. Please note that the interpretation of certain fonts may not be read by certain browsers.

  • Text-transform = Text break (in the example it's MAJ)

  • Border-radius = degree of rounding of CTA border

  • Width = Overall width of CTA in px (in the example 300px)

  • Display = CTA display mode (this property is not intended to be modified)

  • Margin = CTA margin value in pixels, 0 = left margin, auto = right margin

  • Margin-top = CTA top margin

  • Margin-bottom = CTA bottom margin

  • Text-align = Text justification

  • Type your text here! = CTA text

You can also add other CSS rules to customize the CTA, but be careful to respect the code nomenclature (otherwise it won't work).

Configuring your CTA link

1 - Page link configuration

If you want your CTA to redirect your visitor to another page, replace the "link" value in the code with the link to your page, keeping the quotation marks.

Example for a CTA directing the visitor to our Happy Academy home page :

<a href=""

❗️❗️Cette configuration is contrary to good marketing practice: the primary aim of a landing page is to retain the visitor and get them to submit the form. Redirecting them to another page would run counter to this logic.

2 - Setting an anchor

An anchor is a technical element that allows your CTA to link to a specific location (magnet) on your landing page.

  • Code configuration

In your CTA code block, replace the "link" value (after the a href =) with the value you wish to name your anchor with. In this example, we'll call it "magnet".

The code will then begin with :

<a href="magnet"

  • Magnet configuration

Integrate a new HTML block into your landing page where you want your CTA to link (above or below your form block, for example).

Replace the code in the HTML block with the following code :

<p id="magnet"></p>

Then save the block


Now save the changes you've made to your landing page.

Publish the landing page.

Did this answer your question?