Portfolio

Pour commencer

Utiliser le composant Portfolio pour créer des points d’entrée attractifs vers vos galeries, vos projets, vos références ou tout autre contenu. Les éléments d’un portfolio s’affichent sous la forme d’une grille composée de lignes et de colonnes. Le composant Portfolio est un composant multiple composé de sous éléments.

Ajouter un Portfolio

Editez votre page
Cliquez sur l’icône à l’endroit où vous souhaitez ajouter le composant
Dans le sélecteur de composant cliquez sur Portfolio
Editez le composant en cliquant dessus
Cliquez sur Ajouter un élément puis sur l’icône pour l’éditer
Ajoutez une image. Pour en savoir plus l’ajout d’image, veuillez consulter Gérer les média
Renseignez un titre
Prévisualisez le résultat

Réorganiser les éléments du Portfolio

Vous pouvez réorganiser l’ordre des éléments au sein du composant par glisser/déposer :

Cliquez, maintenez et déplacez l’élément que vous souhaitez déplacer
Relâchez-le lorsque celui ci se trouve à la position désirée

Supprimer un élément du Portfolio

Pour supprimer un élément survolez-le et cliquez sur l’icône à droite.

Options de l’élément de Portfolio

Chaque sous-élément dispose de ses propres options.

OPTION	DESCRIPTION
Image	L’image affichée pour l’élément du portfolio
Balise Alt	La balise Alt de l’image. Pour en savoir plus sur la balise Alt, veuillez consulter Image
Titre	Le titre à afficher en surimpression de l’image
Meta	Le texte meta à afficher en surimpression de l’image(facultatif)
Contenu	Le contenu à afficher en surimpression de l’image (facultatif)
Lien	Un lien à appliquer à l’élément
Texte du lien	Le label du lien de l’élément (facultatif). Si vide, utilise le label renseigné dans les Paramètres du composant
Couleur	Régler une couleur différente pour cet élément (facultatif). Valable uniquement si le style Superposition est sur None dans les paramètres du composant

Paramètres du composant Portfolio

Ces options s’appliquent au composant et à l’ensemble des sous-éléments. Par défaut seules les options de base sont affichées. Vous pouvez activer les options avancées en cliquant sur le bouton du même nom en haut à droite de l’onglet Paramètres.

PORTFOLIO

OPTION	DESCRIPTION
Activer l’effet Masonry	Supprimer l’espaces vertical entre les articles malgré des images de hauteurs différentes
Effet de défilement	Appliquer un effet dynamique lorsque les éléments entre dans l’écran lors du défilement de la page
Écart	Régler l’écartement entre les images de la galerie
Afficher les séparateurs	Séparer les images par des filets verticaux. Dès que les images s’empilent, les lignes de séparation deviennent horizontales.

COLONNES

Pour chaque taille d’appareil vous pouvez déterminer le nombre de colonne à afficher pour votre galerie. Par exemple vous voudrez peut-être une seule colonne d’images sur les smartphones 3 sur les tablettes et 4 sur les ordinateurs. La valeur inherit signifie même valeur que celle renseignée immédiatement au dessus.

IMAGE

Vous pouvez renseigner les dimensions de votre image en remplissant le champ Largeur ou le champ Hauteur ou les 2. Le réglage d’une seule valeur préserve les proportions de l’image. Si vous renseignez les 2, l’image sera, si possible, redimensionnée et recadrée automatiquement.

La plateforme affiche la meilleur taille d’image, en fonction de la largeur de la fenêtre du navigateur du visiteur, parmi les tailles suivantes : 768px, 1024px, 1366px, 1600px, 1920px.

Nous vous recommandons de télécharger une image un peu plus grande que la taille maximale utilisée dans la page et de toujours renseigner une Largeur correspondant à la largeur maximal d’utilisation de l’image.

OPTION	DESCRIPTION
Ombre	Appliquer un effet d’ombre aux images
Ombre au survol	Appliquer un effet d’ombre aux images lors de leur survol
Ombre portée	Ajoutez une ombre portée

SUPERPOSITION

OPTION	DESCRIPTION
Style	Sélectionnez le style à appliquer au bloc de superposition accueillant les titre, meta, contenu, lien
Affichage	Sélectionnez si vous souhaitez voir le bloc de superposition toujours (Always), caché au survol (Hide on hover) ou affiché au survol (Show on hover)
Marges externes	Les marges externes du bloc de superposition
Alignement vertical	L’alignement vertical du contenu du bloc de superposition
Alignement	L’alignement horizontal du content

TITRE

OPTION	DESCRIPTION
Élément	Définissez l’élément HTML à utiliser pour le titre
Style	Appliquer un Style au titre
Décoration	Appliquez une décoration au titre
Couleur	Appliquez une couleur prédéfinie au titre
Marge au dessus	Fixer la marge au dessus du titre

OPTION	DESCRIPTION
Style	Sélectionnez le style du texte meta
Couleur	Appliquez une couleur prédéfinie
Marge au dessus	Fixer la marge au dessus du texte meta
Position	La position du texte meta par rapport au titre

CONTENU

OPTION	DESCRIPTION
Taille	La taille utilisée pour le texte du contenu
Marge au dessus	Fixer la marge au dessus du contenu

LIEN

OPTION	DESCRIPTION
Type	Appliquez le lien sur l’élément dans son ensemble ou afficher un bouton
Texte du lien	Le texte du bouton. Peut-être personnalisé par élément au niveau des paramètres de l’élément lui-même.
Style	Le style du bouton
Taille	Sélectionnez la taille du bouton
Marge au dessus	Fixer la marge au dessus du lien

GÉNÉRAL

Veuillez consulter Options générales des composants

Vous pouvez modifier les styles de ces différentes options depuis Design > Styles. Pour en savoir plus sur la personnalisation des styles, consultez Styles

Avancé

Veuillez consulter Options avancées des composants