Comment ajuster Ordre d’empilage des colonnes Divi sur les appareils mobiles

CAT Sur la deuxième ligne (la ligne dupliquée que vous venez de créer), faites glisser le formulaire image dans la deuxième colonne et le formulaire texte dans la première colonne. C’est une façon créative et efficace d’afficher le contenu d’une page Web en alternant les positions de l’image et du texte sur chaque ligne de cette façon. Mais il y a aussi des problèmes lorsque les colonnes sont empilées sur un appareil mobile. Lorsque vous réduisez la largeur du navigateur à moins de 980 Px (point d’arrêt de l’appareil mobile), le contenu de chaque ligne est empilé de gauche à droite. Cela signifie que la première colonne de la ligne chevauchera la deuxième colonne. Cela peut causer des problèmes si vous voulez maintenir un flux constant de contenu sur votre appareil mobile. En utilisant la disposition actuelle, les flux de contenu sur l’appareil mobile sont empilés dans l’ordre suivant:
Colonne 1 (Image) colonne 2 (texte) colonne 1 (texte) colonne 2 (Image) Une meilleure disposition de l’appareil mobile consiste à modifier l’ordre d’empilage des colonnes sur une ligne pour une disposition plus cohérente du contenu. Deux façons de changer l’ordre d’empilage des colonnes sur votre appareil mobile 1: utilisez la fonction Disable on de Divi pour changer l’ordre d’empilage des colonnes sur votre appareil mobile la fonction Disable on de Divi vous permet de créer différentes versions du contenu sur votre mobile, tablette et moniteur de bureau. En quelques clics, vous pouvez masquer ou afficher une partie du contenu sur n’importe quel appareil.
Par exemple, nous devons garder la deuxième ligne visible sur le Bureau, mais la cacher sur l’appareil mobile. Par conséquent, nous devons créer une version différente de la deuxième ligne afin qu’elle ne soit visible que sur les appareils mobiles. Utilisez Visual Builder pour copier la deuxième ligne. Ouvrez les paramètres de ligne de la deuxième ligne avant d’éditer une nouvelle ligne dupliquée. Dans les paramètres généraux
I lignes, sélectionnez pour désactiver les lignes sur le téléphone et la tablette. La deuxième ligne est maintenant cachée sur l’appareil mobile. Ensuite, nous devons modifier la disposition de la nouvelle troisième ligne en fonction de la façon dont vous voulez que l’ordre des colonnes apparaisse sur le téléphone mobile.
Faites glisser le contenu du formulaire texte dans la deuxième colonne et le formulaire image dans la première colonne. Allez maintenant aux paramètres généraux de ligne de la troisième ligne et sélectionnez la case pour désactiver les lignes sur le Bureau. Enregistrer les résultats de l’inspection maintenant. Vous remarquerez que la troisième colonne est désactivée sur le Bureau, puis activée sur l’appareil mobile. Cela crée une disposition plus cohérente sur l’appareil mobile. C’est tout! Cette fonctionnalité vous permet de désactiver et d’activer certaines sections de contenu et vous permet d’éditer \/ réorganiser facilement n’importe quel type de mise en page.
De plus, lorsque vous visualisez une page depuis Visual Builder, Divi peut facilement mélanger le contenu caché dans la page afin que vous puissiez identifier ce qui est désactivé. Masquer les colonnes et les lignes en utilisant la fonction désactiver vers le haut est une option sûre. Cependant, si vous faites trop de travail et \/ ou de contenu, modifier la page peut causer de la confusion. De plus, lorsque vous mettez à jour le contenu, vous devez mettre à jour toutes les versions du contenu, pas seulement une seule version. Si désactiver et activer le contenu n’est pas la bonne solution pour vous, il y a une autre façon de trier le contenu sur votre appareil mobile en utilisant les classes CSS.
Pour ce faire, nous utiliserons des CSS personnalisés afin que nous puissions ajouter une classe à la colonne qui triera les colonnes sur l’écran Mobile comme vous le souhaitez. Puis, à partir du tableau de bord WordPress, allez à Divi → personnalisateur de thème → attachez CSS et ajoutez les CSS suivants: @ Media all et (largeur maximale: 980px) {
Nouvelle ligne I
OLA flexible) Ajouter \
Si vous craignez de basculer entre plusieurs versions désactivées \/ activées du contenu, vous pouvez utiliser la méthode CSS. Depuis des années, les gens discutent de la façon dont les moteurs de recherche gèrent le contenu désactivé ou caché sur les pages. Bien que vous puissiez cacher le contenu de certains appareils, Google peut encore le saisir. Cela peut être considéré comme du contenu répétitif et peut indiquer que l’utilisation de la fonction « désactiver ouvrir » peut avoir un effet négatif sur l’emplacement de la page. Cependant, les moteurs de recherche comme Google sont très bons pour déterminer si le contenu est caché pour des raisons de mise en page réactive. En bref, Google ne vous punira pas pour savoir si vous copiez du contenu pour différents appareils. Le contenu peut être utilisé en toute sécurité tant qu’il n’est pas caché pour des raisons malveillantes. La possibilité de modifier l’ordre de pile des colonnes est utile et parfois nécessaire. Nous devons tous créer une disposition de conception unique pour la visualisation de bureau sans affecter la cohérence du flux de contenu sur les appareils mobiles. En utilisant la fonction Disable on de Divi, vous pouvez créer une disposition complètement différente pour chaque appareil. De plus, avec quelques lignes de CSS personnalisées, vous pouvez facilement ajouter des classes aux lignes et aux colonnes pour trier les appareils mobiles. J’espère que cet article vous aidera à mieux contrôler votre moniteur de téléphone. J’ai hâte d’entendre vos commentaires. Bonjour!