O estilo e recursos da família de templates Pacific.
A família de templates Pacific (Bryler, Charlotte, Horizon, Naomi, Pacific) usam sobreposições de texto e uma Página Índice sem margens de rolagem para vincular todo o seu conteúdo em uma única voz.
Este guia aborda os recursos e opções de design da família de templates Pacific. Os ajustes Estilos do site e a seção em que eles aparecem no painel Estilos do site estão em negrito.
Páginas aceitas
Os templates Pacific aceitam os seguintes tipos de página:
- Páginas de Álbum
- Páginas de Blog — lista
- 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 – Clássica
Cabeçalho
Para navegar no site, os visitantes usam o cabeçalho no topo. No Pacific, o cabeçalho contém o título ou logotipo (identidade visual) do site e links de navegação.
- A identidade visual fica centralizada.
- A página inicial do índice pode ter navegação fixa.
Estilize as fontes e cores do cabeçalho com os ajustes do Cabeçalho do site:
- Especifique a cor do cabeçalho com Cor de fundo.
- Mostre banners atrás do cabeçalho com Transparente nas imagens do banner.
- Altere o tamanho do título do site com o controle deslizante Tamanho da fonte no ajuste Fonte do título do site. Para evitar distorções, não use mais do que 72 pixels.
- Altere o tamanho do logotipo com a largura do logotipo.
Estilize os links de navegação com os ajustes de Navegação do site. Escolha se a navegação aparece na página ou atrás de um ícone ☰ com Sempre usar navegação de sobreposição.
- Com essa opção desmarcada, os links de navegação aparecem abaixo da identidade visual ou divididos em cada lado. Vai depender do número de páginas e da largura do browser.
- Altere a Cor do link e especifique o plano de fundo da sobreposição com Cor do plano de fundo.
- Na sobreposição ☰, os links são ajustados automaticamente para se adequarem ao menu. O ajuste Fonte do link: tamanho da fonte não os afeta.
Banners
O Banner cria um elemento visual para dar o tom da sua página. Para criar um, adicione imagens e vídeos em destaque da página.
- Os banners aparecem na Páginas de Álbum, de Blog, de Eventos, de Galeria (somente imagem), de Produtos e de Layout.
- Empilhe vários banners na vertical no Índice.
- Os títulos e as descrições da página e o cabeçalho do site podem sobrepor o banner.
- Adicione um filtro de cor com o ajuste de Cor de sobreposição no banner da página. As seções de índice têm cores de sobreposição separadas.
Texto do banner
Os títulos e descrições das páginas podem ser exibidos nos banners.
- Estilize as fontes com os ajustes do Banner da página. Ocultar todos os títulos com Mostrar título da página.
- Para remover descrições de página, exclua-as das Configurações de página. Para removê-las sem afetar a altura do banner, substitua o texto por quebras de linha.
- Para usar outro texto nos resultados de busca, adicione títulos e descrições de SEO.
Altura do banner
Para alterar a altura, você pode:
- Alterar o Espaçamento no Banner da página.
- Adicionar altura à descrição da página adicionando quebras de linha.
Mais informações sobre banners
Lembre-se:
- Às vezes, os banners de vídeo não são exibidos na versão móvel, dependendo da velocidade da conexão e da versão do navegador. Nos dispositivos móveis, defina uma imagem de contingência para que ela apareça quando não for possível carregar o banner do vídeo.
- Se uma Página de Galeria não tiver uma imagem em destaque, a primeira imagem automaticamente virará o banner sempre que você fizer uma alteração na Galeria. Para não ter nenhum banner na Página de Galeria, abra Configurações de página e exclua a imagem em destaque.
Plano de fundo
Defina a cor de fundo do site com o ajuste Cor de fundo em Conteúdo principal.
- O cabeçalho, os rodapés e o pré-rodapé têm suas próprias cores de fundo.
- Você pode definir cores de plano de fundo alternadas para seções em um Índice.
Rodapé
No Pacific, personalize o rodapé geral do site com blocos. O rodapé pode incluir links de navegação, informações de contato e uma segunda área de conteúdo chamada pré-rodapé.
Estilize o rodapé, as informações de contato e os links de navegação do rodapé com os ajustes do Rodapé:
- Exiba e estilize as informações de contato com os ajustes de Informações do Site.
- Altere as informações com os campos Local físico, E-mail para contato e Número de telefone para contato em Informações comerciais.
Dica: se não aparecer o ajuste Informações do site, faça uma prévia de outro template no site e cancele a prévia.
O pré-rodapé é exibido acima do rodapé.
- Estilize as cores do plano de fundo e do texto na seção Pré-rodapé dos estilos do site.
- Para mostrar o pré-rodapé, escolha Conteúdo: personalizado. Para ocultá-lo, escolha Conteúdo: vazio.
Lembre-se:
- O conteúdo demo de alguns templates inclui um Bloco de Links de Redes Sociais. Para excluir os ícones de redes sociais, apague o bloco.
- Os links de texto no rodapé e no pré-rodapé são sublinhados.
Páginas do Blog
No Pacific, as Páginas do Blog aparecem como uma lista de publicações empilhadas na vertical.
Na página de destino:
- Para mostrar filtros de categoria no topo da página, adicione navegação de categorias.
- As imagens em destaque de publicações são exibidas abaixo do título das publicações que tiverem trechos
- Os trechos exibem links "Mais informações".
- O conteúdo completo de postagens individuais é exibido sob o título para postagens sem trechos.
Em mensagens individuais:
- Publicações individuais têm navegação para publicações anteriores e seguintes abaixo dos comentários.
- Os Blocos de Texto em coluna simples são inseridos em cada lado. Variar o layout melhora o visual das suas publicações. Não há opções para alterar a largura do recuo.
Estilize os metadados com os ajustes do Blog:
- Data, categorias e nomes de autor aparecem acima da publicação. Para deixar um deles acima do título da publicação, use a Prioridade meta.
- Para ocultar o nome de um autor, escolha Ocultar autor. Este ajuste não está disponível com a Meta Prioridade: autor selecionada.
- URLs de origem, tags e comentários, curtidas e botões Compartilhar são exibidos abaixo da publicação. Marque Ocultar rodapé de entrada de lista para ocultá-los.
Estilize o texto com estes ajustes de conteúdo principal:
- Ajuste o estilo dos metadados com os ajustes Meta.
- Os títulos da publicação seguem os ajustes do Título 1.
- O corpo de texto segue os ajustes da Fonte do texto e Cor do texto.
Páginas Índice
No Pacific, a página índice transforma o conteúdo de várias páginas em seções empilhadas. Dessa forma, você destaca diferentes imagens e informações em um só local.
- A seção de conteúdo consiste em páginas de layout. Ela é uma boa opção para adicionar texto, botões e outros blocos.
- As seções Índice de Galeria são feitas das Páginas de Galeria e podem aparecer em grade ou em slideshow.
- As seções do álbum são feitas das Páginas de Álbum.
- Nas seções de conteúdo e de álbum, as imagens em destaque das páginas aparecem como plano de fundo.
Seção de Índice da galeria
Estilize as seções de índice da galeria na seção Galeria de índice do recurso Estilos do Site. Especifique o layout de todas as seções do índice da galeria com o ajuste Design.
Para layouts de slideshow:
- Escolha se as galerias devem ter Reprodução automática e deixe a Transição do slideshow em Esvanecer ou Rolar.
- Adicione ou oculte elementos de navegação com os Controles da galeria.
- Adicione um ícone de olho para o visitante ativar ou desativar legendas com Alternar sobreposição de galeria.
- Os títulos e as descrições das imagens centralizam-se sobre a imagem.
Para layouts de grade:
- Escolha quantas imagens aparecerão na horizontal com Máximo de colunas da grade.
- O título da imagem aparece ao passar o mouse por cima dela. Descrições de imagem não são exibidas.
Vídeos adicionados à galeria:
- Na versão móvel, abra no lightbox.
- Podem ser reproduzidos automaticamente.
Fundos da seção
Para seções de conteúdo e de álbum:
- As imagens apresentadas na página são exibidas como plano de fundo.
- Seções sem imagens em destaque exibem a cor de fundo do site.
- Use o ajuste Separador de seções no Índice para escolher o que acontece quando há duas seções consecutivas sem imagens de fundo. Você pode ter cores de fundo alternadas ou uma borda dividindo seções.
Para seções de índice de galeria:
- Layout de slideshow — as imagens são exibidas sem margens.
- Layout de grade - O ajuste de cor de sobreposição da Galeria na Galeria de índices é exibido totalmente opaco em qualquer espaço vazio na grade.
Sobreposições de cores
Você pode adicionar um filtro de cores a imagens e vídeos. Isso ajuda qualquer conteúdo sobreposto a se destacar.
- Seções de conteúdo e álbum - Use o ajuste Cor em Sobreposição de índice.
- Seções de índice da galeria - Use o ajuste de cor de sobreposição da Galeria em Galeria de índices. A cor só é exibida em imagens com títulos ou descrições. Para layouts de grade, a cor é exibida ao mover o cursor.
Altura da seção
Para alterar a altura das seções de conteúdo e álbum, adapte o espaçamento com os seguintes ajustes:
- Seções com imagens de banner - Use o preenchimento de página em Sobreposição de índice.
- Seções sem imagens de banner - Use o Espaçamento de página no índice.
- Para seções de conteúdo, você também pode adicionar altura adicionando quebras de linha extras ao conteúdo da página.
Altere a altura das seções de índice da galeria com os ajustes da galeria de índice:
- Layout em slideshow — altere a Proporção da imagem no slideshow.
- Layout da grade — altere a Proporção da imagem na grade e o Número máximo de colunas da grade.
Links de navegação
Nas Páginas Índice que funcionam como página inicial:
- A navegação do cabeçalho pode ser bloqueada para aparecer na parte superior da janela do navegador quando você rolar para baixo após a primeira seção na página Índice (navegação fixa).
- É possível adicionar links para seções de conteúdo e de álbum à navegação. Quando você clica no link, a página rola para essa seção.
Para bloquear a navegação, escolha Navegação de rolagem do índice: mostrar na rolagem na seção Navegação do site dos estilos do site. Defina a cor de fundo de navegação com a cor de fundo em Cabeçalho do site.
Lembre-se:
- A identidade visual do site não será exibida.
- Você deve ter mais de uma seção em seu Índice para que a navegação bloqueada apareça.
Para criar links de navegação para seções de conteúdo e álbum, marque o ajuste Expandir links de índice da página inicial em Navegação do site.
- As seções de índice da galeria não aparecem na navegação. Para criar um link para elas, use um link de âncora de Índice.
Mais ajuda com a Página Índice
- A opção Editar anotações pode não aparecer nas seções vazias. Para editar uma página vazia, tire-a do Índice, adicione conteúdo e, em seguida, reponha-a.
- Para alterar a cor de Botão, de Formulário e dos Blocos de Citações sobre uma imagem, use os ajustes de Sobreposição de índice.
- Nas seções de álbum, os botões de compartilhamento sempre aparecem.
Navegação de categorias
Os visitantes usam links de navegação de categorias para filtrar páginas por categorias de publicação ou de produtos.
Adicione e estilize navegações de categoria na parte superior das páginas do blog e da loja na seção Navegação por categoria dos estilos do site. As alterações de estilo afetam todas as navegações de categoria no site.
Carrinho de compras
Quando o cliente adiciona um produto ao carrinho, um botão de carrinho de compras aparece no canto superior direito de todas as páginas. Para ajustar o estilo do botão:
- Adicione pelo menos um produto ao seu carrinho para que o botão do carrinho apareça.
- Altere a cor de fundo do botão Carrinho e os ajustes de cor da fonte do botão Carrinho no Cabeçalho do site.
Dispositivo móvel
O design responsivo e integrado do Squarespace permite que seu site se ajuste a qualquer dispositivo e tenha aparência e navegabilidade aprimoradas.
- A navegação se fecha em ☰ no canto superior esquerdo e pode ficar bloqueada enquanto você rola pelas Páginas Índice definidas como a página inicial.
- O título ou logotipo do site aparece no centro do topo, com altura máxima de 50 pixels.
- O botão do carrinho de compras é exibido no canto inferior direito.
- Você pode desativar os estilos móveis, mas não recomendamos.
- As galerias de grade exibem duas imagens por linha. Se você tiver um número ímpar de imagens, haverá um espaço em branco ao lado da imagem final.
Os cabeçalhos não serão exibidos além desses tamanhos máximos na versão móvel:
- Título 1 — 34 pixels
- Título 2 — 26 pixels
- Título 3 — 20 pixels
Em smartphones:
- Um link Voltar ao topo aparece na parte inferior acima do rodapé.
- Na Página Índice, as galerias não mostram a descrição das imagens.
Opções de idiomas
Dentro desta família, os templates Charlotte, Naomi e Pacific oferecem duas opções de idioma:
- Escolha o idioma do texto interno do seu site, como de formulários de envio e da mensagem de Confirmação do Pedido.
- Inicie um novo site com um template em francês, alemão, italiano, português ou espanhol.
Solução de problemas do Pacific
Confira a seguir alguns problemas comuns com esse template. São bugs ou problemas conhecidos. Oferecemos suporte para o Squarespace versão 7.0, mas corrigir bugs ou problemas não é nossa prioridade enquanto nos dedicamos à nossa atual plataforma, a versão 7.1. Para mudar seu site da versão 7.0 para a versão 7.1, use nossa ferramente de atualização.
Adicionar links de RSVP ou de listas de casamento
Para adicionar esses links:
- Crie um botão RSVP em uma página de layout usando um Bloco de Formulário. Esse bloco coleta informações dos visitantes.
- Crie links de registro em uma página de layout com um Bloco de Galeria de grade, usando imagens com URLs de clickthrough para diferentes sites de lista de casamento.
- Para ver um exemplo de como isso fica na prática, veja a página de visualização ao vivo da Naomi.
Alterar os cabeçalhos e o texto nas Páginas Índice
Dentro de um índice, a forma como você ajusta a cor e o tamanho do título e do texto depende do tipo de página e se há uma imagem de banner ou não. Estilize isso em Estilo do Site.
Para seções de conteúdo e de álbum com imagens de fundo:
- Altere a fonte e a tipografia com os ajustes da seção Conteúdo principal.
- Ajuste a cor e o tamanho usando os ajustes da seção Sobreposição de índice.
Para seções de conteúdo e álbum sem imagens de fundo:
- Altere a fonte, a tipografia, a cor e os tamanhos com os ajustes da seção Conteúdo principal.
Para Páginas de Galeria, use a seção Galeria de Índice.
Criar um banner sem recorte com um índice
Os banners de página em qualquer modelo sempre sofrem algum corte, especialmente em dispositivos móveis.
Com a Página Índice da família Pacific, é possível criar a aparência de um banner de cabeçalho que não será recortado:
- Adicione uma Página Índice.
- Adicione uma Página de Galeria ao índice.
- Adicione sua imagem de banner preferida à Página de Galeria. Não adicione mais de uma imagem, pois isso afetará o corte.
- Adicione texto aos campos Título da imagem e Descrição. Esse texto será exibido sobre a imagem.
- Em Estilo do Site, role para baixo até Galeria de índice e selecione Design: slideshow e Proporção da imagem de slides: automático.
- Adicione qualquer conteúdo de página que você quiser exibir abaixo do banner como uma segunda página no Índice.
Use estes ajustes em Estilos do site para ajustar ainda mais como a imagem da Página de Galeria será exibida:
- Transparente em imagens de Banner - Exibe o cabeçalho do site sobre a imagem.
- Cor da sobreposição da galeria - Ajusta o filtro de cores sobre a imagem.
- Título da galeria e descrição da galeria - Ajuste a fonte e a cor do texto da imagem da galeria.
Aqui está um exemplo de como a página pode ficar:
As imagens da galeria são mais escuras do que o normal no índice
A Página Índice pode estar exibindo a seção Índice da galeria com um filtro parcialmente opaco.
Para alterar ou remover essa cor de sobreposição, use o ajuste Cor de sobreposição da galeria da seção Galeria de índice do Estilos do site. Use o controle deslizante de opacidade para alterar a transparência.
As cores de sobreposição da galeria não estão aparecendo
A cor da sobreposição da galeria aparece quando há uma descrição ou um título para essa imagem. Se não houver descrição ou título, a cor da sobreposição não será exibida.
Para saber como adicionar um título ou uma descrição de imagem, acesse Como usar Páginas de Galeria.
Como faço para estilizar o pré-rodapé?
Se o pré-rodapé não tiver conteúdo, não estará visível quando Estilos do Site estiver aberto. Para vê-lo:
- Saia dos Estilos do Site.
- Adicione conteúdo ao pré-rodapé.
- Reabra os Estilos do Site para continuar fazendo alterações.
Não encontro o pré-rodapé
Você pode ter definido o Pré-rodapé como Conteúdo: vazio nos estilos do site. Isso oculta seu pré-rodapé dos visitantes e da edição. Para tornar o pré-rodapé visível novamente:
- Abra o painel "Estilos do site".
- Role a tela até achar o Pré-rodapé.
- Usando a lista suspensa, deixe Conteúdo como Conteúdo: personalizado.
- Se necessário, altere o estilo, como do plano de fundo, do cabeçalho e da cor do texto.
- Clique em Salvar na parte superior do painel.
Não consigo ver minha borda de separação
Se você não conseguir ver as bordas separadas entre as seções sem imagens de banner:
- Abra os Estilos do Site enquanto estiver na Página Índice.
- Na seção Índice, marque Separador de seção: borda.
- Altere o ajuste da cor da borda. Talvez seja necessário alterar a transparência.
A Página Índice não rola até o topo
Quando a Página Índice é definida como a página inicial, os links da Página Índice na navegação levam você para o topo de cada seção da Página Índice. Para que o link da seção superior leve para o topo do site:
- Vá para a sua Página de Índice.
- Abra o painel "Estilos do site".
- Na seção Cabeçalho do site, marque Transparente nas imagens do banner.
Isso exibe o título do site e a navegação sobre os banners do site, incluindo a seção superior do Índice. Agora, um clique no link da seção superior do Índice (por exemplo, o link Home no site de demonstração do Pacific) levará ao topo do site.
Se a Página Índice ainda não estiver rolando para o topo, verifique se a primeira página no Índice é uma Página de layout e não uma Página de Galeria ou de Álbum. As Páginas de Galeria e de Álbum não aparecem na navegação da Página de Índice.
A Página Índice tem cores de fundo alternadas
Duas ou mais seções sem imagens de banner em uma Página Índice podem apresentar cores de fundo alternadas.
Para desativar esse recurso, escolha o ajuste Separador de seção: borda na seção Índice dos Estilos do Site. Isso adiciona uma borda entre duas seções consecutivas sem imagens de banner.
O ícone de navegação é exibido no lugar dos links de navegação principal
Para desativar esse recurso, desmarque Sempre usar navegação de sobreposição na seção Navegação do site dos estilos de sites. A navegação será exibida como texto novamente.
Em determinados navegadores estreitos, como dispositivos móveis, a navegação sempre se recolhe atrás de um ☰, mesmo que você o tenha desativado. Isso faz parte do design do template.
Os links de navegação estão ausentes
Primeiro, confirme se as páginas que você deseja em sua navegação estão na seção Navegação principal do painel Páginas.
Em seguida, abra o painel "Estilos do site". Vá para a seção de Navegação do site e confira estas dicas para solução de problemas:
- Se uma Página Índice estiver definida como a página inicial, confirme Expandir índice da página inicial l tintas está marcada.
- Se a navegação estiver sendo exibida como um ícone de menu no canto superior esquerdo, desmarque Sempre usar navegação dom sobreposição.
- Verifique se a Cor do link não é transparente.
As seções do Índice do Galeria não criam links na navegação. Em vez disso, adicione uma seção de conteúdo logo acima da seção Índice de galeria para apresentá-la; ou adicione um link de âncora de Índice.
O menu de navegação é exibido atrás do título do site
Isso pode acontecer quando você desmarca pela primeira vez os links Expandir índice da página inicial nos estilos do site. Salve as alterações e atualize a página. A navegação aparecerá abaixo do título do site.
O título do site é redimensionado após o carregamento
Isso acontece quando o título do site é grande demais para o contêiner. Para corrigir esse problema:
- Clique no ajuste Fonte do título do site na seção Cabeçalho do site de Estilos do site para garantir que o tamanho da fonte seja 72 pixels ou menor.
- Use o ajuste Largura do contêiner do título do site para alterar o tamanho do contêiner para que se ajuste ao título do site.
Para obter o melhor design, limite o tamanho do título do site a 72 pixels ou menos. Qualquer tamanho maior causará distorção no título do site, independentemente da largura do contêiner.