Rendez votre site Web Elementor plus réactif et adapté aux mobiles

Un site Web réactif pour mobile est un élément essentiel de toute entreprise en ligne.

Google utilise la vitesse de chargement des pages mobiles comme déterminant clé du classement de recherche de tout site Web. Cela est principalement dû au fait que plus de la moitié du trafic Web mondial provient du trafic mobile.

Par conséquent, un site Web réactif pour mobile est inévitable à la fois pour la santé de votre site et pour un meilleur classement dans le moteur de recherche Google. Dans cet article, nous nous concentrerons sur la façon dont nous pouvons créer un site Web réactif pour mobile avec le générateur de pages Elementor.

• Qu'est-ce que la conception de site Web réactif d'Elementor
• Comment ajuster les paramètres Mobile, Desktop et Tab
• Ajustez le titre sur votre écran mobile
• Ajuster le remplissage ou les marges pour mobile
• Créez chaque colonne horizontalement et elle s'ajustera à merveille sur tous les appareils
• Changer l'image d'arrière-plan selon la vue mobile/ordinateur de bureau
• Modifier la visibilité de n'importe quelle section sur la vue ordinateur/mobile
• Changer l'ordre des colonnes
• Créer une section alternative
• Ajuster la largeur des colonnes
• Conclusion

Qu'est-ce que la conception de site Web réactif d'Elementor

Une mise en page réactive fonctionne de manière innovante en mettant automatiquement à l'échelle tout le contenu en fonction de chaque taille d'écran. Il redimensionne automatiquement les images et le contenu sur l'écran du mobile afin que vos spectateurs puissent voir votre contenu sans aucun effort.

La plupart d’entre nous achètent un thème qui prétend également être adapté aux mobiles ; cependant, les choses peuvent être frustrantes lorsque la conception de votre thème s'effondre complètement sur l'écran du mobile.

Pour surmonter de telles situations, nous avons mis au point une solution mobile réactive qui vous permet de créer la conception de votre site Web à partir de zéro à l'aide du générateur de pages Elementor . Avec l'aide de ces outils réactifs mobiles, vous pouvez modifier n'importe quel coin de la mise en page de votre site Web, en particulier la typographie, le remplissage et l'alignement de la marge et du mobile. De plus, vous pourrez modifier les paramètres et l’ordre des colonnes sur mobile.

Vous pouvez désormais modifier les paramètres mobiles de votre page en passant au mode d'affichage mobile et en cochant les options suivantes pour les ajuster en fonction de la mise en page mobile.

1. Vérifiez si un titre semble trop grand sur un écran mobile.
2. Vérifiez le remplissage du contenu ou l'espace sur les côtés du contenu
3. Vérifiez l'alignement des colonnes de la page, en quoi est-il parfait ? centré, à droite ou à gauche
4. Vérifiez l'ordre des colonnes, si elles apparaissent dans le bon ordre ou si vous devez le modifier.

Maintenant, approfondissons et découvrons comment les choses vont fonctionner avec le générateur de pages Elementor.

Comment ajuster les paramètres Mobile, Desktop et Tab

Presque toutes les fonctionnalités modifiables ont la possibilité d'ajuster les paramètres Mobile, Desktop et Tab. si vous cliquez sur le mode responsive en bas du menu

Ajustez le titre sur votre écran mobile

Parfois, nous souhaitons un titre audacieux et bien visible sur notre site de bureau, et il apparaît parfaitement bien sur l'écran du bureau, mais lorsque vous activez la vue Mobile, le titre occupe tout l'écran et ne semble pas s'intégrer.

Vous pouvez ajuster la taille du texte de n'importe quel élément de texte sur l'onglet et sur mobile. Vous pouvez également définir différentes tailles de texte pour les titres mobiles qui s'affichent parfaitement sur l'écran mobile et s'intègrent mieux à l'écran. Dans cette page de démonstration, j'ai créé un titre qui a fière allure sur le site de bureau, tandis que sur l'écran mobile, il occupe tout l'écran.

Si je clique sur l'option d'édition de la colonne d'en-tête, je peux accéder à la section typographie où je peux ajuster la taille du titre qui s'affiche bien sur le bureau et également sur l'écran du mobile. Je peux contrôler les deux séparément. Pour la vue de mon site de bureau, la taille du titre est de 49 px, mais sur la vue Mobile, elle ne rentre pas dans la vue.

Pour réajuster, je clique sur le mode réactif mobile > style > typographie > ajuster la taille des px à 30 qui s'adapte facilement à l'écran du mobile.

Ajuster le remplissage ou les marges pour mobile

Lors de l'ajustement des remplissages, il est recommandé de ne pas utiliser de valeurs en pixels au lieu de définir des valeurs en EM ou en pourcentage, car cela conservera la taille par rapport à la taille globale de l'écran.

Vous pouvez voir que nous avons utilisé un remplissage de 70 px à droite et à gauche, ce qui semble bien sur le site de bureau ; cependant, la vue mobile pour ce paramètre est un gâchis complet.

Nous pouvons réajuster le remplissage à 17 px de chaque côté, cela s'avère alors tout à fait correct.

Alternativement, vous pouvez définir le paramètre des colonnes entières sur 750 px où votre contenu sera affiché dans une boîte sans qu'il soit nécessaire d'ajuster l'écran sur la vue de bureau ou mobile ; il ajustera automatiquement le contenu de la boîte.

Créez chaque colonne horizontalement et elle s'ajustera à merveille sur tous les appareils

Une fois que vous avez créé une colonne horizontalement, ce que les concepteurs préfèrent le plus, vous pouvez alors dupliquer les sections et gagner du temps. Créez une section à la fois puis réutilisez-la si tout se passe bien pour gagner du temps.

Changer l'image d'arrière-plan selon la vue mobile/ordinateur de bureau

Certaines images d'arrière-plan s'affichent bien sur l'écran du bureau, mais il est possible que l'image ne soit pas aussi grande que sur l'écran d'un mobile. Alors, pensez de manière créative et choisissez une image différente sur l'écran du mobile. Pour sélectionner une autre vue mobile, cliquez sur la section > onglet style > cliquez sur l'icône de l'appareil et sélectionnez la vue mobile. Désormais, quelle que soit l’image que vous choisissez, elle apparaîtra uniquement sur la vue mobile.

Modifier la visibilité de n'importe quelle section sur la vue ordinateur/mobile

Vous pouvez également contrôler la visibilité de n'importe quelle section ou colonne en fonction de l'appareil.

Parfois, nous affichons notre contenu ou nos images en deux ou trois sections ou colonnes différentes, mais nous n'aimons pas les afficher sur mobile. C'est pourquoi Elementor peut masquer la section que vous n'aimez pas afficher sur la vue mobile.

Allez dans > paramètres de la section > avancé > réactif. Vous y verrez différentes possibilités ou préférences visuelles ; vous pouvez masquer la section sur le bureau, masquer sur l'onglet ou masquer sur mobile selon vos préférences.

Changer l'ordre des colonnes

Vous pouvez également modifier l'ordre des colonnes à partir de la section des paramètres. Allez à ; Paramètres de la section > Avancé > Responsive > Colonne inversée et cliquez sur oui.

Créer une section alternative

Créez des sections alternatives sur la vue Mobile et ordinateur. Parfois, la section du curseur ne semble pas aussi utile sur mobile que sur le bureau, vous pouvez donc utiliser n'importe quelle autre section au lieu d'utiliser la section du curseur. Vous pouvez le faire en allant dans l'onglet Avancé > activer/désactiver la visibilité de la section que vous ne souhaitez pas afficher et y ajouter une image alternative.

Ajuster la largeur des colonnes

Toutes les sections de colonnes ont une largeur de 100 % lorsque vous les affichez sur la vue mobile. Cependant, la largeur peut être modifiée en fonction de la largeur de la colonne sur Mobile. Si vous avez deux colonnes, vous pouvez définir la largeur maximale de chaque section sur 50 %.

Conclusion

Elementor est livré avec toutes les fonctionnalités puissantes pour contrôler la disposition des colonnes réactives de toutes les tailles d'écran. Il vous permet de réajuster chaque section selon la sélection du mode d'affichage. Conserver un site Web adapté aux mobiles est inévitable, car l'algorithme de Google considère le plus le classement des sites Web adaptés aux mobiles. Les sites Web réactifs sont non seulement essentiels pour obtenir un meilleur référencement, mais vous devez également générer plus de trafic, car plus de 80 % du trafic provient des vues mobiles.

Désormais, le constructeur de pages Elementor est doté de fonctionnalités exclusives qui permettent à ses utilisateurs de créer un site adapté aux mobiles sans trop d'effort. J'espère que vous trouverez mon article utile et que vous aurez toutes vos réponses sur la façon de créer un site Web réactif à l'aide d'Elementor.