Personnaliser l’ordre des colonnes selon l’affichage
Un site Divi WordPress est un site responsive qui va s’adapter automatiquement à l’écran sur lequel il est affiché. En vue ordinateur un site web peut avoir un design avantageux mais peut être moins en vue mobile du fait des colonnes d’une rangée qui passent les unes sous les autres. On peut alors se trouver avec une suite d’éléments non souhaitée avec par exemple 2 textes ou 2 images à la suite. Dans ce court tutoriel Divi WordPress, je vous montre comment parer à cela en personnalisant votre affichage en vues mobile et en inversant certaines colonnes de la rangée.
Vue ordinateur / Vue mobile
Dans l’exemple suivant, nous avons une vue flatteuse en vue ordinateur avec des oppositions texte/texte et image/image par les diagonales. Ce qui est vraiment très sympa et esthétique.
On a donc ici la rangée 1 avec du texte à gauche et une image à droite et une rangée 2 en dessous avec d’abord une image à gauche puis du texte à droite.
En revanche comme je le disais précédemment du fait de la capacité responsive du site, les blocs colonnes vont passer les uns sous les autres et comme on le voit ici, on se retrouve avec 2 images à la suite en vue mobile. Alors que pour cette vue, ce serait mieux que l’on ait une alternance image/texte/image/texte.
La bonne nouvelle c’est que c’est possible et et le procédé est assez simple. Pour cela, clonez la rangée 2. Puis dans cette rangée clonée qui sera la rangée 3, inversez manuellement le contenu de la colonne 1 avec celui de la colonne 2 (donc inverser le texte avec l’image).
Divi Builder : Fonction « Visibilité », paramétrage section 2
Allez dans les paramètres de la rangée 2 (cliquez sur l’icône engrenage) et dans l’onglet « Avancé » choisissez l’option « Visibilité ».
Nous souhaitons donc conserver cet agencement uniquement pour la vue bureau. Pour cela cochez les cases « Téléphone » et « Tablette » afin que cette rangée n’apparaisse pas pour ces vues.
Divi Builder : Fonction « Visibilité », paramétrage section 3
Allez ensuite dans les paramètres de la setion 3 puis toujours à la fonction « Visibilité », cochez « Bureau » car nous ne souhaitons pas que cette rangée apparaisse (avec cet agencement de colonnes) pour la vue bureau.
Comme nous sommes en vue bureau automatiquement la section apparait en tons estompés pour signaler qu’elle n’apparaitra pas pour cette vue.
La manipulation est maintenant terminée. Enregistrez votre travail et quittez le Visual Builder.
Vous remarquez maintenant qu’en réduisant la largeur de votre fenêtre (simulant un affichage mobile) eh bien, c’est la rangée 3 qui apparait uniquement avec le texte d’abord puis l’image.
