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 são arrojados e conectam à lista de todos os ajustes do Brine para ajudá-lo a navegar no painel.
Dica: a página de pré-visualização ao vivo do Brine mostra sites reais de clientes que usam o template.
Páginas aceitas
O Brine aceita os seguintes tipos de página:
- Páginas de Álbum
- Páginas do Blog - grade/lista 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 de Produtos - 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 em Cabeçalho: Layout.
- 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 em 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 será a mesma da página (Cor no Principal).
Para alterar a altura do cabeçalho inferior:
- Todas as páginas - altere o Espaçamento no Cabeçalho: Inferior e o Espaçamento de Introdução no Principal.
- Páginas individuais - adicione a altura com quebras de linha na área de introdução.
- Páginas de Índice - altere a altura da seção de Í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
Use o Cabeçalho: Layout para escolher onde serão exibidos ou para ocultá-los. Por exemplo, escolha Posição da Identidade Visual: Centro Superior para adicionar o título ou o logotipo do site no meio do cabeçalho superior.
Estilize-os em cada uma de suas seções de Cabeçalho. Por exemplo, vá para a seção 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 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 editados no Cabeçalho: navegação primária e Cabeçalho: navegação secundária. A opção Estilo: botão, por exemplo, transforma o link da navegação primária ou secundária em botão.
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 de miniatura 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 postagens de 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 Cor de Sobreposição em Principal: Sobreposição.
- Adicione texto e outros blocos, como Bloco 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 lentamente do que o restante da página ao 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 Recorte inteligente parallax em Site: carregando para que os banners sejam recortados o mínimo possível.
- 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.
- Mais ajuda em Adição de 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 (Layout no Rodapé).
Estilize as fontes e as cores nas seções 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 modelos Brine utiliza uma página de blog de grade/lista padrão. Para mais informações sobre os recursos exclusivos e as opções de estilo desse tipo de blog, acesse Páginas de Blog de grade/lista padrão.
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 no Í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 miniatura da página para adicionar imagens ou vídeos de banners de fundo nas seções.
- Os banners podem ter rolagem parallax.
- Se não houver banner, a cor de fundo será a mesma da página (Cor no 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.
No Índice: Galeria:
- 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 Í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 recurso de Estilizar, no Índice: Navegação. Ao clicar em um ponto ou linha, os visitantes são direcionados à 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 Borda Espelhada abaixo da primeira página no Índice: Página, ou Borda Espelhada abaixo da primeira galeria no Í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 (Cor, em Principal). Para obter os melhores resultados, use a mesma 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 a opção Ativar o carregamento Ajax em Site: Carregamentos.
- Estilize ou oculte a barra de carregamento exibida durante o carregamento de páginas usando os outros ajustes em 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. 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 de (Sobreposição)
- Seções Índice de Galeria - Índice: Galeria
- Elementos de cabeçalho - em 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:
- Páginas de Blog e Produtos - botões de compartilhamento avançados
- 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 em 880 pixels. A cor de fundo da área de conteúdo é definida no Principal.
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 no 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
- Border - Cor em 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 no 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 recurso de Ponto de quebra no dispositivo móvel, na versão 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 um elemento de cabeçalho para ela. Por exemplo, vá para Dispositivo Móvel: Identidade Visual e escolha Posição: Superior Esquerdo para adicionar a barra superior.
- Escolha se a barra superior será fixada na parte superior ou se rolará para cima, junto com a página, por meio do recurso Fixo Superior Dispositivo Móvel em Dispositivo Móvel: Superior.
- A barra inferior é sempre fixa.
- Defina as cores de fundo em 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 das suas seções de Dispositivos Móveis. Por exemplo, estilize o título ou o logotipo do site em Dispositivo Móvel: Identidade Visual.
- A navegação se recolhe em um ☰.
- Defina a cor de fundo da navegação com o recurso de Cor do Menu no Menu do Dispositivo Móvel: Geral.
- Ajustes do Botão Fechar no Menu do Dispositivo Móvel: Geral estiliza 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 pode - exibir um título do site em computadores e um logotipo em dispositivos móveis.
Mais informações sobre a versão móvel
Lembre-se:
- As Páginas de Produtos oferecem opções de estilos móveis.
- 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 e recursos de estilo. Você pode navegar pelos templates Brine na loja de templates.
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
Exemplos de clientes
Para ver exemplos de sites reais de clientes, clique nos links abaixo e role até Clientes usando esse template. Como todos os templates nesta família têm os mesmos recursos, você pode usar esses sites como fonte de inspiração mesmo que seu template não esteja na lista abaixo.
- Brine
- Clay
- Feed
- Foster
- Greenwich
- Hatch
- Heights
- Hunter
- Hyde
- Juke
- Marta
- Mercer
- Motto
- Mojave
- Nueva
- Pedro
- Rally
- Rover
- Sonora
- Thorne
Opções de idiomas
O Brine aceita duas opções de idiomas: