Personalize as páginas e subpáginas do portfólio do seu site.
As páginas de portfólio são páginas de destino estilizadas que conectam os visitantes a subpáginas. Você pode personalizar as páginas de portfólio para combinar com a sua marca e estilo. Use este guia para encontrar as opções de estilo para páginas de portfólio e suas subpáginas individuais. Para criar uma página de portfólio e adicionar conteúdo, acesse Páginas de portfólio.
Páginas de portfólio x subpáginas de portfólio
As páginas de portfólio estão organizadas em duas partes: a página de portfólio principal, que cria uma grade de imagens em destaque ou uma lista de links que os visitantes podem clicar para explorar seu portfólio, e as subpáginas individuais que são os destinos destes links, onde você adiciona conteúdo para diferentes projetos, galerias ou outros conteúdos.
Abrir as opções de estilo
Você vai adicionar estilo à página de portfólio e às subpáginas em dois lugares:
- 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.
- Subpáginas - clique na subpágina da página de portfólio para abrí-la, clique em Editar, depois clique no ícone de lápis na seção que você deseja estilizar.Cada subpágina é composta de seções, e cada seção tem suas próprias opções de estilo.
Página de portfólio
Sua página de portfólio exibe todas as suas subpágina como imagens em destaque ou links de texto que os visitantes podem clicar para abrir subpáginas individuais.
Nos estilos da seção de portfólio, você pode personalizar os seguintes detalhes:
- Formato - defina o layout da página de portfólio. Cada layout de grade e layout ao passar o cursor tem opções de formatação exclusivas.
- Fundo - adicione uma imagem , um vídeo ou uma arte de fundo atrás dos links das subpáginas.
- Cores - defina as cores do seu site ou mude o tema da seção do portfólio.
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 subpáginas na Página de Portfólio, alguns ajustes no estilo podem não afetar o layout. No caso do layout Hover, por exemplo, se o fundo tiver muitas subpáginas, 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 todas as subpáginas. Em vez disso, use o ajuste Espaçamento vertical dos links.
Formatar layouts de grade
Os layouts de grade exibem suas subpáginas em uma grade de imagens em destaque.Os visitantes clicam na imagem ou no texto do título para abrir a subpágina.Suas opções na aba Formatação de estilos de seção diferem de acordo com o layout de grade que você escolher.
O layout Grade: simples mostra as imagens em destaque em uma grade, com o texto do título da subpágina 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 Pequeno, Médio, Grande e Personalizado. Observe que a altura da seção também é afetada pela quantidade de conteúdo presente.
- Colunas - configure a grade para ter 2, 3, 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 Grade: sobreposição mostra as imagens em destaque em uma grade, com o texto do título da subpágina sobre as imagens. Depois de selecionar este layout, você pode mudar estes 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 Pequeno, Médio, Grande e Personalizado. Observe que a altura da seção também é afetada pela quantidade de conteúdo presente.
- Colunas - configure a grade para ter 2, 3, 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
Os layouts ao passar o cursor exibem suas subpáginas como uma lista de links, com imagens em destaque aparecendo ao passar o cursor. Os visitantes clicam no link para abrir a subpágina. 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. Os layouts ao passar o cursor têm uma sobreposição semitransparente nas imagens em destaque na subpágina. Não é possível aumentar ou remover estes recursos:
O layout passar o cursor: fixo exibe os títulos das subpáginas como links. Quando os visitantes passam o cursor sobre um link, a imagem da subpágina em destaque aparece em uma posição fixa na página. Depois de selecionar este layout, você pode mudar estes ajustes de 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 de passar o cursor: siga o cursor exibe os títulos das subpáginas como links. Quando os visitantes passam o cursor sobre um link, a imagem em destque na subpágina aparece e segue o cursor até que eles passem sobre um link diferente. Depois de selecionar este layout, você pode mudar estes ajustes de 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 de passar o cursor: fundo mostra os títulos das subpáginas como links. Quando os visitantes passam o cursor sobre um link, a imagem em destaque na subpágina aparece como imagem de fundo da seção e permanece até que eles passem sobre um link diferente. Depois de selecionar este layout, você pode mudar estes ajustes de estilo:
- Largura - coloque a imagem de fundo Sem margem ou Inteira.
- Altura - defina a altura da seção escolhendo entre Pequeno, Médio, Grande e Personalizado. 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 da subpágina
O título de cada subpágina aparece na página do portfólio principal, seja abaixo ou sobrepondo sua imagem em destaque ou em uma lista de links, dependendo do seu layout. Você pode editar o texto do título nas configurações da subpágina. O texto do título segue a fonte e os estilos de cor em todo o site.
Fonte do título
Para estilizar a fonte do título da subpágina:
- Ao editar uma página, abra Estilos do Site e clique em Fontes.
- Clique em Títulos.
- Escolha uma família de fontes e mude outras configurações de estilo.
- 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 estilizar a cor do título da subpágina:
- Ao editar uma página, abra Estilos do Site e clique em Cores.
- Clique no ícone de lápis no esquema de cores da seção de portfólio.
- Procure a seção Portfólio que corresponda ao seu layout.
- Altere a cor com o ajuste Título do projeto. Cada layout do portfólio tem o próprio ajuste Título do projeto.
- 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 do "Recurso de passar cursor" que usam links inline, você pode adicionar “delimitadores” ou pontuação para separar visualmente os links das subpáginas.
Para selecionar ou ocultar os delimitadores:
- 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.
- Na aba Formatação, configure o Formato de link para Inline.
- Role para baixo e clique em Delimitador e selecione uma das opções ou escolha Nenhuma para ocultá-las.
- Clique em Salvar para salvar as alterações e continuar editando ou clique em Sair e depois em Salvar para fechar o editor.
.
Subpáginas
As subpáginas são criadas a partir de seções da página, por isso suas opções de estilo dependem das seções que você 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 de subpáginas
Os links para as subpáginas próximas e anteriores de um portfólio aparecem na parte inferior de cada subpágina. Todas as páginas do portfólio compartilham os mesmos estilos de paginação, mesmo que usem layouts diferentes.
Fonte de paginação
Para ajustar o estilo da fonte de paginação:
- Ao editar uma página, abra Estilos do Site e clique em Fontes.
- Clique em Títulos.
- Escolha uma família de fontes e mude outras configurações de estilo.
- 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 esquema de cores da parte inferior de cada subpágina. Se as subpáginas usam esquemas de cores diferentes em suas seções inferiores, a cor da paginação pode variar entre as subpáginas.
Para mudar o estilo da cor de paginação:
- Ao editar uma página, abra Estilos do Site e clique em Cores.
- Clique no ícone de lápis no esquema de cores da seção de portfólio.
- Role para baixo e encontre o ajuste Portfolio: item.
- 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.
- 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
As cores e fontes na página e subpáginas de portfólio seguem os ajustes da fonte e da cor em todo o site. Você também pode mudar o esquema de cores da seção da página de portfólio e as seções nas subpáginas em suas seções com editor de estilo.
No esquema de cores do seu portfólio, use os ajustes de cores do Portfólio que combinam com seu layout. No esquema de cores da última seção de cada subpágina, use os ajustes Portfólio: item para estilizar a paginação na parte inferior de cada subpágina. Isto pode variar entre subpáginas, dependendo do esquema de cores que a seção inferior usar.
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:
- 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.
- Na guia Formatar, selecione Antes de mover o cursor no menu suspenso Mostrar texto.
- Clique em Salvar para salvar as alterações e continuar editando ou clique em Sair e depois em Salvar para fechar o editor.
.