Rendez votre site Web Elementor plus réactif pour les 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 un déterminant clé du classement de recherche de tout site Web. C'est principalement parce que plus de la moitié du trafic Web mondial provient du trafic mobile.

Par conséquent, un site Web mobile réactif 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 allons nous concentrer sur la façon dont nous pouvons créer un site Web réactif pour mobile avec le constructeur de pages Elementor.

• Qu'est-ce que la conception de site Web réactif d'Elementor?
• Comment régler les paramètres Mobile, Desktop et Tab
• Ajuster le titre dans 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 / bureau
• Modifier la visibilité de n'importe quelle section sur la vue bureau / mobile
• Changer l'ordre des colonnes
• Créer une section alternative
• Ajuster la largeur de la colonne
• 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 téléspectateurs puissent voir votre contenu sans aucun effort.

La plupart d'entre nous achètent un thème qui prétend également être réactif pour les mobiles; Cependant, les choses peuvent être frustrantes lorsque la conception de votre thème se décompose complètement sur l'écran du mobile.

Pour surmonter de telles situations, nous avons mis au point une solution mobile réactive dans laquelle vous pouvez créer la conception de votre site Web à partir de zéro à l'aide page réactifs du constructeur 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 rembourrage et l'alignement de la marge et du mobile. De plus, vous pourrez modifier les paramètres des colonnes et commander sur Mobile.

Désormais, vous pouvez modifier les paramètres mobiles de votre page en passant en mode d'affichage mobile et en cochant les options suivantes pour les ajuster en fonction de la disposition 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 de la colonne de page, comment cela semble-t-il parfait; centré, droit ou gauche
4. Vérifiez l'ordre des colonnes, si elles apparaissent dans le bon ordre ou si vous devez le modifier.

Maintenant, explorons plus en profondeur et découvrons comment les choses vont se passer avec Elementor Page Builder.

Comment régler 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 réactif en bas du menu

Ajuster le titre dans votre écran mobile

Parfois, nous voulons un en-tête audacieux et proéminent sur notre site de bureau, et cela semble parfaitement bien sur l'écran du bureau, mais lorsque vous activez la vue Mobile, le titre prend 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 Mobile. Vous pouvez également définir différentes tailles de texte pour les en-têtes mobiles qui ont fière allure sur l'écran du 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 prend 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 de l'en-tête qui semble 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 pour ordinateur, la taille de l'en-tête est de 49 pixels, mais sur la vue Mobile, elle ne rentre pas dans

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

Ajuster le remplissage ou les marges pour mobile

Lors du réglage des rembourrages, il est recommandé de ne pas utiliser de valeurs en pixels au lieu de valeurs définies 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 rembourrage de 70px à droite et à gauche, ce qui semble bien sur le site de bureau; Cependant, la vue mobile pour ce paramètre est un désordre complet.

On peut réajuster le rembourrage à 17 px de chaque côté, puis ça se passe complètement bien.

Vous pouvez également définir le paramètre des colonnes entières sur 750 px où votre contenu sera affiché dans une boîte sans avoir besoin d'ajuster l'écran à la fois sur le bureau ou sur la vue 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éé la colonne horizontalement, ce que les concepteurs préfèrent le plus, vous pouvez dupliquer les sections et gagner du temps. Créez une section à la fois et réutilisez-la si cela se passe bien pour gagner du temps.

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

Certaines images d'arrière-plan semblent bonnes sur la vue du bureau, mais il est possible que l'image ne soit pas aussi grande que sur l'écran d'un mobile. Alors, réfléchissez 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. Maintenant, quelle que soit l'image que vous choisissez, elle n'apparaîtra que sur la vue mobile.

Modifier la visibilité de n'importe quelle section sur la vue bureau / 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 dans deux ou trois sections ou colonnes différentes, mais nous n'aimons pas l'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 dans la section des paramètres. Aller à; Paramètres de la section> Avancé> Réactif> Colonne inversée et cliquez sur Oui.

Créer une section alternative

Créez des sections alternatives sur la vue mobile et bureau. 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 de curseur. Pour ce faire, accédez à l'onglet Avancé> activez / désactivez la visibilité de la section que vous ne souhaitez pas afficher et ajoutez-y une autre image.

Ajuster la largeur de la colonne

Toutes les sections de colonne 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éactive de toutes les tailles d'écran. Il vous permet de réajuster chaque section selon la sélection du mode d'affichage. Garder un site Web adapté aux mobiles est inévitable, car l'algorithme de Google prend le plus en compte 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.