Como criar estilos para as páginas de portfólio

Personalize as páginas e projetos do portfólio do seu site.

Ultima atualização 8 de julho de 2024

Página de portfólio é uma página de destino estilizada e com links para os projetos. Você pode personalizar as páginas do portfólio de acordo com sua marca e estilo. Use este guia para encontrar as opções de estilo das páginas do portfólio e de cada projeto. Para criar uma página de portfólio e adicionar conteúdo, confira Página de portfólio.

Página de portfólio x projeto de portfólio

A página de portfólio é organizada em duas partes: a página principal, que cria uma grade de imagens em destaque ou uma lista de links em que os visitantes clicam para explorar seu portfólio; e um link para cada projeto separado.

Abrir as opções de estilo

Você pode ajustar o estilo da página do portfólio e os projetos em dois locais principais:

  • Página de portfólio - clique em Editar na página de portfólio, depois clique no ícone de lápis na seção de portfólio.
  • Projeto - clique em um projeto na página do portfólio para abri-lo, clique em Editar e depois clique no ícone de lápis na seção desejada. Cada projeto é composto de seções, e cada seção tem opções próprias de estilo.

Página de portfólio

A página de portfólio mostra todos os projetos em uma imagem em destaque ou link de texto, que os visitantes podem clicar para abrir um projeto específico.

Nos estilos da seção de portfólio, você pode personalizar os seguintes detalhes:

Lembre-se:

  • Essas mudanças valem para todas as Páginas de Portfólio que usam o mesmo layout.
  • Qualquer mudança feita em um layout específico será salvo mesmo se você mudar para um novo layout, portanto, se retornar a um layout anterior, suas configurações serão restauradas.
  • Dependendo do número de projetos na página de portfólio, alguns ajustes no estilo não afetam o layout. No caso do layout "Passar o cursor: plano de fundo", por exemplo, se o fundo tiver muitos projetos, o ajuste "Altura" pode não ter um efeito visível porque a seção precisa ter uma certa altura para mostrar os links de todos os projetos. Em vez disso, use o ajuste Espaçamento vertical dos links.

Formatar layouts de grade

O layout em grade mostra os projetos em uma grade com imagens em destaque. Para abrir o projeto, o visitante deve clicar na imagem ou no texto do título. As opções na aba Formato nos estilos de seção diferem dependendo do layout em grade.

O layout Grade: simples mostra as imagens em destaque em uma grade, com o texto do título do projeto abaixo das imagens. Após selecionar esse layout, você pode mudar os seguintes ajustes de estilo:

  • Largura - selecione Total para que o conteúdo cubra a largura da seção ou Inserir para aumentar o espaçamento à esquerda e à direita do conteúdo.
  • Altura - defina a altura da seção escolhendo entre PequenoMédioGrandePersonalizado. Observe que a altura da seção também é afetada pela quantidade de conteúdo presente.
  • Colunas - configure a grade para ter 23, ou 4 colunas.
  • Espaçamento horizontal
  • Espaçamento vertical
  • Proporção da imagem - defina a proporção das imagens.
  • Alinhamento do texto - alinhe o texto à Esquerda ou ao Centro, logo abaixo das imagens.
  • Efeito de passar o cursor - adicione um efeito de Esmaecer ou de Zoom quando o cursor passar sobre uma imagem.
  • Opacidade ao passar o cursor - se você usar o efeito de Esmaecer ao passar o cursor, coloque a opacidade mais baixa para uma sobreposição mais sólida, ou mais alta para uma sobreposição mais transparente.
  • Espaçamento de texto

O layout Sobreposição: simples mostra as imagens em destaque em uma grade, com o texto do título do projeto se sobrepondo às imagens. Após selecionar esse layout, você pode mudar os seguintes ajustes de estilo:

  • Largura - selecione Total para que o conteúdo cubra a largura da seção ou Inserir para aumentar o espaçamento à esquerda e à direita do conteúdo.
  • Altura - defina a altura da seção escolhendo entre PequenoMédioGrandePersonalizado. Observe que a altura da seção também é afetada pela quantidade de conteúdo presente.
  • Colunas - configure a grade para ter 23, ou 4 colunas.
  • Espaçamento horizontal
  • Espaçamento vertical
  • Proporção da imagem - defina a proporção das imagens.
  • Disposição do texto - configure onde o texto será exibido na imagem.
  • Mostrar texto - escolha mostrar o texto Antes de passar o cursor ou Depois de passar o cursor. Leia nossas dicas para aparelhos móveis para ver como isso afeta a exibição do título nesses aparelhos.
  • Opacidade de sobreposição - coloque a opacidade ao passar o cursor mais baixa para uma sobreposição mais sólida, ou mais alta para uma sobreposição mais transparente.

Formatação de layouts ao passar o cursor

O layout "Passar o cursor" mostra os projetos em uma lista de links, e as imagens em destaque aparecem ao se passar o cursor. Para abrir o projeto, o visitante deve clicar no link. Suas opções na aba Formatação de estilos de seção diferem de acordo com o layout ao passar o cursor que você escolher. O layout "Passar o cursor" têm sobreposição semitransparente nas imagens em destaque do projeto. Não é possível aumentar nem excluir estes recursos:

O layout Passar o cursor: fixo mostra o título dos projetos com um link. Quando um visitante passa o cursor sobre um link, a imagem em destaque do projeto aparece em uma posição fixa na página. Após selecionar esse layout, você pode mudar os seguintes ajustes no estilo:

  • Formato do link - escolha entre Inline, onde os links aparecem ao lado um do outro, ou Empilhados, onde cada link aparece em sua própria linha.
  • Seleção na frente - quando ativado, o texto do link sobre o qual o cliente passar o cursor aparecerá na frente da imagem em destaque.
  • Espaçamento de links verticais
  • Delimitador - selecione como dividir os links no formato Inline. Para saber mais, leia sobre os Delimitadores.
  • Tipo de animação - defina uma animação para a imagem em destaque.
  • Duração da animação - defina a velocidade para a animação da imagem em destaque.
  • Tamanho da imagem

O layout Passar o cursor: seguir cursor mostra o título dos projetos com um link. Quando o visitante passa o cursor sobre um link, a imagem em destaque do projeto aparece e segue o cursor até o visitante passar o cursor sobre outro link. Após selecionar esse layout, você pode mudar os seguintes ajustes no estilo:

  • Formato do link - escolha entre Inline, onde os links aparecem ao lado um do outro, ou Empilhados, onde cada link aparece em sua própria linha.
  • Seleção na frente - quando ativado, o texto do link sobre o qual o cliente passar o cursor aparecerá na frente da imagem em destaque.
  • Espaçamento de links verticais
  • Delimitador - selecione como dividir os links no formato Inline. Para saber mais, leia sobre os Delimitadores.
  • Tipo de animação - defina uma animação para a imagem em destaque.
  • Duração da animação - defina a velocidade para a animação da imagem em destaque.
  • Tamanho da imagem
  • Velocidade de acompanhamento - defina a velocidade com que a imagem segue o cursor. Em 0%, a imagem não vai seguir.

O layout Passar o cursor: plano de fundo mostra o título do projetos com um link. Quando o visitante passa o cursor sobre um link, a imagem em destaque do projeto aparece como uma imagem de fundo da seção e só some após o visitante passar o cursor sobre outro link. Após selecionar esse layout, você pode mudar os seguintes ajustes no estilo:

  • Largura - coloque a imagem de fundo Sem margem ou Inteira.
  • Altura - defina a altura da seção escolhendo entre PequenoMédioGrandePersonalizado. Observe que a altura da seção também é afetada pela quantidade de conteúdo presente.
  • Alinhamento vertical - defina o alinhamento do link na vertical.
  • Alinhamento horizontal - defina o alinhamento do link na horizontal.
  • Formato do link - escolha entre Inline, onde os links aparecem ao lado um do outro, ou Empilhados, onde cada link aparece em sua própria linha.
  • Espaçamento de links verticais
  • Delimitador - selecione como dividir os links no formato Inline. Para saber mais, leia sobre os Delimitadores.
  • Tipo de animação - defina uma animação para a imagem em destaque.
  • Duração da animação - defina a velocidade para a animação da imagem em destaque.
  • Manter a última seleção - habilite este recurso para exibir a imagem em destaque do último link que o visitante passou o cursor até que ele passe sobre outro link. Quando desativado, o fundo da seção é exibido, exceto quando o visitante passar o cursor sobre um link.
  • Delimitador - selecione um tipo de delimitador para dividir os links no formato Inline. Para saber mais, leia sobre os Delimitadores.

Texto do título do projeto

O título de cada projeto aparece na página principal do portfólio, abaixo da imagem em destaque, sobreposto à imagem em destaque ou em uma lista de links, dependendo do layout. Você pode editar o texto do título nas configurações do projeto. O texto do título segue a fonte e os estilos de cor gerais do site.

Fonte do título

Para ajustar o estilo da fonte do título do projeto:

  1. Ao editar uma página, abra Estilos do Site e clique em Fontes.
  2. Clique em Títulos.
  3. Escolha uma família de fontes e mude outras configurações de estilo.
  4. Em Tamanho, use o controle deslizante de cabeçalho correspondente para ajustar o tamanho do título.

O controle deslizante que você usa depende do layout da Página Portfólio:

  • Grade: Simples – Título 4
  • Grade: Sobreposição – Título 3
  • Layouts do cursor ao pairar - Título 1

Lembre-se que mudar o formato do título afeta todo o texto em seu site com a mesma formatação. Para estilizar a fonte e o tamanho do texto do título individualmente, clique em Atribuir estilos, encontre o ajuste de Título para o seu layout e mude o estilo e o tamanho para Personalizar.

Feitas as alterações, clique em Salvar para salvar as alterações e continuar editando; ou clique em Sair e depois em Salvar para fechar o editor.

Cor do título

Para ajustar o estilo da cor do título do projeto:

  1. Ao editar uma página, abra Estilos do Site e clique em Cores.
  2. Clique no ícone de lápis no esquema de cores da seção de portfólio.
  3. Procure a seção Portfólio que corresponda ao seu layout.
  4. Altere a cor com o ajuste Título do projeto. Cada layout do portfólio tem o próprio ajuste Título do projeto.
  5. Clique em Salvar para salvar as alterações e continuar editando ou clique em Sair e depois em Salvar para fechar o editor.
    .

Delimitadores

Nos layouts com o recurso de passar cursor que usam links inline, você pode adicionar “delimitadores” ou uma pontuação para separar visualmente os links dos projetos.

Para selecionar ou ocultar os delimitadores:

  1. Clique em Editar na Página de Portfólio.
  2. Passe o cursor sobre a seção do portfólio e clique no ícone de lápis.
  3. Na aba Formatação, configure o Formato de link para Inline.
  4. Role para baixo e clique em Delimitador e selecione uma das opções ou escolha Nenhuma para ocultá-las.
  5. Clique em Salvar para salvar as alterações e continuar editando ou clique em Sair e depois em Salvar para fechar o editor.
    .
Forward_slash_delimiters_on_a_portfolio_page.png

Projetos

Os projetos são criados em uma seção de página; portanto, as opções de estilo dependem das seções que o usuário adicionar. Você pode adicionar seções de bloco, seções de galeria, ou layouts automáticos.

Estilize qualquer seção clicando no ícone de lápis que aparece quando você passa o mouse sobre ela. Para saber mais, visite Fazendo mudanças no estilo.

Paginação do projeto

No portfólio, os links para o projeto seguinte e o anterior aparecem na parte inferior de cada projeto. As páginas do portfólio têm os mesmos estilos de paginação, mesmo com layouts diferentes.

Fonte de paginação

Para ajustar o estilo da fonte de paginação:

  1. Ao editar uma página, abra Estilos do Site e clique em Fontes.
  2. Clique em Títulos.
  3. Escolha uma família de fontes e mude outras configurações de estilo.
  4. Em Tamanho, use o controle deslizante Título 3 para ajustar o tamanho do título.

Lembre-se que mudar o formato do título afeta todo o texto em seu site com a mesma formatação.Para mudar o estilo da fonte e o tamanho do texto do título individualmente, clique em Atribuir estilos, encontre o ajuste de Paginação em Portfolio: item, e mude o estilo e o tamanho para Personalizar.

Feitas as alterações, clique em Salvar para salvar as alterações e continuar editando; ou clique em Sair e depois em Salvar para fechar o editor.

Cor da paginação

A cor da paginação segue o tema da cor da seção inferior de cada projeto. Se os projetos usarem temas de cores diferentes na seção inferior, a cor da paginação poderá variar entre os projetos.

Para mudar o estilo da cor de paginação:

  1. Ao editar uma página, abra Estilos do Site e clique em Cores.
  2. Clique no ícone de lápis no esquema de cores da seção de portfólio.
  3. Role para baixo e encontre o ajuste Portfolio: item.
  4. Altere o texto do título com o ajuste Título de paginação do projeto e altere o ícone de paginação com o ajuste Ícone de paginação do projeto.
  5. Clique em Salvar para salvar as alterações e continuar editando ou clique em Sair e depois em Salvar para fechar o editor.
    .

As mudanças afetam todas as seções usando o mesmo esquema de cores.

Fontes e cores

Na página de portfólio e nos projetos, as cores e fontes seguem os ajustes de fonte e de cores gerais do site. Também é possível alterar o tema de cores da seção da página do portfólio e das seções em projetos no editor de estilos das seções.

No tema de cores do portfólio, use os ajustes de cores do portfólio de acordo com o layout. No tema de cores da última seção de cada projeto, use os ajustes Portfolio: item para ajustar o estilo da paginação na parte inferior de cada projeto. Isso pode variar entre os projetos, dependendo do tema de cores usado na seção inferior. 

Dispositivo móvel

Em aparelhos móveis ou tablets, os layouts de portfólio ficam alinhados verticalmente em uma única coluna, independentemente do número de colunas ou do formato do link em navegadores maiores.

Os efeitos de passar o cursor não são compatíveis com a maioria dos navegadores móveis, portanto, se você estiver usando o layout de Grade: sobreposição com os títulos definidos para aparecer Depois de passar o cursor, os títulos podem não aparecer para os visitantes em aparelhos móveis.

Para garantir que os títulos apareçam em todos os dispositivos do layout de Grade: Sobreposição:

  1. Clique em Editar na Página de Portfólio, passe o cursor sobre a seção do portfólio e clique no ícone de lápis.
  2. Na guia Formatar, selecione Antes de mover o cursor no menu suspenso Mostrar texto.
  3. Clique em Salvar para salvar as alterações e continuar editando ou clique em Sair e depois em Salvar para fechar o editor.
    .
Footer Image
  • Peça ajuda à nossa comunidade

  • Peça ajuda à nossa comunidade sobre personalizações avançadas.

  • Contrate um Squarespace Expert

  • Ganhe destaque on-line com a ajuda de um designer ou desenvolvedor experiente.

Como criar estilos para as páginas de portfólio