fbpx

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.

Licence Divi
Code Promo Divi Supreme
.

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.

Tutoriel Divi : vue ordinateur

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 3inversez manuellement le contenu de  la colonne 1 avec celui de la colonne 2 (donc inverser le texte avec l’image).

Hostinger hébergement web
Tutoriel Divi : Vue mobile

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.

 

Tutoriel Divi : fonction visibilité

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.

 

Tutoriel Divi : Vue mobile grisée en vue ordinateur

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.

Thinkific un mois gratuit
Tutoriel Divi : vue mobile
Formation WordPress
MalerLite