En bref : Comment créer une page d'accueil mobile sous WordPress – Vous pouvez créer une page d'accueil optimisée pour les mobiles sans toucher au code. Voici les 5 étapes à suivre avec SeedProd :
- Installez SeedProd: téléchargez et activez le plugin, puis saisissez votre clé de licence.
- Choisissez un modèle – Sélectionnez un modèle adapté aux appareils mobiles et donnez un nom à votre page.
- Adaptation au format mobile: ajoutez votre contenu, définissez la taille des polices et respectez les principes de la zone de prévisualisation.
- Configurer les paramètres – Connectez votre service de messagerie et ajoutez les codes de suivi.
- Aperçu et publication – Utilisez le mode d'aperçu mobile pour vérifier la mise en page, puis publiez votre contenu.
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.
Une page d'accueil mobile sous WordPress est une page unique et ciblée, conçue pour offrir un rendu optimal et générer un bon taux de conversion sur les smartphones. Vous pouvez en créer une rapidement à l'aide d'un plugin de création de site web par glisser-déposer, sans aucune connaissance en programmation.
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.
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.
Réfléchissez-y : si un site web met trop de temps à se charger sur votre téléphone ou s'il est difficile à parcourir, ne le quitteriez-vous pas pour trouver une meilleure alternative ? Une étude de Google montre que 53 % des utilisateurs mobiles abandonnent un site qui met plus de 3 secondes à se charger.
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.
D'après mes tests GTmetrix, une page d'accueil créée avec SeedProd s'est chargée en 556 ms, contre 1 882 ms pour la même page créée avec Elementor.
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 constructeur de sites web par glisser-déposer pour WordPress qui vous permet de créer une page d'accueil à fort taux de conversion en moins d'une heure.
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'accueil est optimisée pour les appareils mobiles, configurons quelques paramètres importants qui vous permettront de suivre ses performances et de générer des prospects.
Connectez votre service de marketing par courriel
SeedProd s'intègre directement aux principaux services de marketing par e-mail tels que Constant Contact, MailChimp et bien d'autres. Cette intégration vous permet d'élargir facilement votre liste de diffusion en captant des prospects directement depuis votre page d'accueil 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
Puis-je créer une page d'accueil depuis mon téléphone ?
Vous pouvez accéder à votre tableau de bord WordPress depuis le navigateur d'un téléphone et effectuer des modifications de base, mais l'éditeur « glisser-déposer » de SeedProd fonctionne mieux sur un ordinateur de bureau ou un ordinateur portable. Les pages d'accueil que vous créez s'adaptent parfaitement aux appareils mobiles, ce qui garantit à vos visiteurs une excellente expérience sur n'importe quel appareil.
L'utilisation de SeedProd est-elle gratuite pour les pages d'accueil mobiles ?
SeedProd propose une version gratuite sur WordPress.org, dotée de fonctionnalités de base pour la création de pages d'atterrissage. Pour bénéficier de modèles adaptés aux appareils mobiles, d'intégrations d'e-mails et de blocs optimisés pour la conversion, vous devrez opter pour SeedProd Pro. Découvrez toutes les formules disponibles sur la page des tarifs de SeedProd.
Comment puis-je vérifier si ma page d'accueil mobile fonctionne sur tous les appareils ?
Le mode d'aperçu mobile intégré à SeedProd vous permet de vérifier la mise en page avant la publication. Cliquez sur l'icône représentant un téléphone située en bas de l'éditeur pour basculer entre les affichages pour ordinateur, tablette et mobile. Une fois la publication effectuée, effectuez des tests sur de vrais appareils ou utilisez Chrome DevTools pour vérifier que votre page s'affiche correctement sur toutes les tailles d'écran.
Mon thème WordPress a-t-il une incidence sur l'apparence de ma page d'accueil sur mobile ?
Le mode d'isolation de SeedProd empêche votre thème WordPress d'influencer l'apparence de votre page d'accueil. Activez-le dans l'onglet « Paramètres de la page » pour charger votre page sans les feuilles de style CSS ni les scripts de votre thème. Cette fonctionnalité est particulièrement utile si vous constatez des conflits de mise en page ou des temps de chargement plus longs.
Ensuite, d'autres conseils pour une utilisation mobile
Votre page d'accueil mobile est prête à transformer vos visiteurs en prospects. Procurez-vous SeedProd dès maintenant et publiez votre première page d'accueil mobile dès aujourd'hui.
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 à participer à la conversation sur YouTube, X et Facebook pour obtenir d'autres conseils et contenus utiles pour développer votre entreprise.
