O estilo e recursos da 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 da família York. Os ajustes de estilos do site e a seção em que aparecem no painel Estilos do site estão em negrito.
Tipos de página compatíveis
Os templates York aceitam os seguintes tipos de página:
- Páginas de Álbum
- Páginas de Blog — lista/grade padrão
- Páginas de Entrada
- Páginas de Eventos
- Páginas de Galeria - Padrão
- Páginas de Projeto
- Páginas Índice — grade
- Páginas de Layout
- Páginas da Loja – Avançado
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:
- Título do site ou logotipo ("identidade visual")
- Slogan
- Navegação Principal
- Navegação secundária
- Carrinho de compras
Estilize o layout do cabeçalho com os ajustes de 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.
- Use o ajuste Cabeçalho com largura inteira para escolher como o cabeçalho aparece.
Estilo do cabeçalho
Estilize o conteúdo do cabeçalho com estes ajustes de Site: cabeçalho :
- Use Título do site para especificar a fonte e a cor do título do site.
- Use Slogan do site para especificar a fonte e a cor do slogan.
- Use Altura do logotipo (máx.) para alterar o tamanho do logotipo.
- Use Carrinho para especificar a fonte, a cor e o estilo do carrinho de compra.
Estilize a navegação com os ajustes de 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.
Mais informações sobre cabeçalhos
Dicas:
- Defina o peso da linha do ícone de pesquisa e carrinho de compras com os ajustes de ícones.
- A cor de fundo do cabeçalho segue o ajuste de Fundo do site em Site.
- Muitos desses elementos têm estilos móveis separados.
Cabeçalhos e rodapés da página
O cabeçalho e o rodapé são uma ótima maneira de personalizar uma página específica. Para adicionar um bloco, 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 da loja
- Páginas de Projeto
Para habilitá-los em seu site, marque Mostrar cabeçalho da página e/ou Mostrar rodapé da página na seção Página dos estilos do site. Os blocos de texto no cabeçalho e no rodapé da página seguem os ajustes em 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 ativar um rodapé em todo o site, marque o ajuste Mostrar rodapé global do site em Site: rodapé. Para adicionar blocos, passe o cursor do mouse sobre o rodapé e clique em Editar. Para ver as etapas completas, acesse Editar rodapés.
Banners de página
Adicione uma imagem de banner ou 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 da loja
- Páginas de Projeto
Para adicionar uma imagem ou vídeo de banner, adicione uma imagem em destaque ou um URL de vídeo à aba Mídias 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 imagem me destaque, 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 dos estilos do site.
- 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:
- Acesse a página inicial.
- Abra Estilos do Site.
- Role para baixo até Página.
- Desmarque Mostrar banner da página. Isso oculta o banner em todas as Páginas de layout.
- 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
Estilize os banners na seção Banner dos estilos do site. Esses ajustes afetam todos os banners de página do seu site.
- Nas páginas com imagens em destaque, defina a altura do banner com Altura.
- Use Alinhamento da imagem para posicionar a imagem no banner.
- 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 extrair automaticamente uma cor de fundo da própria imagem em destaque. 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 de índice têm suas próprias configurações de estilo em Índice nos estilos do site.
A Cor do plano de fundo aparece:
- Em banners que não têm imagens em destaque
- Enquanto uma imagem de banner ou vídeo é carregada
- Atrás de imagens em destaque que não preenchem o banner inteiro, se a opção Fundo de Cor Automática estiver desmarcada
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 os ajustes de Título, descrição e 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:
- Texto do banner — qualquer página com um banner
- Índice: texto de introdução — Página Índice sem banner de página
- Página: texto de introdução - qualquer outra página sem banner de página
Use Título, Descrição e Categoria para ajustar o estilo do 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 no banner.
- Defina as margens laterais para o texto com Largura.
- Use os ajustes em Destacar para adicionar uma cor atrás do texto. Use Destacar recuo do texto para especificar a largura da cor do fundo.
Páginas do Blog
A família de templates York usa uma página de blog de grade/lista padrão. Para saber mais sobre os recursos exclusivos e as opções de estilo desse tipo de blog, acesse Páginas do Blog padrão em grade/lista na versão 7.0.
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.
Saiba mais em Página de Projetos.
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 destaque da página. Mesmo que uma página tenha um banner de vídeo, a imagem em destaque é 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.
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 da loja
- Páginas de Projeto
- Páginas de Layout
Imagens em destaque
Adicione uma imagem em destaque ou um URL de vídeo às configurações de uma página para exibi-lo na miniatura de navegação do índice. Estilize as miniaturas com os ajustes de Índice: imagem do item:
- Alinhe a imagem em destaque na miniatura com o Alinhamento da imagem.
- Use Recortar imagem para preencher a metade direita, a metade esquerda ou a miniatura inteira. Essa opção aparece quando Alinhamento da imagem está como À direita, À esquerda ou Central.
- Use Opacidade da imagem para especificar o quanto da cor do plano de fundo aparece através da imagem.
- Use Opacidade ao passar o cursor para alterar o quanto a imagem desaparece quando se passa o cursor sobre ela.
- Para preencher toda a miniatura, selecione Alinhamento da imagem: central e marque Recortar imagem.
- Para definir miniaturas para extrair automaticamente uma cor de fundo da imagem ou do vídeo da imagem em destaque, marque Fundo de Cor Automática.
- Escolha uma Cor de Fundo do Item para exibir em miniaturas que não tenham imagens ou vídeos em destaque. 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 em destaque que não preenchem a miniatura inteira
- Por meio de imagens em destaque 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 dos estilos do site.
- Use Largura do item para mostrar as miniaturas como banners. Escolha Total ou Metade para mostrar um ou dois banners por linha.
- Use Altura do item para especificar a altura dos banners.
- Para mostrar as miniaturas em uma grade, selecione Largura do item: grade. Ajuste o estilo da grade com os ajustes Colunas e Proporção da miniatura.
- Defina o espaço entre banners ou blocos de miniatura com Espaçamento de itens.
- Para estender as miniaturas até a borda do browser, marque Índice sem margens. Quando desmarcado, as miniaturas seguem o espaçamento do site. Isso também afeta o banner do cabeçalho da página.
- Para alternar linhas que mostram um e dois banners, marque Alternar larguras. Essa opção aparece quando os banners estão como Alinhamento da imagem: central e a Largura do Índice está como inteira ou metade.
- Para trocar o lado em que a imagem parece, marque Trocar de lado. Essa opção aparece quando os banners têm Alinhamento da imagem: à direita ou à esquerda e a Largura do índice está como Inteira.
As miniaturas do índice podem mostrar o título da navegação de cada página e as categorias que você adicionou às imagens nas Páginas de Projetos e de Galeria. O título de navegação aparece nas miniaturas do Índice, mas o título da página aparece no topo de cada página. Isso significa que você pode incluir um texto diferente em cada um desses dois locais.
Altere a fonte, a cor e o tamanho do texto com a seção Índice: texto do item dos estilos do site.
- 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.
Navegação
Para editar o estilo da navegação do Índice, acesse uma página no Índice e abra Estilos do Site.
A navegação é exibida na parte inferior de todas as páginas de um índice. Para ocultá-lo, desmarque Mostrar navegação de índice. Para estilizá-lo, use a seção de Índice: navegação dos estilos do site:
- Deixe Estilo do Link como Lista para mostrar todas as páginas no Índice como links de navegação.
- Deixe Estilo do link como Próximo para mostrar uma etiqueta Próximo. Desmarque Mostrar apenas a etiqueta para mostrar o nome da próxima página após etiqueta Próximo.
Em qualquer estilo, você pode mostrar o texto como Inline ou Empilhado e alterar a cor, a fonte e o dimensionamento do texto. Especifique o estilo do link, incluindo o espaçamento, a 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 aparecem gradualmente.
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.
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 o tamanho, o espaçamento, a cor e o estilo na seção Botões de compartilhamento dos estilos do site. Dependendo do estilo escolhido, mais ajustes aparecem para personalizar ainda mais os botões.
- Escolha como os botões de compartilhamento de item do produto aparecem na seção Produtos: detalhes. Para ocultar o ícone dos itens do produto, desmarque Mostrar botões de compartilhamento.
- Use o ajuste Compartilhar ícones em Blog: item para escolher se os botões de compartilhamento são exibidos acima ou abaixo do conteúdo em cada publicação do blog.
- O botão de compartilhamento do Pinterest só é exibido em páginas com imagens em destaque.
- A 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 o estilo personalizado.
Layout e plano de fundo
Defina o espaçamento do seu site na seção Site dos estilos do 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:
- Links de navegação - Site: navegação
- Conteúdo principal - Site: tipografia
- Títulos e descrições das páginas — Texto do banner, Página: texto de introdução e Índice: texto de introdução
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:
- Na seção Site: tipografia, marque Ajustar tamanho do título 1.
- Defina o tamanho máximo da fonte com Título 1.
- 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 aceitam barra lateral em nenhuma página. Para obter uma lista de templates com barras laterais, acesse Barras laterais na versão 7.0.
Í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 dos estilos do site:
- Use Posição da barra móvel para escolher 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 Posição da identidade visual para especificar onde a marca do site e o ícone de menu aparecem.
- 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 consistente em todos os dispositivos, use os mesmos estilos que a seção Site.
- Especifique uma imagem de contingência para dispositivos móveis para aparecer se o banner de vídeo não aparecer na versão móvel.
- O ☰ sempre aparece na versão móvel, mesmo com a Navegação Principal e Secundária vazias.
Lembre-se:
- Diferente de alguns templates, você não pode desativar a opção de estilos móveis.
- Se o site não estiver sendo exibido corretamente em dispositivos móveis, habilite o dimensionamento de fontes e experimente reduzir os mínimos das fontes.
- As descrições das páginas podem se sobrepor às miniaturas na versão móvel. Use a Prévia por aparelho para ver como o site fica na versão móvel e, em seguida, encurte a descrição da página, se necessário.
Opções de idiomas
O template York aceita duas opções de idioma:
- Escolha o idioma do texto interno do seu site, como de formulários de envio e da mensagem de Confirmação do Pedido.
- Inicie um novo site com um template em francês, alemão, italiano, português ou espanhol.
Solução de problemas de York
Confira a seguir alguns problemas comuns com esse template. São bugs ou problemas conhecidos. Oferecemos suporte para o Squarespace versão 7.0, mas corrigir bugs ou problemas não é nossa prioridade enquanto nos dedicamos à nossa atual plataforma, a versão 7.1. Para mudar seu site da versão 7.0 para a versão 7.1, use nossa ferramente de atualização.
A cor de realce do fundo do texto do banner tem lacunas
Isso pode acontecer quando o título ou descrição for muito curto e você tiver deixado um grande recuo de realce personalizado.
Para corrigir, adicione texto ao título ou descrição, ou use a seção Texto do banner em Estilos do Site para:
- Reduzir o ajuste de Recuo de destaque personalizado .
- Use o ajuste Recuo de realce de texto para escolher as opções de predefinição pequena, média ou grande.
As listas suspensas não aparecem corretamente na navegação
As listas suspensas na navegação podem não aparecer conforme o esperado por dois motivos, cada um com uma correção específica:
- Nem todas as páginas aparecem - quando expandida, a lista suspensa não mostra todas as páginas que ela contém. Para corrigir a lista, adicione uma nova lista suspensa e transfira algumas páginas para ela.
- Falta parte do título da lista suspensa - listas suspensas com título longo não mostram todas as palavras no título. Isso também pode afetar o título das páginas dentro da lista. Para corrigir, encurte o título da lista suspensa ou da página afetada na lista.
Aparece o texto “Descrição da página”
O texto desse marcador de posição aparece nas Páginas de Layout, de Projeto e da loja enquanto você estiver logado no seu site. Os visitantes do site não verão esse texto.
Para corrigir, substitua o texto nas configurações da página ou oculte todas as descrições da página no Estilos do Site.
A Página de Projetos desapareceu depois da troca de template
Se você trocar para um template fora da família York, a Página de Projetos será convertida em Página de Galeria.
Após voltar para um template York, você pode recriar o formato original, transferindo as imagens da Página de Galeria para uma nova Página de Projetos:
- Abra o painel "Páginas" e adicione uma nova página de projeto.
- No painel Páginas, clique na Página de Galeria com as imagens que deseja transferir.
- Clique nos itens que deseja transferir.
- Clique em Transferir na barra de ações que aparece abaixo.
- Na janela Selecionar coleção de destino, selecione a Página de Projetos e clique em Transferir itens.
Um texto aleatório aparece quando compartilho nas mídias sociais
O Squarespace não controla exatamente o que aparece nas mídias sociais quando você compartilha conteúdo. No entanto, às vezes aparece o texto do cabeçalho de página ou rodapé, mesmo que ele esteja oculto no seu site. Para corrigir, apague o conteúdo dos cabeçalhos e rodapés quando eles estiverem ocultos.
Para apagar o conteúdo do cabeçalho ou do rodapé:
- No painel Páginas, abra a página com o conteúdo oculto no cabeçalho ou rodapé.
- Abra Estilos do Site e tire o cabeçalho ou o rodapé da página do modo oculto na seção Página em Estilos do Site.
- Clique em Salvar.
- Retorne ao cabeçalho ou rodapé e clique em Editar.
- Apague o conteúdo.
- Retorne ao Estilos do Site e desmarque Mostrar cabeçalho da página ou Mostrar rodapé da página.
Quebras de texto no banner
Se o texto não aparecer corretamente na versão móvel, ative o dimensionamento de fontes e reduza os mínimos das fontes.
Palavras longas não se ajustam quando atingem a borda de uma embalagem. Para um melhor resultado, use palavras mais curtas nos títulos.
Texto desalinhado no índice em grade
Se o layout da página índice estiver como grade, o texto poderá aparecer fora do centro e sobre a imagem em miniatura nos browsers menores.
Para corrigir, teste os estilos do site: reduza o número de colunas do tablet no layout em grade ou diminua a fonte do título. Você também pode alterar o layout para Meio ou Completo em vez de em grade.
Problemas na adição de conteúdo ao cabeçalho da página
Se não aparecer a anotação Conteúdo do cabeçalho da coleção no cabeçalho da página:
- Abra Estilos do Site.
- Na seção Página, marque Mostrar cabeçalho da página.
- Clique em Salvar e saia do painel Estilos do Site.
- Atualize a página.
A anotação deverá aparecer na página.
O vídeo não aparece na Página de Projetos
Todos os vídeos na Página de Projetos devem ter uma miniatura. Os vídeos sem miniatura aparecem no painel Páginas com uma linha diagonal. Para adicionar uma miniatura:
- Abra o painel "Páginas".
- Clique na Página de Projetos.
- Passe o cursor sobre o vídeo e clique em
. - Para adicionar uma imagem em miniatura manualmente, ative a opção Miniatura de vídeo e clique em Imagem.
- Clique em Salvar.
.