Obs.: embora os nossos guias mais acessados tenham sido traduzidos para o português, 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.

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:

  • Altere a Navegação Principal e a Navegação Secundária com Principal 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 cursor 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.

Banners de página

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 no banner com Alinhamento de imagem
  • Se o Alinhamento da imagem estiver definido como direita ou esquerda, preencha a metade direita ou esquerda da imagem com Recortar imagem. Para preencher todo o banner, defina Alinhamento da Imagem como centralizar 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.
  • Para estender o banner para as bordas do navegador, marque Banner com sangria total.
  • 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

Títulos e descrições das páginas

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.
  • Oculte ou exiba o texto com Título, Descriçãoe Categoria na seção Página.
  • 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:

Estilize o texto com Título, Descrição e Categoria.

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: 

  • Posicione o texto no banner com Alinhamento.
  • Defina as margens laterais para o texto com Largura.
  • Adicione uma cor atrás do texto com os ajustes de Realce. Defina a largura da cor de fundo com Realçar Recuo de Texto.

text_on_a_banner.png

Páginas do Blog

A família de templates York usa uma Página do Blog padrão em grade ou em lista. Saiba mais sobre os recursos exclusivos e as opções de estilo desse tipo de blog em Página do Blog padrão em grade e em lista.

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:

  • Alinhe a imagem na miniatura com o Alinhamento da imagem.
  • 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
  • Altere o quanto a imagem desaparece quando os visitantes passam o mouse sobre ela com a Opacidade do pairar do mouse.
  • Para preencher toda a miniatura, selecione Alinhamento da Imagem: Centralizar e marque Cortar Imagem.
  • 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 exibir em miniaturas que não tenham imagens ou vídeos. Esse ajuste aparece quando o Fundo de Cor Automática está desmarcado.

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
  • Através de imagens em miniatura se você alterou sua opacidade

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.

  • Exiba as miniaturas como banners com Largura do Item. Escolha Completo ou Metade para exibir um ou dois banners por linha. 
  • Defina a altura dos banners com a Altura do Item.
  • Para exibir as miniaturas em uma grade, selecione Largura do Item: Grade. Estilize a grade com os ajustes de colunas e a proporção de miniaturas.
  • Defina o espaço entre banners ou blocos de miniatura com Espaçamento de itens.
  • Para estender as miniaturas até a borda do navegador, marque  Índice de sangria total. Quando desmarcada, as miniaturas seguem o preenchimento do site. Isso afeta também o banner do cabeçalho da página.
  • Para alternar entre linhas que exibem um banner e dois banners, marque Larguras Alternativas. Essa opção aparece quando os banners são definidos como Alinhamento da imagem: Largura Centralizado e Largura do índice estão definidos como Total ou Metade.
  • Para alternar o lado em que a imagem é exibida, marque Lados Alternativos. Essa opção aparece quando os banners são definidos como Alinhamento da imagem: Direita ou Esquerda e Largura do índice está definida como Completo .

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. 

Altere a fonte, a cor e o tamanho do texto com a seção Índice: Texto do Item.

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

index_thumbnails_with_titles.png

Navegação

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

No Índice, a navegação aparece na parte inferior de todas as páginas. Para ocultá-la, desmarque Mostrar navegação de índice. Para editar o estilo dela, use a seção Índice: navegação: 

  • Deixe Estilo do Link como Lista para mostrar todas as páginas no Í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 estilo, você pode exibir o texto como Inline ou Empilhado e alterar a cor, a fonte e a escala do texto. Defina o estilo do link, incluindo espaçamento, fonte e como os links são separados, com os outros ajustes em Índice: Navegação.

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.
  • Nas páginas do Índice, o conteúdo parece deslizar para cima no carregamento inicial. Desmarque o ajuste Animação de transição da página para tirar esse 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

Estrutura e estilo

Botão de compartilhamento

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

  • Defina seu tamanho, espaçamento, cor e estilo na seção Botões de compartilhamento. Dependendo do estilo escolhido, mais ajustes aparecerão para personalizar ainda mais os botões.
  • Escolha os botões de compartilhamento de item de produto exibidos na seção Produtos: Detalhes. Oculte os ícones dos itens do produto, desmarcando Mostrar botões de compartilhamento.
  • Use Ícones de compartilhamento no Blog: item para escolher se os botões de compartilhamento serão exibidos acima ou abaixo do conteúdo nas publicações individuais 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 e plano de fundo

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

Fontes

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.

Barra lateral

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 de Redes 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.

Dispositivo móvel

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: 

  • Escolha se a barra móvel rola para cima com a página ou permanece fixa na parte superior ou inferior com a Posição da Barra Móvel. A barra de dispositivos móveis contém o título ou o logotipo do site, o ícone de navegação, slogan e carrinho de compras.
  • Defina onde a marca do site e o ícone de menu aparecem com a Posição da marca.
  • 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: 43 de 97
Família de templates York