Obs.: embora os nossos guias mais acessados tenham sido traduzidos para o português, outros guias estão disponíveis apenas em inglês.

Família do template Brine

Com os templates da família Brine, você pode criar uma presença web profissional para qualquer marca ou empresa. Personalize os cabeçalhosrodapé, 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.

Páginas aceitas

O Brine aceita os seguintes tipos de página:

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.

brine-topbottom.png

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:

Adicione e estilize elementos de cabeçalho

Você pode adicionar qualquer um dos seguintes elementos à qualquer seção de cabeçalho:

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:

Links de Navegação de Rodapé:

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:

Você pode empilhar vários banners em um Índice.

brine-banner.png

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

Mais informações sobre banners

Lembre-se:

Á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.

brine-intro-area.png

Rodapé

Personalize o rodapé geral para ajudar os visitantes a obterem as respostas que procuram. O rodapé do Brine tem:

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.

brine-footer-columns.png

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.

brine-footer-stacked.png

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.

brine-index-sections-scroll.gif

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.

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).

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.

brine-index-nav.png

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.

brine-mirror-site-border.png

Mais informações sobre Índices

Lembre-se:

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.

brine-border.png

Fontes

Use essas opções de Estilos do Site para estilizar as fontes em seu site:

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

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.

brine-full-width.png

Design: Fundo Total

O conteúdo é exibido no valor da Largura, exceto o Espaçamento lateral. Os banners são exibidos sem margens.

brine-full-background.png

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.

brine-constrained-width.png

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.

brine-content-inset.png

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:

brine-background-colors.png

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.

Elementos de cabeçalho em dispositivos móveis são exibidos nas barras de navegação superior ou inferior.

brine-mobilebars.png

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.

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:

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:

Opções de idiomas

O Brine aceita duas opções de idiomas:

Este artigo foi útil?
Utilizadores que acharam útil: 116 de 225
Família do template Brine