Os estilos e recursos da família de templates Brine.
Com os templates da família Brine, você pode criar uma presença web profissional para qualquer marca ou empresa. Personalize os cabeçalhos, rodapé, inserção de conteúdo e estilos móveis para destacar o seu site. Adicione banners sem margens a qualquer página ou empilhe-os no Índice. A Rolagem parallax opcional move os banners mais lentamente do que o conteúdo da página, criando uma ilusão de profundidade e imersão.
Este guia aborda os recursos e opções de design da família brine. Veja uma lista dos templates Brine.
Estilize seu site no painel Estilos do site. Neste guia, os ajustes de estilo e a seção em que aparecem no painel Estilos do site estão em negrito.
Páginas aceitas
O Brine aceita 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 Índice - empilhadas
- Páginas de Layout
- Páginas da Loja – Avançado
Cabeçalhos
Visitantes usam o cabeçalho na parte superior para navegar no seu site. No Brine, o cabeçalho é dividido em seções superior e inferior.
- Adicione elementos, como o título do site ou logotipo, e links de navegação nos cabeçalhos superior e inferior na seção Cabeçalho: layout de estilos do site.
- O cabeçalho inferior aceita uma imagem de fundo e uma área de introdução onde você pode adicionar seu próprio conteúdo.
Estilize os cabeçalhos
Estilize o cabeçalho superior com estes ajustes do Cabeçalho: superior:
- Defina a altura com Espaçamento.
- Defina a cor com Fundo.
O cabeçalho inferior exibe banners de página como imagens de fundo ou vídeos. Se não houver banner, a cor de fundo é a mesma da página (definida usando o ajuste Cor em Principal).
Para alterar a altura do cabeçalho inferior:
- Todas as páginas – Altere o Espaçamento em Cabeçalho: inferior e o ajuste de Espaçamento da introdução em Principal.
- Páginas individuais — adicione a altura com quebras de linha na área de introdução.
- Páginas Índice – Altere a altura da seção Índice superior.
Adicione e estilize elementos de cabeçalho
- Título do site ou logotipo ("identidade visual")
- Slogan
- Links de navegação
- Ícones de redes sociais integrados
- Barra de pesquisa
- Carrinho de compras
- Link de Iniciar sessão / Minha conta
Escolha onde eles serão exibidos ou ocultá-los na seção Cabeçalho: layout dos estilos do site. Por exemplo, escolha Posição da identidade visual: Centro superior para adicionar o título ou o logotipo do site ao meio do cabeçalho superior.
Estilize-os usando os ajustes em cada uma das seções do Cabeçalho. Por exemplo, vá para Cabeçalho: navegação primária para escolher a fonte e a cor dos links.
- Para elementos no cabeçalho inferior, defina suas cores de (Sobreposição) para que sejam visíveis sobre banners.
- Escolha se os elementos da mesma área (por exemplo, Centro Inferior) serão ou não empilhados com os ajustes de Layout no Cabeçalho: Superior e Cabeçalho: Inferior.
- Configure os estilos móveis em separado um para garantir um belo visual na versão móvel.
Mais informações sobre cabeçalhos
Siga as seguintes dicas:
- Para garantir o melhor resultado possível, posicione cada elemento em uma área diferente do cabeçalho. Os elementos podem se sobrepor se não houver espaço suficiente.
- Alguns ajustes não serão exibidos até que os elementos que eles afetam sejam adicionados ao seu site.
- Se o cabeçalho superior não tiver elementos, ele não aparecerá.
- Para obter mais dicas, acesse Como criar o cabeçalho do site.
Links de navegação
O Brine tem três áreas de navegação.
Links de Navegação Primária e Navegação Secundária:
- Podem ser exibidos no cabeçalho superior ou inferior.
- São estilizados usando os ajustes de estilo de navegação Cabeçalho: navegação primária e Cabeçalho: secundário. Por exemplo, escolha o botão Estilo: para estilizar os links de navegação primária ou secundária como botões.
Links de Navegação de Rodapé:
- São exibidos no rodapé do site.
- São estilizados com ajustes de Rodapé: Navegação.
Banners
Banners criam um elemento visual que pode dar o tom da sua página. Adicione imagens e vídeos em destaque de página para criar banners.
No Brine, os banners:
- São exibidos para Páginas de Layout e páginas de coleção.
- Tornam-se planos de fundo do cabeçalho inferior.
- São exibidos sem margens, exceto no layout de Design: Restrito.
- Podem rolar mais lentamente do que o resto da página por meio da rolagem parallax.
- Não são exibidos para itens de coleção (como publicações do blog, itens de produtos e eventos individuais).
Você pode empilhar vários banners em um Índice.
Estilize os banners
Use estas opções para estilizar seus banners:
- Adicione um filtro de cor com o ajuste Cor de sobreposição em Principal: sobreposição.
- Adicione texto e outros blocos, como Blocos de Botão, à área de introdução.
- Para alterar a altura, edite a área de introdução e adicione quebras de linha.
- Escolha se os banners rolam mais devagar que o resto da página com o ajuste Ativar parallax em Site: carregando.
- No Estilos do Site, os ajustes de (Sobreposição) afetam os elementos exibidos sobre imagens de banners, como links de texto e navegação.
Recortes e centralização
- Se a rolagem parallax estiver ativada, use o ajuste de corte inteligente Parallax em Site: carregando para garantir que os banners cortem a quantidade mínima.
- No caso de imagens cortadas de forma inesperada, siga nossas dicas para solução de problemas de recorte.
- Para escolher como as imagens do banner são centralizadas, altere os pontos focais delas. Para que a imagem continue visível durante a rolagem, defina o ponto focal próximo ao centro dela.
Mais informações sobre banners
Lembre-se:
- A primeira imagem em uma Página de Galeria se torna automaticamente a imagem do banner, se já não houver uma. Substitua ou exclua-a em Configurações de página.
- Crie o efeito de um banner de página de slideshow com um Índice com uma galeria de slideshow.
- Para obter ajuda geral, visite Adicionando imagens de banner.
Áreas de introdução
A área de introdução no cabeçalho inferior é uma área de cabeçalho específica da página que você pode editar com texto, imagens e outros conteúdos. É uma ótima maneira de personalizar a parte superior de páginas individuais.
A área de introdução aparece sobre o banner da página e segue a inserção de conteúdo. Ela está disponíveis em todas as páginas, exceto as Páginas de Layout sem banner e as Páginas Índice.
Para editar a introdução:
- Paire o cursor sobre a área acima do conteúdo da página e clique em Editar.
- Adicione texto e outros conteúdos com blocos.
A área de introdução pode exibir preenchimento extra enquanto você está editando o site. Para ver como o espaçamento de introdução aparece no site ativo, salve as alterações e veja a prévia da página no modo de prévia.
Rodapé
Personalize o rodapé geral para ajudar os visitantes a obterem as respostas que procuram. O rodapé do Brine tem:
- Três áreas de blocos que você pode personalizar com o seu próprio conteúdo.
- Uma área que exibe as suas informações comerciais.
- Links de Navegação de Rodapé.
- Duas opções de layout (use o ajuste Layout em Rodapé).
Estilize as fontes e as cores com os ajustes de Rodapé. Para ocultar o rodapé, desmarque Mostrar rodapé.
Layout: Colunas
Uma área com blocos, os dados da empresa e a navegação aparecem na horizontal, com uma área de blocos acima e abaixo. No rodapé, a lista suspensa e as páginas índice não criam um menu suspenso, mas colunas. O título da página índice e da lista suspensa aparece como cabeçalho que não são links, com os links da subpágina abaixo.
Layout: Empilhado
Os dados da empresa e a navegação ficam empilhados na vertical, com áreas de bloco acima, entre e abaixo deles. Os títulos da lista suspensa e da página índice não aparecem, e os links para as subpáginas deles aparecem na horizontal.
Páginas do Blog
A família de templates Brine 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 de grade/lista padrão na versão 7.0.
Páginas Índice
A Página Índice do template Brine transforma o conteúdo de várias páginas em seções empilhadas. Dessa forma, você pode destacar diferentes imagens e informações em um único local.
- As seções de conteúdo são ótimas para exibir texto, botões e outros blocos.
- As seções Índice de Galeria exibem imagens em um formato de grade ou apresentação de slides.
Seções de conteúdo
As seções de conteúdo são criadas a partir de Páginas de Layout. Depois de adicionar seções de conteúdo, personalize-as com blocos.
- A inserção de conteúdo (opcional) cria mais espaço em branco em torno de alguns blocos.
- Se a seção superior for uma seção de conteúdo, ela será exibida no cabeçalho inferior.
Para definir a altura mínima de algumas ou todas as seções, use Aplicar altura mínima em Índice: Página:
- Defina isso apenas para a primeira seção, páginas com banners, todas as páginas ou nenhuma página.
- Use o Espaçamento e o Espaçamento (Páginas de Sobreposição) para alterar a altura de todas as seções.
- Se o conteúdo da página for maior que a altura mínima, a seção se estende para encaixar o conteúdo, incluindo o espaçamento.
- Para alterar a altura de somente uma seção, adicione quebras de linha ao conteúdo da página para torná-lo mais comprido.
Adicione imagens em destaque de página para adicionar imagens ou vídeos de banner de fundo às seções.
- Os banners podem ter rolagem parallax.
- Se não houver banner, a cor de fundo é a mesma da página (definida usando o ajuste Cor em Principal).
Seção de Índice da galeria
As seções Índice de Galeria são feitas a partir de Páginas de Galeria. Depois de adicionar seções de índice de galeria, você pode adicionar imagens e vídeos.
Na seção Índice: galeria de estilos de sites:
- Escolha se todas as seções Índice da galeria serão exibidas como apresentações de slides ou grades com Layout.
- Para alterar o espaçamento ou criar efeitos sem margens, desmarque Aplicar espaçamento nos lados e use os ajustes de espaçamento.
- Defina a forma das imagens a partir da Proporção da imagem.
- Se a seção na parte superior for uma galeria, use o cabeçalho de sobreposição na primeira galeria de índice para escolher se ela será exibida por trás do cabeçalho inferior.
- Adicione um filtro de cor às imagens com Sobreposição de Imagem.
- O Estilo de Pairar define o que acontece ao pairar o cursor sobre uma imagem.
As seções de Índice da galeria não têm rolagem parallax. Com o parallax ativado, elas aparentam deslizar sobre as seções de conteúdo com movimento mais lento.
Na seção do índice da galeria, os vídeos mostram uma imagem em destaque. Se o seu vídeo não tiver uma imagem carregada, o índice mostrará uma caixa preta com uma linha atravessada. Para corrigir, adicione uma imagem em destaque ao vídeo.
Navegação do Índice
Para ajudar os visitantes a conhecer seu Índice:
- Use o ajuste Índice: indicador de rolagem para adicionar uma seta, linha ou texto à primeira seção para incentivá-los a rolar para baixo (somente seções de conteúdo).
- Adicione pontos ou linhas de navegação com o ajuste Estilo em Índice: navegação. Clicar em um ponto ou linha os leva para a seção correspondente.
Adicionar espaço abaixo da primeira seção
Se seu site tiver borda, você pode adicionar uma linha de espaçamento correspondente abaixo da primeira seção.
- Marque o ajuste Espelhada abaixo da primeira página em Índice: página ou o ajuste Borda espelhada abaixo da primeira galeria em Índice: galeria, dependendo do tipo da seção superior.
- A segunda seção precisa ser uma seção de conteúdo, e sem banner.
- A cor do espaçamento é a mesma da página. Para obter melhores resultados, combine isso com a cor da borda.
Mais informações sobre Índices
Lembre-se:
- As Páginas Índice não têm áreas de introdução, e as áreas de introdução para subpáginas não são exibidas.
- Nas navegações de cabeçalho, as Páginas Índice criam um único link.
- Nos rodapés, as Páginas Índice exibem todos os links de subpáginas.
- Você pode usar o Índice para criar um banner de slideshow ou uma imagem de fundo de página inteira.
- Veja as nossas dicas sobre como adicionar outros tipos de conteúdo.
- Acesse Como usar Páginas Índice para mais ajuda.
Estrutura e estilo
Use essas opções para alterar a aparência e a navegabilidade do seu site.
Carregamento Ajax
O Ajax é um método especial para carregar sites que torna as páginas que possuem conteúdo pesado, como Página do Blog, muito mais rápidas e ágeis. Para criar uma experiência de navegação uniforme, recomendamos manter o carregamento Ajax ativado.
- Ative ou desative o carregamento Ajax com o ajuste Ativar carregamento Ajax em Site: carregando.
- Estilize ou oculte a barra de carregamento exibida enquanto as páginas são carregadas com o outros ajustes Site: carregamento.
- Às vezes, o Ajax poderá conflitar com códigos personalizados, links de âncora e Analytics.
- Para obter mais ajuda, acesse carregamento Ajax.
Borda
Adicione e estilize um quadro geral em torno do cabeçalho, da área de conteúdo principal e do rodapé por meio de ajustes em Site: Borda. As Páginas de Entrada não exibem a borda.
Fontes
Use essas opções de Estilos do Site para estilizar as fontes em seu site:
- Fontes do site – Conteúdo: Fontes e Conteúdo: Cores
- Texto em banners – Todos os ajustes (Sobreposição)
- Seções Índice de Galeria – Índice: Galeria
- Elementos de cabeçalho – Em suas seções de cabeçalho (por exemplo, Cabeçalho: Identidade visual)
- Páginas de Produtos – Produtos
- Página do Blog – Blog: Tipografia e Cores
Os links de texto ficam sublinhados.
Rolagem parallax
Parallax é um efeito de rolagem especial onde imagens ou vídeos de fundo se movem mais lentamente do que o conteúdo da página. O Brine tem rolagem parallax para seus banners.
Botão de compartilhamento
Você pode adicionar Botões de compartilhamento à maioria das páginas. O visitante utiliza esses botões para compartilhar seu conteúdo em seus perfis nas redes sociais:
- Blog e Páginas da loja – Botões de compartilhamento avançado
- Páginas de Álbuns e Eventos - links clássicos de compartilhamento
Barra lateral
O template Brine não aceita barras laterais. Em vez disso, adicione mais conteúdo ao rodapé, à área de introdução e às páginas de layout.
Largura do site
Defina a largura com os ajustes em Site:
- Defina a largura da área de conteúdo com Largura.
- O layout escolhido com o Design define como a área de conteúdo é exibida.
- A borda do site também afeta o layout.
Nos exemplos abaixo, a Largura é definida como 880 pixels. A cor de fundo da área de conteúdo é definida na seção Principal dos estilos do site.
Design: Largura Total
O conteúdo é exibido na largura do navegador, exceto o Espaçamento lateral. Os banners são exibidos sem margens.
Design: Fundo Total
O conteúdo é exibido no valor da Largura, exceto o Espaçamento lateral. Os banners são exibidos sem margens.
Design: Largura Restrita
A cor de fundo na seção do Site é exibida fora da área do conteúdo. Os banners são exibidos na área do conteúdo.
Conteúdo de inserção
Use a inserção de conteúdo para criar layouts que chamam a atenção. Quando organizados em uma única coluna, alguns blocos, como de Texto e de Citações, aparecem mais estreitos do que outros conteúdos da página, como Blocos de Imagem.
- Isso afeta todas as áreas em que você pode adicionar blocos, incluindo as áreas de introdução e o rodapé.
- Defina a largura com Inserção de conteúdo em Principal.
- Para remover a inserção, defina a inserção de conteúdo em 0.
- Para mais informações, acesse Inserção de conteúdo.
Cores de fundo
Use os seguintes ajustes para definir as cores de fundo do seu site:
- Área de conteúdo principal – Cor em Principal
- Margens laterais – Fundo em Site
- Borda – Cor no Site: Borda
- Cabeçalho superior – Fundo no Cabeçalho: Superior
- Cabeçalho inferior - corresponde à área de conteúdo principal ou exibe um banner
- Rodapé – Cor de fundo em Rodapé
- Seções de Índice – corresponde à área de conteúdo principal ou exibe um banner
- Atrás de imagens transparentes de banners – Cor da Sobreposição no Principal: Sobreposição, mesmo se esta cor estiver definida em transparente
Dica: utilize um Índice para criar o efeito de uma imagem de fundo da página.
Este exemplo mostra muitas áreas de fundo:
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. No Brine, você pode personalizar a aparência do seu site em dispositivos móveis e navegadores estreitos.
Use o ajuste Ponto de quebra no dispositivo móvel, em Dispositivo móvel, para escolher a largura do navegador em que seu site alterna para a visualização por dispositivo móvel. O padrão é 640 pixels.
Barras de navegação
Elementos de cabeçalho em dispositivos móveis são exibidos nas barras de navegação superior ou inferior.
- Para adicionar uma barra superior ou inferior, mova qualquer elemento de cabeçalho para ela. Por exemplo, vá para a seção Dispositivo móvel: identidade visual dos estilos do site e escolha Posição: superior esquerdo para adicionar a barra superior.
- Escolha se a barra superior está fixa na parte superior ou rola para cima com a página com o ajuste Fixo superior dispositivo móvel em Dispositivo móvel: superior.
- A barra inferior é sempre fixa.
- Defina as cores de fundo com os ajustes Dispositivo móvel: superior e Dispositivo móvel: inferior.
Elementos de cabeçalho
Os elementos de cabeçalho do seu site são exibidos nas barras de navegação e têm estilos móveis diferentes.
- Estilize-os em cada uma de suas seções de Dispositivos móveis de estilos de sites. Por exemplo, estilize o título ou o logotipo do site com os ajustes Dispositivo móvel: identidade visual.
- A navegação se recolhe para o ícone ☰. A tela da navegação principal e a secundária aparecem quando o ☰ é tocado.
- Defina a cor de fundo da navegação com o ajuste Cor do menu em Menu de dispositivos móveis: geral.
- Ajustes do botão Fechar em Menu do dispositivo móvel: Estilo geral, o X que fecha o menu de navegação.
- Ícones de redes sociais e slogans não são exibidos em dispositivos móveis.
- Quando tocado, o ícone de busca abre uma sobreposição com uma barra de pesquisa. O fundo de sobreposição segue a cor de fundo do site.
Embora tenham estilos diferentes, o mesmo elemento é exibido em computadores e dispositivos móveis. Por exemplo, você:
- Pode - usar outra cor e fonte no título do site na versão móvel.
- Pode - exibir a barra de pesquisa em dispositivos móveis e ocultá-la em computadores.
- Não é possível – Exiba um título de site em um computador e um logotipo no celular.
Mais informações sobre a versão móvel
Lembre-se:
- As Páginas da loja têm opções de estilo móvel.
- A navegação do Índice desaparece em dispositivos móveis.
- A rolagem parallax funciona em dispositivos móveis.
- Os banners de vídeo às vezes não carregam em versões antigas de navegadores e em conexões de internet de velocidade lenta. Defina uma imagem de contingência para dispositivos móveis para ser exibida quando não for possível carregar o banner de vídeo.
- Títulos longos são separados por hifens e quebram para a linha de baixo.
- Diferente de alguns templates, você não pode desativar a opção de estilos móveis.
- Veja as nossas dicas de soluções de problemas para questões de banners e recortes de imagens em dispositivos móveis.
- Veja as nossas dicas gerais sobre como os sites se comportam em dispositivos móveis.
Templates na família Brine
Todos os templates da família Brine têm as mesmas opções de estilo e recursos. Você pode procurar templates do Brine na loja de templates da versão 7.0.
A família Brine inclui:
- Aria
- Basil
- Blend
- Brine
- Burke
- Cacao
- Clay
- Template personalizado (suspenso)
- Ethan
- Fairfield
- Feed
- Foster
- Greenwich
- Hatch
- Heights
- Hunter
- Hyde
- Impact
- Jaunt
- Juke
- Keene
- Kin
- Lincoln (descontinuado)
- Maple
- Margot
- Marta
- Mentor
- Mercer
- Miller
- Mojave
- Moksha
- Motto
- Nueva
- Pedro
- Polaris
- Pursuit
- Rally
- Rover
- Royce
- Sofia
- Sonny
- Sonora
- Stella
- Thorne
- Vow
- Wav
- West
Opções de idiomas
O Brine aceita duas opções de idiomas: