Recursos do template
Botão de navegação
Quer uma chamada de ação eficaz logo no cabeçalho? Marque a opção Ativar botão de navegação para transformar o último link da navegação principal em um botão.
Área do banner
Há várias maneiras de usar a área do banner no topo da página.
Banner de página
É possível criar um banner grande na Página, Lista do Blog, Lista de Eventos, Lista de Produtos ou Página do Álbum. Para isso, acesse Configurações (no Gerenciador de sites). Basta fazer upload de uma miniatura e adicionar um texto ao campo Descrição.
- O texto em negrito virará uma manchete
- Os links na última linha viram botões
Slideshow do banner da página
Para ter um slideshow de banner grande nas Coleções de Páginas, coloque um Bloco de Galeria bem no topo da página, antes de todos os outros blocos.
- O Bloco de Galeria deve ficar no modo slideshow
- Assim como no Banner de Página, textos em negrito ou links na descrição de cada slide da Galeria criarão manchetes e botões
Slideshow com destaques do Blog
Criou uma apresentação com as publicações em destaque na visualização da Lista do Blog, cada publicação mostrada individualmente. As cinco publicações mais recente em destaque serão incluídas automaticamente em um slideshow no topo da Lista do Blog.
Banner de item do blog
Na Visualização de item de uma publicação do blog, a miniatura da publicação será colocada automaticamente em um banner na parte superior da página, juntamente com o título da publicação e da metainformação escolhida.
Banner de imagem simples
Não quer o cabeçalho cheio de palavras e botões? Basta fazer o upload de uma miniatura na Página, Lista do Blog, Eventos, Lista de Produtos ou Álbum, e ela aparecerá em uma tira fina ao longo do topo da página.
Sem área do banner
Se você não quiser usar nenhum banner, basta não fazer upload de nenhuma miniatura.
Barra lateral
As barras laterais do template Hayden aparecem em várias situações:
- Navegação de pastas, à esquerda de uma página dentro de uma pasta
- Navegação da categoria, à esquerda de uma Lista de produtos com categorias
- Barra lateral do blog, no lado direito das páginas do blog
Você pode escolher entre mostrar o título da pasta ou da coleção do produto. Se não quiser mostrar as barras laterais, use a opção correspondente no Editor de Estilos para ocultá-las totalmente.
Índice
O Índice do template Hayden empilha várias páginas na vertical. Cada Página Índice oferece todas as opções de banner disponíveis em outras páginas do website, incluindo Banner de Página, Slideshow de Banner de Página e Banner de Imagem Simples.
O Índice também oferece uma Navegação fixa, que aparece depois que você passa da primeira Página no Índice. Essa navegação só aparece ao explorar o Índice do template Hayden.
Opções do Editor de Estilos
Cabeçalho do website
Cor de fundo do cabeçalho – muda a cor de fundo da barra do cabeçalho no topo da página.
Fonte + cor do título do website – se nenhuma imagem do logotipo for carregada, define o tipo de letra, as propriedades de fonte e a cor do título do website.
Cabeçalho transparente – se uma imagem qualquer do banner for carregada em uma página específica, o plano de fundo do cabeçalho ficará transparente. Páginas sem imagem de banner mantêm a cor de fundo do cabeçalho, assim como as pastas suspensas.
Largura do espaço para o logotipo – define a largura do espaço para o logotipo, mudando efetivamente o tamanho do logotipo. Se esse espaço for menor do que o tamanho da imagem carregada, a imagem se encolherá; se o espaço for maior, o logotipo não ficará maior do que a imagem carregada. A navegação ocupará o resto do espaço à direita do espaço para o logotipo.
Largura do espaço para o título do website – define a largura do espaço para o título do website. Este recurso controla o envoltório do título do website.
Navegação do site
Fonte + cor do link de navegação – define o tipo de letra, as propriedades da fonte e as cores dos links de navegação.
Link de navegação (ativo) – define a cor dos links de navegação ao passar o mouse em cima.
Ativar botão de navegação – transforma o último link na navegação em botão (não vale para pastas).
Estilo de botão de navegação – seleciona entre botão cheio, só com contorno ou em baixo relevo.
Estilo do canto do botão de navegação – seleciona entre cantos quadrados ou arredondados ou um botão em forma de "pílula".
Cor do botão de navegação – define a cor de fundo do botão (cor do contorno e do texto se o estilo "contorno" for selecionado).
Fonte + cor do texto do botão de navegação – define o tipo de letra, as propriedades da fonte e as cores do botão de navegação.
Seção do banner
Cor de sobreposição do banner – define uma cor para se sobrepôr nas imagens do banner.
Fonte + cor do texto do título – define o tipo de letra, as propriedades da fonte e a cor dos títulos nos banners.
Fonte + cor do texto do banner – define o tipo de letra, as propriedades da fonte e a cor do corpo de texto nos banners.
Estilo do botão do banner – seleciona entre botão cheio, só com contorno ou em baixo relevo.
Estilo do canto do botão do banner – seleciona entre cantos quadrados ou arredondados ou um botão em forma de "pílula".
Cor do botão do banner – define a cor de fundo do botão (cor do contorno e do texto se o estilo "contorno" for selecionado).
Fonte + cor do botão do banner – define o tipo de letra, as propriedades da fonte e as cores do botão do banner.
Conteúdo principal
Fundo de página – define o fundo da área do conteúdo principal.
Fonte + cor do texto da página – define o tipo de letra, as propriedades da fonte e a cor do corpo de texto.
Cor dos links da página – define a cor dos links do corpo.
Cor do meta na página – define a cor do metatexto (autores do blog, datas de publicação, etc.)
Controla o tipo de letra, as propriedades da fonte e as cores dosTítulo 1,Título 2,eTítulo 3.
Fonte + cor da citação – define o tipo de letra, as propriedades da fonte e cor dos Blocos de Citação.
Barra lateral
Ocultar barra lateral da página – oculta a navegação de pastas pela esquerda nas páginas de uma pasta.
Ocultar barra lateral dos produtos – oculta a navegação de categorias pela esquerda na exibição da lista de produtos.
Ocultar o título na barra lateral – oculta o título na barra lateral.
Fonte + Cor do título de subnavegação – define o tipo de letra, as propriedades da fonte e a cor dos títulos na navegação do folder de página e na navegação da categoria de produtos.
Fonte + Cor do link de subnavegação – define o tipo de letra, as propriedades da fonte e a cor dos links na subnavegação.
Pré-rodapé
Fundo do pré-rodapé –de define a cor de fundo da área do pré-rodapé diretamente acima do rodapé.
Cor de texto do pré-rodapé – define a cor do texto do pré-rodapé.
Rodapé
Fundo do rodapé – define a cor de fundo da área do rodapé na parte inferior da página.
Cor de texto do rodapé – define a cor do texto do rodapé.
Fonte + cor da navegação do rodapé – define o tipo de letra, as propriedades da fonte e cor dos links de navegação do rodapé.
Link de navegação do rodapé (ativo) – define a cor dos links de navegação do rodapé ao passar o mouse em cima.
Centrar navegação/informações – alterna entre central e à esquerda o alinhamento da navegação do rodapé e das informações do website.
Ocultar informações do website – oculta as informações do website no rodapé.
Blog
Metaprioridade – seleciona se a data ou categoria da publicação deve aparecer acima do título na exibição da lista do blog.
Ocultar autor – oculta a autoria de uma publicação do blog. Útil para blogs com um único autor.
Ocultar rodapé na entrada da lista – oculta o rodapé (comentar + curtir + compartilhar) na exibição da lista do blog.
Estilos de galeria
Navegação da galeria – determina o tipo de navegação nas imagens da galeria fornecida na página.
Sobreposição de informação da galeria – seleciona o tipo de exibição para a legenda e o título da imagem.
Proporção da imagem da galeria - controla a proporção da imagem (largura e altura) do slide ativo da galeria.
Estilo da seta da Galeria – determina o estilo das setas usadas para passar os slides.
Transições de galeria – seleciona os estilos de transição entre os slides mostrados.
Setas de exibição da galeria – para usar setas ao passar os slides.
Autocortar galeria – corta automaticamente as imagens em slide na proporção selecionada.
Reprodução automática da galeria - faz o ciclo automático das imagens da galeria, sem interação do usuário.
Loop da galeria - faz a galeria passar do último para o primeiro slide.
Velocidade de reprodução automática da galeria – especifica o tempo de pausa do slide ativo na Galeria.
Tamanho da miniatura da galeria) - controla a altura das miniaturas usadas na navegação da galeria.
Fundo da seta de galeria – especifica a cor usada nas setas de galeria.
Cor da seta da Galeria – especifica a cor usada na seta em si.
Cor do círculo da galeria – especifica a cor usada nas setas circulares da galeria.
Fundo das informações da galeria - especifica a cor usada no fundo do título e da legenda da imagem.
Estilos de evento
Formato do horário do evento – alterna o formato de horário do evento entre 24 horas ou AM/PM.
Ícones do evento – ativa ícones na exibição do endereço e do horário do evento.
Miniaturas do evento – mostra uma miniatura no modo de exibição de lista.
Tamanho da miniatura do evento – controla o tamanho (proporção entre altura e largura) da miniatura do evento.
Etiqueta com a data do evento – ativa a sobreposição da data na miniatura do evento.
Etiqueta da data do evento com o horário – inclui o horário do evento com a data sobreposta.
Trechos do evento – mostra um trecho opcional do texto dos eventos na exibição de lista, quando houver.
Data da lista do evento – mostra a data completa (dia, mês, ano) do evento na exibição da lista.
Horário da lista do evento – mostra o intervalo (horário do início e do fim) do evento na exibição da lista.
Endereço da Lista de Eventos – mostra o endereço do evento quando houver.
Links de evento no iCal/gCal – mostra links para adicionar eventos ao calendário da Apple ou do Google.
Botões de curtida ede compartilhamento de evento – mostra os botões de curtida simples e de compartilhamento do Squarespace nos eventos.
Exibição compacta da Lista de eventos – ativa uma simples exibição empilhada dos eventos na exibição da lista.
Exibição compacta do calendário de eventos – ativa uma exibição mais simples do calendário, otimizada para áreas menores
Estilos de produto
Cor de fundo do produto – define a cor atrás da imagem do produto.
Cor da sobreposição do produto – define a cor da sobreposição quando os títulos da lista do produto estão definidos como 'sobreposição'.
Produtos por fila – determina o número de produtos mostrados em cada filha na lista de produtos.
Títulos da lista de produtos – controla a posição do título do produto na lista de produtos.
Alinhamento da lista de produtos – define o alinhamento do texto do título do produto na lista de produtos.
Tamanho do item de produto – seleciona a proporção da imagem da foto do produto na lista de produtos.
Autocortar imagem do produto – determina se as imagens do produto preenchem a área de imagem ou ficam dentro.
Tamanho da galeria de produtos – seleciona a proporção de imagem da galeria de produtos na página de item de produto.
Autocortar galeria do produto – determina se as imagens do produto preenchem a área da galeria ou ficam dentro.
Mostrar preço do produto – mostra o preço na lista de produtos da página, quando ativado.
Mostrar navegação do item de produto – mostra o link 'retornar à loja' na página de item de produto.
