Eléments de média Chapitre 5

MODULE 5

ÉLÉMENTS DE MÉDIA

CHAPITRE 5 : PORTFOLIO FILTRABLE

Portfolio filtrable

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/

Comment ajouter un module de portfolio filtrable à votre page

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.

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

Pour cet exemple, je vais vous montrer comment ajouter un module Portefeuille filtrable à 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.

Options avancées (CSS personnalisé)

Options de contenu

Options de conception

Options de contenu du portefeuille filtrable

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.

Catégories d'exposition

Afficher le titre

Inclure les catégories

Postes Nombre

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.

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

Étiquette Admin

Couleur de fond

Image de fond

Afficher la pagination

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.

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.

Options de conception de portefeuille filtrables

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.

Police de titre

Disposition

Couleur du texte

Espacement des lettres de titre

Taille de police du titre

Couleur du texte de titre

Taille des polices de caractères du filtre

Hauteur de la ligne de titre

Filtrer la police de caractères

Hauteur de la ligne de filtration

Filtrez la couleur du texte

Espacement lettre filtre

Couleur du texte Meta

Meta Font

Taille de la police Meta

Utiliser la bordure

Espacement méta-lettres

Hauteur de la ligne Meta

Style de bordure

Couleur de la bordure

Largeur de bordure

Options avancées du portefeuille filtrable

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.

Visibilité

CSS personnalisé

Classe CSS

CSS ID

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

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