Cet article traite des landing pages (ou pages d’atterrissage) sur votre site WordPress et de la manière dont elles fonctionnent avec l’extension Elementor.
Pourquoi utiliser un page builder comme Divi, Beaver Builder ou bien encore Elementor ? Car un page builder a de nombreux avantages par rapport à votre thème WordPress dès qu’il s’agit de créer rapidement des pages commerciales sans connaître le HTML ou le CSS ! En plus, ses plug-ins sont simples d’utilisation… alors, pourquoi s’en priver ?
Autre point fort : Divi, ou bien encore mon page builder favori Elementor, proposent des fonctionnalités très pratiques comme des formulaires de contact, des intégrations avec Mailchimp, des thèmes et des modèles au design soigné et optimisé pour le marketing… Mieux : la plupart de ces outils sont inclus dans la version gratuite d’Elementor !
Mais revenons au thème qui nous préoccupe sans trop parler d’outils pour le moment :
Attirer du trafic naturel vers son blog WordPress prend du temps, et payer pour du trafic coûte cher. Fort de ce constat, il est indispensable d’optimiser son site pour booster ses conversions.
D’après CyberCité, vous pouvez améliorer vos conversions avec un résultat x2 et jusqu’à x10 après la mise en place de landing pages.
De quoi faire réfléchir, non ?
C’est vrai qu’on part de loin, car, non, votre page produit WooCommerce n’est pas une landing page !
Idem pour votre page d’accueil ou encore votre meilleur article de blog.
C’est souvent la première erreur, et elle est de taille, car en moyenne une page classique a un taux de transformation qui se situe aux alentours de 1 %. Pas très bon pour booster nos conversions, ça…
Alors, comment améliorer cela et atteindre jusqu’à x10 ?
Tout d’abord, une petite définition de ce qu’est une page d’atterrissage s’impose :
C’est une page destinée à atteindre un objectif de conversion. Par exemple : le téléchargement d’un PDF, la soumission d’un formulaire de contact ou de devis, l’inscription à un essai, un appel téléphonique, une réservation, etc.
C’est la première page de contact du visiteur qui accède depuis un email, un lien sponsorisé via AdWords, le scan d’un QR code ou une bannière promotionnelle, par exemple.
Faire cela dans les règles de l’art ne s’improvise pas : il y a plusieurs règles à respecter.
Comment optimiser sa page d’atterrissage avec le plug-in Elementor ?
Deux règles d’or :
- Une page = un objectif
En effet, multiplier les objectifs (et les messages) diminuera l’efficacité de votre page et rendra la lecture de votre rapport plus complexe.
Par exemple :
Si j’ai trois actions différentes, je vais devoir calculer lequel des trois boutons convertit le plus sur le nombre de visites total de ma landing page.
Sans compter que le message et son contenu deviendront plus complexes à appréhender pour votre prospect. L’autre règle d’or va d’ailleurs dans ce sens :
- Diminuer le plus possible les distractions, attirer l’attention vers ce qui est important.
Le premier réflexe qu’on devrait avoir est de supprimer (presque) tous les liens qui n’ont rien à voir avec l’objectif visé, pour mieux analyser nos rapports et « guider » nos utilisateurs vers l’objectif voulu. Je dis ici « presque » tous les liens, car même si vous supprimez les liens de votre menu, n’oubliez pas quand même les liens légaux vers vos conditions générales de vente ou votre politique de confidentialité des données.
Quelques bonnes pratiques
- Soignez le design : utiliser des repères visuels et directionnels pour attirer l’attention. Attention à ne pas surcharger d’images non plus. Souvent, des flèches directionnelles et un visuel du produit soigné feront l’affaire.
- Pas de page parfaite dès le départ : il faut l’optimiser. Sans cesse.
- Votre page doit se charger vite, très vite, car les visiteurs sont impatients et quittent rapidement une page trop longue à charger ! (Tablez sur un maximum de deux secondes pour l’affichage de votre page.)
- Il faut que le contenu s’adapte à l’appareil (device en anglais) qui consulte le site. En effet, la consultation sur mobile explose, il faut en tenir compte !
Je vous conseille de regarder cette vidéo pour adapter son menu aux mobiles et une série plus longue dans lequel je développe pas mal de bidouilles concernant le responsive (c’est le nom d’une des techniques qui permet d’être consultable partout).
- Mettre en forme de façon structurée (abuser des listes à puces et des tableaux de prix pour faciliter la lecture).
- Répéter les sections importantes telles que la promesse, les « plus » produit et bien sûr votre appel à l’action.
- Avoir un CTA (le call to action ou « appel à l’action ») bien visible.
- Placer votre CTA au-dessus de la ligne de flottaison (Voir plus bas dans cet article une astuce Elementor dédiée).
La ligne de flottaison, kézako ?
Petite définition de definitions-marketing.com
La ligne de flottaison est une ligne virtuelle en dessous de laquelle le contenu d’une page Internet n’apparaît plus à l’écran. Le contenu situé sous la ligne de flottaison n’est visible que si on utilise la barre de défilement (ascenseur) ou la molette de la souris.
Attention, cette ligne n’est pas au même endroit selon que l’on consulte votre page depuis un PC, un mobile, une tablette – en vertical, en horizontal, à l’envers (heu… non, pas à l’envers !).
Comment Elementor va m’aider ?
C’est très simple, il suffit d’utiliser un des thèmes disponibles (pour la plupart déjà optimisés), de personnaliser un peu leur design à votre goût, puis de leur attribuer le mode Canvas.
Ah, au fait, le mode Canvas, c’est juste MAGIQUE !
Cette fonctionnalité vous permet de « sortir » votre page d’atterrissage de votre site WordPress, pour ainsi obéir à l’une des règles d’or : éviter les distractions. Concrètement, cela va supprimer l’en-tête (header) et le pied de page (footer) de votre site.
Si vous n’êtes pas familier avec ces termes, je vous recommande de suivre le guide pour débuter avec Elementor.
C’est très pratique, car cela va vous permettre de supprimer les menus du haut et du bas, et ainsi éviter que vos visiteurs sortent de votre page-écran et aillent ailleurs sur votre site. C’est exactement ce que nous recherchons.
Le modèle d’Elementor, c’est bien ; la personnalisation, c’est mieux
Que vous ayez choisi d’utiliser un template avec un design alléchant ou de partir d’une feuille blanche pour construire votre page d’atterrissage, il va vous falloir faire attention à chaque détail, puis l’optimiser continuellement en suivant quelques-unes des bonnes pratiques listées juste avant. Bien sûr, cette liste n’est pas exhaustive et il faudra mener des expériences avec un outil d’A/B testing, par exemple. Il existe un plug-in WordPress conçu pour faire des tests avec Elementor, tel que Split Test Split Test For Elementor | WordPress.org, mais également des outils tiers comme Google Optimize ou Crazy Egg.
La phase de test aura son propre article, car c’est important et il y a pas mal de choses à dire.
OK, je décide de personnaliser et d’optimiser ma page, mais quelle longueur doit-elle faire, au juste ?
Faire une page d’atterrissage super courte ou ultra-longue ?
Il y a deux écoles, et sans vouloir dire que l’une est meilleure que l’autre, il faut bien reconnaître que, dans certains cas, une version ultra-courte peut être tout aussi efficace qu’une très longue.
Pour gagner du temps : je vous propose une fiche PDF récapitulative, qui fait le point sur les deux versions, leurs avantages et inconvénients, et les outils Elementor à utiliser d’urgence sur chaque version !
Voyons quelques exemples, puis nous essayerons de donner des pistes pour prendre une première décision (car vous pouvez, voire devez changer d’avis en cours de route si vous vous rendez compte qu’une version allongée ou raccourcie, selon le cas, fonctionnerait mieux).
La version courte
Remarquez comme cette page est simple. Un seul bouton pour tester le produit. Même pas de descriptif, il faut dire que la promesse (« Make your website better. Instantly. ») est très forte et porte à elle seule le produit.
L’idée, ici, n’est pas de décrire longuement les avantages du produit, mais d’inciter les personnes à tester celui-ci. Pourquoi ? Sachez que bien souvent le visiteur est plus attiré par ce qui lui parle directement que par les caractéristiques intrinsèques de votre produit. Il n’est donc pas toujours nécessaire de faire une liste à puces très longue, lorsque votre produit ou votre promesse est simple à comprendre.
Notons également comment la question du prix est complètement absente dans cet exemple. Ce n’est donc pas indispensable d’en parler, comme on pourrait le penser à première vue. Bien sûr, cela va beaucoup dépendre de votre contexte.
La suite du mini-tunnel est dans le même esprit : très épurée, peut-être même encore plus. Oui, c’est possible ^^.
Bien sûr, j’ai pris un exemple un peu extrême, mais c’est important de savoir que cela existe et que, si une entreprise (spécialisée dans les outils d’analyse, en plus) le fait, c’est que c’est certainement très efficace pour eux.
Astuce Elementor N°1 : la ligne de flottaison
Dans la version minimaliste et pour être sûr de rester sous la ligne de flottaison, utilisez la fonctionnalité « taille d’écran ».
Cette fonctionnalité, disponible dans la version gratuite, est très simple à mettre en œuvre !
Depuis la section « Mise en page » du panneau de gauche, changez l’option « Hauteur » pour passer de « Par défaut » à « Adaptée à l’écran », comme dans l’exemple ci-dessous.
Attention
Souvenez-vous qu’en mobile, l’écran est beaucoup plus petit. Alors, n’hésitez pas à bien tester toutes les situations, et à cacher ou ne pas mettre trop d’informations ! Là aussi, je vous dis comment faire cela avec Elementor dans ce top chrono.
Astuce Elementor N°2 : utiliser l’outil pop-up ou lightbox
Vous pouvez choisir d’utiliser un pop-up ou une lightbox pour dévoiler davantage d’informations, tout en présentant le minimum dès le départ. Attention tout de même à ne pas afficher d’informations trop importantes dans votre pop-up, car les visiteurs ne cliqueront pas tous sur le lien. Une vidéo peut être une bonne idée.
Dans cet exemple d’une application mobile, l’action principale est le téléchargement, et l‘action secondaire le visionnage d’une vidéo de démo. Le bouton démo renvoie tout simplement vers une lightbox, ce qui laisse plus de place pour mettre en avant les informations utiles.
Où héberger ma vidéo ?
Astuce de pro : Avec un abonnement Pro sur la plateforme d’hébergement vidéo de Vimeo, vous pouvez définir un bouton d’action à la fin d’une vidéo : pratique pour ne pas rester sur un écran noir ! Avec un abonnement Business, vous pouvez même définir des formulaires pour collecter des emails ou placer des boutons d’action tout au long de votre vidéo.
La version longue
L’idée est la suivante : plus vous demandez, plus vous devez expliquer.
Pour des produits ou des services qui exigent un gros investissement (soit un investissement financier, soit un investissement pour comprendre une problématique ou un besoin), peut-être qu’il sera préférable d’envisager une longue landing page.
En règle générale, on privilégiera une version longue avec un thème comme la formation en ligne ou la rédaction. Ce type de contenu est très spécifique et requiert beaucoup de détails. Évidemment, votre avatar client devra être de type « acheteurs méthodiques qui aiment lire » !
Attention : long ne veut pas dire dense. Pensez toujours à bien aérer votre composition. Pour cela, vous pouvez par exemple utiliser le module Spacer ‘elementor et même définir
Astuce Elementor N°3 : les liens ancres
On oublie souvent d’utiliser la fonctionnalité des liens ancres ; pourtant, il est très important, sur une page longue, de faciliter la lecture. On peut donc imaginer qu’un clic « en savoir plus » depuis un point A de votre page amène directement vers le tableau de prix situé tout en bas de la page. Cela permet au visiteur de ne pas avoir à faire défiler toute la page.
L’intérêt est double :
À la fois votre visiteur gagne du temps, mais il aura également tout loisir de remonter lentement votre page pour découvrir tous les points que vous abordez, et cela aura une importante « valeur perçue ».
Bon à savoir
Ne sous-estimez pas le nombre de personnes qui naviguent à l’envers sur une landing page ! En général, les gens vont tout en bas pour voir le prix, puis remontent peu à peu pour prendre connaissance de l’argumentaire de vente.
Comment choisir l’une ou l’autre ?
Je réponds dans une fiche PDF récapitulative.
Pour aller plus loin
Essayez de tirer le maximum de données de vos rapports d’analyse : combien j’ai de visites ? Combien j’ai de conversions ? C’est ainsi que vous pourrez analyser le succès de votre opération. Une chose est sûre : c’est un processus long qui nécessite plusieurs itérations.
Ainsi, peut-être que les solutions envisagées au début ne s’avéreront pas pertinentes (beaucoup de contenu vs. contenu minimaliste, par exemple), mais cela, vous ne le saurez qu’avec le temps, une analyse fine et, bien sûr, du trafic sur votre page. On a beau vous proposer de bonnes pratiques, sachez que ce n’est pas une science exacte et que chaque cas est particulier.
C’est ce qui fait tout le charme de l’optimisation, d’ailleurs !
En mai, je proposerai une formation (la plus complète jamais lancée) sur ce sujet. J’y mettrai toute mon expérience et mes astuces pour transformer votre site WordPress en machine à leads ! Si vous êtes intéressé, vous pouvez télécharger la fiche PDF complémentaire à cet article. Ainsi, je vous avertirai du pré-lancement de cette formation directement dans votre boîte aux lettres.
