Sélectionner une page


Les sections sont le plus gros bloc de construction de Divi Builder. Vous pouvez les considérer comme des blocs d’empilage horizontaux que vous pouvez utiliser pour regrouper votre contenu dans des zones visuellement distinguables. Dans Divi, tout ce que vous créez commence par une section. Ce wrapper de contenu a plusieurs paramètres qui vous permettent de faire de très bonnes choses.

Comment ajouter une section à votre page

Avant de pouvoir ajouter un module de section à 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.

Après être entré dans le générateur visuel, vous pouvez cliquer sur le signe plus bleu pour ajouter une nouvelle section à votre page. Vous serez accueilli par une fenêtre contextuelle qui vous permettra d’ajouter l’un des trois types de sections de Divi. Ces types incluent: standard, spécialité et pleine largeur.

Une fois la section ajoutée, vous serez accueilli avec la liste des options de la section. Ces options sont divisées en trois groupes principaux: teneur, conception et Avancée.

Section Options de contenu

L’onglet Contenu est l’endroit où vous pouvez trouver tous les éléments de contenu de la section. Pour les sections, ces éléments de contenu sont limités aux éléments d’arrière-plan tels que les images d’arrière-plan et les vidéos.

image de fond

Si elle est définie, cette image est utilisée comme arrière-plan de ce module. Pour supprimer une image d’arrière-plan, supprimez simplement l’URL du panneau des paramètres.

Couleur de l’arrière plan

Si elle est définie, cette image est utilisée comme arrière-plan de ce module. Pour supprimer une image d’arrière-plan, supprimez simplement l’URL du panneau des paramètres.

Vidéo d’arrière-plan MP4

Toutes les vidéos doivent être téléchargées dans les deux formats .MP4 .WEBM pour une compatibilité maximale dans tous les navigateurs. Téléchargez la version MP4 ici. Les arrière-plans vidéo sont désactivés sur les appareils mobiles. Votre image d’arrière-plan sera utilisée à la place. Pour cette raison, vous devez définir à la fois une image d’arrière-plan et une vidéo d’arrière-plan pour de meilleurs résultats. Remarque importante: pour que le format vidéo MP4 fonctionne dans tous les navigateurs, les types MIME corrects doivent être spécifiés sur votre serveur. Vous pouvez en savoir plus Utilisez .htaccess pour définir les types MIME ici. Si vous constatez que vos vidéos ne sont pas lues dans certains navigateurs, c’est probablement la raison.

Vidéo de fond WEBM

Toutes les vidéos doivent être téléchargées dans les deux formats .MP4 .WEBM pour une compatibilité maximale dans tous les navigateurs. Téléchargez la version .WEBM ici. Les arrière-plans vidéo sont désactivés sur les appareils mobiles. Votre image d’arrière-plan sera utilisée à la place. Pour cette raison, vous devez définir à la fois une image d’arrière-plan et une vidéo d’arrière-plan pour de meilleurs résultats. Remarque importante: pour que le format vidéo WEBM fonctionne dans tous les navigateurs, les types MIME corrects doivent être spécifiés sur votre serveur. Vous pouvez en savoir plus Utilisez .htaccess pour définir les types MIME ici. Si vous constatez que vos vidéos ne sont pas lues dans certains navigateurs, c’est probablement la raison.

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

Pour que les vidéos aient la bonne taille, vous devez entrer ici la largeur exacte (en pixels) de votre vidéo.

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

Pour que les vidéos aient la bonne taille, vous devez entrer ici la hauteur exacte (en pixels) de votre vidéo.

Étiquette d’administrateur

Cette liste déroulante vous permet d’ajouter une étiquette d’administrateur qui apparaîtra dans le constructeur back-end ainsi que la vue squelette du constructeur visuel.

Options de conception pour les sections

L’onglet Conception est l’endroit où vous pouvez trouver toutes les options de style de la section, telles que: B. Taille et espacement. Cet onglet est l’endroit où vous pouvez modifier l’apparence de votre section. Chaque type de section Divi a une longue liste de paramètres de conception que vous pouvez utiliser pour changer presque tout.

Montrez l’ombre intérieure

Ici, vous pouvez choisir si votre section a ou non une ombre intérieure. Cela peut sembler génial lorsque vous avez des arrière-plans colorés ou des papiers peints.

Utilisez l’effet de parallaxe

Lorsque cette option est cochée, votre image d’arrière-plan restera figée pendant qu’elle défile, créant un effet amusant de parallaxe. Vous pouvez également choisir entre deux méthodes de parallaxe: CSS et True Parallax.

Rembourrage personnalisé

Ici, vous pouvez ajuster le remplissage de la section à des valeurs spécifiques ou le laisser vide pour utiliser le remplissage par défaut.

Section des options avancées

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. C’est ici que vous pouvez appliquer du CSS personnalisé à votre section. Vous pouvez également attribuer des classes CSS et des ID personnalisés à la section, que vous pouvez utiliser pour personnaliser la section dans le fichier style.css de votre enfant.

ID CSS

Saisissez un ID CSS facultatif à utiliser pour cette section. 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 cette section. 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 enfant Divi ou dans le CSS personnalisé que vous ajoutez à votre page ou site Web en utilisant les options du thème Divi ou les paramètres de page Divi Builder.

CSS personnalisé

Le CSS personnalisé peut être appliqué à la section ici. 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 section est affichée. Vous pouvez désactiver votre espace individuellement sur des tablettes, des smartphones ou des ordinateurs de bureau. Ceci est utile lorsque vous souhaitez utiliser différentes sections sur différents appareils ou lorsque vous souhaitez simplifier la conception mobile en supprimant certaines sections de la page.

Utilisez des sections pleine largeur

Les sections pleine largeur vous donnent accès à un nouvel ensemble de modules pleine largeur. Ces modules se comportent un peu différemment car ils utilisent toute la largeur du navigateur. Les modules pleine largeur ne peuvent être placés que dans des sections pleine largeur.

Une fois que vous avez ajouté une nouvelle section pleine largeur à votre page, vous pouvez cliquer sur le bouton « Ajouter des modules » dans la section pour ajouter un module pleine largeur. Contrairement aux sections normales, il n’y a pas de concept pour les lignes ou les colonnes, car les modules pleine largeur utilisent toujours 100% de l’écran. Les modules pleine largeur sont un excellent moyen d’ajouter une pause visuelle à la page!

Le curseur pleine largeur est un bon exemple de module pleine largeur. Ce curseur pleine largeur fonctionne comme un curseur normal, sauf qu’il s’étend à 100% de la largeur. Voir un curseur à une telle échelle peut être tout simplement époustouflant Découvrez notre démo Divi par exemple.

image de la documentation

Utilisation de sections spéciales

Des sections spéciales ont été créées pour permettre des structures de poteaux étendues. Contrairement aux sections normales, l’utilisation d’une section spéciale vous permet d’ajouter des variations de colonnes complexes aux côtés de barres latérales verticales sans ajouter de sauts indésirables à la page. Ces types de mises en page ne sont pas possibles avec des sections normales.

Dès que vous ajoutez une section spéciale à la page, vous remarquerez qu’il y a un bouton « Ajouter un module » dans une zone et un bouton « Insérer une ligne » dans l’autre. La zone « Insérer un module » représente votre barre latérale verticale. Vous pouvez ajouter ici autant de modules sur une seule ligne qu’ils couvrent la largeur verticale de la section à côté de la structure de colonne que vous créez à côté. Si vous cliquez sur « Insérer une ligne », vous pouvez insérer des lignes supplémentaires à gauche / droite de votre barre latérale. D’une certaine manière, vous pouvez penser à ajouter des lignes dans les lignes!

Le résultat est la possibilité de créer à peu près n’importe quelle structure de colonne dont vous pouvez rêver. Quelle que soit la structure que vous choisissez, nous nous sommes assurés que le combo a fière allure! Voici un exemple de mise en page créée à l’aide de sections spéciales. Comme vous pouvez le voir, l’effet est une disposition à deux barres latérales avec deux lignes s’étendant verticalement à gauche / droite d’une structure de colonne complexe au milieu.

image de la documentation





Source link

Recent Posts