
Eléments structurels Chapitre 4
FAVRAIS
Created on May 12, 2022
Eléments structurels Chapitre 4
More creations to inspire you
COUNTRIES LESSON 5 GROUP 7/8
Presentation
BLENDED PEDAGOGUE
Presentation
WORLD WILDLIFE DAY
Presentation
FOOD AND NUTRITION
Presentation
2021 TRENDING COLORS
Presentation
HISTORY OF THE CIRCUS
Presentation
LETTERING PRESENTATION
Presentation
Transcript
ÉLÉMENTS STRUCTURELS
CHAPITRE 4 : LE MODULE D'EN-TÊTE DIVI PLEINE LARGEUR
MODULE 4
Le module d'en-tête Divi pleine largeur
Magnifiquement conçu, Jasmine allie des illustrations d'aquarelles vibrantes, des en-têtes de manuscrits au pinceau, des combinaisons élégantes de polices de caractères et des accents subtils
de couleur rose rougâtre, orange ou saumon, pour donner une touche féminine supplémentaire.
Comment ajouter un module d'en-tête pleine largeur à votre 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 Activer Visual Builder lorsque vous naviguez sur votre site Web si vous êtes connecté à votre tableau de bord WordPress.
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 pleine largeur ne peuvent être ajoutés qu'à l'intérieur des sections pleine largeur.
Si vous commencez une nouvelle page, n'oubliez pas d'ajouter d'abord une section pleine largeur à votre page. Nous avons d'excellents tutoriels sur comment utiliser les éléments de section de Divi.
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 pleine largeur ne peuvent être ajoutés qu'à l'intérieur des sections pleine largeur.
Si vous commencez une nouvelle page, n'oubliez pas d'ajouter d'abord une section pleine largeur à votre page. Nous avons d'excellents tutoriels sur comment utiliser les éléments de section de Divi.
Localisez le module d'en-tête pleine largeur 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 " en-tête pleine largeur " puis cliquer sur Entrée pour trou- ver et ajouter automatiquement le module d'en-tête pleine largeur! 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 Avancé.
Exemple d'utilisation :
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 Activer Visual Builder lorsque vous naviguez sur votre site Web si vous êtes connecté à votre tableau de bord WordPress.
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 pleine largeur ne peuvent être ajoutés qu'à l'intérieur des sections pleine largeur.
Si vous commencez une nouvelle page, n'oubliez pas d'ajouter d'abord une section pleine largeur à votre page. Nous avons d'excellents tutoriels sur comment utiliser les éléments de section de Divi.
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 pleine largeur ne peuvent être ajoutés qu'à l'intérieur des sections pleine largeur.
Si vous commencez une nouvelle page, n'oubliez pas d'ajouter d'abord une section pleine largeur à votre page. Nous avons d'excellents tutoriels sur comment utiliser les éléments de section de Divi.
Localisez le module d'en-tête pleine largeur 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 " en-tête pleine largeur " puis cliquer sur Entrée pour trou- ver et ajouter automatiquement le module d'en-tête pleine largeur! 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 Avancé.
Options de contenu
Options de conception
Options avancées (CSS personnalisé)
Mettez à jour les paramètres de l'en-tête pleine largeur comme suit :
Titre: À propos de nous
Rubrique Texte: Nous faisons les choses différemment...
URL de l'image d'arrière-plan:[insérer une image 1920 x 800])
Couleur de la superposition d'arrière-plan: rgba (0,0,0,0,0.2)
Orientation du texte et du logo: Centre
Afficher le bouton de défilement vers le bas: OUI
Icône:[sélectionner l'icône][choisir l'icône
Défilement vers le bas Couleur de l'icône: #ffffff
Défilement vers le bas Taille de l'icône: 50px
Couleur du texte: Light
Couleur du texte de titre: #ffffff
Titre Police de caractères: Open Sans, gras, majuscules
Taille de la police de titre: 60px (Bureau), 40px (Tablette), 30px (Mobile) Taille de police du sous-titre: 25px
Élément principal :
rembourrage: 100px 0;
Voilà, c'est tout !
Options de contenu de l'en-tête pleine largeur
Options de contenu de
Titre
Texte de sous-titre
Bouton #1 Texte
Bouton #2 Texte
Options de contenu de
Contenu
URL du bouton #1
URL du bouton #2
URL de l'image du logo
Options de contenu de
URL de l'image
URL de l'image de fond
Couleur de fond
Couleur de l’arrière plan
Étiquette Admin
Les images d'arrière-plan apparaîtront au-dessus des couleurs d'arrière-plan, ce qui signifie que votre couleur d'arrière-plan ne sera pas visible lorsqu'une image d'arrière-plan est appliquée.
Les images semi-transparentes en arrière-plan superposées peuvent créer des effets de fraîcheur lorsqu'elles sont placées au-dessus des images de fond.
Lorsque vous utilisez la vue WireFrame dans le Visual Builder, ces étiquettes apparaîtront dans le bloc module de l'interface Divi Builder.
Options de conception d'en-tête pleine largeur
Chaque module Divi dispose d'une longue liste de paramètres de conception que vous pouvez utiliser pour modifier pratiquement n'importe quoi.
Options de conception
Orientation du texte et du logo
Mettre en plein écran
Utiliser l'effet Parallax
Méthode Parallax
Options de conception
Afficher Bouton de défilement vers le bas
Icône
Défilement vers le bas Couleur de l'icône
Défilement vers le bas Taille de l'icône
Vous pouvez changer cette couleur en ajustant la couleur dans cette option à l'aide du sélecteur de couleur.
Options de conception
Alignement vertical de l'image
Couleur du texte
Alignement vertical du texte
Police de titre
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
Taille de police du titre
Couleur du texte de titre
Espacement des lettres de titre
Hauteur de la ligne de titre
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 de titre, 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 titre, utilisez le curseur de champ pour ajuster l'espace ou entrez 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é.
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
Contenu Police
Taille de la police de caractères
Couleur du texte de contenu
Espacement des lettres de contenu
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 texte de contenu, 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 de contenu, utilisez le curseur de plage 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 modi- fier son type d'unité.
Options de conception
Hauteur de la ligne
Police de
Taille de police du sous-titre
Couleur du texte de sous-titre
Les champs de saisie prennent en charge différentes unités de me- sure, ce qui signifie que vous pouvez saisir "px" ou "em" en fonction de votre taille pour modifier son type d'unité.
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 texte de sous-titre, choisissez la couleur désirée dans le sélecteur de couleurs à l'aide de cette option.
Options de conception
Espacement des lettres du sous-titre
Hauteur de la ligne du sous-titre
Texte Largeur
Utilisez des styles personnalisés pour les boutons
Si vous souhaitez augmenter l'espace entre chaque lettre dans le sous-titre de votre texte, utilisez le curseur de plage 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é.
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é.
Par exemple, une valeur de 50 % garantit que le texte n'est jamais supérieur à 50 % de la largeur du module d'en-tête global.
Options de conception
Taille du texte des boutons
Couleur du texte des boutons
Couleur d'arrière-plan du bouton
Bouton Bordure Largeur de bordure
Le bouton s'ajuste au fur et à mesure que la taille du texte augmente ou diminue.
Cette option vous permet d'attribuer une couleur de texte personnalisée au bouton dans ce module. Sélectionnez votre couleur personnalisée à l'aide du sélecteur de couleurs pour changer la couleur du bouton.
Ceci peut être modifié en sélectionnant la couleur de fond désirée dans le sélecteur de couleurs.
Ce paramètre permet d'augmenter ou de diminuer la taille de cette bordure. Les bordures peuvent être supprimées en entrant une valeur de 0.
Options de conception
Couleur de la bordure du bouton
Bouton Border Radius Rayon de la bordure
Espacement des lettres des boutons
Police de bouton
Cette option vous permet d'assigner une couleur de bordure personnalisée au bouton dans ce module. Sélectionnez votre couleur personnalisée à l'aide du sélecteur de couleurs pour changer la couleur de bordure du bouton.
Par défaut, les boutons dans Divi ont un petit rayon de bordure qui arrondit les coins de 3 pixels. Vous pouvez le diminuer à 0 pour créer un bouton carré ou l'augmenter significativement pour créer des boutons à bords circulaires.
Si vous souhaitez augmenter l'espace entre chaque lettre du texte de votre bouton, 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 me- sure, ce qui signifie que vous pouvez saisir "px" ou "em" en fonction de votre taille pour modifier son type d'unité.
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
Couleur de la bordure du bouton
Bouton Border Radius Rayon de la bordure
Espacement des lettres des boutons
Police de bouton
Cette option vous permet d'assigner une couleur de bordure personnalisée au bouton dans ce module. Sélectionnez votre couleur personnalisée à l'aide du sélecteur de couleurs pour changer la couleur de bordure du bouton.
Par défaut, les boutons dans Divi ont un petit rayon de bordure qui arrondit les coins de 3 pixels. Vous pouvez le diminuer à 0 pour créer un bouton carré ou l'augmenter significativement pour créer des boutons à bords circulaires.
Si vous souhaitez augmenter l'espace entre chaque lettre du texte de votre bouton, 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 me- sure, ce qui signifie que vous pouvez saisir "px" ou "em" en fonction de votre taille pour modifier son type d'unité.
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
Ajouter Bouton Bouton Icône
Bouton Icône
Bouton Icône Couleur
Bouton Positionnement
Par défaut, la couleur de l'icône est la même que celle du texte de vos boutons, mais ce paramètre vous permet d'ajuster la couleur indépendamment.
Options de conception
Afficher uniquement l'icône sur le bouton de survol pour le bouton
Bouton Hover
Bouton Hover Border Couleur de la bordure
Bouton Hover Border Radius rayon
Espacement des lettres de survol des boutons
En-tête pleine largeur Options avancées
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.
En-tête pleine largeur Options avancées
CSS ID
Classe CSS
CSS personnalisé
Visibilité
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.
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