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.
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.
Maintenant, approfondissons et découvrons comment les choses vont fonctionner avec le générateur de pages Elementor.
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
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.
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.
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.
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.
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.
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é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.
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 %.
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.
Les en-têtes et pieds de page d’un site Web sont des éléments essentiels. Dans la plupart des cas, l'en-tête fournit la navigation…
Astra et OceanWP sont deux des thèmes WordPress les plus populaires sur le marché. Professionnel…
Créer un excellent site Web d'actualités ne nécessite pas que vous deveniez un concepteur de sites Web. Nous…
Le thème Newspaper est l'un des thèmes WordPress les plus importants conçus par tagDiv, un…
Lorsqu'il s'agit de créer une boutique en ligne, WooCommerce est le plugin incontournable. Il…
Un en-tête est généralement la première chose qu’une personne voit lorsqu’elle visite votre site Web,…
Afficher les commentaires
Post rapide ! Bardzo odpowiada na moje potrzeby. Je suis très fort avec mon mobile si je suis rozjechał. Dziękuję za wskazówki. Są bardzo pomocne 🙂
Super! Je n'ai pas eu le temps de regarder 2 fois la piscine - j'ai mis une colonne dans la colonne et j'ai ludoczności sekcji. Wielkie dzięki za pomoc :)
Bonjour, pour modifier l'ordre des colonnes vous pouvez utiliser le glisser-déposer directement ou l'explorateur de sections. Concernant la visibilité, il s'agit de la configuration avancée de la section, vous devrez désactiver la visibilité sur ordinateur, tablette et mobile.
comment faire un remplissage réactif ?
Bonjour, le rembourrage n'est pas exactement réactif, c'est une valeur fixe. Si vous rencontrez un problème de réponse, vous devez définir une valeur de remplissage différente pour l'ordinateur de bureau, la tablette et le téléphone.