Want to make creations as awesome as this one?
Register now
Report content

Eléments structurels Chapitre 3

More creations to inspire you

ESSENTIAL OILS PRESENTATION

Presentation

ANCIENT EGYPT FOR KIDS PRESENTATION

Presentation

CIRQUE DU SOLEIL

Presentation

YURI GAGARIN IN DENMARK

Presentation

EIDIKO JEWELRY

Presentation

PRODUCT MANAGEMENT IN MOVIES & TV SHOWS

Presentation

A GLIMPSE INTO CAPE TOWN’S PAST

Presentation

Discover more incredible creations here

Transcript

ÉLÉMENTS STRUCTURELS

CHAPITRE 3 : LE MODULE DE LA BARRE LATÉRALE DIVI

MODULE 4

LE MODULE DE LA BARRE LATÉRALE DIVI

Aspen Roots est considéré comme un thème d'enfant "vide", ce qui signifie qu'il ne comprend aucun travail de conception ou de développement achevé auparavant, mais sert simplement de cadre.

Ici, vous êtes libre d'utiliser le Divi Builder de la manière standard et de développer un site web comme bon vous semble, sans la menace des mises à jour de thème effaçant votre travail.

Aspen Roots inclut une gamme de fonctionnalités haut de gamme, y compris l'éditeur de pied de page Aspen (afin de créer une zone de pied de page pour l'ensemble du site), Login Customizer (pour personnaliser la page de connexion wp-admin par défaut) ainsi que des paramètres de modèle de page d'erreur 404 (pour créer une page de redirection d'erreur).


Le module Sidebar

Divi vous permet de créer à la volée un nombre illimité de zones prêtes pour les widgets.

Les sidebars peuvent ensuite être ajoutés à n'importe quelle page, ce qui vous permet de créer des sidebars uniques pour différentes sections de votre site Web.

Le module de la barre latérale Divi

Comment ajouter, configurer et personnaliser le module de la barre latérale Divi.

Divi vous permet de créer à la volée un nombre illimité de zones prêtes pour les widgets. Les sidebars peuvent ensuite être ajoutés à n'importe quelle page, vous permettant de créer des sidebars uniques pour différentes sections de votre site

Comment ajouter un module de barre latérale à votre page

Avant de pouvoir ajouter un module sidebar à 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 remarque- rez 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 un module de barre latérale à votre page

Une fois que vous êtes entré dans le 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 qu'à l'intérieur des rangées.

Si vous commencez une nouvelle page, n'oubliez pas d'ajouter une ligne à votre page.


Nous avons quelques bons tutoriels sur la façon d'utiliser les éléments de ligne et de section de Divi.


Localisez le module sidebar dans la liste des modules et cliquez dessus pour l'ajouter à votre page.

La liste des modules est interrogeable, ce qui signifie que vous pouvez également taper le mot "sidebar" et cliquer sur "enter" pour trouver et ajouter automatiquement le module sidebar! Une fois le module ajouté, vous serez accueilli avec la liste d'options du module.

Ces options sont divisées en trois groupes principaux: Contenu, Design et Avan- cé.



Exemple d'utilisation : Ajouter une barre latérale à votre page de blog

Le module Sidebar vous permet d'insérer une sidebar (et tous ses widgets) n'importe où sur votre page.


En fait, vous pouvez ajouter n'importe quelle zone de widget en utilisant le module Sidebar.

Pour cet exemple, je vais vous montrer comment insérer une barre latérale personnalisée à votre page de blog en utilisant la section spécialisée pour afficher le widget Rechercher et Derniers messages WordPress.



Exemple d'utilisation : Ajouter une barre latérale à votre page de blog

Cette page de blog a un en-tête pleine largeur pour afficher le titre du blog en haut de la page.


Sous le module d'en-tête pleine largeur se trouve une disposition spéciale avec un module de blog à gauche et une barre verticale droite à droite.

L'utilisation de la section spécialisée vous permet d'ajouter des variations de colonnes complexes à côté des barres latérales verticales pleine longueur, sans ajouter de sauts indésirables à la page. C'est parfait pour un blog avec une barre latérale.

Vous devez d'abord vous assurer que vous avez les widgets configurés dans la page Widgets de votre tableau de bord WordPress. Pour cet exemple, j'ajoute le widget Search et le widget Recent Posts au widget Sidebar.


Exemple d'utilisation : Ajouter une barre latérale à votre page de blog

Déployez ensuite Visual Builder pour éditer la page du blog.


Ajoutez une section spécialisée à votre page (juste sous votre en-tête) avec la disposition suivante:

Exemple d'utilisation : Ajouter une barre latérale à votre page de blog

Une fois que vous ajoutez une section de spécialité à la page, vous remarquerez qu'une section (à gauche) a un bouton "Ajouter un module".


Pour cet exemple, c'est ici que le module Blog avec une grille de mise en page a été ajouté pour afficher les messages du blog.

Exemple d'utilisation : Ajouter une barre latérale à votre page de blog

L'autre (à droite) a un bouton "Insérer ligne". La zone "module d'insertion" représente votre sidebar vertical. C'est ici que vous entrez dans le module Sidebar.

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 fait, pour cet exemple, la page du blog a déjà un module Email Optin et un module Personne dans cette barre verticale de la disposition des Spécialités.


Ajoutons maintenant le Sidebar Module au dessus des autres modules dans votre zone de sidebar verticale.

Exemple d'utilisation : Ajouter une barre latérale à votre page de blog

Onglet Contenu

Onglet Design

Onglet Avancé

L'autre (à droite) a un bouton "Insérer ligne". La zone "module d'insertion" représente votre sidebar vertical. C'est ici que vous entrez dans le module Sidebar.

Widget Area: sélectionnez la barre latérale

Orientation: Droite (parce que la barre latérale est à droite)

Supprimer le séparateur de bordure: OUI

Couleur du texte: foncé

Taille de police d'en-tête: 26px

Espacement des lettres de tête: 3px

Hauteur de la ligne d'en-tête: 1.1em

Sous la section Personnaliser CSS, ajoutez le CSS suivant à la zone de texte Widget.

Ceci fera correspondre le design des Sidebar Widgets à celui du site:

Arrière-plan: #fff;

Padding: 20px;

-webkit-box-shadow: 0 1px 5px rgba (0,0,0,0,0.1);

-moz-box-shadow: 0 1px 5px rgba (0,0,0,0,0.1);

Box-shadow: 0 1px 5px rgba (0,0,0,0,0.1);



Sauvegarder les paramètres

Maintenant, vous pouvez voir que le module de la barre latérale tire sur les éléments du widget de la barre latérale (Recherche et Messages récents) et les affiche sur votre zone verticale de la barre latérale de votre section spécialisée.

Options de contenu de la barre latérale

Dans l'onglet Contenu, vous trouverez tous les éléments de contenu du module, tels que le texte, les images et les icônes.

Tout ce qui contrôle ce qui apparaît dans votre module sera toujours trouvé dans cet onglet.

Options de conception de la barre latérale

Ici, vous pouvez choisir le côté de la page sur lequel se trouve votre sidebar. Ce réglage contrôle l'orientation du texte et la position de la bordure.

Orientation

Supprimer le séparateur de bordure

Couleur du texte

Police d'en-tête

Ici, vous pouvez supprimer la mince bordure grise qui sépare votre sidebar du contenu de votre page.

Ici, vous pouvez choisir si votre texte doit être clair ou foncé. Si vous travaillez sur un fond foncé, votre texte doit être clair. Si votre arrière-plan est clair, votre texte doit être noir.

Vous pouvez changer la police de votre texte d'en-tête en sélectionnant la police désirée dans le menu déroulant.

Divi est livré avec des douzaines de polices de caractères géniales optimisées par Google Polices.


Par défaut, Divi utilise la police Open Sans pour tout le texte de votre page. Vous pouvez également personnaliser le style de votre texte en utilisant les options gras, italique, toutes majuscules et souligné.

Options de conception de la barre latérale

Ici, vous pouvez ajuster la taille de votre texte d'en-tête.

Taille des polices

d'en-tête

Couleur du texte

d'en-tête

Espacement des lettres d'en-tête

Hauteur de la ligne d'en-tête

Par défaut, toutes les couleurs de texte dans Divi apparaîtront en blanc ou gris foncé.

L'espacement des lettres affecte l'espace entre chaque lettre.

La hauteur de ligne affecte l'espace entre chaque ligne de votre texte d'en-tête.

Vous pouvez faire glisser le curseur de plage pour augmenter ou diminuer la taille de votre texte, ou vous pouvez saisir la taille de texte désirée directement dans le champ de saisie à droite du curseur.

Les champs de saisie prennent en charge différentes unités de mesure, ce qui signifie que vous pouvez saisir "px" ou "em" en fonction de votre taille pour modifier son type d'unité.

Si vous souhaitez changer la couleur de votre texte d'en-tête, choisissez la couleur désirée dans le sélecteur de couleurs à l'aide de cette option.

Si vous souhaitez augmenTer l'espace entre chaque lettre de votre texte d'en-tête, utilisez le curseur de gamme pour ajuster l'espace ou saisissez la taille d'espacement souhaitée dans le champ de saisie à droite du curseur.


Les champs de saisie prennent en charge différentes unités de mesure,

ce qui signifie que vous pouvez saisir "px" ou "em" en fonction de votre taille pour modifier son type d'unité.

Si vous souhaitez augmenter l'espace entre chaque ligne, utilisez le curseur de gamme pour ajuster l'espace ou saisissez la taille d'espacement souhaitée dans le champ de saisie à droite du curseur.

Les champs de saisie prennent en charge différentes unités de mesure, ce qui signifie que vous pouvez saisir "px" ou "em" en fonction de votre taille pour modifier son type d'unité.

Options de conception de la barre latérale

Vous pouvez changer la police de votre corps de texte en sélectionnant la police désirée dans le menu déroulant.

Police de corps

Taille de police du corps

Couleur du corps du texte

Espacement des lettres du corps

Ici, vous pouvez ajuster la taille de votre texte corporel.

Par défaut, toutes les couleurs de texte dans Divi apparaîtront en blanc ou gris foncé.

L'espacement des lettres affecte l'espace entre chaque lettre.

Si vous souhaitez augmenter l'espace entre chaque ligne, utilisez le curseur de distance pour ajuster l'espace.

Hauteur de la ligne corporelle

Divi est livré avec des douzaines de polices de caractères géniales optimisées par Google Polices. Par défaut, Divi utilise la police Open Sans pour tout le texte de votre page.

Vous pouvez également personnaliser le style de votre texte en utilisant les options gras, italique, toutes majuscules et souligné.

Vous pouvez faire glisser le curseur de plage pour augmenter ou diminuer la taille de votre texte, ou vous pouvez saisir la taille de texte désirée directement dans le champ de saisie à droite du curseur.

Les champs de saisie prennent en charge différentes unités de mesure, ce qui signifie que vous pouvez saisir "px" ou "em" en fonction de votre taille pour modifier son type d'unité.

Si vous souhaitez changer la couleur de votre corps de texte, choisissez la couleur désirée dans le sélecteur de couleurs à l'aide de cette option.

Si vous souhaitez augmenter l'espace entre chaque lettre de votre corps de texte, utilisez le curseur de gamme pour ajuster l'espace ou saisissez la taille d'espacement souhaitée dans le champ de saisie à droite du curseur.


Les champs de saisie prennent en charge différentes unités de mesure, ce qui signifie que vous pouvez saisir "px" ou "em" en fonction de votre taille pour modifier son type d'unité.

Ou bien, saisissez la taille d'espacement souhaitée dans le champ de saisie à droite du curseur. Les champs de saisie prennent en charge différentes unités de mesure, ce qui signifie que vous pouvez saisir "px" ou "em" en fonction de votre taille pour modifier son type d'unité.


Options avancées de la barre latérale

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.

Ici, vous pouvez appliquer des CSS personnalisés à n'importe lequel des nombreux éléments du module.

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

Options avancées de la barre latérale

Entrez un ID CSS optionnel à utiliser pour ce module. 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 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.

Le CSS personnalisé peut également être appliqué au module et à n'importe quel élément interne du module.

Cette option vous permet de contrôler sur quels périphériques votre module apparaît.

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.

Dans la section Personnaliser CSS, vous trouverez un champ texte dans lequel vous pouvez ajouter des CSS personnalisés directement à chaque élément.


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.

Vous pouvez choisir de désactiver votre module sur des tablettes, des téléphones intelligents ou des ordinateurs de bureau individuellement.

C'est utile si vous voulez utiliser différents modules sur différents appareils, ou si vous voulez simplifier le design mobile en éliminant certains éléments de la page.

MERCI