Inverser les colonnes sur mobile avec du CSS sur Divi

par | Nov 12, 2022

Inverser les colonnes sur smartphone

Bouton CTA avec un effet flip box

La solution ultime pour votre responsive.

Il existe une technique pour inverser vos colonnes sur smartphone qui consiste à rendre invisible certaine section sur bureau et visible sur smartphone.

Bonne option ? Pas si sûr !

Cette technique vous assurera bien un bon design, mais alourdira votre page et vous pénalisera auprès de Google qui n’apprécie guère les sections invisibles.

Vous trouverez ci-dessous la meilleure façon de le faire. Simple, rapide et efficace.

Le tuto en vidéo

Tutoriel écrit

Votre design su version desktop (ordinateur) va être de la façon suivante :

image-texte et sur la ligne du dessous texte-image

Cliquer sur la roue crantée de la deuxième ligne en vert

Allez dans le troisième onglet « Avancé » et dans « Classe CSS » écrivez le mot « inverse » puis sauvegardez.

Allez tout en bas de votre page et cliquer sur les 3 petits points, puis sur la roue crantée pour accéder au settings de la page. 

Tableau représentant les couleurs marketing avec des marques connus

Allez au troisième onglet « Avancé » « personnaliser CSS » et copier le code ci-dessous.

CODE CSS

@media screen and ( max-width: 980px ) {
.inverse {
display: flex;
flex-direction: column-reverse;
}
}

Tableau représentant les couleurs marketing avec des marques connus

Sauvegardez tous les paramètres et le tour est joué. 

PARTAGEZ-NOUS VOS RÉFLEXIONS !

0 commentaires

Soumettre un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

LES BONNES AFFAIRES

Full Divi Templates

DR PAGE ET VOUS

CONTACT

contact@dr-page.fr

+590 690 756 945