Want to make creations as awesome as this one?

Eléments de média Chapitre 4

Transcript

ÉLÉMENTS DE MÉDIA

CHAPITRE 4 : PORTFOLIO

MODULE 5

Le module Divi Portfolio

Comment ajouter, configurer et personnaliser le module de portefeuille Divi.

Découvrez la démo en ligne: www.elegantthemes.com/preview/Divi/portfolio-2/

Comment ajouter un module Portfolio à votre page

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



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 portfolio 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 "portfolio" et cliquer sur "enter" pour trouver et ajouter automatiquement le module portfolio!

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 module Portfolio à une page Portfolio

Pour cet exemple, je vais vous montrer comment mettre en valeur un portfolio sur une page de portfolio.

Commençons par le début

Utilisez le générateur visuel pour ajouter une section régulière avec une ligne pleine largeur (1 colonne) sous l'en-tête de la page.

Ajoutez ensuite un module Portefeuille filtrable à la ligne.

Mettez à jour les paramètres du portefeuille comme suit:


Options de contenu

Nombre de postes: 8

Afficher la pagination: NON


Options de conception

Disposition: Grille

Zoom Icône Couleur: #ffffff

Couleur de superposition de survol: rgba (224,153,0,0,0.58)

Police de titre: Par défaut, en gras, majuscules

Titre Taille de la police: 14px

Espacement des lettres de titre: 1px

Taille de la police Meta: 12px

Espacement des méta-lettres: 1px


Options avancées (CSS personnalisé)

Titre du portefeuille:

Alignement du texte: au centre;

Portfolio Post Meta: Alignement du texte: au centre;


C'est tout !



Options de contenu du portefeuille

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.

Postes Nombre

Inclure les catégories

Afficher le

Titre

Catégories d'exposition

Contrôlez le nombre de projets affichés. Laisser en blanc ou utiliser 0 pour ne pas limiter le montant.

Choisissez les catégories que vous souhaitez afficher. Les projets des catégories non sélectionnées n'apparaîtront pas dans la liste des projets.

Choisissez si le titre de chaque projet s'affiche ou non lorsque vous passez au-dessus de l'élément de projet.


Ici, vous pouvez activer ou désactiver les liens de catégorie.

Afficher la pagination

Couleur

de fond

Image

de fond

Étiquette

Admin

Ici, vous pouvez activer ou désactiver la pagination pour ce flux.

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

Si elle est définie, cette image sera utilisée comme arrière-plan pour ce module.

Pour sup- primer une image de fond, supprimez simplement l'URL du champ Paramètres.


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.


Ceci changera l'étiquette du module dans le constructeur pour une identification facile. 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 du portefeuille

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.


Disposition

Zoom Icône Couleur

Couleur de superposition de survol

Icône de survol Picker

Choisissez la mise en page que vous souhaitez utiliser. La "Grille" affichera tous vos éléments dans une disposition à plusieurs colonnes et à plusieurs rangées. Fullwidth affichera chaque projet sur sa propre ligne en utilisant de grandes images non rognées et pleine largeur.

Lors du survol d'un élément dans le module portfolio, une icône de superposition apparaît. Vous pouvez ajuster la couleur utilisée pour cette icône à l'aide du sélecteur de couleurs dans ce paramètre.

Lors du survol d'un élément dans le module portfolio, une couleur de superposition s'estompe au-dessus de l'image et au-dessous du texte et de l'icône du titre du portfolio. Par défaut, une couleur blanche semi-transparente est utilisée.

Si vous souhaitez utiliser une couleur différente, vous pouvez ajuster la couleur à l'aide du sélecteur de couleurs dans ce paramètre.


Ici, vous pouvez choisir une icône personnalisée qui sera affichée lorsqu'un visiteur survolera les éléments du portfolio dans le module.

Couleur du texte

Police de titre

Taille de police du titre

Couleur du texte de titre

Ici, vous pouvez choisir si votre texte doit être clair ou foncé.

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

Ici, vous pouvez ajuster la taille de votre texte 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é.


Par défaut, toutes les couleurs de texte dans Divi apparaîtront en blanc ou gris foncé. 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.

Espacement des lettres de titre

Hauteur de la ligne de titre

Meta Font

Taille de la police Meta

L'espacement des lettres affecte l'espace entre chaque lettre. 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é.

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

Vous pouvez changer la police de votre méta texte 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é.


Ici vous pouvez ajuster la taille de votre méta texte.

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

Couleur du texte Meta

Espacement méta-lettres

Hauteur de la ligne Meta

Utiliser la bordure

Par défaut, toutes les couleurs de texte dans Divi apparaîtront en blanc ou gris foncé. Si vous souhaitez changer la couleur de votre méta texte, choisissez la couleur désirée dans le sélecteur de couleurs en utilisant cette option.

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


Si vous souhaitez augmenter l'espace entre chaque lettre de votre méta 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é.

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

Activer cette option placera une bordure autour de votre module. Cette bordure peut être personnalisée à l'aide des paramètres conditionnels suivants.

Couleur de la bordure

Largeur de bordure

Style de bordure

Cette option affecte la couleur de votre bordure. Sélectionnez une couleur personnalisée dans le sélecteur de couleurs pour l'appliquer à votre bordure.

Par défaut, les bordures ont une largeur de 1 pixel.

Vous pouvez augmenter cette valeur en faisant glisser le curseur de plage ou en saisissant une valeur personnalisée dans le champ de saisie à droite du curseur.

Unités de mesure personnalisées des mesures prises en charge, ce qui signifie que vous pouvez changer l'unité par défaut de "px" à quelque chose d'autre, comme em, vh, vw, etc.

Les bordures prennent en charge huit styles différents, y compris: solide, pointillé, pointillé, pointillé, double, rainuré, faîtage, encoches et début. Sélectionnez le style désiré dans le menu déroulant pour l'appliquer à votre bordure.


Options avancées du portefeuille

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.


CSS ID

Classe CSS

CSS personnalisé

Visibilité

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.

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.

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.

Le CSS personnalisé peut également être appliqué au module et à n'importe quel élément interne du module. 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.


Cette option vous permet de contrôler sur quels périphériques votre module apparaît. 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