Eléments de média Chapitre 5

MODULE 5

CHAPITRE 5 : PORTFOLIO FILTRABLE

ÉLÉMENTS DE MÉDIA

Comment ajouter, configurer et personnaliser le module de portefeuille filtrable Divi. Découvrez la démo en ligne: www.elegantthemes.com/preview/Divi/filterable-portfolio/

Portfolio filtrable

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

Comment ajouter un module de portfolio filtrable à votre page

Pour cet exemple, je vais vous montrer comment ajouter un module Portefeuille filtrable à une page de portfolio.

Exemple d'utilisation : ajout d'un module de portfolio filtrable à une page Portfolio

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.

Commençons par le début

Options avancées (CSS personnalisé)

Options de conception

Options de contenu

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 du portefeuille filtrable

Indiquez si vous souhaitez afficher ou non la catégorie sous chaque message dans la zone des messages.

Entrez un titre, si vous le souhaitez, qui sera placé au-dessus de la liste des projets.

Sélectionnez les catégories que vous souhaitez afficher. Les messages dans les catégories qui ne sont pas sélectionnées n'apparaîtront pas dans la liste des messages générés.

Catégories d'exposition

Afficher le titre

Inclure les catégories

Postes Nombre

Choisissez le mode d'affichage des messages que vous souhaitez afficher avant la pagination de la liste.

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

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

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

Étiquette Admin

Image de fond

Couleur de fond

Afficher la pagination

Cette option active/désactive la pagination. Si la pagination est désactivée, une seule page de projets sera affichée pour chaque catégorie.

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.

Options de conception de portefeuille filtrables

Police de titre

Couleur du texte

Disposition

Espacement des lettres de titre

Couleur du texte de titre

Taille de police du titre

Taille des polices de caractères du filtre

Filtrer la police de caractères

Hauteur de la ligne de titre

Hauteur de la ligne de filtration

Espacement lettre filtre

Filtrez la couleur du texte

Couleur du texte Meta

Taille de la police Meta

Meta Font

Utiliser la bordure

Hauteur de la ligne Meta

Espacement méta-lettres

Style de bordure

Largeur de bordure

Couleur de la bordure

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.

Options avancées du portefeuille filtrable

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

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

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

Visibilité

CSS personnalisé

Classe CSS

CSS ID

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.

MERCI