Personnaliser les pages Portfolio

Personnalisez les projets et les pages Portfolio de votre site.

Dernière mise à jour le 8 juillet 2024

Les pages Portfolio sont des pages de destination personnalisées qui dirigent les visiteurs vers des projets. Vous pouvez personnaliser les pages Portfolio en fonction de votre marque et de votre style. Utilisez ce guide afin de trouver les options de style pour les pages Portfolio et leurs projets individuels. Pour créer une page Portfolio et ajouter du contenu, consultez l’article Pages Portfolio.

Pages Portfolio et projets de portfolio

Les pages Portfolio sont organisées en deux parties : la page Portfolio principale, qui crée une grille d’images mises en avant ou une liste de liens sur lesquels les visiteurs cliquent pour explorer votre portfolio, et les projets individuels vers lesquels ces liens mènent et auxquels vous ajoutez du contenu.

Ouvrir les options de personnalisation

Vous pouvez personnaliser la page Portfolio et les projets à deux endroits :

  • Page Portfolio : cliquez sur Modifier sur la page Portfolio, puis sur l’icône du crayon dans la section du portfolio.
  • Projets : cliquez sur le projet sur la page Portfolio pour l’ouvrir, puis sur Modifier et sur l’icône du crayon dans la section que vous souhaitez personnaliser. Chaque projet est composé de sections, et chaque section possède ses propres options de style.

Page Portfolio

Votre page Portfolio affiche toutes vos projets sous forme d’images mises en avant ou de liens hypertextes, sur lesquels les visiteurs cliquent pour ouvrir des projets individuels.

Dans les styles de section du portfolio, vous pouvez personnaliser les informations suivantes :

À retenir :

  • Ces modifications affectent toutes les pages Portfolio qui utilisent la même disposition.
  • Toutes les modifications apportées à une disposition spécifique seront enregistrées même si vous passez à une nouvelle disposition. Ainsi, si vous revenez à une disposition précédente, vos paramètres seront restaurés.
  • Selon le nombre de projets de votre page Portfolio, il est possible que certains ajustements de style n’affectent pas votre disposition. Par exemple, si vous avez une disposition Survol : Arrière-plan avec un grand nombre de projets, il est possible que l’ajustement Hauteur n’ait pas d’effet visible car la section doit être d’une certaine hauteur pour afficher tous les liens du projet. Utilisez alors l’ajustement Espacement vertical des liens.

Formater les dispositions en grille

Les dispositions en grille affichent vos projets dans une grille d’images mises en avant. Les visiteurs cliquent sur l’image ou sur le titre pour ouvrir le projet. Les options de l’onglet Format des styles de section varient en fonction de la disposition en grille que vous choisissez.

La disposition Grille : Simple affiche les images mises en avant dans une grille avec le titre de projet en dessous des images. Après avoir sélectionné cette disposition, vous pouvez modifier les ajustements de style suivants :

  • Largeur : sélectionnez Plein pour que le contenu couvre la largeur de la section ou Insertion pour agrandir la marge intérieure à gauche et à droite du contenu.
  • Hauteur : définissez la hauteur de la section : petite, moyenne, grande ou personnalisée. N’oubliez pas que la hauteur des sections dépend également de la quantité de contenu.
  • Colonnes : définissez la grille pour qu’elle comporte 2, 3 ou 4 colonnes.
  • Espacement horizontal
  • Espacement vertical
  • Valeur de proportion : définissez la valeur de proportion des images.
  • Alignement du texte : alignez le texte à gauche ou au centre sous les images.
  • Effet de survol : ajoute un effet de fondu ou de zoom lorsque le curseur survole une image.
  • Opacité du survol : si vous utilisez l’effet Fondu, définissez l’opacité du survol à une valeur inférieure pour une superposition plus solide, ou à une valeur plus élevée pour une superposition plus transparente.
  • Espacement du texte

La disposition Grille : Superposition affiche les images mises en avant dans une grille avec le titre du projet superposé aux images. Après avoir sélectionné cette disposition, vous pouvez modifier les ajustements de style suivants :

  • Largeur : sélectionnez Plein pour que le contenu couvre la largeur de la section ou Insertion pour agrandir la marge intérieure à gauche et à droite du contenu.
  • Hauteur : définissez la hauteur de la section : petite, moyenne, grande ou personnalisée. N’oubliez pas que la hauteur des sections dépend également de la quantité de contenu.
  • Colonnes : définissez la grille pour qu’elle comporte 2, 3 ou 4 colonnes.
  • Espacement horizontal
  • Espacement vertical
  • Valeur de proportion : définissez la valeur de proportion des images.
  • Placement du texte : définissez l’endroit où le texte s’affiche sur l’image.
  • Afficher le texte : choisissez d’afficher le texte avant ou après le survol. Consultez nos conseils pour mobiles pour savoir comment cela affecte l’affichage des titres sur les mobiles.
  • Opacité de la superposition : définissez l’opacité du survol à une valeur inférieure pour une superposition plus solide, ou à une valeur plus élevée pour une superposition plus transparente.

Formater les dispositions avec survol

Les dispositions avec survol affichent vos projets sous la forme d’une liste de liens, avec leurs images mises en avant apparaissant en cas de survol. Les visiteurs cliquent sur le lien pour ouvrir le projet. Les options de l’onglet Format des styles de section varient en fonction de la disposition avec survol que vous choisissez. Les dispositions avec survol comportent une superposition semi-transparente sur les images mises en avant des projets. Il n’est pas possible d’augmenter ou de supprimer ceci :

La disposition Survol : Fixe affiche les titres des projets sous forme de liens. Lorsque les visiteurs survolent un lien, l’image mise en avant du projet apparaît à une position fixe sur la page. Après avoir sélectionné cette disposition, vous pouvez modifier les ajustements de style suivants :

  • Format de lien : choisissez entre Inline, où les liens apparaissent les uns à côté des autres, ou Empilé, où chaque lien apparaît sur sa propre ligne.
  • Sélection devant : lorsque cette option est activée, le texte du lien que le client survole apparaît devant l’image sélectionnée.
  • Espacement vertical des liens
  • Délimiteur : sélectionnez le mode de division des liens au format Inline. Pour en savoir plus, consultez l’article sur les Délimiteurs.
  • Type d’animation : définissez une animation pour l’image sélectionnée.
  • Durée de l’animation : définissez la vitesse de l’animation de l’image sélectionnée.
  • Taille de l’image

La disposition Survol : Suivre le curseur affiche les titres des projets sous forme de liens. Lorsque les visiteurs survolent un lien, l’image mise en avant du projet apparaît et suit le curseur jusqu’à ce qu’ils survolent un autre lien. Après avoir sélectionné cette disposition, vous pouvez modifier les ajustements de style suivants :

  • Format de lien : choisissez entre Inline, où les liens apparaissent les uns à côté des autres, ou Empilé, où chaque lien apparaît sur sa propre ligne.
  • Sélection devant : lorsque cette option est activée, le texte du lien que le client survole apparaît devant l’image sélectionnée.
  • Espacement vertical des liens
  • Délimiteur : sélectionnez le mode de division des liens au format Inline. Pour en savoir plus, consultez l’article sur les Délimiteurs.
  • Type d’animation : définissez une animation pour l’image sélectionnée.
  • Durée de l’animation : définissez la vitesse de l’animation de l’image sélectionnée.
  • Taille de l’image
  • Vitesse de suivi : définissez la vitesse à laquelle l’image suit le curseur. À 0 %, l’image ne suivra pas.

La disposition Survol : Arrière-plan affiche les titres des projets sous forme de liens. Lorsque les visiteurs survolent un lien, l’image mise en avant du projet apparaît comme image d’arrière-plan de la section et reste inchangée jusqu’à ce qu’ils survolent un autre lien. Après avoir sélectionné cette disposition, vous pouvez modifier les ajustements de style suivants :

  • Largeur : définissez l’image d’arrière-plan sur Pleine page ou Pleine.
  • Hauteur : définissez la hauteur de la section : petite, moyenne, grande ou personnalisée. N’oubliez pas que la hauteur des sections dépend également de la quantité de contenu.
  • Alignement vertical : définissez l’alignement vertical des liens.
  • Alignement horizontal : définissez l’alignement horizontal des liens.
  • Format de lien : choisissez entre Inline, où les liens apparaissent les uns à côté des autres, ou Empilé, où chaque lien apparaît sur sa propre ligne.
  • Espacement vertical des liens
  • Délimiteur : sélectionnez le mode de division des liens au format Inline. Pour en savoir plus, consultez l’article sur les Délimiteurs.
  • Type d’animation : définissez une animation pour l’image sélectionnée.
  • Durée de l’animation : définissez la vitesse de l’animation de l’image sélectionnée.
  • Conserver la dernière sélection : activez cette option pour afficher l’image en vedette du dernier lien que le visiteur a survolé jusqu’à ce qu’il survole un autre lien. Lorsque cette option est désactivée, l’arrière-plan de la section s’affiche sauf lorsque le visiteur survole un lien.
  • Délimiteur : sélectionnez un type de délimiteur pour diviser les liens au format Inline. Pour en savoir plus, consultez l’article sur les Délimiteurs.

Texte du titre du projet

Le titre de chaque projet apparaît sur la page Portfolio principale, soit sous l’image mise en avant, en superposant son image mise en avant, soit dans une liste de liens, selon votre disposition. Vous pouvez modifier le texte du titre dans les paramètres du projet. Le texte du titre suit les styles de police et de couleur de l’ensemble du site.

Police du titre

Pour personnaliser la police du titre du projet :

  1. Pendant que vous modifiez une page, ouvrez le panneau Styles du site, puis cliquez sur Polices.
  2. Cliquez sur Titres.
  3. Choisissez une famille de polices et modifiez les autres paramètres de style.
  4. Sous Taille, utilisez le curseur du titre correspondant pour modifier la taille du titre.

Le curseur que vous utiliserez dépend de la disposition de votre page Portfolio :

  • Grille : Simple - Titre 4
  • Grille : Superposition - Titre 3
  • Dispositions avec survol - Titre 1

N’oubliez pas que la modification du format d’un titre appliquera ce formatage à tout le texte de votre site. Pour personnaliser la police et la taille du texte du titre, cliquez sur Attribuer des styles, recherchez le réglage Titre correspondant à votre disposition, puis définissez le style et la taille sur Personnalisé.

Lorsque vous avez apporté les modifications, cliquez sur Enregistrer pour enregistrer vos changements et poursuivre les modifications. Vous pouvez aussi cliquer sur Quitter puis sur Enregistrer pour fermer l’éditeur.

Couleur du titre

Pour personnaliser la couleur du titre du projet :

  1. Pendant que vous modifiez une page, ouvrez le panneau Styles du site, puis cliquez sur Couleurs.
  2. Cliquez sur l’icône du crayon sur le jeu de couleurs de la section du portfolio.
  3. Faites défiler l’écran vers le bas et trouvez la section Portfolio qui correspond à votre disposition.
  4. Modifiez la couleur à l’aide de l’ajustement Titre du projet. Chaque disposition de portfolio possède son propre ajustement Titre du projet.
  5. Cliquez sur Enregistrer pour enregistrer vos changements et poursuivre les modifications. Vous pouvez également cliquer sur Quitter, puis sur Enregistrer pour fermer l’éditeur.

Délimiteurs

Dans les dispositions avec survol qui utilisent des liens Inline, vous pouvez ajouter des « délimiteurs » ou des signes de ponctuation pour séparer visuellement les liens des projets.

Pour sélectionner ou masquer les délimiteurs :

  1. Cliquez sur Modifier sur la page Portfolio.
  2. Survolez la section de portfolio et cliquez sur l’icône crayon.
  3. Dans l’onglet Format, définissez le format du lien sur Inline.
  4. Faites défiler l’écran vers le bas et cliquez sur Délimiteur, puis sélectionnez l’une des options ou choisissez Aucune pour les masquer.
  5. Cliquez sur Enregistrer pour enregistrer vos changements et poursuivre les modifications. Vous pouvez également cliquer sur Quitter, puis sur Enregistrer pour fermer l’éditeur.
Forward_slash_delimiters_on_a_portfolio_page.png

Projets

Les projets sont créés à partir de sections de page. Vos options de style dépendent donc des sections que vous ajoutez. Vous pouvez ajouter des sections de blocs, des sections Galerie ou des dispositions automatiques.

Personnalisez n’importe quelle section en cliquant sur l’icône du crayon qui apparaît lorsque vous la survolez. Pour en savoir plus, consultez l’article Réaliser des changements de style.

Pagination du projet

Les liens vers les projets suivants et précédents d’un portfolio apparaissent au bas de chaque projet. Toutes les pages Portfolio partagent les mêmes styles de pagination, même si elles utilisent des dispositions différentes.

Police de la pagination

Pour personnaliser la police de la pagination :

  1. Pendant que vous modifiez une page, ouvrez le panneau Styles du site, puis cliquez sur Polices.
  2. Cliquez sur Titres.
  3. Choisissez une famille de polices et modifiez les autres paramètres de style.
  4. Sous Taille, utilisez le curseur du Titre 3 pour ajuster la taille du titre.

N’oubliez pas que la modification du format d’un titre appliquera ce formatage à tout le texte de votre site.Pour personnaliser la police et la taille du texte du titre, cliquez sur Attribuer des styles, recherchez le paramètre Pagination sous Portfolio : Élément, puis définissez le style et la taille sur Personnalisé.

Lorsque vous avez apporté les modifications, cliquez sur Enregistrer pour enregistrer vos changements et poursuivre les modifications. Vous pouvez aussi cliquer sur Quitter puis sur Enregistrer pour fermer l’éditeur.

Couleur de la pagination

La couleur de la pagination suit le thème de couleurs de la section inférieure de chaque projet. Si les projets utilisent des thèmes de couleurs différents dans leurs sections inférieures, la couleur de la pagination peut varier d’un projet à un autre.

Pour personnaliser la couleur de la pagination :

  1. Pendant que vous modifiez une page, ouvrez le panneau Styles du site, puis cliquez sur Couleurs.
  2. Cliquez sur l’icône du crayon sur le jeu de couleurs de la section du portfolio.
  3. Faites défiler l’écran vers le bas et trouvez le réglage Portfolio : Élément.
  4. Modifiez le texte du titre avec le réglage Titre de pagination du projet et modifiez l’icône de pagination avec le réglage Icône de pagination du projet.
  5. Cliquez sur Enregistrer pour enregistrer vos changements et poursuivre les modifications. Vous pouvez également cliquer sur Quitter, puis sur Enregistrer pour fermer l’éditeur.

Les modifications concernent toutes les sections utilisant le même jeu de couleurs.

Polices et couleurs

Les couleurs et les polices de la page Portfolio et des projets suivent les ajustements de police et de couleurs à l’échelle du site. Vous pouvez également changer le thème de couleurs de la section de la page Portfolio et des sections des projets dans leurs éditeurs de style de section.

Dans le thème de couleurs de votre portfolio, utilisez les ajustements de couleur Portfolio qui correspondent à votre disposition. Dans le thème de couleurs de la dernière section de chaque projet, utilisez les ajustements Portfolio : Élément pour personnaliser la pagination en bas de chaque projet. Cela peut varier d’un projet à un autre en fonction du thème de couleurs utilisé dans la section inférieure. 

Mobile

Sur les appareils mobiles ou les tablettes, les dispositions des portfolios s’empilent verticalement dans une seule colonne, quel que soit le nombre de colonnes ou le format des liens sur les grands navigateurs.

Les effets de survol ne sont pas pris en charge sur la plupart des navigateurs mobiles. Par conséquent, si vous utilisez la disposition Grille : Superposition avec les titres définis pour apparaître Après le survol, les titres risquent de ne pas apparaître pour les visiteurs utilisant des appareils mobiles.

Pour vous assurer que les titres apparaissent sur tous les appareils pour la disposition Grille : Superposition :

  1. Cliquez sur Modifier sur la page Portfolio, puis survolez la section de portfolio et cliquez sur l’icône crayon.
  2. Dans l’onglet Mise en forme, sélectionnez Avant le survol dans le menu déroulant Afficher le texte.
  3. Cliquez sur Enregistrer pour enregistrer vos changements et poursuivre les modifications. Vous pouvez également cliquer sur Quitter, puis sur Enregistrer pour fermer l’éditeur.
Footer Image
  • Obtenir de l’aide de notre communauté

  • Obtenez de l’aide sur les personnalisations avancées auprès de notre communauté.

  • Trouver un Squarespace Expert

  • Démarquez-vous en ligne avec l’aide d’un designer ou d’un développeur expérimenté.