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 :
Anchor configuration
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="https://happy-academy.plezi.co/fr/"
❗️❗️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
Finalize
Now save the changes you've made to your landing page.
Publish the landing page.