Obs.: embora os nossos guias mais acessados tenham sido traduzidos para o espanhol, outros guias estão disponíveis apenas em inglês.

Família de templates York

A família de templates York (Artesia, Flores, Harris, Jasper, Jones, Lange, Shibori, Taylor e York) é projetada para mostrar o trabalho de ilustradores, fotógrafos, agências criativas e outros produtores de conteúdo visual. Com uma Página Índice de grade e Páginas de Projetos exclusivas, esses templates oferecem as ferramentas para exibir e compartilhar sua produção criativa.

Este guia aborda os recursos e as opções de design para a família York. Os ajustes de Estilos do Site estão em negrito e vinculam-se à lista de todos os ajustes de templates York para ajudá-lo a navegar no painel.

Dica: as páginas de pré-visualização ao vivo para Artesia, Flores, Harris, Jasper, Jones, Lange, Shibori e York mostram sites reais de clientes usando tais templates. 

Tipos de página compatíveis

Os templates York aceitam os seguintes tipos de página:

Cabeçalho

Os visitantes usam o cabeçalho do site na parte superior para navegar no site. Nos templates York, o cabeçalho é dividido em três áreas: esquerda, centro e direita. Você pode adicionar qualquer um dos seguintes elementos ao cabeçalho:

Estilize o layout do cabeçalho na seção Site: Layout do Cabeçalho:

  • Escolha Layout Esquerdo, Layout Central ou Layout Direito para alterar o layout de Horizontal para Empilhado. Estas opções aparecem depois de adicionar dois ou mais itens à área do cabeçalho.
  • Escolha como o cabeçalho é exibido com o ajuste Cabeçalho com largura total

Estilo do cabeçalho

Estilize o conteúdo do cabeçalho no Site: cabeçalho: 

  • Defina a fonte e a cor do título do site com Título do Site
  • Defina a fonte e a cor do slogan com o Slogan do Site
  • Altere o tamanho do logotipo com Altura do logotipo (máx.)
  • Defina a fonte, a cor e o estilo do carrinho de compra com Carrinho

Estilize a navegação em Site: Navegação:

  • Ajuste a Navegação Principal e a Navegação Secundária com Primária e Secundária.
  • Oculte ou exiba um ícone de cursor ao lado dos menus suspensos com Mostrar Indicador de Pasta.

folder_indicator_caret.png

Mais informações sobre cabeçalhos

Dicas: 

  • Defina o peso da linha do ícone de pesquisa e carrinho de compras em Ícones.
  • A cor de fundo do cabeçalho segue a cor de fundo do site. 
  • Muitos desses elementos têm estilos móveis separados. 

Cabeçalhos e rodapés da página

Os cabeçalhos e rodapés da página são uma ótima maneira de personalizar páginas individuais. Para adicionar blocos, passe o mouse sobre a parte superior ou inferior da página e clique em Editar no Conteúdo do cabeçalho da coleção ou na anotação Conteúdo do rodapé da coleção.

Os templates York têm cabeçalhos e rodapés de página em:

  • Páginas de Álbum
  • Páginas do Blog
  • Páginas de Eventos
  • Páginas de Galeria
  • Páginas Índice
  • Páginas de produtos
  • Páginas de Projeto

Para ativá-los no site, marque Mostrar cabeçalho da página e/ou Mostrar rodapé da página na seção Página. Os Blocos de Texto no cabeçalho e no rodapé da página seguem os ajustes de Site: tipografia

Lembre-se:

  • Itens de coleção individuais, como publicações de blog, não são compatíveis com cabeçalhos e rodapés da página.
  • O conteúdo oculto do cabeçalho ou do rodapé ainda pode aparecer quando você compartilha uma página nas mídias sociais. Para evitar isso, apague o conteúdo antes de ocultar o cabeçalho ou rodapé.
  • Páginas dentro do Índice mostram a navegação abaixo do rodapé da página.

Rodapé em todo o site

Para habilitar um rodapé para todo o site, marque Mostrar rodapé geral do site em Site: Rodapé. Para adicionar blocos, passe o mouse sobre o rodapé e clique em Editar. Para obter as etapas completas, visite Editar rodapés.

Page banners

Adicione uma imagem de banner ou um vídeo na parte superior destes tipos de página: 

  • Páginas de Álbum
  • Páginas do Blog
  • Páginas de Eventos
  • Páginas de Galeria (somente imagens)
  • Páginas Índice
  • Páginas de Layout
  • Páginas de produtos
  • Páginas de Projeto

Para adicionar uma imagem de banner ou vídeo, adicione uma imagem em miniatura ou uma URL de vídeo à guia Mídia nas configurações da página. 

Lembre-se:

  • Esses banners criam uma navegação em miniatura nas Páginas Índice
  • Se a página não tiver miniatura, o banner mostrará uma cor de plano de fundo. Talvez seja necessário mudar a transparência.
  • As configurações de banner são universais para cada tipo de página. Oculte ou exiba um banner para um tipo de página com os ajustes de Banner na seção Página.
  • O título e a descrição da página podem sobrepor o banner.
  • Os banners são compatíveis com carregamentos de páginas animadas.

Banner somente para Página Inicial

Você pode mostrar um banner na sua página inicial, mas ocultá-lo em todas as outras páginas desse tipo. Se sua página inicial for uma Página de Layout, por exemplo, siga estes steps:

  1. Acesse a página inicial.
  2. Abra Estilos do Site.
  3. Role para baixo até Página.
  4. Desmarque Mostrar banner da página. Isso oculta o banner em todas as Páginas de layout.
  5. Marque Mostrar Banner da Página Inicial. Isso exibe o banner na Página de Layout da página inicial.

O título e a descrição da página permanecem universais. Marcar Mostrar título da página, por exemplo, mostra o título da página na página inicial e de todas as outras Páginas de Layout.

Estilize os banners

Edite o estilo dos banners na seção Banner. Veja os seguintes ajustes que afetam todos os banners de todas as páginas do seu site.

  • Nas páginas com imagens em miniatura, defina a altura do banner com Altura.
  • Posicione a imagem dentro do banner com Alinhamento da imagem
  • Quando Alinhamento da imagem estiver como direita ou esquerda, use Recortar imagem para preencher a metade direita ou esquerda da imagem. Para preencher o banner inteiro, deixe Alinhamento da imagem como Central e marque Recortar imagem.
  • Marque Cor automática de fundo para o banner puxar automaticamente uma cor de fundo da própria miniatura. Isso é útil em ilustrações e imagens com uma única cor de fundo dominante, pois a imagem parece se estender até as bordas do banner.
  • Marque Banner sem margens para estender o banner para as bordas do navegador.
  • Os banners de navegação do Índice têm as próprias configurações de estilo.

A Cor do plano de fundo é exibida: 

  • Em banners sem miniatura
  • Enquanto uma imagem de banner ou vídeo é carregada
  • Atrás de miniaturas que não preenchem o banner inteiro, se a opção Cor automática de fundo estiver desmarcada

banner_sample_1.png

banner_sample_2.png

banner_sample_3.png

banner_sample_4.png

Page titles and descriptions

Exiba o título e a descrição da página em Configurações de Página na parte superior de qualquer página. Páginas de Projetos e Páginas de Galeria também podem exibir categorias de imagem individuais.

  • Essas configurações são universais para cada tipo de página.
  • Use Título, Descrição e Categoria na seção Página para ocultar ou exibir o texto. 
  • O texto pode sobrepor o banner da página ou ser exibido por conta própria.
  • Oculte a descrição de uma página individual excluindo-a das configurações da página.

Texto em banners versus nenhum banner

Você pode dar diferentes opções de estilo para quando o texto aparece sobre um banner em comparação a quando ele aparece sobre a página. A seção Estilos do Site que você usa depende se a sua página tem um banner:

Use Título, Descrição e Categoria para estilizar o texto.

Páginas sem banners têm outras opções:

  • Defina as margens laterais do texto com Largura do Texto.
  • Defina o espaçamento acima e abaixo do texto com Altura do Texto.

O texto exibido sobre um banner tem estas opções adicionais: 

  • Use Alinhamento para posicionar o texto dentro do banner.
  • Defina as margens laterais para o texto com Largura.
  • Adicione uma cor atrás do texto com ajustes de Destaque. Use Recuo de destaque do texto para definir a largura da cor do plano de fundo.

text_on_a_banner.png

Páginas de Projeto

A Página de Projetos organiza imagens, títulos e legendas em layouts elegantes. Esta é uma alternativa única para uma Página de Galeria, especialmente se você estiver usando uma mistura de texto e imagens.

Para saber mais, visite a Página de Projetos

york-project.png

Páginas Índice

As Páginas Índice dos templates York criam miniaturas de navegação em um banner ou grade que os visitantes podem usar para visitar outras páginas.

  • A grade de navegação exibe imagens em miniatura da página. Mesmo que uma página tenha um banner de vídeo, a imagem em miniatura é exibida na grade.
  • Você pode adicionar um banner de página, título de navegação e texto de descrição, além de áreas personalizáveis de cabeçalho e rodapé.
  • Em dispositivos móveis, as Páginas Índice exibem uma miniatura por linha.
  • Páginas índice não seguem a largura máxima do site.

index-with-page-banner-and-navigation-banners.png

Páginas aceitas

Você pode adicionar as seguintes páginas a um Índice: 

  • Páginas de Álbum
  • Páginas do Blog 
  • Páginas de Galeria
  • Páginas de Eventos
  • Páginas de produtos
  • Páginas de Projeto
  • Páginas de Layout

Miniaturas

Adicione uma miniatura ou uma URL de vídeo às configurações de uma página para mostrá-la na miniatura de navegação do Índice. Edite o estilo das miniaturas em Índice: imagem do item:

  • Use Alinhamento da imagem para alinhar a imagem na miniatura.
  • Preencha a metade direita, a metade esquerda ou a miniatura inteira com Recortar imagem. Essa opção aparece quando Alinhamento da imagem está como À direita, À esquerda ou Central
  • Escolha o quanto da cor do plano de fundo é exibido através da imagem com Opacidade da Imagem
  • Use a Opacidade ao pairar o cursor para ajustar o quanto da imagem desvanece quando os visitantes passarem o mouse sobre ela.
  • Escolha Alinhamento da imagem: central e marque Recortar imagem para preencher toda a miniatura.
  • Para definir miniaturas para extrair automaticamente uma cor de fundo da imagem ou do vídeo da miniatura, marque Cor Automática de Fundo.
  • Escolha uma Cor de fundo do item para ser exibida em miniaturas que não tenham imagens ou vídeos. Aparece quando a Cor Automática de Fundo está desmarcada.

A cor de fundo da miniatura é exibida:

  • Quando as miniaturas de navegação não têm imagens ou vídeos
  • Atrás de imagens que não preenchem a miniatura inteira
  • Nas miniaturas, se você tiver ajustado a opacidade delas

Layout de miniaturas

As miniaturas de navegação de índice podem ser exibidas como banners ou em uma grade. Defina o estilo na seção Índice: layout.

  • Use a largura do item para exibir as miniaturas como banners. Escolha Total ou Metade para exibir um ou dois banners por linha. 
  • Use o ajuste Altura do item para definir a altura dos banners.
  • Para exibir as miniaturas em uma grade, selecione Largura do Item: grade. Use os ajustes de Colunas e a Proporção da Miniaturas para estilizar a grade.
  • Defina o espaço entre banners ou blocos de miniatura com Espaçamento de itens.
  • Marque Índice sem margens para estender as miniaturas até a borda do navegador. Quando desmarcado, as miniaturas seguem o preenchimento do site. Isso também afeta o banner do cabeçalho da página.
  • Marque Alternar larguras para alternar entre fileiras que mostram um e dois banners. Essa opção aparece quando os banners estão como Alinhamento da imagem: central e a Largura do Índice está como Total ou Metade.
  • Marque Alternar Lados para alternar o lado que em que a imagem é exibida. Esta opção aparece quando os banners são definidos como Alinhamento da imagem: à direita ou à esquerda e Largura do índice é definida como Total.

As miniaturas de índice podem exibir o título de navegação de cada página e categorias que você adicionou às imagens nas Páginas de Página de Projetos e de Galeria. O título de navegação aparece nas miniaturas do Índice, mas o título da página aparece na parte superior das páginas individuais. Isso significa que você pode definir um texto diferente para aparecer nesses dois locais. 

Use a seção Índice: texto do item para alterar a fonte, a cor e o tamanho do texto.

  • Escolha como os títulos são exibidos com a Exibição de Título.
  • Desmarque Mostrar categorias para ocultar o texto da categoria.
  • Marque Usar fundo do título e Usar fundo da categoria para adicionar cores de fundo personalizáveis atrás do texto.
  • Defina onde o texto é exibido com Alinhamento de Texto.

index_thumbnails_with_titles.png

Navigation

Para editar o estilo da navegação do Índice, acesse uma página dentro do Índice e abra Estilos do Site. 

A navegação é exibida na parte inferior de todas as páginas em um Índice. Para ocultá-la, desmarque Mostrar navegação de índice. Para estilizá-la, use a seção Índice: navegação: 

  • Defina Estilo do Link como Lista para exibir todas as páginas dentro do Índice como links de navegação.
  • Defina Estilo do link como Próximo para exibir uma etiqueta Próximo. Desmarque Mostrar apenas a etiqueta para mostrar o nome da próxima página depois da etiqueta Próximo.

link-style-list.png

link-style-next.png

Para qualquer um dos estilos, você pode exibir o texto como Inline ou Empilhado e alterar a cor, a fonte e a escala do texto. Use os outros ajustes em Índice: navegação para definir o estilo de link, incluindo espaçamento, fonte e como os links são separados.

Carregamento da página

Os templates York dão suporte ao Ajax, um método de carregamento de página que torna seu site mais rápido, carregando apenas o conteúdo visível na página. Para criar uma experiência de navegação uniforme, recomendamos manter o carregamento Ajax ativado. Para obter mais ajuda, acesse carregamento Ajax.

Os templates York também têm suporte para animações de páginas especiais:

  • Imagens e legendas nas Páginas de Projetos parecem deslizar de baixo para cima enquanto você rola a página para baixo. Desmarque o ajuste Imagens e legendas em cascata para remover o efeito.
  • O conteúdo em páginas dentro de um Índice parece deslizar para cima no carregamento inicial. Desmarque o ajuste Animação de transição da página para remover o efeito.
  • Os banners de página são carregados com um efeito de desvanecer. 

Nem todas as animações estarão visíveis quando você estiver conectado. Para visualizar os efeitos, visite o seu site no modo privado ou anônimo.

image-sliding-up.gif

page_banner_fading_in.gif

Share buttons

Os botões de compartilhamento personalizáveis são exibidos em publicações de blog e páginas de detalhes do produto:

  • Use a seção Botões de compartilhamento para definir tamanho, espaçamento, cor e estilo. Dependendo do estilo escolhido, mais ajustes aparecem para personalizar ainda mais os botões.
  • Use a seção Produtos: detalhes para escolher a exibição dos botões de compartilhamento de item do produto. Oculte os ícones dos itens do produto desmarcando Mostrar botões de compartilhamento.
  • Nas Páginas de Blog, os botões de compartilhamento sempre são exibidos abaixo das publicações do blog.
  • O botão de compartilhamento do Pinterest só é exibido em páginas com imagens em miniatura.
  • Página de Eventos e de Álbum incluem um link de compartilhamento com botões de compartilhamento pop-up. Esses botões não seguem estilos personalizados.  

Layout and background

Defina o preenchimento do seu site na seção Site:

  • Defina o espaço entre o conteúdo do site e a parte superior do navegador com Espaçamento do Site.
  • Defina o espaço entre o conteúdo do site e os lados do navegador com o Espaçamento externo do site.
  • Quando o Cabeçalho com largura total estiver desmarcado, o cabeçalho segue o Alinhamento do site e a Largura máxima do site.
  • Defina a cor de fundo do site com Fundo do site

Fonts

Use essas opções de Estilos do Site para estilizar as fontes em seu site:

Você pode definir determinado texto para ser aumentado ou diminuído, dependendo da largura do navegador. Veja como você faria isso para o texto do Título 1:

  1. Na seção Site: tipografia, marque Ajustar tamanho do título 1.
  2. Defina o tamanho máximo da fonte com Título 1.
  3. Defina o tamanho mínimo da fonte com Título 1 min.

Recomendamos definir o tamanho mínimo da fonte de cada cabeçalho como maior do que o tamanho da fonte do corpo do texto. Saiba mais em Dimensionamento das fontes.

Sidebar

Os templates York não dão suporte a uma barra lateral em nenhuma página. Para obter uma lista de templates com barras laterais, visite Editar barras laterais.

Ícones Sociais

Os templates York não dão suporte a ícones de redes sociais incorporados. Adicione um Bloco de Links de Redes Sociais ao rodapé ou ao conteúdo da página.

Dispostivos Móveis

O design responsivo e integrado do Squarespace permite que seu site se ajuste a qualquer dispositivo e tenha aparência e navegabilidade aprimoradas. Em dispositivos móveis e navegadores estreitos, o conteúdo é empilhado verticalmente.

Estilize a aparência móvel do seu site nas seções Dispositivos móveis: 

  • Use a Posição da barra móvel para definir se a barra móvel rola para cima com a página ou permanece fixa na parte superior ou inferior. A barra móvel contém o título ou logotipo do site, o ícone de navegação, o slogan e o carrinho de compras.
  • Use a Posição da marca para definir onde a identidade visual do site e o ícone do menu são exibidos.
  • O título do site, o slogan, os links de navegação e o carrinho de compras podem ter estilos móveis separados. Para manter sua identidade visual coerente em todos os dispositivos, use os mesmos estilos que a seção Site.
  • Defina uma imagem de contingência para dispositivos móveis para ser exibida se o banner de vídeo não puder ser carregado em dispositivos móveis. 
  • O ☰ sempre é exibido em dispositivos móveis, mesmo que as Navegações Principal e Secundária estejam vazias.

Lembre-se:

smartphong-and-tablet-view.png

Opções de idiomas

Os templates York são compatíveis com duas opções de idioma: 

Este artigo foi útil?
Utilizadores que acharam útil: 40 de 92
Família de templates York