Je souhaite obtenir des informations sur une formation complète concernant le thème DIVI dispensé
par un organisme de formation certifié par l’état.
Que la formation soit finançable par mon CPF (idéalement) ou autre


Divi est basé sur une grille réactive qui empile (ou ordonne) vos colonnes de manière spécifique lorsque vous passez de l’affichage de bureau à l’affichage mobile. Les colonnes sont empilées dans l’ordre de gauche à droite. Donc, si vous avez trois colonnes sur le bureau, la colonne de gauche (première) s’empilera en premier sur le téléphone, suivie des colonnes 2 et 3 ci-dessous. Cela a du sens et est généralement nécessaire pour la plupart des sites Web. Mais parfois, certaines conceptions qui semblent bonnes sur le bureau entraînent un ordre de contenu incohérent sur mobile. Dans ce cas, vous devrez réorganiser l’ordre des colonnes pour une expérience utilisateur plus cohérente sur les appareils mobiles.

Aujourd’hui, je vais vous montrer deux façons de changer l’ordre d’empilement de Divi sur mobile. La première consiste à créer une version alternative du contenu spécifiquement pour les appareils mobiles en utilisant la fonction «Désactiver sur» de Divi. La deuxième option consiste à utiliser un CSS personnalisé pour ajouter des classes à vos colonnes qui détermineront leur ordre sur les appareils mobiles.

Commençons!

Créer du contenu

Abonnez-vous à notre chaîne YouTube

Sur une nouvelle page, cliquez pour utiliser le Divi Builder et démarrer le Visual Builder.

Sélectionnez une mise en page à deux colonnes (½ – ½) dans Visual Builder.

Ajoutez un module d’image à la première colonne de votre ligne.

Téléchargez et collez une image sous Paramètres d’image. (J’utilise une image 770 x 433 de unsplash.com)

Ensuite, ajoutez un module de texte dans la deuxième colonne de votre ligne.

Sous les paramètres de texte généraux, ajoutez votre texte à la zone de texte Contenu.

économiser

Vous devriez maintenant avoir une ligne avec 2 colonnes avec la première ligne contenant une image et la deuxième ligne contenant du texte. J’ai étiqueté les colonnes pour vous dans l’image ci-dessous.

Dans Visual Builder, dupliquez la ligne avec les 2 mêmes colonnes en cliquant sur l’icône de double ligne.

Sur votre deuxième ligne (la double ligne que vous venez de créer), faites glisser le module d’image dans la deuxième colonne et le module de texte dans la première colonne.

La modification de la position de l’image et du texte sur chaque ligne de cette manière peut être un moyen créatif et efficace d’afficher votre contenu sur votre page Web. Cependant, un problème se pose également lorsque les colonnes sont empilées sur des appareils mobiles. Si vous réduisez la largeur de votre navigateur à moins de 980 pixels (le point d’arrêt de l’appareil mobile), le contenu de chaque ligne s’empilera de gauche à droite. Cela signifie que la première colonne de votre ligne sera empilée au-dessus de la deuxième colonne. Cela peut poser problème si vous souhaitez que le flux de contenu sur les appareils mobiles reste cohérent. Avec la mise en page actuelle, le flux de contenu sur les appareils mobiles est empilé dans l’ordre suivant:

Colonne 1 (image)
Colonne 2 (texte)
Colonne 1 (texte)
Colonne 2 (image)

Une meilleure mise en page pour les appareils mobiles consiste à réorganiser l’ordre d’empilement des colonnes dans l’une de vos lignes afin d’obtenir une mise en page plus cohérente du contenu.

Deux façons de modifier l’ordre d’empilement des colonnes sur les appareils mobiles

1: Changer l’ordre d’empilement des colonnes sur mobile à l’aide de la fonction de désactivation de Divi

La fonction «Désactiver sur» de Divi vous permet de créer différentes versions de votre contenu sur les écrans de téléphone, de tablette et de bureau. En quelques clics, vous pouvez masquer ou afficher des zones de contenu sur n’importe quel appareil.

Dans cet exemple, nous devons garder la deuxième ligne visible sur le bureau, mais la masquer sur les appareils mobiles. Ensuite, nous devons créer une autre version de la deuxième ligne pour être uniquement visible sur les appareils mobiles.

À l’aide de Visual Builder, dupliquez la deuxième ligne.

Ouvrez les paramètres de ligne sur la deuxième ligne avant de modifier la nouvelle ligne dupliquée.

Sous Paramètres généraux de la ligne, cochez cette case pour désactiver la ligne sur le téléphone et la tablette.

économiser

Désormais, la deuxième ligne sera masquée sur les appareils mobiles. Ensuite, nous devons modifier la disposition de notre nouvelle troisième ligne pour afficher l’ordre des colonnes sur mobile.

Faites glisser le contenu du module de texte dans la deuxième colonne et le module d’image dans la première colonne.

Accédez maintenant aux paramètres généraux de la ligne pour la troisième ligne et cochez la case pour désactiver la ligne sur le bureau.

économiser

Vérifiez maintenant vos résultats. Vous constaterez que la troisième colonne est désactivée sur le bureau, puis activée sur les appareils mobiles. Cela crée une mise en page plus cohérente sur les appareils mobiles.

C’est ça!

Avec cette fonctionnalité de désactivation et d’activation de certaines zones de contenu, vous pouvez facilement modifier / réorganiser tout type de mise en page.

Lorsque vous affichez votre page dans Visual Builder, Divi masque commodément le contenu caché sur la page afin que vous puissiez voir quel contenu est désactivé.

L’utilisation de la fonction Désactivé sur pour masquer les colonnes et les lignes est une valeur sûre. Cependant, si vous faites cela trop souvent et / ou si vous avez beaucoup de contenu, la modification de la page peut être déroutante. Et lorsque vous effectuez des mises à jour du contenu, vous devez mettre à jour le contenu sur toutes les versions, pas seulement sur une.

Si la désactivation et l’activation du contenu ne sont pas la solution pour vous, il existe un autre moyen de commander votre contenu sur mobile à l’aide de classes CSS.

2. Modifiez l’ordre d’empilement des colonnes sur mobile à l’aide des classes CSS

Pour ce faire, nous utilisons du CSS personnalisé afin que nous puissions ajouter une classe à nos colonnes qui les triera comme nous le souhaitons sur l’affichage mobile.

Ensuite, allez dans Divi → Personnalisateur de thème → CSS supplémentaire dans votre tableau de bord WordPress et ajoutez le CSS suivant:

@media all and (max-width: 980px) {
/*** wrap row in a flex box ***/
.custom_row {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
-webkit-flex-wrap: wrap; /* Safari 6.1+ */
flex-wrap: wrap;
}

/*** custom classes that will designate the order of columns in the flex box row ***/
.first-on-mobile {
-webkit-order: 1;
order: 1;
}

.second-on-mobile {
-webkit-order: 2;
order: 2;
}

.third-on-mobile {
-webkit-order: 3;
order: 3;
}

.fourth-on-mobile {
-webkit-order: 4;
order: 4;
}
/*** add margin to last column ***/
.custom_row:last-child .et_pb_column:last-child {
margin-bottom: 30px;
}

}

Enregistrer et publier

Si vous regardez le CSS que vous venez d’ajouter, vous voyez que tout le CSS est contenu dans une requête multimédia qui utilise le CSS pour les appareils mobiles uniquement (sur des tailles d’écran inférieures à 980 pixels de large).
Vous remarquerez également la première classe nommée « Ligne personnalisée ». Cette classe sera ajoutée à la ligne où vous souhaitez modifier l’ordre d’empilement des colonnes sur les appareils mobiles.

Les 4 classes suivantes (« First-on-Mobile », « Second-on-Mobile », « Third-on-Mobile » et « Fourth-on-Mobile ») se voient attribuer un attribut d’ordre et une valeur numérique. Ces classes sont ajoutées aux colonnes de votre ligne « Personnalisé » pour déterminer l’ordre dans lequel elles doivent apparaître sur les appareils mobiles.

Après avoir configuré notre CSS, appliquons ces classes à notre page.

Assurez-vous que vos deux lignes ont été créées en suivant les instructions. Assurez-vous également qu’aucune des lignes n’est désactivée sur les appareils mobiles ou les ordinateurs de bureau.

Dans cet exemple, nous modifions l’ordre des colonnes de la deuxième ligne sur les appareils mobiles. Voici une illustration de ce que nous voulons réaliser.

Utilisez Visual Builder pour ouvrir les paramètres de ligne de la deuxième ligne.

Dans le paramètre de ligne de l’onglet CSS, ajoutez:

Ajoutez custom_row à la zone de texte Classe CSS. (qui enveloppe votre ligne dans une flexbox)

Dans la colonne 1, ajoutez « second-on-mobile » dans le champ de texte de la classe CSS.

Ajoutez « first-on-mobile » à la zone de texte CSS Class dans la colonne 2 (Cela changera l’ordre de la colonne 2, qui apparaîtra en premier sur le téléphone.)

Remarque: il est important d’ajouter une classe de commande à chaque colonne.

Regardons maintenant les résultats. Sur les appareils mobiles, notez comment les colonnes de la deuxième ligne ont été modifiées pour correspondre à la première ligne. Cela crée un flux cohérent d’image → texte → image → texte.

Changer l’ordre d’empilement des colonnes de toute mise en page à l’aide de classes CSS

Vous pouvez modifier l’ordre de n’importe quelle disposition de colonne en utilisant la même méthode. N’oubliez pas que le CSS personnalisé vous permet d’ajouter des première, deuxième, troisième et quatrième valeurs de placement. Par exemple, si vous voulez changer l’ordre d’un quart, un quart, un demi-quart comme ceci:

Suivez simplement les mêmes étapes que précédemment. Dans vos paramètres de ligne sur l’onglet CSS, ajoutez la classe « custom_row » à la ligne et ajoutez votre classe de commande (« first-on-mobile », « second-on-mobile », « third-on-mobile »). à chacune de vos colonnes. N’oubliez pas d’ajouter une classe à chacune de vos colonnes afin qu’elles aient toutes une certaine valeur d’ordre.

C’est ça!

Méthode préférée

Si vous souhaitez créer différentes mises en page pour chaque appareil et / ou modifier le contenu en plus de l’ordre des colonnes sur les appareils mobiles, vous devrez utiliser la fonction «Désactivé sur» de Divi pour personnaliser vos mises en page.

Si vous avez juste besoin de réorganiser les colonnes sur mobile sans changer le contenu et que vous ne voulez pas avoir à jongler avec plusieurs versions de contenu désactivées / activées, vous pouvez profiter de la méthode CSS.

Considérations SEO

Il y a eu beaucoup de discussions au fil des ans sur la façon dont les moteurs de recherche traitent le contenu désactivé ou masqué sur une page. Même si vous masquez le contenu de certains appareils, Google peut l’explorer. Cela peut être considéré comme du contenu en double et peut indiquer que l’utilisation de la fonction «Désactiver à» affecte négativement le classement de votre page. Cependant, les moteurs de recherche comme Google peuvent assez bien dire si le contenu est masqué pour des raisons de mise en page réactive. En bref, Google sait si vous dupliquez du contenu pour différents appareils et ne vous pénalisera pas pour cela. Tant que tu ne le fais pas Masquer le contenu pour des raisons malveillantesest-il sûr à utiliser.

Dernières pensées

Pouvoir modifier l’ordre d’empilement des colonnes est extrêmement utile et parfois nécessaire. Nous devons tous être en mesure de créer une disposition de conception d’affichage de bureau unique sans compromettre la cohérence du flux de contenu sur les appareils mobiles. Avec la fonction Divi « Désactiver », vous pouvez créer des mises en page complètement différentes pour chaque appareil. Avec quelques lignes de CSS personnalisé, il est facile d’ajouter des classes à vos lignes et colonnes pour les organiser comme vous le souhaitez pour les appareils mobiles.

J’espère que cet article vous aidera à mieux contrôler vos écrans mobiles.

J’ai hâte de vous entendre dans les commentaires.

De bas en haut!





Source link

Recent Posts