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.
- Escolha como as imagens de banners são centralizadas alterando seus pontos focais.
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
Em uma área de blocos, as informações comerciais e a navegação são exibidas horizontalmente, com uma área de blocos acima e abaixo. Pastas e Páginas Índice criam colunas. Os títulos da Página Índice e das pastas são exibidos como cabeçalhos que não são links, com os links da subpágina abaixo.
Layout: Empilhado
As informações comerciais e a navegação são empilhadas verticalmente, com áreas de blocos acima, entre e abaixo. Os títulos da pasta e da Página Índice não são exibidos e seus links de subpágina são exibidos horizontalmente.
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.
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 de Armazenamento – 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 em um ☰.
- 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 de Armazenamento 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: