# 27 Layouts de portfólio URL: https://canvaswp.com/pt-br/templates/portfolio/ Updated: 2026-11-03 Modelos Grades e masonry. Estilos de filtro e de carregamento. Além dos layouts de projeto individual que servem de base para eles. [Abrir a vitrine ao vivo](https://demos.canvaswp.com/classic/) [Explorar os sites demo](https://canvaswp.com/pt-br/demos/) Atualizado em 3 de novembro de 2026 - Grades - Masonry - Carregamento de estilos - Projeto individual - Layouts ## Grades 5 Cada grade aqui é um único bloco Canvas Posts com Layout definido como Portfolio. Columns define quantos projetos dividem uma linha, e Portfolio Gutter define o espaço entre eles, podendo chegar a zero. A versão de uma coluna ativa Alternating Split Cards, então cada projeto fica ao lado da sua descrição e a imagem troca de lado a cada dois cards. - [1 coluna (abre em uma nova aba)](https://demos.canvaswp.com/classic/portfolio-1/) - [2 Colunas (abre em uma nova aba)](https://demos.canvaswp.com/classic/portfolio-2/) - [3 Colunas (abre em uma nova aba)](https://demos.canvaswp.com/classic/portfolio-3/) - [5 Colunas (abre em uma nova aba)](https://demos.canvaswp.com/classic/portfolio-5/) - [6 Colunas (abre em uma nova aba)](https://demos.canvaswp.com/classic/portfolio-6/) ## Masonry 6 Mesmo bloco, Grid Engine diferente. Escolha um modo masonry e os cards mantêm as próprias alturas, encaixando em colunas, sem linhas de grade a respeitar. A Card Shape define o ritmo: corte cada imagem em um único formato ou deixe cada projeto manter o seu. A versão mista também move o título para dentro da sobreposição ao passar o mouse. - [Colunas Mistas (abre em uma nova aba)](https://demos.canvaswp.com/classic/portfolio-mixed-masonry/) - [2 Colunas (abre em uma nova aba)](https://demos.canvaswp.com/classic/portfolio-2-masonry/) - [3 Colunas (abre em uma nova aba)](https://demos.canvaswp.com/classic/portfolio-3-masonry/) - [4 Colunas (abre em uma nova aba)](https://demos.canvaswp.com/classic/portfolio-masonry/) - [5 Colunas (abre em uma nova aba)](https://demos.canvaswp.com/classic/portfolio-5-masonry/) - [6 Colunas (abre em uma nova aba)](https://demos.canvaswp.com/classic/portfolio-6-masonry/) ## Estilos de carregamento 5 Essas opções definem como o visitante chega ao restante do seu trabalho. Estilo de paginação oferece um paginador no lado do cliente e rolagem infinita entre as opções. Abrir projetos na própria página carrega um projeto acima da grade sem sair da página, e Abrir projeto em pode exibi-lo em um modal lightbox. Estilos de filtro configura o bloco Canvas Grid Filter, a linha de botões de categoria, em cada um dos seus estilos, com e sem um botão Shuffle. - [Paginação com jQuery (abre em uma nova aba)](https://demos.canvaswp.com/classic/portfolio-jpagination/) - [Rolagem infinita (abre em uma nova aba)](https://demos.canvaswp.com/classic/portfolio-infinity-scroll/) - [AJAX na página (abre em uma nova aba)](https://demos.canvaswp.com/classic/portfolio-ajax/) - [AJAX em modal (abre em uma nova aba)](https://demos.canvaswp.com/classic/portfolio-ajax-in-modal/) - [Estilos de filtro (abre em uma nova aba)](https://demos.canvaswp.com/classic/portfolio-filter-styles/) ## Projeto único 5 Uma página de projeto recebe o layout de um modelo que você escolhe na configuração Modelo enquanto edita o projeto. Os modelos cobrem quatro tipos de mídia: uma imagem grande, um slider de galeria, uma grade de miniaturas e um vídeo. Cada um vem com uma barra lateral de um lado ou dos dois, em largura total, ou abaixo de um hero em largura total. As páginas vinculadas aqui são uma amostra desse conjunto. - [Parallax Image (abre em uma nova aba)](https://demos.canvaswp.com/classic/projects/portfolio-single-fullwidth/) - [Galeria de slider (abre em uma nova aba)](https://demos.canvaswp.com/classic/projects/portfolio-single-gallery-full/) - [Vídeo HTML5 (abre em uma nova aba)](https://demos.canvaswp.com/classic/projects/portfolio-single-video-fullwidth-left-sidebar/) - [Masonry Thumbs (abre em uma nova aba)](https://demos.canvaswp.com/classic/projects/portfolio-single-thumbs-right-sidebar/) - [Incorporar vídeo (abre em uma nova aba)](https://demos.canvaswp.com/classic/projects/portfolio-single-video-both-sidebar/) ## Layouts 6 Onde a grade fica na página. As versões com barra lateral colocam o mesmo bloco em uma coluna principal, ao lado de uma barra lateral com widgets, como posts recentes e um formulário de contato rápido. A opção 100% de largura estende a grade de borda a borda, sem espaçamento entre colunas. A opção Parallax ativa o Parallax Cards, que transforma cada imagem em uma camada de fundo que se move conforme a página é rolada. - [Padrão (abre em uma nova aba)](https://demos.canvaswp.com/classic/portfolio-nomargin/) - [Barra lateral direita (abre em uma nova aba)](https://demos.canvaswp.com/classic/portfolio-1-alt-right-sidebar/) - [Barra lateral esquerda (abre em uma nova aba)](https://demos.canvaswp.com/classic/portfolio-3-left-sidebar/) - [Duas barras laterais (abre em uma nova aba)](https://demos.canvaswp.com/classic/portfolio-2-both-sidebar/) - [Largura de 100% (abre em uma nova aba)](https://demos.canvaswp.com/classic/portfolio-fullwidth-notitle/) - [Parallax (abre em uma nova aba)](https://demos.canvaswp.com/classic/portfolio-parallax/) Cada link abre uma página real na vitrine ao vivo, criada pelo mesmo tema e pelos mesmos blocos que você instala. No seu próprio site ## Crie qualquer um destes a partir de um único bloco A vitrine está aí para ser vista. Os blocos e modelos por trás dela vêm com o Canvas, então cada layout acima pode ser recriado no seu site. ### Projetos são registros Seus trabalhos ficam no tipo de conteúdo de portfólio, com um registro por projeto, e com categorias que o Grid Filter lê para criar os botões. Adicione um projeto e toda grade do site que lista essa categoria o exibe automaticamente. A própria página nunca precisa ser editada. ### A grade é controlada por configurações Insira Canvas Posts, escolha o layout Portfolio e, em seguida, percorra os painéis Layout e Paginação usando os nomes desta página. Na própria página do projeto, o Canvas adiciona 8 blocos de portfólio, do título e da lista de metadados até os projetos relacionados. ### Ou importe um site pronto 21 dos 88 sites de demonstração são importados com projetos de portfólio já no lugar, montados para uma agência, um fotógrafo ou um ilustrador. Comece por um deles e edite os projetos, não o layout. - [Demos de portfólio, comparados](https://canvaswp.com/pt-br/wordpress-themes/portfolio/) ### Todos os planos, todos os layouts Não há complemento de portfólio. As grades, o filtro, os estilos de carregamento e os modelos de projeto individual estão no Anual, assim como no Vitalício, porque todo plano inclui todos os blocos. - [Compare os planos](https://canvaswp.com/pt-br/pricing/) Como escolher ## Qual layout de portfólio combina com o seu trabalho Comece pelas imagens, já que o layout existe para mostrá-las. Fotografias feitas em uma mesma orientação combinam bem em uma grade ajustada, onde as linhas se alinham. Um mix de trabalhos em retrato e paisagem pertence ao masonry, onde cada cartão pode manter o formato da sua imagem. Estudos de caso são apresentados de outra forma. Quando cada projeto precisa de um parágrafo de contexto, a grade de uma coluna com cartões divididos oferece espaço para isso, e uma versão com barra lateral funciona para uma agência que quer deixar os dados de contato ao lado dos trabalhos. Conte seus projetos também. Um conjunto pequeno de trabalhos cabe em uma única tela com um filtro acima. Quando passar de algumas linhas, escolha um estilo de carregamento para que a página continue rápida: o paginador para visitantes que gostam de saber onde estão, a rolagem infinita para quem gosta de navegar. Para um projeto único, escolha o modelo primeiro pela mídia: um slider de galeria para um ensaio ou um vídeo para um filme, e decida sobre as barras laterais por último. Mais modelos ## O restante da biblioteca - [Modelos de página 13](https://canvaswp.com/pt-br/templates/page-templates/) - [Shortcodes e elementos 57](https://canvaswp.com/pt-br/templates/shortcodes/) - [Layouts de blog 35](https://canvaswp.com/pt-br/templates/blog/) - [Layouts de loja 9](https://canvaswp.com/pt-br/templates/shop/)