Utiliser le builder Chapitre 5

UTILISER LE BUILDER

CHAPITRE 5 : RANGÉE DIVI ET OPTIONS

MODULE 2

RANGÉE DIVI ET OPTIONS DE RANGÉE

LES RANGÉES DIVI

Dans ce tutoriel, nous allons passer en revue quelques-unes des fonctionnalités et comment elles peuvent être utilisées pour créer des mises en page très uniques.

Les paramètres de lignes en particulier peuvent être utilisés pour augmenter considérablement la variété des mises en page construites avec le Divi Builder puisqu'ils créent la structure dans laquelle vos modules sont hébergés.

Les paramètres de contenu

Les paramètres de contenu

Couleur de fond

Image de fond

Vidéo de fond MP4

Webm vidéo de fond

Largeur de la vidéo d'arrière-plan

Si vous souhaitez appliquer une vidéo de fond, vous devez télécharger à la fois une vidéo MP4 et WEBM et entrer les vidéos ici.

Si vous souhaitez appliquer une vidéo de fond, vous devez télécharger à la fois une vidéo MP4 et WEBM et entrer les vidéos ici.

Les paramètres de contenu

Hauteur de la vidéo de fond

Pause vidéo

Colonne Couleur d'arrière-plan

Image d'arrière-plan de colonne

Étiquette Admin

Si vous souhaitez appliquer une vidéo de fond, vous devez télécharger à la fois une vidéo MP4 et WEBM et entrer les vidéos ici.

Lorsque vous utilisez la vue Wire Frame dans le Visual Builder, ces étiquettes apparaîtront dans le bloc module de l'interface Divi Builder.

Les paramètres de conception

Les paramètres de conception

Utiliser l'effet Parallax

Effet de parallaxe de colonne

Faites cette rangée sur toute la largeur

Utilisez une largeur de gouttière personnalisée

Égaliser les hauteurs de colonne

C'est une excellente façon de créer des colonnes pleines largeurs.

Utilisez la largeur personnalisée

Vous pouvez également affecter une largeur personnalisée à une ligne. Par exemple, si vous souhaitez ajouter une variation au flux de la page et faire une certaine ligne plus grande que le reste, vous pouvez entrer une valeur de largeur personnalisée ici

L'activation de cette option obligera toutes les colonnes de la ligne à avoir la même hauteur.

Si vous réglez la largeur de gouttière à 1, il n' y aura pas d'espace entre les colonnes.

Lorsqu'il est combiné avec l'option Rangée pleine largeur, cela peut créer des effets similaires au module Portefeuille pleine largeur.

Les paramètres de conception

Rembourrage sur mesure

Marge personnalisée

Colonne Garnissage sur mesure

Marge personnalisée de la colonne

Les réglages avancés

CSS ID

CSS CLASS

ID CSS de colonne

Les réglages avancés

Vous pouvez attribuer un ID CSS à la ligne si vous souhaitez la cibler dans votre feuille de style ou avec des liens d'ancrage.

Vous pouvez affecter une classe CSS à la ligne si vous souhaitez la cibler dans votre feuille de style.

Vous pouvez attribuer un ID CSS à une colonne spécifique de votre rangée si vous souhaitez la cibler dans votre feuille de style ou avec des liens d'ancrage.

Colonne CSS CLASS

Avant de

Élément principal

Les réglages avancés

Vous pouvez affecter une classe CSS à une colonne spécifique de votre ligne si vous souhaitez la cibler dans votre feuille de style.

Entrez ici le CSS à appliquer: avant la ligne principale div.

Entrez le CSS ici pour l'appliquer à la ligne principale div.

Après

Colonne Avant

Colonne Élément principal

Les réglages avancés

Entrez ici le CSS à appliquer : après la ligne principale div.

Entrez CSS ici à appliquer: avant la colonne div. spécifiée.

Entrez CSS ici pour être appliqué à la division de colonne spécifiée.

Colonne après

Visibilité

Donnons à certains réglages un essai routier

Les réglages avancés

Entrez CSS ici à appliquer: après la colonne div. spécifiée.

Cette option vous permet de contrôler sur quels périphériques votre module de ligne apparaît.

Vous pouvez choisir de désactiver votre module sur des tablettes, des téléphones intelligents ou des ordinateurs de bureau individuellement.

C'est utile si vous voulez utiliser différents modules sur différents appareils, ou si vous voulez simplifier le design mobile en éliminant certains éléments de la page.

Maintenant que nous avons passé en revue tous les paramètres, testons quelques uns en combinaison pour vous montrer ce qui est possible lorsque chaque paramètre est utilisé de façon créative.

Dans cet exemple, j'aborderai le réglage de la ligne pleine largeur en guise d'introduction. L'option de faire une rangée "Fullwidth" est l'une des options les plus polyvalentes du set. Ceci étendra la largeur de la rangée au bord du navigateur, similaire à une section pleine largeur.

Contrairement à une section pleine largeur, cependant, les rangées pleine largeur peuvent avoir des structures de colonnes et peuvent contenir n'importe quel module !

Dans l'exemple ci-dessous, j'ai créé une ligne de 4 colonnes et ajouté une image carrée à chaque colonne. Ensuite, j'ai activé l'option "Make Row Fullwidth" pour étendre la ligne jusqu'aux bords de la fenêtre du navigateur.

Ensuite, j'ai réduit la largeur de gouttière à "1" pour supprimer l'espacement entre les colonnes de la rangée.

Finalement, j'ai enlevé le rembourrage au-dessus et au-dessous de la rangée en changeant les valeurs de haut et de bas de "rembourrage personnalisé" à "0".

Le résultat est une transformation complète de la rangée, transformant notre ligne normale de 4 colonnes d'images en une galerie d'images pleine largeur et pleine hauteur qui semble renversante contre la section verte au-dessous d'elle. Ce même effet peut être créé en utilisant des couleurs d'arrière-plan de colonne personnalisées et des modules textuels.

Les possibilités sont infinies!

MERCI