Dernières nouvelles de SeedProd

Tutoriels, astuces et ressources WordPress pour développer votre activité

Comment créer une page d'atterrissage mobile + bonnes pratiques

Comment créer une page d'atterrissage adaptée aux mobiles et réactive sur WordPress ? 

Écrit par : image de l'auteur Stacey Corrin
image de l'auteur Stacey Corrin
Stacey écrit sur WordPress et le marketing numérique depuis plus de 10 ans et sur d'autres sujets depuis bien plus longtemps. Parallèlement, elle est fascinée par la conception de sites web, l'expérience utilisateur et le référencement.
     Reviewed By : John Turner
image du réviseur John Turner
John Turner est le cofondateur de SeedProd. Il a plus de 20 ans d'expérience dans le domaine des affaires et du développement et ses plugins ont été téléchargés plus de 25 millions de fois.

Vous voulez savoir comment créer une page d'atterrissage mobile pour votre site web WordPress ?

Nous sommes tous passés par là : en essayant de naviguer sur un site sur votre téléphone, la moitié de la page manque sur le côté de l'écran. Il en va de même pour les liens qui sont si petits qu'on peut à peine les effleurer. Ces pages ? Elles ne sont manifestement pas optimisées pour les appareils mobiles. Changeons cela.

Dans ce guide, je vous montrerai comment créer une page d'atterrissage adaptée aux mobiles qui soit à la fois conviviale et qui permette d'obtenir un taux de conversion élevé.

Why Make Your Landing Page Mobile-Friendly?

You need to make your landing page mobile-friendly because over half of all website traffic comes from smartphones. Research suggests that 47% of consumers expect sites to load in 2 seconds or less, and 40% would abandon those that take more than 3 seconds.

KissMetrics page abandonment statistics

Plus, Google prioritizes mobile-friendly websites in search results. So, if your landing page is mobile-friendly, you can reach more potential customers and keep them on your page long enough to take action.

Comment créer une page d'atterrissage mobile sur WordPress

Il existe deux méthodes principales pour créer des pages d'atterrissage adaptées aux mobiles dans WordPress :

  1. Utiliser un plugin de construction de page d'atterrissage comme SeedProd qui génère des mises en page réactives.
  2. Coder votre propre mise en page réactive personnalisée à partir de zéro en utilisant HTML, CSS et les principes du "mobile-first".

Dans ce guide, nous aborderons la méthode la plus simple, à savoir l'approche du plugin SeedProd.

SeedProd Constructeur de site web WordPress Drag and Drop

Avec SeedProd, vous pouvez créer n'importe quelle page d'atterrissage sur WordPress sans écrire de code. Il est livré avec un constructeur drag-and-drop facile à utiliser et des centaines de modèles de pages d'atterrissage réactives qui font de la construction d'une page mobile un jeu d'enfant.

SeedProd s'intègre de manière transparente avec les meilleurs services d'email marketing pour développer votre liste d'emails. Vous pouvez également vous connecter à des milliers d'applications tierces via Zapier.

Mieux encore, SeedProd est rapide comme l'éclair. Contrairement à d'autres constructeurs de pages WordPress, SeedProd est optimisé pour la vitesse, de sorte qu'il ne ralentira pas le temps de chargement de vos pages. Il fonctionne également avec n'importe quel thème WordPress.

Suivez les étapes ci-dessous pour apprendre à créer une page d'atterrissage mobile à l'aide de SeedProd.

Etape 1. Installer le plugin SeedProd Landing Page Builder

Tout d'abord, vous devrez installer et activer le plugin SeedProd sur votre site WordPress. Si vous avez besoin d'aide, vous pouvez consulter ce guide sur l'installation de SeedProd Pro.

Note : Il existe une version gratuite de SeedProd qui vous permet de créer une page d'atterrissage gratuite. Pour ce guide, j'utiliserai la version pro car elle offre plus d'options de modèles et de blocs.

Après l'installation, un écran apparaîtra vous demandant d'entrer les détails de votre clé de licence. Vous pouvez trouver votre clé de licence dans le tableau de bord de votre compte SeedProd.

Activer le plugin de mode de maintenance de seedprod

Collez votre clé de licence dans le champ prévu à cet effet et cliquez sur le bouton Vérifier la clé.

Étape 2. Choisir un modèle adapté aux mobiles

Une fois que vous avez saisi votre clé de licence, faites défiler la page jusqu'à ce que vous voyiez le bouton "Créer votre première page".

Créez votre première page d'atterrissage seedprod

En cliquant sur le bouton, vous accédez au tableau de bord des pages d'atterrissage et vous cliquez sur le bouton Ajouter une nouvelle page d'atterrissage.

Ajouter une nouvelle page d'atterrissage dans WordPress

Vous y trouverez une bibliothèque de modèles de pages d'atterrissage conçus pour répondre aux besoins des utilisateurs mobiles. Vous pouvez filtrer les modèles par type en cliquant sur l'un des filtres en haut de la page.

modèles de page d'atterrissage seedprod

Lorsque vous choisissez un modèle, veillez à ce que la mise en page et les éléments s'adaptent aux petits écrans. Évitez les modèles au design étriqué, au texte minuscule ou aux colonnes/sections excessives, qui risquent de ne pas s'afficher correctement sur les téléphones portables.

Pour une expérience mobile optimale, recherchez des modèles avec une mise en page simple, sur une seule colonne, de grands boutons tactiles et un espacement suffisant entre les éléments.

Il est également possible de modifier n'importe quel modèle pour l'adapter aux besoins de votre entreprise, alors choisissez celui qui correspond à ce que vous recherchez. Dans mon exemple, j'ai choisi le modèle de page de vente d'application mobile.

Modèle de page de vente d'application mobile

Il suffit de passer la souris sur la vignette du modèle et de cliquer sur l'icône de la coche pour le choisir.

Une fenêtre contextuelle apparaît alors, vous demandant de saisir le nom et l'URL de votre page. Ne vous inquiétez pas, vous pourrez les modifier ultérieurement dans les paramètres de la page.

donnez un nom et une adresse URL à votre page d'atterrissage mobile

Cliquez maintenant sur le bouton Enregistrer et commencer à éditer la page pour lancer le générateur de glisser-déposer.

Étape 3. Personnalisez votre page d'atterrissage pour les mobiles

Dès le lancement de votre page, une interface visuelle de type "glisser-déposer" s'affichera, dans laquelle vous pourrez personnaliser le contenu et le design du modèle.

Comment créer une page d'atterrissage mobile dans WordPress en utilisant SeedProd

Sur la gauche, les blocs de la page d'atterrissage permettent d'ajouter divers éléments tels que des images, du texte, des boutons, etc. Le volet d'aperçu de droite montre l'aspect de votre page en temps réel, au fur et à mesure que vous la construisez.

Blocs de la page d'atterrissage de SeedProd

Lors de la personnalisation pour la téléphonie mobile, il convient de se concentrer sur plusieurs domaines clés :

Menus mobiles

SeedProd vous permet d'ajouter des menus de navigation adaptés aux mobiles, tels que des menus hamburger qui se réduisent pour gagner de l'espace. Vous pouvez personnaliser le style, les animations et le comportement du menu.

Paramètres du menu mobile de SeedProd

Cibles tactiles

Veillez à ce que tous les éléments tactiles, tels que les boutons et les liens, aient des zones de clic et de contact suffisamment larges pour être facilement activés sur les écrans mobiles (au moins 48px).

Options de mobilité et d'espacement pour les cibles tactiles

Les blocs de SeedProd vous permettent d'ajuster le remplissage et l'espacement selon vos besoins.

Optimiser les médias

Les images et les vidéos de grande taille peuvent ralentir les temps de chargement sur les téléphones portables. Utilisez des outils de chargement paresseux et de compression pour optimiser les ressources multimédias.

Compression d'images

Hiérarchie visuelle

Utilisez les blocs de mise en page de SeedProd tels que les sections, les colonnes et l'espacement pour établir un flux de contenu logique et une hiérarchie facile à lire sur les petits écrans.

Navigation mobile

L'option Layout Navigation est un excellent moyen de visualiser la fluidité de votre page d'atterrissage mobile.

Outre la personnalisation d'éléments individuels, SeedProd vous permet également d'ajouter des sections prédéfinies optimisées pour les mobiles, telles que des en-têtes/pieds de page collants, des zones de FAQ extensibles, des contenus à onglets, et bien plus encore.

Sections de la page d'atterrissage

Par exemple, l'ajout d'une section FAQ est un excellent moyen de fournir aux utilisateurs des réponses aux questions les plus courantes. Les listes déroulantes des réponses se développent et se réduisent d'un simple clic, ce qui permet de gagner de l'espace sur la page et d'améliorer l'expérience de l'utilisateur pour les navigateurs mobiles.

ajouter une section FAQ à votre page d'atterrissage mobile

En outre, les sections FAQ peuvent contribuer à réduire les abandons de panier et à augmenter vos taux de conversion.

Conseil d'expert

Pensez à ajouter un bouton "click-to-call" à votre page afin que les utilisateurs naviguant à partir d'un téléphone portable puissent simplement appuyer sur un bouton pour vous appeler immédiatement.

Continuez à ajouter du contenu à votre page jusqu'à ce que vous soyez satisfait de son aspect. Cliquez ensuite sur le bouton vert Enregistrer dans le coin supérieur droit pour enregistrer vos paramètres.

Étape 4. Configurez vos paramètres

Une autre chose que j'aime chez SeedProd, c'est sa capacité à s'intégrer avec divers outils et applications d'automatisation tiers. Vous pouvez connecter votre page d'atterrissage à Google Analytics pour surveiller vos performances et même vous relier à votre service de marketing par courriel pour développer votre liste d'adresses électroniques.

Connectez votre service de marketing par courriel

Pour vous connecter à une application ou à un service, cliquez sur l'onglet Connecter en haut de votre page. Vous verrez alors les services que vous pouvez intégrer.

Se connecter à un service d'email marketing avec SeedProd

Par exemple, pour créer un lien vers votre liste d'adresses électroniques Constant Contact, il suffit de cliquer sur l'image Constant Contact et de suivre les instructions.

Connecter la page d'atterrissage à contact constant

Lorsque quelqu'un s'inscrit via votre page d'atterrissage, vous pouvez le voir dans votre tableau de bord SeedProd en naviguant vers SeedProd " Abonnés, que vous intégriez ou non un service de marketing par email.

Aperçu des abonnés à la page d'atterrissage de SeedProd

Il s'agit d'une excellente solution si vous débutez et ne souhaitez pas encore vous engager auprès d'un fournisseur spécifique, car elle vous permet d'obtenir des données visuelles précises sur le nombre d'abonnés à une page et sur les nouveaux abonnés au fil du temps.

Configuration des paramètres de la page

Maintenant, regardez les paramètres de votre page d'atterrissage en cliquant sur l'onglet Paramètres de la page. Dans les paramètres généraux, vous pouvez modifier le nom et l'URL de votre page, le statut de publication et activer le mode d'isolation.

Paramètres de la page d'atterrissage de SeedProd

Le mode Isolation supprime tout code inutile du chargement de votre page afin de la rendre plus rapide. Il ne charge que les informations nécessaires au rendu de votre page aux utilisateurs. L'activation de ce mode devrait permettre d'éliminer tout conflit lié à un thème ou à un plugin WordPress.

Les onglets suivants vous permettent de modifier les paramètres de référencement et d'analyse de votre page de destination.

Paramètres d'analyse de la page d'atterrissage

Ensuite, l'onglet Scripts vous permet de coller des scripts d'en-tête, de corps et de pied de page personnalisés. Ceci est utile pour recibler les visiteurs d'une page avec votre pixel de suivi Facebook, etc.

Step 5. Preview & Publish Your Mobile Landing Page

Avant de publier votre page d'atterrissage, vous devez vous assurer qu'elle est adaptée aux mobiles. Les internautes quitteront votre page si les éléments de votre page ne sont pas adaptés aux mobiles et n'offrent pas une excellente expérience à l'utilisateur mobile.

Vous pouvez vérifier l'aspect de votre page d'atterrissage sur les appareils mobiles à l'aide de l'option Aperçu mobile.

Prévisualisez votre page d'atterrissage sur mobile

Pour commencer, trouvez l'icône de téléphone portable au bas de votre page et cliquez dessus pour voir les versions mobile ou tablette de votre page.

Aperçu de la page d'atterrissage sur les appareils mobiles

Comme vous pouvez le constater, votre design s'affiche désormais sur une seule colonne pour les écrans mobiles. Toutefois, si quelque chose ne semble pas adapté aux écrans mobiles, vous pouvez l'ajuster directement dans l'aperçu de la page.

Enfin, après avoir vérifié que votre page d'atterrissage s'affiche parfaitement sur les appareils mobiles, il est temps de la mettre en ligne.

À côté du bouton vert Enregistrer, vous verrez une flèche. Vous pouvez cliquer sur la flèche pour enregistrer votre page en tant que modèle à utiliser ultérieurement ou cliquer sur Publier.

publiez votre page d'atterrissage mobile

Après avoir cliqué sur Publier, vous verrez une fenêtre vous indiquant que votre page d'atterrissage est maintenant publiée.

votre page d'atterrissage mobile a été publiée

Cliquez maintenant sur le bouton Voir la page en direct pour voir ce que cela donne.

Voici la version finale d'une page que j'ai créée sur mon site web de test :

Exemple final de page d'atterrissage mobile

Exemples de pages d'atterrissage mobiles et inspiration

Si vous avez besoin d'inspiration avant de concevoir votre page, jetez un coup d'œil aux meilleurs exemples de pages d'atterrissage mobiles que j'ai trouvés.

1. Bugaboo

Exemple de page d'atterrissage mobile Bugaboo

Voici d'abord un exemple de page mobile de Bugaboo, un détaillant en ligne de produits pour bébés et enfants. J'aime la conception de leur page d'atterrissage avec une seule colonne, qui est propre, moderne et facile à naviguer à partir de n'importe quel appareil.

2. Etsy

Comme vous pouvez le voir, Etsy cache le menu de navigation de la page principale avec un menu mobile. Les images sont claires comme de l'eau de roche et les boutons sont suffisamment grands pour que les acheteurs puissent les utiliser.

Exemple de page d'atterrissage mobile Etsy

En outre, le champ de recherche s'étend sur toute la largeur de la page mobile, ce qui le rend beaucoup plus facile à utiliser sur les petits écrans.

3. Fente

Exemple de page d'atterrissage mobile pour Slack

J'aime particulièrement la page d'atterrissage mobile de Slack parce qu'elle est adaptée à l'appareil de l'utilisateur. Comme j'utilisais un iPhone, ils ont personnalisé la page pour l'Apple Store.

Cette approche est un excellent moyen de cibler des publics spécifiques. Et comme la page répond aux besoins de ce public, il est plus probable qu'il se convertisse.

4. Hélix cartographié

Exemple de page d'atterrissage mobile Maped Helix

Maped Helix dispose d'une page d'atterrissage mobile au design impeccable qui ne laisse rien au hasard. Elle comporte une barre autocollante en haut de la page pour encourager les utilisateurs à s'abonner et des boutons CTA clairement identifiés qui dirigent les utilisateurs vers les sections les plus populaires de leur site.

Mieux encore, les couleurs des boutons CTA varient en fonction de l'importance, la couleur la plus foncée indiquant le bouton sur lequel les utilisateurs doivent cliquer en premier.

5. Evernote

Evernote garde les choses simples dans cet exemple. L'appel à l'action est clair et réalisable, et la page se charge très rapidement. Étant donné que la page n'a pratiquement pas d'images, elle est étonnamment accrocheuse.

Une page d'atterrissage mobile textuelle n'est peut-être pas la meilleure solution pour tout le monde, mais elle est efficace pour les bonnes marques.

6. Espace de tête

Exemple de page d'atterrissage mobile pour Headspace

La page d'atterrissage mobile de Headspace utilise un texte grand et lisible combiné à un espace blanc important pour une expérience propre et ciblée qui attire votre attention sur l'appel à l'action principal.

FAQ sur les pages d'atterrissage mobiles

Qu'est-ce qu'une page d'atterrissage mobile ?
Une page d'atterrissage mobile est une page web spécialement conçue pour les appareils mobiles. Contrairement aux pages web ordinaires, qui contiennent souvent de multiples sections et options de navigation, les pages d'atterrissage mobiles se concentrent sur un seul objectif. Il peut s'agir d'attirer des clients potentiels, de stimuler les ventes, de promouvoir le téléchargement d'applications ou de toute autre action spécifique que vous souhaitez que les visiteurs entreprennent.
Quels sont les types de pages d'atterrissage mobiles et leur utilité ?
L'objectif premier d'une page d'atterrissage mobile est de convertir les visiteurs en clients ou en prospects. Pour ce faire, elles sont généralement conçues avec un minimum de distractions, des appels à l'action clairs et une expérience utilisateur rationalisée et optimisée pour les petits écrans.

Il existe plusieurs types de pages d'atterrissage mobiles, chacune ayant un objectif unique :

SqueezePages : Elles recueillent des adresses électroniques ou d'autres informations de contact en échange d'un aimant à prospects, tel qu'un livre électronique ou un code de réduction.

Click-Through Pages : Elles réchauffent les clients potentiels en leur fournissant des informations supplémentaires sur un produit ou un service avant de les diriger vers une page de vente.

Lead Capture Pages (pages de capture de prospects) : Recueillent des prospects au moyen de formulaires, souvent en liaison avec une mise à niveau du contenu ou l'inscription à un webinaire.

Pages de vente : Elles vendent directement un produit ou un service en mettant l'accent sur les avantages et les caractéristiques.
Pourquoi les pages d'atterrissage mobiles sont-elles essentielles pour votre entreprise ?
Selon Statista, il y a plus de 6,93 milliards d'utilisateurs de smartphones dans le monde, et 69 % des gens utilisent leurs appareils mobiles pour rechercher des produits. Les pages d'atterrissage mobiles sont donc essentielles pour les entreprises qui veulent réussir dans le paysage actuel où le mobile est roi.

Voici pourquoi vous devez donner la priorité aux pages d'atterrissage mobiles :

Amélioration de l'expérience utilisateur : Une conception optimisée pour les mobiles permet aux visiteurs de naviguer et d'interagir facilement avec votre contenu, ce qui se traduit par une expérience utilisateur positive.

Des taux de conversion plus élevés : En se concentrant sur un seul objectif et en minimisant les distractions, les pages d'atterrissage mobiles peuvent augmenter considérablement les taux de conversion par rapport aux pages web standard.

Meilleur référencement mobile : Les moteurs de recherche favorisent les pages d'atterrissage adaptées aux mobiles, ce qui améliore votre visibilité dans les résultats de recherche mobile.

Crédibilité accrue de la marque : En offrant une expérience mobile transparente, vous démontrez que votre entreprise est moderne et attentive aux besoins de ses clients.

En investissant dans des pages d'atterrissage mobiles, vous pouvez tirer parti des 6,93 milliards d'utilisateurs de smartphones dans le monde et générer une croissance significative pour votre entreprise.

Ensuite, d'autres conseils pour une utilisation mobile

J'espère que ce guide vous a apporté les connaissances et les bonnes pratiques nécessaires pour créer des pages d'atterrissage à fort taux de conversion et adaptées aux mobiles pour votre site Web WordPress.

En adoptant un état d'esprit axé sur le mobile, en optimisant les performances et en exploitant les techniques de conception réactive, vous pouvez vous assurer que vos pages d'atterrissage offrent une expérience utilisateur transparente qui génère davantage de prospects et de ventes de la part d'un public mobile en constante augmentation.

Si vous avez aimé cet article, vous trouverez peut-être utiles ces autres conseils en matière de conception adaptée aux mobiles :

Merci de votre lecture ! Nous aimerions connaître votre avis, alors n'hésitez pas à laisser un commentaire pour nous faire part de vos questions et de vos réactions.

Vous pouvez également nous suivre sur YouTube, X (anciennement Twitter) et Facebook pour obtenir d'autres contenus utiles au développement de votre entreprise.

avatar de l'auteur
Stacey Corrin Rédacteur
Stacey écrit sur WordPress et le marketing numérique depuis plus de 10 ans et sur d'autres sujets depuis bien plus longtemps. Parallèlement, elle est fascinée par la conception de sites web, l'expérience utilisateur et le référencement.

Divulgation : Notre contenu est soutenu par les lecteurs. Cela signifie que si vous cliquez sur certains de nos liens, il se peut que nous recevions une commission. Nous ne recommandons que des produits dont nous pensons qu'ils apporteront une valeur ajoutée à nos lecteurs.