Vous voulez savoir comment créer une page d'atterrissage mobile dans WordPress qui convertit réellement ?
Je suis passé par là, visitant un site sur mon téléphone pour y trouver un texte minuscule, des temps de chargement lents et des boutons sur lesquels je ne pouvais pas appuyer. C'est la raison pour laquelle j'ai commencé à construire des pages mobiles avec SeedProd.
Dans ce guide étape par étape, je vous montrerai exactement comment construire une page d'atterrissage mobile dans WordPress en utilisant un constructeur de drag-and-drop.
Etapes rapides pour créer une page d'atterrissage mobile sur WordPress :
Pourquoi rendre votre page d'atterrissage compatible avec les mobiles ?
Aujourd'hui, davantage de personnes accèdent à l'internet sur leur appareil mobile que sur leur ordinateur de bureau. Cela signifie que si votre page d'atterrissage n'est pas adaptée aux mobiles, vous passez à côté d'une grande partie de vos clients potentiels.
Pensez-y : si un site web met trop de temps à se charger sur votre téléphone ou s'il est difficile d'y naviguer, n'allez-vous pas le quitter pour trouver une meilleure option ? Des études montrent que 40 % des utilisateurs abandonnent un site web dont le chargement prend plus de 3 secondes.
Google sait que les utilisateurs mobiles sont importants, c'est pourquoi il donne la priorité à la conception mobile dans les résultats de recherche. Ainsi, une conception adaptée aux mobiles n'est pas seulement bénéfique pour l'expérience utilisateur, elle est également cruciale pour le référencement.
Vous vous demandez peut-être : "Quelle est la meilleure façon de concevoir des pages d'atterrissage mobiles dans WordPrerss ?" Il existe deux méthodes principales :
- Utiliser un plugin de page d'atterrissage WordPress : C'est l'option la plus facile, car elle ne nécessite aucun codage. Un plugin comme SeedProd, le meilleur plugin WordPress pour des pages d'atterrissage mobiles efficaces, fournit des modèles adaptés aux mobiles et un constructeur de drag-and-drop pour simplifier le processus.
- Créer un design réactif personnalisé : Cette option vous offre plus de souplesse, mais elle nécessite des connaissances en codage et peut prendre du temps.
Ce guide se concentre sur la méthode la plus simple : l'utilisation d'un plugin de page d'atterrissage WordPress. De cette façon, vous pouvez créer rapidement et facilement une page d'atterrissage mobile à fort taux de conversion.
Comment créer une page d'atterrissage mobile
Etape 1. Installer le plugin SeedProd Landing Page Builder
Prêt à créer une page d'atterrissage mobile ? La première étape consiste à installer le plugin SeedProd landing page.
SeedProd est un puissant constructeur de pages d'atterrissage mobiles WordPress qui rend la création de belles pages à fort taux de conversion un jeu d'enfant.
Ne vous inquiétez pas, il n'y a pas besoin de coder. SeedProd dispose d'une interface "glisser-déposer" et de modèles prédéfinis, ce qui permet à tout le monde de créer facilement de superbes pages d'atterrissage mobiles.
Bien que SeedProd ait une version gratuite, ce guide utilise SeedProd Pro. La version pro offre des fonctionnalités plus avancées et des options de personnalisation pour optimiser les pages d'atterrissage pour les conversions.
Et dans la formule élite, vous pouvez utiliser ses blocs WooCommerce pour créer des pages d'atterrissage eCommerce qui génèrent des ventes.
Voici comment installer SeedProd Pro :
- Achetez SeedProd Pro à partir de la page de tarification.
- Téléchargez le fichier du plugin depuis votre compte SeedProd.
- Allez dans votre tableau de bord WordPress et naviguez vers Plugins " Ajouter un nouveau.
- Cliquez sur Upload Plugin et sélectionnez le fichier zip SeedProd Pro.
- Cliquez sur Installer maintenant, et une fois installé, cliquez sur Activer le plugin.
Une fois activé, vous serez invité à saisir votre clé de licence. Vous pouvez trouver cette clé dans le tableau de bord de votre compte SeedProd. Après l'avoir saisie, vous êtes prêt à commencer à construire.
Étape 2. Choisir un modèle adapté aux mobiles
Maintenant que SeedProd est installé, nous allons créer une page d'atterrissage adaptée aux téléphones portables.
SeedProd offre une variété de modèles de pages d'atterrissage réactives, de sorte que vous n'avez pas à partir de zéro. Ces modèles de pages d'atterrissage mobiles sont déjà optimisés pour la réactivité mobile, ce qui garantit que votre page s'affiche parfaitement sur n'importe quelle taille d'écran.
Pour choisir un modèle :
- Allez dans votre tableau de bord WordPress et cliquez sur SeedProd " Landing Pages.
- Cliquez sur le bouton Ajouter une nouvelle page d'atterrissage.
- Vous verrez une bibliothèque de modèles. Parcourez les options ou utilisez les filtres pour affiner votre recherche. Par exemple, si vous souhaitez une page mobile pour votre webinaire, sélectionnez le filtre page d'atterrissage webinaire.
Conseils pour choisir un modèle adapté à la mobilité :
- Recherchez une mise en page claire et simple : Évitez les modèles qui comportent trop de colonnes ou qui sont trop encombrés, car ils risquent d'être écrasants sur les petits écrans.
- Donnez la priorité à la lisibilité : Assurez-vous que le texte est suffisamment grand pour être lu confortablement sur un appareil mobile.
- Choisissez des boutons larges et faciles à toucher : Les boutons doivent être faciles à toucher avec le doigt.
N'oubliez pas que vous pouvez personnaliser n'importe quel modèle pour l'adapter à votre marque et à votre message, alors n'ayez pas peur d'expérimenter.
Une fois que vous avez trouvé un modèle qui vous plaît, survolez-le et cliquez sur la coche pour le sélectionner.
Il vous sera demandé de donner un nom et une URL à votre page. Vous pourrez toujours les modifier ultérieurement. Une fois que vous êtes prêt, cliquez sur Enregistrer et commencer à modifier la page pour ouvrir le générateur de glisser-déposer.
Étape 3. Personnalisez votre page d'atterrissage pour les mobiles
C'est maintenant qu'intervient la partie la plus amusante : la personnalisation de votre page d'atterrissage mobile.
Le constructeur par glisser-déposer de SeedProd rend ce processus facile et intuitif. Vous verrez une bibliothèque de blocs pré-construits sur le côté gauche de votre écran, tels que des images, du texte, des boutons, des formulaires, et plus encore.
Il vous suffit de glisser-déposer les éléments dont vous avez besoin sur l'aperçu de la page. Au fur et à mesure que vous effectuez des modifications, vous les voyez apparaître en temps réel, ce qui facilite la visualisation de votre conception.
Principes de conception spécifiques aux mobiles
Lors de la conception d'un produit mobile, il convient de garder à l'esprit ces principes supplémentaires :
Zones de navigation conviviales
Tenez compte de la "zone du pouce", c'est-à-dire de la partie de l'écran facilement accessible avec le pouce lorsqu'on tient un smartphone. Placez les boutons importants et les éléments interactifs dans cette zone pour faciliter la navigation.
Tailles de police appropriées
Utilisez des tailles de police plus grandes pour garantir la lisibilité sur les petits écrans. Une bonne règle empirique est la suivante :
- Texte du corps : 16-18px
- Titres : 22px ou plus
- Boutons d'appel à l'action : 14px ou plus
SeedProd vous permet d'ajuster facilement la taille des polices. Il vous suffit de sélectionner un bloc de texte ou d'en-tête et d'ajuster le curseur de taille de police en fonction de vos besoins.
Traitement des contenus complexes
Pour les contenus complexes ou les tableaux de grande taille, envisagez :
- Utilisation d'accordéons ou de sections pliables pour gagner de la place
- Simplifier les tableaux pour l'affichage mobile ou permettre le défilement horizontal
- Utiliser des puces au lieu de paragraphes dans la mesure du possible
Voici comment ajouter un accordéon dans SeedProd :
Navigation simplifiée
Utilisez un menu hamburger pour gagner de l'espace et garder une navigation propre. Le bloc de navigation de SeedProd vous permet de créer facilement un menu adapté aux mobiles :
Continuez à ajouter du contenu à votre page jusqu'à ce que vous soyez satisfait de son apparence. Cliquez ensuite sur le bouton vert Enregistrer dans le coin supérieur droit pour enregistrer vos paramètres.
Étape 4. Configurez vos paramètres
Maintenant que votre page d'atterrissage est superbe sur mobile, configurons quelques paramètres importants pour vous aider à suivre les performances et à capturer des prospects.
Connectez votre service de marketing par courriel
SeedProd s'intègre de manière transparente avec les services d'email marketing les plus populaires comme Constant Contact, MailChimp, et bien d'autres. Cette intégration vous permet de développer facilement votre liste d'emails en capturant des prospects directement depuis votre page d'atterrissage mobile.
Pour connecter votre service de marketing par courriel :
- Dans le constructeur de SeedProd, cliquez sur l'onglet Connecter.
- Choisissez votre fournisseur de messagerie dans la liste et suivez les instructions à l'écran pour connecter votre compte.
Configuration des paramètres de la page
Cliquez ensuite sur l'onglet Paramètres de la page pour afficher les paramètres de votre page d'atterrissage. Vous pouvez modifier le nom et l'URL de votre page de destination et choisir d'activer ou non le mode d'isolation.
Qu'est-ce que le mode d'isolement ?
Le mode Isolation accélère le chargement de votre page d'atterrissage en évitant les conflits avec votre thème WordPress et vos plugins. Si vous rencontrez des problèmes d'affichage, l'activation de cette option peut vous aider.
SeedProd vous permet également d'optimiser votre page d'atterrissage pour les moteurs de recherche et de suivre les indicateurs clés avec Google Analytics. Vous pouvez personnaliser le titre et la méta-description de votre page et ajouter des codes de suivi.
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.
Étape 5. Prévisualisation et publication de votre page d'atterrissage mobile
Avant de lancer votre nouvelle page d'atterrissage, il est crucial de voir comment elle se présente sur différents appareils. Heureusement, SeedProd rend cela facile grâce à sa fonction de prévisualisation mobile intégrée.
Voici comment prévisualiser votre page d'atterrissage :
- Dans le constructeur de SeedProd, cherchez l'icône du téléphone portable en bas de l'écran.
- Cliquez sur l'icône pour basculer entre l'affichage sur ordinateur, sur tablette et sur mobile.
Cet aperçu vous permet de vérifier que votre mise en page, la taille du texte et les boutons sont optimisés pour les petits écrans. Si quelque chose ne vous semble pas correct, vous pouvez facilement faire des ajustements directement dans le mode de prévisualisation mobile.
Prêt à publier ?
- Cliquez sur le bouton vert Enregistrer pour sauvegarder vos modifications.
- À côté du bouton Enregistrer, cliquez sur la flèche pour enregistrer votre page d'atterrissage en tant que modèle pour une utilisation ultérieure ou cliquez sur Publier pour la mettre en ligne sur votre site web.
Félicitations ! Vous avez créé avec succès une page d'atterrissage adaptée aux mobiles dans WordPress. Vous êtes maintenant prêt à obtenir plus de prospects et de conversions de la part de vos visiteurs mobiles.
Voici la version finale d'une page que j'ai créée sur mon site web de test :
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
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.
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
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 y a plus de chances qu'il se convertisse.
4. Hélix cartographié
La page d'atterrissage mobile de Maped Helix 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 du 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
La page d'atterrissage mobile de Headspace utilise un texte grand et lisible associé à un espace blanc important pour une expérience propre et ciblée qui attire votre attention sur l'appel à l'action principal de l'entreprise.
Foire aux questions sur la page d'atterrissage mobile
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.
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 :
- Comment éditer des menus mobiles dans WordPress (Guide du débutant)
- Les meilleures pratiques de la page d'atterrissage pour des taux de conversion incroyables
- Comment masquer les images en vue mobile sur WordPress
- 9 exemples de sites Web adaptés aux mobiles pour s'inspirer du Responsive Design
- Comment rendre un site Web accessible aux utilisateurs mobiles (étapes faciles)
- 11 meilleurs plugins WordPress pour sites web adaptés aux téléphones portables
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.
