Comment utiliser les sections de Divi Builder (guide complet)

Divi Builder est un plugin de création de page que vous pouvez utiliser pour créer de belles pages sur le site WordPress. Comme d’autres plug – ins similaires, Divi Builder fournit un éditeur visuel que vous pouvez utiliser pour créer une belle page sans avoir à travailler avec CSS. Vous pouvez simplement ajouter les éléments requis et les personnaliser en conséquence. Dans Divi Builder, il existe trois types d’éléments de conception: les sections, les lignes et les modules. Dans cet article, nous discuterons en détail de l’élément section dans Divi Builder. Quelles sont les sections de Divi Builder? Comme indiqué ci – dessus, cette section est l’un des types d’éléments de conception disponibles dans Divi Builder. C’est un bon conteneur pour d’autres éléments de conception (lignes et modules) sur la page. Vous pouvez le considérer comme un bloc qui regroupe votre contenu en zones visuellement distinguables. La section elle – même est un élément obligatoire. Vous ne pouvez pas créer une page en utilisant Divi Builder sans ajouter une section. C’est pourquoi, lorsque vous créez une nouvelle page en utilisant Divi Builder, vous avez automatiquement une partition.
Lorsque vous travaillez avec une page avec Divi Builder, vous pouvez ajouter autant de sections que nécessaire. Regardons l’écran ci – dessous. La page de capture d’écran ci – dessus se compose de sept sections (visibles en mode wireframe View), chacune contenant un certain nombre de lignes et de modules. La section elle – même est encore divisée en trois types: la largeur totale de la spécialité conventionnelle Section générale la section générale est la section standard de Divi Builder. Lorsque vous créez une nouvelle page en utilisant Divi Builder, une section générale est automatiquement créée. Dans Divi Builder, la section générale est en bleu. Vous pouvez ajouter des lignes aux sections normales. Il existe 20 styles de lignes que vous pouvez ajouter à une section générale, chacun avec une structure de colonne différente. Vous pouvez ensuite ajouter des modules à
Ligne
Section spécialisée comme son nom l’indique, la section spécialisée est une section conçue à des fins précises. Dans des zones spéciales, vous pouvez ajouter des colonnes à un style de grille. Il y a 9 styles de maillage à choisir. Les colonnes spéciales sont idéales pour créer une page d’accueil pour un magazine en ligne ou un site Web similaire. Vous pouvez les utiliser pour ajouter la section héros à la page d’accueil du magazine en ligne que vous créez. La section spécialisée est en orange. La partie pleine largeur la partie pleine largeur est un type partiel conçu pour ajouter des modules plein écran. À partir du curseur, des cartes, des menus, etc. Il y a 9 modules de pleine largeur qui peuvent être ajoutés à la section pleine largeur. Comme cette section est utilisée pour le contenu de pleine largeur (dans ce cas, un module), vous ne pouvez pas ajouter de lignes ou de colonnes à la Section de pleine largeur. La largeur totale est indiquée en violet.
Comment ajouter et supprimer des sections dans Divi Builder lorsque vous créez une nouvelle page, Divi Builder ajoute automatiquement de nouvelles sections générales. Vous pouvez ensuite ajouter des lignes et des formulaires à la section que vous avez ajoutée. Et si vous avez besoin de plus de pièces? Il suffit de cliquer sur le bouton le plus bleu de la zone de la toile (ou orange \/ violet, selon le dernier type de section que vous ajoutez). Vous pouvez ensuite sélectionner une ligne. Vous pouvez sélectionner des lignes avec une structure de colonne au besoin. Pour supprimer une section existante dans la zone toile, il suffit de passer le curseur sur la section que vous voulez supprimer et de cliquer sur l’icône corbeille.
Comment personnaliser une section après avoir ajouté une section à une zone de toile, vous pouvez la personnaliser en fonction du concept du dessin que vous voulez créer. Vous pouvez personnaliser en utilisant le panneau de configuration qui apparaît immédiatement après l’ajout de U
Le visionneur ouvre les styles de zone disponibles. Vous pouvez ensuite définir la couleur et la taille de la partition.
Vous pouvez ouvrir ce bloc pour définir la taille de la section. Vous pouvez définir la largeur et la hauteur de la section à partir de cet onglet. Par défaut, la largeur et la hauteur de la section sont définies à la voiture. Pour définir une largeur ou une hauteur spécifique, tapez simplement la valeur préférée. Vous pouvez utiliser des pourcentages ou des unités de pixels (vous pouvez saisir les unités manuellement). Espacement vous pouvez ouvrir ce bloc pour définir l’espacement et les marges de la section. Vous n’avez qu’à ajouter des valeurs à chaque champ pour définir les marges et le remplissage de section.
Bordure vous pouvez ouvrir ce bloc pour définir la bordure de la section. Du style de bord, de la taille du bord, de la couleur du bord et du rayon du bord. Le rayon de bord lui – même se réfère à l’inclinaison de l’angle de section. Plus le niveau d’inclinaison est élevé, plus l’angle est incliné. Boîte d’ombre vous pouvez ouvrir ce bloc pour appliquer des ombres à une section. Divi Builder offre 7 styles de boîtes d’ombre. Il suffit de sélectionner le style d’ombre de la boîte désirée. Lorsque vous sélectionnez un style d’ombrage de cadre, vous pouvez définir les positions verticales et horizontales, l’intensité de diffusion et la couleur.
Filtre vous pouvez ouvrir ce bloc pour appliquer un fichier CSS à une section. Vous pouvez également appliquer le mode Fusion si vous le souhaitez. Transformation À partir de cet onglet, vous pouvez appliquer des transformations 2D ou 3D à une section. Il suffit de sélectionner le style de transformation à appliquer (en cliquant sur les onglets disponibles) et de définir les valeurs de transformation en utilisant la souris. Animation vous pouvez ouvrir ce bloc pour animer l’entrée de section
Un. Divi Builder offre 7 effets d’animation. Il vous suffit de sélectionner l’animation que vous aimez et d’effectuer les réglages désirés (durée, latence, etc.) sur les réglages en dessous.
L’onglet avancé est l’emplacement des paramètres avancés. Vous pouvez ouvrir cet onglet pour ajouter des CSS personnalisés, définir les effets de défilement, et plus encore. Vous pouvez ouvrir 6 blocs dans cet onglet. ID et classe CSS vous pouvez ouvrir cet onglet pour ajouter un ID CSS ou une classe CSS à une section. Si vous utilisez un module de code pour ajouter un CSS personnalisé, vous pouvez ajouter à la fois l’ID CSS et la classe CSS. Vous pouvez ouvrir ce bloc pour ajouter des CSS personnalisés directement à la section sans utiliser de modules de code. Visibilité vous pouvez activer ce bloc pour définir la visibilité de la section. Si vous le souhaitez, vous pouvez cacher des Parties d’un type particulier d’appareil (smartphone, tablette ou bureau). Pour désactiver une section sur un type particulier de périphérique, sélectionnez simplement les options du périphérique pour désactiver la section. À partir de ce bloc, vous pouvez également définir des champs horizontaux et verticaux. Transition ouvre ce bloc pour définir la transition de section. Il y a 3 options de configuration à définir, comme le montre la figure suivante. Emplacement vous pouvez ouvrir ce bloc pour définir l’emplacement de la section. Par défaut, l’emplacement de la section est réglé à statique (par défaut). Vous pouvez également utiliser trois autres options de localisation: relative: Si vous sélectionnez cette option, la Section suivra le flux de page normal. Cette option fournit des propriétés en haut, en bas et à droite. Absolute: Si vous sélectionnez cette option, l’espace réel ne sera pas créé sur la page