Eléments de média Chapitre 5

ÉLÉMENTS DE MÉDIA

CHAPITRE 5 : PORTFOLIO FILTRABLE

MODULE 5

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/

Le Portfolio Filtrable vous permet d'afficher vos projets les plus récents de façon standard ou en grille. Le portefeuille filtrable ressemble au module de portefeuille normal, sauf qu'il charge les nouveaux projets en utilisant une requête Ajax, et qu'il inclut des options pour filtrer la liste de projets par catégories.

Lorsqu'une catégorie particulière est sélectionnée, la liste des projets est instantanément régénérée avec une nouvelle liste de projets de la catégorie sélectionnée.

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.

Cliquez sur ce bouton pour activer le Di- vi 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 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 de portfolio filtrable 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 filtrable" et cliquer sur "enter" pour trouver et ajouter automatiquement le module portfolio filtrable! 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 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 de contenu

Options de conception

Options avancées (CSS personnalisé)

Nombre de postes : 8

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

Filtrez la police: Par défaut, en gras, en majuscules

Taille de police de filtre: 14px

Espacement des lettres du filtre: 1px

Taille de la police Meta: 12px

Espacement des méta-lettres: 1px

Filtre de portefeuille actif:

couleur: #e09900;

Titre du portefeuille:

Alignement du texte: au centre;

Portfolio Post Meta:

Alignement du texte: au centre;

Page active de pagination:

couleur: #e09900! important;

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.

Choisissez le mode d'aﬃchage des messages que vous souhaitez aﬃcher avant la pagination de la liste.

Postes Nombre

Inclure les catégories

Aﬃcher le titre

Catégories d'exposition

Sélectionnez les catégories que vous souhaitez aﬃcher. 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.

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

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

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

Aﬃcher la pagination

Couleur de fond

Image de fond

Étiquette Admin

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.

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

Pour supprimer 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.

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

Chaque module Divi dispose d'une longue liste de paramètres de conception que vous pouvez utiliser pour modifier pratiquement n'importe quoi.

Disposition

Couleur du texte

Police de titre

Sélectionnez le style de mise en page de portefeuille souhaité. Fullwidth "affiche un message par ligne, tandis que" Grid "affiche vos projets dans une grille carrelée avec plusieurs projets par ligne.

Ici, vous pouvez choisir si votre texte doit être clair ou foncé. Si vous travaillez sur un fond foncé, votre texte doit être clair. Si votre arrière-plan est clair, votre texte doit être noir.

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

Taille de police du titre

Couleur du texte de titre

Espacement des lettres de titre

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.

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

Hauteur de la ligne de titre

Filtrer la police de caractères

Taille des polices de caractères du filtre

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 du texte de votre filtre 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 du texte de votre filtre.

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

Filtrez la couleur du texte

Espacement lettre filtre

Hauteur de la ligne de filtration

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

Si vous souhaitez changer la couleur du texte de votre filtre, choisissez la couleur désirée dans le sélecteur de couleurs à l'aide de cette option.

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

Si vous souhaitez augmenter l'espace entre chaque lettre du texte de filtre, utilisez le curseur de plage pour ajuster l'espace ou saisissez la taille d'espacement souhaitée dans le champ de saisie situé à 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 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é.

Meta Font

Taille de la police Meta

Couleur du

texte Meta

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.

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 méta texte, choisissez la couleur désirée dans le sélecteur de couleurs en utilisant cette option.

Espacement

méta-lettres

Hauteur de la ligne Meta

Utiliser

la bordure

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

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.

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

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.

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.

MERCI

Eléments de média Chapitre 5

More creations to inspire you

POLITICAL POLARIZATION

WATER PRESERVATION

PROMOTING ACADEMIC INTEGRITY

ARTICLES

AGRICULTURE DATA

THE OCEAN'S DEPTHS

C2C VOLUNTEER ORIENTATION

Transcript