Découvrez les bons plans & les réductions Alpa14

Tutoriel Divi : Inverser les colonnes selon la vue

Alpa14 les tutoriels faciles !

Catégories

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

Vous serez peut-être intéressé par les articles suivants :

Thème Divi : Personnaliser le header

Thème Divi : Personnaliser le header

Dans ce tutoriel vidéo, je vous montre comment personnaliser l’en-tête d’un site Divi.
Cet en-tête changera en scrollant, lorsque la page défile. Le logo, le menu et le fond du header changeront de couleur attirant ainsi davantage l’attention du visiteur.
Cet en-tête comprendra également un bouton d’appel à l’action incitant à davantage d’engagement.
Grâce au constructeur de thèmes (le thème Builder) du thème Divi, nous pouvons créer des en-têtes personnalisés au design poussé.

lire plus
Ajouter un footer WordPress Divi personnalisé

Ajouter un footer WordPress Divi personnalisé

Ajouter un footer WordPress ? Rien de plus simple grâce au Thème Builder de Divi. Faire un pied de page WordPress global devient un jeu d’enfant ! C’est ce que je vous montre dans ce tutoriel Vidéo Divi, comment créer un footer WordPress personnalisé en le désignant de manière très fine avec Divi Visual Builder d’Elegant Themes.

lire plus
Ajouter une bannière WordPress « Hero Image » optimisée ⏱️

Ajouter une bannière WordPress « Hero Image » optimisée ⏱️

Dans ce tutoriel Divi WordPress, je vous montre où trouver une image de qualité gratuite pour un usage commercial, je vous montre également comment la choisir et l’optimiser au bon format. Je vous apprends ensuite comment designer ce bandeau large « Hero Image » grâce au Divi Visual Builder du thème Divi de la société Elegant Themes.

lire plus