Con\u00e7ues dans le but de convertir vos visiteurs en leads ou clients, les landing pages sont des pages dont le design est travaill\u00e9 pour focaliser l\u2019attention des visiteurs sur votre proposition de valeur dans le but de les amener \u00e0 r\u00e9aliser une action que vous aurez d\u00e9termin\u00e9e auparavant : l\u2019achat d\u2019un produit, le remplissage d\u2019un formulaire ou encore la participation \u00e0 un essai gratuit.<\/p>\n<\/div>\n
Mais parmi toutes les offres disponibles et tous les concurrents qui existent sur le march\u00e9 : il peut \u00eatre difficile de se distinguer des autres. \u00a0Pour cela, il vous faut cr\u00e9er une landing page percutante et persuasive<\/a>, sp\u00e9cialement adapt\u00e9e \u00e0 votre secteur d\u2019activit\u00e9<\/strong>.<\/p>\n Parce que nous savons qu\u2019il peut \u00eatre difficile de trouver l\u2019inspiration avant de se lancer dans le design de votre future landing page, nous avons s\u00e9lectionn\u00e9 pour vous dix landing pages modernes et efficaces qui convertissent.<\/p>\n Si vous vous posez des questions sur les landing pages et que vous souhaitez en apprendre davantage avant de vous lancer, consultez tous nos articles d\u00e9di\u00e9s aux landing pages<\/a> avec d\u00e9finition, bonnes pratiques et exemples concrets ou encore notre post sur\u00a0les meilleurs outils pour cr\u00e9er une landing page<\/a>.<\/p>\n<\/div>\n Ces exemples sont tir\u00e9s de sites que vous pouvez consulter. Bien \u00e9videmment, aucune de ces landing pages n\u2019est parfaite : la perfection n\u2019existe pas et c\u2019est \u00e0 vous d\u2019adapter votre design aux exigences de vos clients. Nous vous conseillons \u00e9galement d’A\/B tester diff\u00e9rents design<\/a> pour vos landing pages.<\/p>\n Arr\u00eatez d\u2019optimiser votre site sur la base d\u2019intuitions ! Cliquez-ici pour mettre en place une vraie m\u00e9thodologie d\u2019optimisation bas\u00e9e sur la donn\u00e9e !<\/a><\/strong><\/span><\/p>\n LeadQuizzes<\/a> est une soci\u00e9t\u00e9 sp\u00e9cialis\u00e9e dans la vente de \u00ab quiz \u00bb con\u00e7us pour capturer des \u00ab leads \u00bb. \u00a0On remarque d\u2019embl\u00e9e la vid\u00e9o explicative (tr\u00e8s bien con\u00e7ue) du service qui r\u00e9pond aux questions basiques telles que :<\/p>\n Deuxi\u00e8mement, le call-to-action orang\u00e9 d\u00e9tonne du reste de la page et invite tr\u00e8s clairement au clic : \u00ab Try it Free \u00bb nous rassure sur le fait que nous ne payerons pas d\u2019embl\u00e9e et qu\u2019il existe un essai gratuit. En savoir plus sur l\u2019optimisation des call-to-action<\/a>.<\/p>\n La preuve sociale est flagrante et bien mise en valeur : les r\u00e9f\u00e9rences sont des acteurs connus du march\u00e9 et le texte indique que plus de 3 millions de leads ont \u00e9t\u00e9 g\u00e9n\u00e9r\u00e9s via LeadQuizzes : \u00e7a donne envie !<\/p>\n La suite de la landing page ne d\u00e9\u00e7oit pas non plus : elle est construite autour de l\u2019\u00e9ducation du visiteur \u00e0 l\u2019utilit\u00e9 du produit. \u00a0Le but : convaincre avec une (grande) page que le service de LeadQuizzes est performant et utilis\u00e9 par les grands acteurs du digital.<\/p>\n La preuve sociale est fortement mise en valeur sur la landing page de LeadQuizzes. Elle r\u00e9pond \u00e0 des questions concr\u00e8tes et tangibles qui concernent les potentiels acheteurs :<\/p>\n GrowthHackers<\/a> est une soci\u00e9t\u00e9 qui commercialise un logiciel qui augmente la productivit\u00e9 des \u00e9quipes marketing et coordonne les actions de “business development” ainsi que les nouvelles id\u00e9es des \u00e9quipes innovantes.<\/p>\n Similaire \u00e0 LeadQuizzes, le call-to-action orang\u00e9 se d\u00e9marque agr\u00e9ablement du reste des couleurs de la page et invite \u00e0 l\u2019action. Nous sommes \u00e9galement invit\u00e9s \u00e0 un \u00ab essai gratuit \u00bb qui permet de rassurer un grand nombre de visiteurs qui ne seraient pas pr\u00eats \u00e0 payer avant d\u2019avoir \u00e9t\u00e9 convaincus de l\u2019utilit\u00e9 du service.<\/p>\n La landing page se prolonge avec une navigation sous la forme d\u2019un menu d\u00e9roulant qui r\u00e9pond aux principales questions que se posent les potentiels utilisateurs de GrowthHackers Project.<\/p>\n On remarque \u00e9galement qu\u2019une bulle de \u00ab chat \u00bb est disponible pour poser des questions : une fonction bien utile lorsqu\u2019on est ind\u00e9cis ou qu\u2019une question nous taraude.<\/p>\n Quant \u00e0 la preuve sociale, elle est mise en valeur de deux fa\u00e7ons :<\/p>\n On pourrait cependant reprocher que les nombres ne sont peut-\u00eatre pas assez visibles.<\/p>\n ElegantThemes<\/a> est une entreprise sp\u00e9cialis\u00e9e dans la vente de templates ou \u00ab th\u00e8mes \u00bb WordPress et commercialise \u00e9galement un \u00ab builder \u00bb appel\u00e9 Divi, qui permet de cr\u00e9er visuellement des pages sous WordPress. A ce sujet, consultez nos exemples de templates de landing pages pour WordPress<\/a>.<\/p>\n On remarque d\u2019embl\u00e9e la preuve sociale : c\u2019est le premier \u00e9l\u00e9ment mis en avant qui vient rassurer le visiteur sur la popularit\u00e9 du service : plus de 400.000 utilisateurs selon le site.<\/p>\n On remarque ensuite que la proposition de valeur est double et que deux call-to-actions s\u00e9par\u00e9s ont \u00e9t\u00e9 cr\u00e9\u00e9s pour l\u2019occasion : un pour d\u00e9couvrir les templates pr\u00eats \u00e0 l\u2019emploi et un autre pour d\u00e9couvrir les Plugins de la marque.<\/p>\n Autre \u00e9l\u00e9ment int\u00e9ressant : on voit appara\u00eetre sur le c\u00f4t\u00e9 droit inf\u00e9rieur une bulle de conversation pr\u00eate \u00e0 r\u00e9pondre aux questions qu\u2019un visiteur pourrait se poser.<\/p>\n Le module de chat est particuli\u00e8rement int\u00e9ressant puisqu\u2019il permet \u00e9galement d\u2019envoyer des pi\u00e8ces-jointes, Emojis et GIFs ce qui ne peut que renforcer la richesse de l\u2019interaction.<\/p>\n En naviguant sur la landing page, les visiteurs se voient offrir la possibilit\u00e9 d\u2019essayer en \u00ab live \u00bb une d\u00e9monstration du Builder Divi<\/a>. Il s\u2019agit d\u2019une proposition de valeur cons\u00e9quente et tr\u00e8s convaincante puisque les utilisateurs peuvent d\u00e9couvrir directement le produit, sans payer ni m\u00eame s\u2019inscrire.<\/p>\n Plus bas dans la landing page, la preuve sociale est remise en avant et le paragraphe contient un \u00e9l\u00e9ment destin\u00e9 \u00e0 rassurer les potentiels acheteurs : une offre de remboursement valable 30 jours.<\/p>\n De plus, le call-to-action rouge-rose vient contraster avec le fond bleu de la page, renfor\u00e7ant l\u2019effet de curiosit\u00e9 : on est visuellement attir\u00e9s vers le bouton plac\u00e9 en position centrale sur la page.<\/p>\n Shopify<\/a> est un CMS qui permet de cr\u00e9er rapidement et simplement des sites e-commerce sans connaissance en programmation. Ils se d\u00e9marquent par leurs nombreuses ressources mises \u00e0 la disposition des utilisateurs (guides, vid\u00e9os, podcasts, forums) ainsi que des services additionnels compl\u00e9mentaires \u00e0 leur c\u0153ur d\u2019activit\u00e9 : magasin de \u00ab th\u00e8mes \u00bb pr\u00eats \u00e0 utiliser, librairie de photos gratuites\u2026<\/p>\n Sur la landing page, la proposition de valeur est tout de suite mise en avant : \u00ab the e-commerce platform made for you \u00bb. \u00a0L\u2019id\u00e9e est donc de d\u2019adresser \u00e0 une client\u00e8le large, souvent ind\u00e9pendante comme en t\u00e9moigne la photo d\u2019illustration.<\/p>\n Particularit\u00e9 de cette landing page, le call-to-action contient un champ pour l\u2019adresse e-mail. Ce champ est donc la condition d\u2019acc\u00e8s \u00e0 l\u2019essai gratuit de 14 jours propos\u00e9 juste en dessous qui pr\u00e9cise qu\u2019aucune carte bancaire n\u2019est requise pour l\u2019essai : c\u2019est un argument majeur.<\/p>\n La suite de la landing page met l\u2019accent sur les caract\u00e9ristiques du service de Shopify.<\/p>\n Gr\u00e2ce \u00e0 des illustrations uniques et la bonne utilisation de courts paragraphes, l\u2019entreprise pr\u00e9sente les fonctionnalit\u00e9s et les b\u00e9n\u00e9fices tir\u00e9s de l\u2019utilisation de Shopify dans le but de convaincre les visiteurs de passer sur l\u2019essai gratuit voire d\u2019acheter l\u2019abonnement mensuel.<\/p>\n Argument majeur dans le secteur des CMS, l\u2019utilisation massive du service est mise en valeur gr\u00e2ce \u00e0 deux \u00e9l\u00e9ments :<\/p>\n L\u2019id\u00e9e est de cr\u00e9er un sentiment de mim\u00e9tisme dans l\u2019esprit des visiteurs : \u00ab si 1.000.000 de personnes utilisent Shopify et cr\u00e9ent de vraies boutiques sans programmer ; alors moi aussi je peux le faire \u00bb.<\/p>\n On ne pr\u00e9sente plus Salesforce<\/a>. Roi du \u00ab CRM \u00bb (Customer Relationship Management), la soci\u00e9t\u00e9 am\u00e9ricaine poss\u00e8de plusieurs landing pages particuli\u00e8rement travaill\u00e9es qui m\u00e9ritent le coup d\u2019\u0153il.<\/p>\n La premi\u00e8re chose qui saute au regard est le travail des illustrations et des couleurs. Un aper\u00e7u des solutions sur Ordinateur-Tablette-Mobile est pr\u00e9sent\u00e9 sur un fond qui inspire le calme et la s\u00e9r\u00e9nit\u00e9.<\/p>\n On remarque \u00e9galement que deux call-to-action sont pr\u00e9sents sur la partie sup\u00e9rieure gauche au-dessus de la ligne de flottaison : un premier pour une d\u00e9monstration et un deuxi\u00e8me pour un essai gratuit.<\/p>\n Aillant un positionnement double, Salesforce propose \u00e9galement une solution pour les grandes entreprises, dont le call-to-action est plac\u00e9 \u00e0 droite de l\u2019essai gratuit : pratique pour \u00e9viter de perdre de potentiels leads issus de grands groupes.<\/p>\n Lorsqu\u2019un visiteur clique sur un des call-to-action, il passe de la page d\u2019accueil \u00e0 une landing page cr\u00e9\u00e9e sp\u00e9cifiquement pour convaincre un maximum de personnes de s\u2019inscrire \u00e0 l\u2019essai gratuit.<\/p>\n Parmi les \u00e9l\u00e9ments marquants, on remarque :<\/p>\n Neil Patel<\/a> est un consultant en marketing digital qui poss\u00e8de une tr\u00e8s forte notori\u00e9t\u00e9 aux \u00c9tats-Unis et dans le monde. Son site re\u00e7oit plusieurs millions de visites par mois gr\u00e2ce \u00e0 une strat\u00e9gie de contenu accessible et de nombreuses ressources cr\u00e9\u00e9es pour ses visiteurs : articles de blog, vid\u00e9os sur YouTube, guides pratiques\u2026<\/p>\n Ce qui frappe en premier sur le site de Neil Patel, c\u2019est son approche d\u00e9complex\u00e9e et franchement directe sur la question.<\/p>\n Le th\u00e8me couleur est extr\u00eamement simple et joue sur le contraste entre le fond orang\u00e9 et le texte blanc. L\u2019id\u00e9e : poser une question directe, simple et courte aux visiteurs afin de les engager au maximum.<\/p>\n On constate \u00e9galement que la landing page propose d\u2019embl\u00e9e (au-dessus de la ligne de flottaison) un champ con\u00e7u pour r\u00e9aliser une analyse de votre site en direct : c\u2019est une d\u00e9monstration de force qui am\u00e8ne le visiteur \u00e0 d\u00e9couvrir par lui-m\u00eame ce qui pourrait \u00eatre am\u00e9lior\u00e9 sur son site.<\/p>\n La particularit\u00e9 du site de Neil Patel, c\u2019est que presque toutes les pages sont con\u00e7ues sur le mod\u00e8le d\u2019une landing page avec un seul objectif : convertir le maximum de visiteurs.<\/p>\n La page \u00ab Services \u00bb par exemple (au-dessus) affiche un long texte qui agit comme une preuve d\u2019autorit\u00e9 sur les visiteurs. Elle expose donc ce que Neil peut faire pour vous mais \u00e9galement ce qu\u2019il a r\u00e9ussi \u00e0 faire (voir en dessous) et les clients pour lesquels il a travaill\u00e9.<\/p>\n L\u2019approche est toujours tr\u00e8s directe et focalis\u00e9e sur les r\u00e9sultats et b\u00e9n\u00e9fices.<\/p>\n L\u2019id\u00e9e de Neil est de prouver par A+B qu\u2019il est comp\u00e9tent pour vous aider \u00e0 am\u00e9liorer votre r\u00e9f\u00e9rencement.<\/p>\n Toujours sur la m\u00eame page \u00ab Services \u00bb, le call-to-action n\u2019arrive ici qu\u2019\u00e0 la fin (et on peut se demander si c\u2019est une bonne id\u00e9e ?). Il est structur\u00e9 en plusieurs \u00e9tapes qui invitent le visiteur \u00e0 renseigner ses informations afin d\u2019\u00eatre contact\u00e9 ult\u00e9rieurement.<\/p>\n UpWork<\/a> est une plateforme de freelances mondialement connue. Elle permet aux entreprises de trouver rapidement de la main d\u2019\u0153uvre qualifi\u00e9e pour des missions diverses et permet aux ind\u00e9pendants de s\u2019inscrire sur la plateforme pour proposer leurs services.<\/p>\n Sur la page d\u2019accueil, on remarque d\u2019embl\u00e9e que la charte graphique est claire et que c\u2019est l\u2019aspect \u00ab professionnel \u00bb qui est mis en avant. De fa\u00e7on int\u00e9ressante, la tagline choisie ne s\u2019adresse pas aux freelances mais bien aux entreprises.<\/p>\n Le ton est direct, efficace et clair : on comprend instantan\u00e9ment la proposition de valeur : sous-traiter du travail de fa\u00e7on efficace.<\/p>\n Le call-to-action est plac\u00e9 sur le c\u00f4t\u00e9 gauche au-dessus de la ligne de flottaison. Sa couleur verte le distingue du reste de la landing page et il est constitu\u00e9 d\u2019une barre de recherche qui sert \u00e0 indiquer le type de travaux que les visiteurs cherchent \u00e0 externaliser. Si l\u2019on paye attention aux d\u00e9tails, on remarque que le fond utilis\u00e9 est en r\u00e9alit\u00e9 un t\u00e9moignage client dont on peut visionner l\u2019histoire : c\u2019est tr\u00e8s percutant !<\/p>\n La suite de la landing page est assez classique : elle d\u00e9taille les diff\u00e9rents services propos\u00e9s par les freelances et fait d\u00e9couvrir les offres payantes destin\u00e9es aux utilisateurs.<\/p>\n CodeCombat<\/a> est un exemple int\u00e9ressant. Il s\u2019agit d\u2019un jeu \u00e9ducatif qui permet aux enfants (et aux moins jeunes) d\u2019apprendre \u00e0 programmer \u00e0 l\u2019aide d\u2019un jeu vid\u00e9o. Le principe est simple : on programme soi-m\u00eame son avanc\u00e9e dans le jeu.<\/p>\n Le premier point int\u00e9ressant de la landing page de CodeCombat est que la cible est double : elle vise \u00e0 la fois les enseignants (qui souhaitent l\u2019utiliser en classe) et les enfants (qui d\u00e9couvrent par eux-m\u00eames ou gr\u00e2ce au bouche-\u00e0-oreille).<\/p>\n L\u2019accent de la landing page est donc mis sur la p\u00e9dagogie et sur la simplicit\u00e9 d\u2019utilisation du programme. On remarque donc un double call-to-action : un pour les enseignants et un pour les enfants\/joueurs.<\/p>\n La suite de la landing page pr\u00e9sente les avantages et b\u00e9n\u00e9fices tir\u00e9s de l\u2019utilisation de CodeCombat ainsi que des captures d\u2019\u00e9cran pour rendre plus \u00ab tangible \u00bb le service.<\/p>\n De fa\u00e7on assez classique, la suite reprend les points forts du service et inclut un t\u00e9moignage client adapt\u00e9 \u00e0 la cible : celui d\u2019un directeur d\u2019\u00e9cole.<\/p>\n10 exemples des meilleurs design de landing pages<\/h2>\n
LeadQuizzes<\/h3>\n
\n
![\"Design](\"https:\/\/static.wingify.com\/gcp\/uploads\/abtasty\/design-landing-page-lead-quizzes.jpg\")
<\/p>\n![\"Design](\"https:\/\/static.wingify.com\/gcp\/uploads\/abtasty\/design-landing-page-lead-quizzes-2.jpg\")
<\/p>\n![\"Design](\"https:\/\/static.wingify.com\/gcp\/uploads\/abtasty\/design-landing-page-lead-quizzes-3.jpg\")
<\/p>\n\n
GrowthHackers<\/h3>\n
![\"Landing](\"https:\/\/static.wingify.com\/gcp\/uploads\/abtasty\/design-landing-page-growth-hackers.jpg\")
<\/p>\n\n
![\"Landing](\"https:\/\/static.wingify.com\/gcp\/uploads\/abtasty\/design-landing-page-growth-hackers-2.png\")
<\/p>\n\n
![\"Landing](\"https:\/\/static.wingify.com\/gcp\/uploads\/abtasty\/design-landing-page-growth-hackers-3.png\")
<\/p>\nElegantThemes<\/h3>\n
![\"Landing](\"https:\/\/static.wingify.com\/gcp\/uploads\/abtasty\/design-landing-page-elegant-themes.jpg\")
<\/p>\n![\"Design](\"https:\/\/static.wingify.com\/gcp\/uploads\/abtasty\/design-landing-page-divi-builder.jpg\")
<\/p>\n![\"Example](\"https:\/\/static.wingify.com\/gcp\/uploads\/abtasty\/design-landing-page-elegant-themes-social-proof.jpg\")
<\/p>\nShopify<\/h3>\n
\n
Salesforce<\/h3>\n
![\"Design](\"https:\/\/static.wingify.com\/gcp\/uploads\/abtasty\/salesforce-design-landing-page.jpg\")
<\/p>\n![\"Subscription](\"https:\/\/static.wingify.com\/gcp\/uploads\/abtasty\/salesforce-design-lead-generation-form.png\")
<\/p>\n\n
Neil Patel<\/h3>\n
![\"Neil](\"https:\/\/static.wingify.com\/gcp\/uploads\/abtasty\/neil-patel-design-landing-page.png\")
<\/p>\n![\"Design](\"https:\/\/static.wingify.com\/gcp\/uploads\/abtasty\/neil-patel-design-landing-page-value-proposition.png\")
<\/p>\n![\"Design](\"https:\/\/static.wingify.com\/gcp\/uploads\/abtasty\/neil-patel-design-landing-page-benefits.png\")
<\/p>\n![\"Neil](\"https:\/\/static.wingify.com\/gcp\/uploads\/abtasty\/neil-patel-design-landing-page-call-to-action.png\")
<\/p>\nUpWork<\/h3>\n
![\"Design](\"https:\/\/static.wingify.com\/gcp\/uploads\/abtasty\/upwork-design-landing-page.jpg\")
<\/p>\n![\"Design](\"https:\/\/static.wingify.com\/gcp\/uploads\/abtasty\/upwork-design-landing-page-2.png\")
<\/p>\nCodeCombat<\/h3>\n
![\"Code](\"https:\/\/static.wingify.com\/gcp\/uploads\/abtasty\/code-combat-landing-page-design.jpg\")
<\/p>\n![\"Design](\"https:\/\/static.wingify.com\/gcp\/uploads\/abtasty\/code-combat-landing-page-design-2.jpg\")
<\/p>\n![\"Testimonial](\"https:\/\/static.wingify.com\/gcp\/uploads\/abtasty\/code-combat-landing-page-design-3.png\")
<\/p>\nMailChimp<\/h3>\n