Eléments structurels Chapitre 4

É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

Divi.Thème enfant Jasmin - http://jasmine.aspengrovestudios.space/

Robuste et riche en fonctionnalités, Jasmine est un superbe thème Divi enfant, idéal pour les blogueuses qui cherchent à partager leur voix avec le monde entier.

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

Avant de pouvoir ajouter un module d'en-tête pleine largeur à votre page, vous devez d'abord aller 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 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.

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 :

Ajout d'un en-tête pleine largeur à une page «à propos de nous»

Pour cet exemple, je vais vous montrer comment utiliser le Fullwidth Header Module pour ajouter un en-tête avec du texte personnalisé et une image de fond.

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.

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

Aﬃcher 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

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 contenu de

l'en-tête pleine largeur

Entrez le titre de votre page ici.

Titre

Texte de sous-titre

Bouton #1 Texte

Bouton #2 Texte

Si vous souhaitez utiliser un sous-titre, ajoutez-le ici. Votre sous-titre apparaîtra sous votre titre dans une petite police.

Entrez le texte du bouton.

Options de contenu de

l'en-tête pleine largeur

Ici, vous pouvez définir le contenu qui sera placé sous l'en-tête et le texte du titre.

Contenu

URL du bouton #1

URL du bouton #2

URL de l'image du logo

Entrez l'URL du bouton

Téléchargez l'image désirée ou tapez l'URL de l'image que vous souhaitez aﬃcher.

Options de contenu de

l'en-tête pleine largeur

Téléchargez l'image désirée ou tapez l'URL de l'image que vous souhaitez aﬃcher.

URL de l'image

d'en-tête

URL de l'image de fond

Couleur de fond

Couleur de l’arrière plan

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.

Définissez une couleur d'arrière-plan personnalisée pour votre module, ou laissez vide pour utiliser la couleur par défaut.

Choisissez une couleur d'arrière-plan superposée, qui sera placée sur le dessus de l'image d'arrière-plan.

Étiquette Admin

Ceci changera l'étiquette du module dans le constructeur pour une identification facile.

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

Dans l'onglet Design, vous trouverez toutes les options de style du module, telles que les polices de caractères, les couleurs, le dimensionnement et l'espacement.

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

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

d'en-tête pleine largeur

Ceci contrôle la façon dont votre texte est aligné dans le module.

Orientation du texte et du logo

Mettre en plein écran

Utiliser l'effet Parallax

Méthode Parallax

Ici, vous pouvez choisir si l'en-tête doit être agrandi en taille plein écran.

Si cette option est activée, vos images de fond auront une position fixe au fur et à mesure de votre défilement, ce qui créera un effet parallaxe amusant.

Définir la méthode utilisée pour l'effet parallaxe.

Options de conception

d'en-tête pleine largeur

Ici, vous pouvez choisir si le bouton de défilement vers le bas est aﬃché.

Aﬃcher 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

Sélectionnez une icône à aﬃcher pour le bouton de défilement vers le bas.

Par défaut, l'icône de défilement vers le bas hérite de la couleur de votre texte d'en-tête (blanc ou gris).

Utilisez ce paramètre pour augmenter ou diminuer la taille de l'icône déroulante qui apparaît au bas de votre en-tête.

Vous pouvez changer cette couleur en ajustant la couleur dans cette option à l'aide du sélecteur de couleur.

Options de conception

d'en-tête pleine largeur

Ceci contrôle l'orientation de l'image dans le module.

Alignement vertical de l'image

Couleur du texte

Alignement vertical du texte

Police de titre

Ici vous pouvez choisir la valeur de votre texte. Si vous travaillez sur un fond foncé, votre texte doit être clair. Si vous travaillez sur un fond clair, votre texte doit être sombre.

Ce paramètre détermine l'alignement vertical de votre contenu. Votre contenu peut être centré verticalement ou aligné vers le bas.

Vous pouvez changer la police de votre texte de titre 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

d'en-tête pleine largeur

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

Taille de police du titre

Couleur du texte de titre

Espacement des lettres de titre

Hauteur de la ligne de titre

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 ou saisissez la taille d'espacement souhaitée dans le champ de sai- sie à droite du curseur.

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é.

Options de conception

d'en-tête pleine largeur

Vous pouvez changer la police du texte de votre contenu en sélectionnant la police dési- rée dans le menu déroulant.

Contenu Police

Taille de la police de caractères

Couleur du texte de contenu

Espacement des lettres de contenu

Ici, vous pouvez régler la taille de votre texte de contenu.

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.

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é.

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

d'en-tête pleine largeur

Hauteur de la ligne

de contenu

Police de

sous-titre

Taille de police du sous-titre

Couleur du texte de sous-titre

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

Ici, vous pouvez ajuster la taille de votre texte de sous-titre.

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

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é.

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

d'en-tête pleine largeur

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

Espacement des lettres du sous-titre

Hauteur de la ligne du sous-titre

Texte Largeur

max.

Utilisez des styles personnalisés pour les boutons

Utilisez cette option pour réduire la largeur maximale du texte dans le module d'en-tête.

L'activation de cette option vous permettra de découvrir les différents paramètres de per- sonnalisation des boutons que vous pouvez utiliser pour modifier l'apparence du bouton de votre module.

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é.

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

d'en-tête pleine largeur

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

Taille du texte des boutons

Couleur du texte des boutons

Couleur d'arrière-plan du bouton

Bouton Bordure Largeur de bordure

Par défaut, les boutons assument la couleur d'accent de votre thème telle que définie dans le Thème Customizer.

Par défaut, les boutons ont une couleur de fond transparente.

Tous les boutons Divi ont un bord de 2px par défaut.

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

d'en-tête pleine largeur

Par défaut, les bordures de boutons assument la couleur d'accent du thème définie dans

le Customizer Thème.

Couleur de la bordure du bouton

Bouton Border Radius Rayon de la bordure

Espacement des lettres des boutons

Police de bouton

Le rayon de la bordure affecte l'arrondi des coins de vos boutons.

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

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

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é.

Options de conception

d'en-tête pleine largeur

Par défaut, les bordures de boutons assument la couleur d'accent du thème définie dans

le Customizer Thème.

Couleur de la bordure du bouton

Bouton Border Radius Rayon de la bordure

Espacement des lettres des boutons

Police de bouton

Le rayon de la bordure affecte l'arrondi des coins de vos boutons.

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

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

Options de conception

d'en-tête pleine largeur

Désactivé, ce paramètre supprimera les icônes de votre bouton. Par défaut, tous les bou- tons Divi aﬃchent une flèche en survolant..

Ajouter Bouton Bouton Icône

Bouton Icône

Bouton Icône Couleur

Bouton Positionnement

des icônes

Si les icônes sont activées, vous pouvez utiliser ce paramètre pour sélectionner l'icône à utiliser dans votre bouton. Divi a plusieurs icônes à choisir.

Ajuster ce paramètre changera la couleur de l'icône qui apparaît dans votre bouton.

Vous pouvez choisir d'aﬃcher votre icône de bouton à gauche ou à droite de votre bouton.

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

d'en-tête pleine largeur

Par défaut, les icônes de bouton ne sont aﬃchées qu'en survolant. Si vous souhaitez que l'icône apparaisse toujours, désactivez ce paramètre.

Aﬃcher uniquement l'icône sur le bouton de survol pour le bouton

Bouton Hover

Couleur du texte

Bouton Hover Border Couleur de la bordure

Bouton Hover Border Radius rayon

Lorsque le bouton est survolé par la souris d'un visiteur, cette couleur sera utilisée. La couleur passera de la couleur de base définie dans les paramètres précédents.

Lorsque le bouton est survolé par la souris d'un visiteur, cette valeur sera utilisée. La valeur passe de la valeur de base définie dans les réglages précédents.

Espacement des lettres de survol des boutons

Lorsque le bouton est survolé par la souris d'un visiteur, cette valeur sera utilisée. La va- leur passe de la valeur de base définie dans les réglages précédents.

En-tête pleine largeur Options avancées

Dans l'onglet Avancé, vous trouverez des options que les concepteurs Web plus expéri- menté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.

En-tête pleine largeur Options avancées

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 uti- lisée pour créer un style CSS personnalisé.

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.

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

Eléments structurels Chapitre 4

More creations to inspire you

SUMMER ZINE 2018

INTERNATIONAL EVENTS

FALL ZINE 2018

MASTER'S THESIS ENGLISH

49ERS GOLD RUSH PRESENTATION

3 TIPS FOR AN INTERACTIVE PRESENTATION

BRANCHES OF U.S. GOVERNMENT

Transcript