Sélectionner une page


Les lignes sont les différentes dispositions de colonnes qui peuvent être placées dans les sections. À l’instar des modules, les lignes ont des paramètres différents auxquels vous pouvez accéder en cliquant sur l’icône des paramètres en haut à gauche de la ligne. Dans ce didacticiel, nous allons couvrir 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 ligne en particulier peuvent être utilisés pour augmenter considérablement la variété de mises en page créées avec le Divi Builder car ils créent la structure dans laquelle résident vos modules.

Les paramètres de contenu

Couleur de l’arrière plan

Les images d’arrière-plan peuvent être appliquées à une ligne entière. Par défaut, les lignes ont une couleur d’arrière-plan transparente.

image de fond

Les images d’arrière-plan peuvent être appliquées à une ligne entière.

Vidéo d’arrière-plan MP4

La vidéo d’arrière-plan peut être appliquée aux lignes. Si vous souhaitez appliquer une vidéo d’arrière-plan, vous devez télécharger à la fois une vidéo MP4 et WEBM et entrer les vidéos ici.

Webm vidéo d’arrière-plan

La vidéo d’arrière-plan peut être appliquée aux lignes. Si vous souhaitez appliquer une vidéo d’arrière-plan, vous devez télécharger à la fois une vidéo MP4 et WEBM et entrer les vidéos ici.

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

Une fois vos vidéos téléchargées, vous devrez entrer la largeur de votre vidéo ici. Il doit correspondre à la largeur réelle de la vidéo, sinon la position de l’arrière-plan sera erronée.

Hauteur de la vidéo d’arrière-plan

Une fois vos vidéos téléchargées, vous devez entrer la hauteur de votre vidéo ici. Il doit correspondre à la hauteur réelle de la vidéo, sinon la position de l’arrière-plan sera erronée.

Mettre la vidéo en pause

Si vous souhaitez que les vidéos se mettent en pause lorsque vous cliquez, activez cette option.

Couleur de fond de la colonne

Vous pouvez attribuer une couleur d’arrière-plan unique à chaque colonne d’une ligne.

Image d’arrière-plan de la colonne

Vous pouvez attribuer une image d’arrière-plan unique à chaque colonne d’une ligne.

Étiquette d’administrateur

Cela change le nom du module dans le générateur pour une identification facile. Si vous utilisez la vue WireFrame dans Visual Builder, ces étiquettes seront affichées dans le bloc de module de l’interface Divi Builder.

Les paramètres de conception

Utilisez l’effet de parallaxe

Si vous souhaitez utiliser un effet de parallaxe pour l’image d’arrière-plan de votre ligne, vous pouvez l’activer ici, puis sélectionner la méthode de parallaxe souhaitée.

Effet de parallaxe de colonne

Ici, vous pouvez choisir d’utiliser ou non l’effet de parallaxe pour l’image d’arrière-plan d’une colonne spécifique de votre ligne.

Rendre cette ligne pleine largeur

Lorsqu’elle est activée, la ligne étend la largeur totale de la fenêtre du navigateur (similaire à une section pleine largeur). C’est un excellent moyen de créer de superbes mises en page de colonnes pleine largeur.

Utilisez la largeur personnalisée

Vous pouvez également attribuer une largeur personnalisée à une ligne. Par exemple, si vous souhaitez ajouter une variante au flux de page et rendre une ligne particulière plus grande que les autres, vous pouvez entrer une valeur de largeur personnalisée ici

Utilisez la largeur de gouttière personnalisée

La largeur de la gouttière ajuste la distance entre les piliers. Il existe 4 tailles de largeur de gouttière allant de nul à grand. Si vous définissez la largeur de la gouttière sur 1, il n’y aura pas d’espace entre les colonnes. En combinaison avec l’option Fullwidth Row, des effets similaires à ceux du module FullWidth Portfolio peuvent être obtenus.

Compenser les hauteurs de colonne

C’est une excellente option, surtout si vous avez appliqué des couleurs d’arrière-plan à des colonnes individuelles. Cocher cette option forcera toutes les colonnes de la ligne à avoir la même valeur de hauteur.

Rembourrage personnalisé

Si vous souhaitez ajuster l’espacement de la ligne, vous pouvez le faire ici.

Marge personnalisée

Si vous souhaitez ajuster la marge de la ligne, vous pouvez le faire ici.

Remplissage personnalisé de la colonne

Si vous souhaitez ajuster l’espacement d’une colonne spécifique dans votre ligne, vous pouvez le faire ici.

Marge de colonne personnalisée

Si vous souhaitez ajuster la marge d’une colonne spécifique de votre ligne, vous pouvez le faire ici.

Les paramètres avancés

ID CSS

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

CLASSE CSS

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

Colonne d’ID CSS

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

Colonne CSS CLASS

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

Devant

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

Élément principal

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

Après ça

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

Colonne en avant

Entrez le CSS à utiliser ici: avant le div de colonne spécifié.

Élément principal de la colonne

Entrez CSS ici pour l’appliquer au div de colonne spécifié.

Colonne après ça

Entrez le CSS à utiliser ici: après le div de colonne spécifié.

Visibilité

Cette option vous permet de contrôler quels appareils afficheront votre module de ligne. Vous pouvez désactiver votre module individuellement sur les tablettes, les smartphones ou les ordinateurs de bureau. Ceci est utile lorsque vous souhaitez utiliser différents modules sur différents appareils ou lorsque vous souhaitez simplifier la conception mobile en supprimant certains éléments de la page.

Testons quelques paramètres

Maintenant que nous avons passé en revue tous les paramètres, testons-en quelques-uns en combinaison pour vous montrer ce qui est possible lorsque chaque paramètre est utilisé de manière créative. Dans cet exemple, je vais vous présenter le paramètre « Ligne pleine largeur ». L’option permettant de définir une ligne sur « pleine largeur » ​​est l’une des options les plus polyvalentes de l’ensemble. Cela élargira la largeur de la ligne jusqu’au bord du navigateur, un peu comme une section pleine largeur. Cependant, contrairement à une section pleine largeur, les lignes pleine largeur peuvent avoir des structures en colonnes et accueillir n’importe quel module! Dans l’exemple ci-dessous, j’ai créé une ligne avec 4 colonnes et ajouté une image carrée à chaque colonne. Ensuite, j’ai coché l’option « Créer une ligne pleine largeur » ​​pour étendre la ligne jusqu’aux bords de la fenêtre du navigateur.

image de la documentation

Ensuite, j’ai réduit la taille de la largeur de la gouttière à « 1 » pour supprimer l’espace entre les colonnes de la ligne.

image de la documentation

Enfin, j’ai supprimé le rembourrage au-dessus et au-dessous de la ligne en changeant les valeurs supérieure et inférieure de « Custom Padding » à « 0 ».
image de la documentation

Le résultat est une transformation de ligne complète, transformant notre ligne d’images normale à 4 colonnes en une galerie d’images pleine largeur à fond perdu qui semble époustouflante dans la zone verte ci-dessous. Le même effet peut également être obtenu avec des couleurs d’arrière-plan de colonne personnalisées et des modules basés sur du texte. Les possibilités sont infinies!





Source link

Recent Posts