Utiliser le builder Chapitre 8

UTILISER LE BUILDER

CHAPITRE 8 : UN APERÇU DES SECTIONS

DE DIVISIONS

MODULE 2

Un aperçu des sections de divisions

Les sections sont les éléments de construction les plus grands du constructeur et peuvent être utilisés de diverses façons.

Voici quelques exemples du Divi Builder en action

https://www.elegantthemes.com/preview/Divi-Builder/career/

Les sections sont la plus grande pièce de construction du constructeur Divi.

Vous pouvez les considérer comme des blocs d'empilement horizontaux qui regroupent votre contenu en zones visuellement reconnaissables.

Dans Divi, tout ce que vous construisez commence par une section.

Ce wrapper de contenu a différents paramètres qui peuvent être utilisés pour faire des choses vraiment impressionnantes.

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 que le thème Divi a été installé sur votre site Web, vous remarquerez un bouton Utiliser Divi Builder au-dessus de l'éditeur de messages chaque fois que vous construisez une nouvelle page.

Cliquez sur ce bouton pour activer le Divi Builder, vous donnant accès à tous les modules du Divi Builder.

Ensuite, cliquez sur le bouton Utiliser Visual Builder pour lancer le constructeur en mode Visual.

Vous pouvez également cliquer sur le bouton Utiliser Visual Builder lorsque vous naviguez sur votre site Web si vous êtes connecté à votre tableau de bord WordPress.

Comment ajouter une section à votre page

Une fois que vous êtes entré dans le Visual Builder, vous pouvez cliquer sur le bouton bleu plus pour ajouter une nouvelle section à votre page.

Vous serez accueilli par un popup qui vous permettra d'ajouter n'importe lequel des trois types de sections de Divi.

Ces types comprennent: 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: Contenu, Design et Avancé.

Options du contenu de la section

Dans l'onglet Contenu, vous trouverez 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 et les vidéos d'arrière-plan.

Ces types comprennent: 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: Contenu, Design et Avancé.

Si elle est définie, cette image sera utilisée comme arrière-plan pour ce module. Pour supprimer une image de fond, supprimez simplement l'URL du champ Paramètres.

Image de fond

Couleur de fond

Vidéo de fond MP4

Vidéo de fond WEBM

Si elle est définie, cette image sera utilisée comme arrière-plan pour ce module. Pour supprimer une image de fond, supprimez simplement l'URL du champ Paramètres.

Toutes les vidéos doivent être téléchargées dans les deux formats MP4. WEBM pour assurer une compatibilité maximale dans tous les navigateurs.

Téléchargez la version. MP4 ici.

Les fonds vidéo sont désactivés des appareils mobiles. Au lieu de cela, votre image de fond sera utilisée.

Pour cette raison, vous devez définir à la fois une image de fond et une vidéo d'arrière-plan pour obtenir les meilleurs résultats.

Remarque importante : Pour que le format vidéo MP4 fonctionne dans tous les navigateurs, votre serveur doit disposer des types MIME appropriés.

Vous pouvez en savoir plus sur l'utilisation de.htaccess pour définir les types MIME ici. Si vous remarquez que vos vidéos ne sont pas lues dans certains navigateurs, c'est probablement la raison.

Téléchargez la version. WEBM ici.

Les fonds vidéo sont désactivés des appareils mobiles. Au lieu de cela, votre image de fond sera utilisée.

Pour cette raison, vous devez définir à la fois une image de fond et une vidéo d'arrière-plan pour obtenir les meilleurs résultats.

Remarque importante: Pour que le format vidéo WEBM fonctionne dans tous les navigateurs, votre serveur doit disposer des types MIME appropriés.

Vous pouvez en savoir plus sur l'utilisation de.htaccess pour définir les types MIME ici. Si vous remarquez que vos vidéos ne sont pas lues dans certains navigateurs, c'est probablement la raison.

Pour que les vidéos soient correctement dimensionnées, vous devez saisir ici la largeur exacte (en pixels) de votre vidéo.

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

Hauteur de la vidéo de fond

Étiquette Admin

Options de conception des sections

Pour que les vidéos soient correctement dimensionnées, vous devez saisir ici la hauteur exacte (en pixels) de votre vidéo.

Dans ce menu déroulant, vous pouvez ajouter une étiquette d'administrateur qui apparaîtra dans le constructeur backend ainsi que dans la vue squelette du constructeur visuel.

Dans l'onglet Design, vous trouverez toutes les options de style de la section, telles que le dimensionnement et l'espacement.

C'est l'onglet que vous utiliserez pour modifier l'apparence de votre section.

Chaque type de section Divi possède une longue liste de paramètres de conception que vous pouvez utiliser pour modifier pratiquement n'importe quoi.

Ici, vous pouvez choisir si votre section a ou non une ombre intérieure. Ceci peut être parfait lorsque vous avez des fonds colorés ou des images d'arrière-plan.

Montrer l'ombre intérieure

Utiliser l'effet Parallax

Rembourrage sur mesure

Section Options avancées

Si cette option est activée, l'image d'arrière-plan reste figée pendant que vous faites défiler l'image, créant ainsi un effet parallaxe amusant.

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

Dans l'onglet Avancé, vous trouverez des options que les concepteurs Web plus expérimentés peuvent trouver utiles, comme les attributs CSS et HTML personnalisés.

Vous pouvez également choisir entre deux méthodes de parallaxe: CSS et True Parallax.

Ici, vous pouvez appliquer des CSS personnalisés à votre section.

Vous pouvez également appliquer des classes CSS et des IDs personnalisés à la section, qui peuvent être utilisés pour personnaliser la section dans le fichier style.css de votre thème enfant.

Entrez un ID CSS optionnel à utiliser pour cette section. Un ID peut être utilisé pour créer un style CSS personnalisé ou pour créer des liens vers des sections particulières de votre page.

CSS ID

Classe CSS

CSS personnalisé

Visibilité

Entrez les classes CSS facultatives à utiliser pour cette section. Une classe CSS peut être utilisée pour créer un style CSS personnalisé.

Les CSS personnalisés peuvent être appliqués à la section ici. Dans la section Personnaliser CSS, vous trouverez un champ texte dans lequel vous pouvez ajouter des CSS person- nalisés directement à chaque élément.

Cette option vous permet de contrôler sur quels périphériques votre section apparaît. Vous pouvez choisir de désactiver votre section sur les tablettes, les téléphones intelligents ou les ordinateurs de bureau individuellement.

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 votre site Web en utilisant les Options du Thème Divi ou les Paramètres de page du Générateur de Divi.

C'est utile si vous voulez utiliser différentes sections sur différents appareils, ou si vous voulez simplifier la conception mobile en supprimant certaines sections de la page.

Les entrées CSS dans ces paramètres sont déjà emballées dans des balises de style, vous n'avez donc qu'à entrer des règles CSS séparées par des point-virgules.

Utilisation de sections pleine largeur

Les sections pleine largeur vous donnent accès à un nouvel ensemble de modules pleine largeur.

Ces modules agissent un peu différemment parce qu'ils tirent parti de toute la largeur du navigateur.

Les modules Fullwidth ne peuvent être placés que dans des sections Fullwidth.

Utilisation de 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 à la section normale, il n' y a pas de concept de lignes ou de colonnes, puisque les modules pleine largeur profitent toujours de 100% de l'écran.

Les modules pleine largeur sont une excellente façon d'ajouter un saut visuel à la page !

Utilisation de sections pleine largeur

Un bon exemple d'un module de pleine largeur est le curseur de pleine largeur. Ce curseur pleine largeur fonctionne comme un curseur normal, sauf qu'il s'étend à 100% de largeur.

L'aﬃchage d'un curseur à une telle échelle peut être tout à fait étonnant, il suﬃt de vérifier notre démo divi pour un exemple.

Contrairement à la section normale, il n' y a pas de concept de lignes ou de colonnes, puisque les modules pleine largeur profitent toujours de 100% de l'écran.

Les modules pleine largeur sont une excellente façon d'ajouter un saut visuel à la page !

Utilisation des sections spécialisées

Des sections spécialisées ont été créées pour permettre des structures de colonnes plus avancées.

Contrairement aux sections normales, lorsque vous utilisez une section spécialisée, vous pouvez ajouter des variations de colonnes complexes à côté de barres verticales pleine échelle, sans ajouter de sauts indésirables à la page.

Ces types de mises en page ne sont pas possibles avec des sections normales.

Utilisation des sections spécialisées

Une fois que vous ajoutez une section de spécialité à la page, vous remarquerez qu'une section a un bouton "Ajouter un module", tandis que l'autre a un bouton "Insérer une ligne".

La zone "module d'insertion" représente votre sidebar vertical.

Vous pouvez ajouter autant de modules ici, en une seule rangée, et ils couvriront la largeur verticale de la section, adjacente à la structure de colonne que vous construisez à côté.

En cliquant sur "Insérer une ligne", vous pourrez insérer des lignes supplémentaires à gauche/droite de votre sidebar.

D'une certaine façon, cela peut être considéré comme l'ajout de lignes dans les rangs !

Le résultat est la possibilité de créer à peu près n'importe quelle structure de colonne dont vous pourriez rêver, et peu importe la structure que vous choisissez, nous avons fait en sorte que la combinaison soit superbe !

Utilisation des sections spécialisées

Voici un exemple de mise en page créée à l'aide de sections spécialisées.

Comme vous pouvez le voir, l'effet est une disposition à deux barres latérales, avec deux lignes verticales à gauche/droite d'une structure de colonnes complexe au milieu.

MERCI

Utiliser le builder Chapitre 8

More creations to inspire you

LAYOUT ORGANIZATION

TALK ABOUT DYS TEACHER-TEACHER

TALK ABOUT DYS WITH TEACHER

ESSENTIAL OILS PRESENTATION

ANCIENT EGYPT FOR KIDS PRESENTATION

CIRQUE DU SOLEIL

YURI GAGARIN IN DENMARK

Transcript