Le module de séparation est parfait pour créer une règle de ligne horizontale, un espacement vertical personnalisé ou les deux. L’utilisation de cet élément est un excellent moyen d’ajouter de la structure et de l’organisation à votre site.

Module de séparation

Voir une démo en direct de ce module

Comment ajouter un module de séparation à votre page

Avant de pouvoir ajouter un module de séparation à votre page, vous devez d’abord sauter dans le Divi Builder. Une fois le thème Divi installé sur votre site Web, vous constaterez qu’un Utilisez Divi Builder Chaque fois que vous créez une nouvelle page, cliquez sur le bouton au-dessus de l’éditeur de publication. Cliquer sur ce bouton active le Divi Builder et vous donne accès à tous les modules de Divi Builder. Cliquez ensuite sur Utiliser le constructeur visuel Bouton pour démarrer le générateur en mode visuel. Vous pouvez également cliquer sur Utiliser le constructeur visuel Lorsque vous naviguez sur votre site Web, cliquez sur le bouton dans le front-end si vous êtes connecté à votre tableau de bord WordPress.

Module de séparation

Après être entré dans Visual Builder, vous pouvez cliquer sur le bouton gris plus pour ajouter un nouveau module à votre page. Les nouveaux modules ne peuvent être ajoutés que dans les lignes. Lorsque vous démarrez une nouvelle page, n’oubliez pas d’ajouter d’abord une ligne à votre page. Nous avons d’excellents tutoriels sur l’utilisation de Divi ligne et section Éléments.

Module de séparation

Trouvez le module diviseur dans la liste des modules et cliquez dessus pour l’ajouter à votre page. La liste des modules est consultable. Ainsi, vous pouvez également taper le mot «diviseur», puis appuyer sur Entrée pour trouver et ajouter automatiquement le module de division! Une fois le module ajouté, vous serez accueilli avec la liste des options du module. Ces options sont divisées en trois groupes principaux: contenu, conception et Avancée.

Exemple de cas d’utilisation: ajoutez une ligne de séparation personnalisée au-dessus des en-têtes de section d’une page.

L’ajout d’une ligne de séparation stylisée à une page Web à l’aide du module de séparation Divi est une solution pratique pour styliser vos sections et donner une belle apparence à votre en-tête.

Dans cet exemple, je vais vous montrer comment ajouter une ligne de séparation minimale sur un en-tête de section de 4 pixels d’épaisseur et 50 pixels de large. La petite ligne fait deux choses. Tout d’abord, il ajoute un élément de conception au-dessus de vos en-têtes pour les rendre plus beaux. Deuxièmement, la ligne de séparation sépare la section et l’encadre pour plus de lisibilité.

Ici, vous pouvez voir le petit séparateur rose mis en œuvre sur le site Web.

Module de séparation

Maintenant, je vais vous montrer comment ajouter cette petite ligne de séparation au-dessus de l’un des en-têtes.

À l’aide de Visual Builder, ajoutez une nouvelle ligne avec 1 colonne au-dessus (ou avant) l’en-tête de section. Ajoutez ensuite le module de séparation à cette ligne.

Module de séparation

Mettez à jour les paramètres de la pièce comme suit:

Options de contenu

Visibilité: afficher les diviseurs

Options de conception

Couleur: # ea1d63 (rose)
Position du diviseur: centré verticalement
Poids du diviseur: 4px
Hauteur: 4

Module de séparation

enregistrer les paramètres

Maintenant, revenez en arrière et modifiez les paramètres de ligne que vous avez créés pour le module de séparation. Dans l’onglet Conception des paramètres du module de ligne, définissez Utiliser la largeur personnalisée sur OUI et définissez l’option Largeur personnalisée sur 50 pixels.

Module de séparation

Cela garantira que votre ligne contenant votre séparateur n’a que 50 pixels de large et reste centrée sur la page.

Maintenant, votre en-tête de section a un diviseur subtil qui ajoute un bel élément de design.

Module de séparation

Vous pouvez ensuite répéter ce processus pour tous les en-têtes de section de votre page.

Partager les options de contenu

Dans l’onglet « Contenu », vous trouverez tous les éléments de contenu du module, par ex. B. Texte, images et symboles. Tout ce qui contrôle Quoi apparaît dans votre module et est toujours sur cet onglet.

Module de séparation

Visibilité

Sélectionnez cette option pour ne pas afficher le séparateur si vous souhaitez simplement ajouter un espace vertical. Si vous voulez voir le séparateur, la règle apparaîtra en haut du module mais n’affectera pas la hauteur en dessous.

Étiquette d’administrateur

Cela modifie 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.

Options de conception pour les diviseurs

L’onglet Conception contient toutes les options de style du module, telles que: B. Polices, couleurs, tailles et espacement. Sur cet onglet, vous pouvez modifier l’apparence de votre module. Chaque module Divi a une longue liste de paramètres de conception que vous pouvez utiliser pour changer presque tout.

Module de séparation

Couleur

Sélectionnez la couleur de la ligne de séparation 1px qui sera créée avec ce module. La règle horizontale correspond à la largeur totale de la colonne dans laquelle elle se trouve.

la taille

Définissez l’espace vertical que vous souhaitez que votre module de séparation crée (en pixels).

Options avancées pour les diviseurs

L’onglet Avancé fournit des options que les concepteurs Web expérimentés peuvent trouver utiles, telles que: B. Attributs CSS et HTML personnalisés. Ici, vous pouvez appliquer du CSS personnalisé à l’un des nombreux éléments du module. Vous pouvez également attribuer des classes CSS et des ID personnalisés au module, que vous pouvez utiliser pour personnaliser le module dans le fichier style.css de votre thème enfant.

Module de séparation

ID CSS

Entrez un ID CSS facultatif à utiliser pour ce module. Un identifiant peut être utilisé pour créer un design CSS personnalisé ou pour créer des liens vers des sections spécifiques de votre page.

Classe CSS

Entrez les classes CSS facultatives à utiliser pour ce module. Une classe CSS peut être utilisée pour créer un style CSS personnalisé. Vous pouvez ajouter plusieurs classes séparées par un espace. Ces classes peuvent être utilisées dans votre thème Divi Child ou dans le CSS personnalisé que vous ajoutez à votre page ou site Web en utilisant Options de thème Divi ou les paramètres de page de Divi Builder.

CSS personnalisé

Le CSS personnalisé peut également être appliqué au module et à tous les éléments internes du module. Dans la section CSS personnalisé, vous trouverez une zone de texte dans laquelle vous pouvez ajouter du CSS personnalisé directement à n’importe quel élément. L’entrée CSS de ces paramètres est déjà incluse dans les balises de style, il vous suffit donc de saisir des règles CSS, séparées par des points-virgules.

Visibilité

Cette option vous permet de contrôler les appareils sur lesquels votre module est affiché. 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.





Source link

Recent Posts