# 27 mises en page Portfolio URL: https://canvaswp.com/fr/templates/portfolio/ Updated: 2026-11-03 Modèles Grilles et masonry. Styles de filtrage et de chargement. Ainsi que les mises en page de projet unique qui les accompagnent. [Ouvrir la vitrine en direct](https://demos.canvaswp.com/classic/) [Parcourir les démos de sites web](https://canvaswp.com/fr/demos/) Mis à jour le 3 novembre 2026 - Grilles - Mosaïque - Chargement des styles - Projet unique - Mises en page ## Grilles 5 Chaque grille ici est un seul bloc Canvas Posts dont la Mise en page est réglée sur Portfolio. Colonnes définit combien de projets partagent une même ligne, et Espacement du portfolio fixe l'écart entre eux, pouvant aller jusqu'à zéro. La version à une colonne active Cartes fractionnées alternées : chaque projet se place à côté de sa description, et l'image change de côté sur une carte sur deux. - [1 colonne (s’ouvre dans un nouvel onglet)](https://demos.canvaswp.com/classic/portfolio-1/) - [2 colonnes (s’ouvre dans un nouvel onglet)](https://demos.canvaswp.com/classic/portfolio-2/) - [3 colonnes (s’ouvre dans un nouvel onglet)](https://demos.canvaswp.com/classic/portfolio-3/) - [5 colonnes (s’ouvre dans un nouvel onglet)](https://demos.canvaswp.com/classic/portfolio-5/) - [6 colonnes (s’ouvre dans un nouvel onglet)](https://demos.canvaswp.com/classic/portfolio-6/) ## Masonry 6 Même bloc, autre Grid Engine. Choisissez un mode masonry et les cartes conservent leur propre hauteur, en s'empilant en colonnes sans ligne à respecter. La forme des cartes donne le rythme : recadrez toutes les images dans une même forme, ou laissez chaque projet conserver la sienne. La version mixte place aussi le titre dans la superposition au survol. - [Colonnes mixtes (s’ouvre dans un nouvel onglet)](https://demos.canvaswp.com/classic/portfolio-mixed-masonry/) - [2 colonnes (s’ouvre dans un nouvel onglet)](https://demos.canvaswp.com/classic/portfolio-2-masonry/) - [3 colonnes (s’ouvre dans un nouvel onglet)](https://demos.canvaswp.com/classic/portfolio-3-masonry/) - [4 colonnes (s’ouvre dans un nouvel onglet)](https://demos.canvaswp.com/classic/portfolio-masonry/) - [5 colonnes (s’ouvre dans un nouvel onglet)](https://demos.canvaswp.com/classic/portfolio-5-masonry/) - [6 colonnes (s’ouvre dans un nouvel onglet)](https://demos.canvaswp.com/classic/portfolio-6-masonry/) ## Chargement des styles 5 Ces réglages déterminent comment un visiteur accède au reste de votre travail. Le Style de pagination propose, parmi ses choix, un paginateur côté client et un défilement infini. Ouvrir les projets dans la page charge un projet au-dessus de la grille sans quitter la page, et Ouvrir le projet dans peut l'afficher dans une fenêtre modale lightbox. Les Styles de filtre mettent en forme le bloc Canvas Grid Filter, la rangée de boutons de catégories, dans chacun de ses styles, avec ou sans bouton Shuffle. - [Pagination avec jQuery (s’ouvre dans un nouvel onglet)](https://demos.canvaswp.com/classic/portfolio-jpagination/) - [Défilement infini (s’ouvre dans un nouvel onglet)](https://demos.canvaswp.com/classic/portfolio-infinity-scroll/) - [AJAX dans la page (s’ouvre dans un nouvel onglet)](https://demos.canvaswp.com/classic/portfolio-ajax/) - [AJAX dans une fenêtre modale (s’ouvre dans un nouvel onglet)](https://demos.canvaswp.com/classic/portfolio-ajax-in-modal/) - [Styles de filtres (s’ouvre dans un nouvel onglet)](https://demos.canvaswp.com/classic/portfolio-filter-styles/) ## Projet unique 5 Une page de projet reprend sa mise en page du modèle que vous choisissez dans le réglage Modèle pendant que vous modifiez le projet. Les modèles couvrent quatre types de médias : une grande image, un diaporama de galerie, une grille de vignettes et une vidéo. Chacun est proposé avec une barre latérale à gauche, à droite ou des deux côtés, en pleine largeur, ou sous un bandeau en pleine largeur. Les pages liées ici sont un échantillon de cet ensemble. - [Parallax Image (s’ouvre dans un nouvel onglet)](https://demos.canvaswp.com/classic/projects/portfolio-single-fullwidth/) - [Slider Gallery (s’ouvre dans un nouvel onglet)](https://demos.canvaswp.com/classic/projects/portfolio-single-gallery-full/) - [Vidéo HTML5 (s’ouvre dans un nouvel onglet)](https://demos.canvaswp.com/classic/projects/portfolio-single-video-fullwidth-left-sidebar/) - [Vignettes en mosaïque (s’ouvre dans un nouvel onglet)](https://demos.canvaswp.com/classic/projects/portfolio-single-thumbs-right-sidebar/) - [Intégrer une vidéo (s’ouvre dans un nouvel onglet)](https://demos.canvaswp.com/classic/projects/portfolio-single-video-both-sidebar/) ## Mises en page 6 Emplacement de la grille sur la page. Les versions avec barre latérale placent le même bloc dans une colonne principale, à côté d'une barre latérale de widgets, comme les articles récents et un formulaire de contact rapide. 100 % Largeur étend la grille d'un bord à l'autre, sans gouttière. L'option Parallax active Parallax Cards, qui transforme chaque image en calque d'arrière-plan se déplaçant pendant le défilement de la page. - [Par défaut (s’ouvre dans un nouvel onglet)](https://demos.canvaswp.com/classic/portfolio-nomargin/) - [Barre latérale droite (s’ouvre dans un nouvel onglet)](https://demos.canvaswp.com/classic/portfolio-1-alt-right-sidebar/) - [Barre latérale gauche (s’ouvre dans un nouvel onglet)](https://demos.canvaswp.com/classic/portfolio-3-left-sidebar/) - [Deux barres latérales (s’ouvre dans un nouvel onglet)](https://demos.canvaswp.com/classic/portfolio-2-both-sidebar/) - [100 % de largeur (s’ouvre dans un nouvel onglet)](https://demos.canvaswp.com/classic/portfolio-fullwidth-notitle/) - [Parallaxe (s’ouvre dans un nouvel onglet)](https://demos.canvaswp.com/classic/portfolio-parallax/) Chaque lien ouvre une vraie page de la vitrine en ligne, réalisée avec le même thème et les mêmes blocs que ceux que vous installez. Sur votre propre site ## Créez n'importe lequel de ces modèles à partir d'un seul bloc La vitrine est là pour être admirée. Les blocs et modèles qui la composent sont livrés avec Canvas, si bien que chaque mise en page ci-dessus peut être reproduite sur votre site. ### Les projets sont des fiches Vos réalisations sont enregistrées dans le type de contenu portfolio, un enregistrement par projet, avec des catégories que Grid Filter lit pour créer ses boutons. Ajoutez un projet et chaque grille du site qui affiche cette catégorie le reprend automatiquement. La page elle-même n'a jamais besoin d'être modifiée. ### La grille se règle à partir des réglages Insérez Canvas Posts, choisissez la mise en page Portfolio, puis parcourez ses panneaux Mise en page et Pagination en suivant les noms de cette page. Pour la page du projet elle-même, Canvas ajoute 8 blocs portfolio, du titre et de la liste des métadonnées aux projets associés. ### Ou importez-en un déjà terminé Parmi les 88 démos de sites, 21 s'importent avec leurs projets portfolio déjà en place, conçus pour une agence, un photographe ou un illustrateur. Partez de l'un d'eux et vous modifiez les projets, pas la mise en page. - [Démos de portfolio, comparées](https://canvaswp.com/fr/wordpress-themes/portfolio/) ### Toutes les formules, toutes les mises en page Il n'existe pas de module complémentaire Portfolio. Les grilles, le filtre, les styles de chargement et les modèles de page de projet individuel sont inclus dans la formule Annuel comme dans la formule À vie, car chaque formule inclut tous les blocs. - [Comparer les formules](https://canvaswp.com/fr/pricing/) Bien choisir ## Quelle mise en page de portfolio convient à votre travail ? Partez des images, puisque la mise en page existe pour les mettre en valeur. Les photographies prises dans une même orientation s'intègrent bien dans une grille ajustée, où les rangées s'alignent. Un mélange de réalisations en format portrait et paysage relève d'une disposition masonry, où chaque carte peut conserver le format de son image. Les études de cas se présentent différemment. Lorsque chaque projet nécessite un paragraphe de contexte, la grille à une colonne de cartes divisées lui laisse la place nécessaire, et une version avec barre latérale convient à une agence qui souhaite afficher ses coordonnées à côté de ses réalisations. Comptez aussi vos projets. Un petit ensemble de réalisations tient sur un écran, avec un filtre au-dessus. Au-delà de quelques lignes, choisissez un mode de chargement pour que la page reste rapide à ouvrir : la pagination pour les visiteurs qui aiment savoir où ils en sont, le défilement infini pour ceux qui aiment parcourir. Pour un projet unique, choisissez d'abord le modèle selon ses médias : un diaporama de galerie pour une séance photo ou une vidéo pour un film, puis décidez des barres latérales en dernier. Plus de modèles ## Le reste de la bibliothèque - [Modèles de page 13](https://canvaswp.com/fr/templates/page-templates/) - [Shortcodes et éléments 57](https://canvaswp.com/fr/templates/shortcodes/) - [Mises en page du blog 35](https://canvaswp.com/fr/templates/blog/) - [Mises en page boutique 9](https://canvaswp.com/fr/templates/shop/)