O estilo e recursos da família de templates Bedford.

A versátil família de templates Bedford (Anya, Bedford, Bryant, Hayden) enbloga todos os tipos de site, de organizações sem fins lucrativos até anúncios imobiliários. Banners e botões personalizáveis especiais, navegação na barra lateral e uma Página Índice de rolagem colocam o foco em seus produtos, missão ou detalhes do evento. 

Este guia aborda os recursos e as opções de design da família Bedford. Os ajustes de estilos do site e a seção em que aparecem no painel Estilos do site estão em negrito.

Tipos de página compatíveis

Os templates Bedford 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. Nos templates Bedford, o cabeçalho tem o título do site ou logotipo e a navegação principal. Os slogans não aparecem. O cabeçalho é fixo nas Páginas Índice.

Estilize o título ou o logotipo do site com esses ajustes de Cabeçalho do site:

• Use Transparente nas Imagens de Banner para escolher se a identidade visual e a navegação são exibidas como uma sobreposição sobre banners de página ou sobre a Cor de Fundo do Cabeçalho.
• Ajuste o logotipo com a largura do contêiner do logotipo. A altura máxima é fixada em cerca de 100 pixels, e o logotipo não vai além disso.

Use os ajustes de Navegação do site para alterar as configurações de exibição da navegação principal.

• Quando a opção Ativar botão de nav estiver marcada, a última página na navegação principal aparecerá como botão. Mude o visual com os ajustes do Botão de nav. A lista suspensa não vira botão.
• Se não houver espaço na janela do browser para que os links de navegação apareçam no cabeçalho, aparecerá um ☰ (conhecido como menu ou ícone de hambúrguer).

Banners

Adicione imagens e vídeos de banner sem margens à parte superior das páginas e, em seguida, sobreponha-os com títulos, texto e botões personalizáveis. Você pode adicionar imagens de banner e vídeos a:

• Páginas de Layout
• Páginas de Álbum
• Páginas e publicações do Blog
• Páginas de Eventos e eventos individuais
• Páginas da loja

Lembre-se:

• Você pode marcar Transparente nas imagens do banner na seção Cabeçalho do site dos estilos do site para exibir o conteúdo do cabeçalho sobre o banner.
• Você pode adicionar banners de slideshow às Páginas de layout e blog.
• Você pode empilhar vários banners em Páginas Índice.
• Para todos os banners, use os ajustes da seção do Banner para ajustar fontes, cores e estilos para os botões e sobreposições de texto.

Banners de página

Para criar uma imagem ou um vídeo de banner no topo da Página de Layout, de Álbum, de Blog, de Evento ou da loja, adicione imagens em destaque ou URLs de vídeo nas configurações da página.

Adicione uma sobreposição de texto no campo de descrição da Página na guia Geral. Tenha em mente que somente usuários com permissões de Proprietário ou Administrador em um site podem adicionar uma descrição da Página. Você pode formatar o texto como cabeçalhos e botões. O texto do título da página não é exibido.

Banners de slideshow

Para criar um banner de slideshow no topo de uma Página de Layout, adicione um Bloco de Galeria em Slideshow como o primeiro bloco na página.

• O Bloco de Galeria não aparecerá na página.
• O banner de slideshow substitui o banner das páginas.
• Os vídeos adicionados ao Bloco de Galeria aparecem no banner, mas não são reproduzidos automaticamente. Eles incluem som e texto do banner de exibição.
• Para um melhor resultado, marque Cortar imagens automaticamente na aba Design do editor do bloco.
• Se o banner tiver uma sobreposição de texto, marque Mostrar título e descrição na guia Design. O título não será exibido.
• Os banners da apresentação de slides têm uma altura fixa:
• Desktop – 600 pixels. Se você marcar Transparente em imagens de banner na seção Cabeçalho do site dos estilos do site, a altura fixa da imagem se estende para 700 pixels.
• Dispositivo móvel — 300 pixels. Dispositivos com mais de 640 pixels exibem a altura do banner da área de trabalho.
• As Páginas do Blog também criam um banner em slideshow com as publicações em destaque.

Para adicionar um texto sobreposto, passe o cursor sobre uma imagem e clique em e ; em seguida, adicione o texto ao campo Descrição. Se você criou um link para uma galeria existente, atualize as descrições na Página Galeria.

• Você pode formatar o texto como cabeçalhos e botões.
• Se o texto em um banner de slideshow for muito longo para caber na altura fixa, o texto de descrição que não está em negrito não será exibido. O texto de descrição em negrito será recortado.

Texto e botões do banner

Para banners de página e slideshow:

• Textos em negrito são formatados como cabeçalho.
• Formatos de texto regulares como corpo de texto.
• Links no formato de última linha como botões. O link não pode incluir nenhum texto em negrito ou quaisquer outras linhas abaixo do link.
• Adicione altura extra ao banner da página adicionando espaços em branco.

Dica: depois de criar um link de botão, você pode editar o texto do botão diretamente do editor de páginas. Observe que, se você excluir todo o texto, o link também desaparecerá, e você precisará adicioná-lo novamente nas configurações da página.

Publicações de blog e banners de eventos

As imagens em destaque do item da coleção são exibidas na parte superior das publicações do blog e eventos individuais. Esses banners têm uma altura fixa.

• Eventos — nenhum texto é exibido no banner.
• Publicações do blog - o título da publicação e um tipo de metadados (escolha com o ajuste Metaprioridade) aparecem sobre a imagem do banner.

Adicione um filtro de cores

Adicione um filtro de cor a todas as imagens de banner ou vídeos com a Cor de sobreposição de banner na Seção de banner em estilos do site.

• A cor é exibida na área do banner enquanto a imagem do banner é carregada, mesmo que o ajuste seja transparente.
• A cor aparece na versão móvel caso não seja possível carregar o banner de vídeo e você não tiver definido uma imagem de contingência para dispositivos móveis.

Mais informações sobre banners

• Não use descrições de páginas para conteúdo baseado em SEO, pois esse conteúdo será exibido na página. Visite Aumentar a visibilidade do seu site para os mecanismos de pesquisa para saber mais sobre como otimizar seu site.
• Para obter ajuda com o recorte de imagens, visite Solução de problemas de corte.
• Para ajuda geral, acesse Adição de imagem de banner.

Rodapé

O template Bedford inclui área de conteúdo no rodapé e pré-rodapé, que você pode personalizar com blocos.

• O rodapé e o pré-rodapé podem incluir conteúdo automaticamente, como um Bloco de Links Sociais ou Bloco de Texto. Exclua ou edite esses blocos para substituí-los pelo seu próprio conteúdo.
• Os links de texto no rodapé e no pré-rodapé são sublinhados.
• As alterações feitas no rodapé aparecem em todo o site.

Estilize o conteúdo do rodapé com estes ajustes de Rodapé:

• Estilize a navegação de rodapé com ajustes da nav do rodapé.
• Use o ajuste Centrar navegação/Informações para alinhar a Nav do Rodapé e as informações de contato.
• Use os ajustes Informações do site para ajustar o estilo do número de telefone, do e-mail e do local físico nas suas configurações de Informações comerciais.
• Marque Ocultar Informações do Site para remover todas as informações de contato.

Dica: se não aparecerem os ajustes Informações do site e Ocultar informações do site, veja a prévia de outro template no site e cancele a prévia.

Navegação na barra lateral

Nas páginas da loja e nas páginas da lista suspensa, dos sites para membros e dos índices, o Bedford cria uma barra lateral de navegação.

• Use os ajustes da barra lateral para ajustar fontes e cores, ocultar títulos da barra lateral ou para ocultar a navegação por completo.
• A navegação na barra lateral não é compatível com blocos.
• Cada página adicionada a uma lista suspensa ou site para membros aparece como um link na barra lateral da navegação. A barra lateral aparece nas páginas de layout na lista suspensa ou no site para membros.
• Ao acessar o URL direto da página, as páginas do Índice mostram apenas a navegação na barra lateral.
• Nas Páginas da loja, a navegação da barra lateral mostra links para diferentes categorias de produtos. Clique num link para filtrar todos os produtos, exceto os da categoria.

Plano de fundo

Use estes ajustes para definir as cores de fundo do site:

• Área de conteúdo principal – Fundo da página em Conteúdo principal
• Cabeçalho – Cor de fundo do cabeçalho em Cabeçalho do site
• Pré-rodapé – Fundo do pré-rodapé em Pré-rodapé
• Rodapé – Fundo do rodapé em Rodapé

Fontes

Ajuste o estilo, o tamanho e a cor do texto com os ajustes Texto da Página e Título no conteúdo principal.

O cabeçalho do site, as navegações da barra lateral e os banners de página têm suas próprias opções de fonte e cor.

Páginas Índice

As páginas índice dos templates Bedford transformam o conteúdo de várias páginas em seções empilhadas para você destacar diferentes imagens e informações em um só local. A seção de conteúdo é criada na página de layout e é uma boa opção para adicionar texto, botões e outros blocos.

• Adicione imagens de destaque da página para criar imagens ou vídeos de banner ou para criar um slideshow de banner.
• Para empilhar vários banners, crie seções com imagens de banner, mas sem conteúdo de página. Nas páginas novas, apague o Bloco de Texto padrão. Enquanto estiver logado, você ainda verá um marcador de posição vazio.
• Estilize as cores e fontes da Página Índice com os mesmos ajustes que outras páginas. Não há ajustes específicos para a Página Índice.
• O título do site e a Navegação Principal permanecem em uma posição fixa depois de percorrer a primeira página. Use o ajuste Cor de fundo do cabeçalho para ajustar a cor de fundo do cabeçalho fixo.
• Páginas Índice são compatíveis com links âncora de índice. Quando os visitantes clicam nesses links, eles saltam para uma seção específica da Página Índice. Para ver isso em ação, clique no botão “Veja o nosso trabalho” no conteúdo demo de Hayden.
• Quando você acessa o URL direto de uma página que faz parte de um Índice, todas as páginas nesse Índice aparecem numa barra lateral de navegação.

Páginas do Blog

No Bedford, as Páginas do Blog aparecem como uma lista de publicações empilhadas na vertical.

Na página de destino:

• O link "Mais informações" aparece nas publicações com trechos. O texto e a seta do link seguem os ajustes da fonte do Texto da página e do estilo Cor do link da página.
• O conteúdo completo de postagens individuais é exibido sob o título para postagens sem trechos.

Em mensagens individuais:

• A imagem em destaque é exibida como um banner quando você visualiza uma publicação do blog individual em seu URL direto.
• Tags, URLs de origem, comentários, compartilhamentos e curtidas sempre são exibidos abaixo da publicação.
• Categorias sempre são exibidas acima da publicação.
• A navegação para publicações anteriores e seguintes é exibida abaixo dos comentários.

Estilize as páginas do blog na seção Blog dos estilos do site:

• Use Metadados prioritários para selecionar quais metadados (data, categorias ou nome do autor) aparecerão acima do conteúdo da publicação na página de landing.
• Desmarque Ocultar Rodapé de Entrada de Lista para exibir tags, a URL de origem, comentários, compartilhamentos e curtidas abaixo da publicação na página de destino.
• Para centralizar títulos e metadados da publicação na página de destino, marque Centralizar o título de entrada & Meta.
• Para mostrar ou ocultar os autores do blog na página de destino e de cada publicação, use Ocultar autor do texto. Esse ajuste não aparece com Meta prioridade: autor selecionado.

Barra lateral

Cada página de blog tem uma barra lateral personalizável. Todas as publicações de blog nesse blog também exibem a barra lateral.

Ative as barras laterais desmarcando Ocultar barra lateral do blog na seção Barra lateral dos estilos do site e, em seguida, adicione conteúdo com blocos.

Banners de slideshow

As cinco mais recentes publicações em destaque criam um banner de slideshow na página de destino.

• Cada slide exibe o título da publicação do blog, um tipo de metadados (escolha com o ajuste Metaprioridade) e um link de Ver publicação.
• A imagem em destaque é exibida atrás do texto. Se a publicação não tiver uma imagem em destaque, o texto será exibido sobre a cor de sobreposição do Banner.
• Use o ajuste Controles do slideshow do banner para controlar os elementos de navegação no banner do slideshow do seu blog.
• Se nenhuma de suas publicações estiver marcada como Destaque, o banner da página será exibido na Página do Blog.

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.

• Nas páginas e publicações do blog, o conteúdo da barra lateral do blog aparece abaixo do conteúdo principal.
• Como padrão, a barra lateral de navegação fica oculta. Toque em + (canto superior direito) para mostrar a barra lateral de navegação da página de loja e das páginas de uma lista suspensa, além das seções da página índice que o visitante acessa via link direto.
• Os banners de apresentação de slides têm uma altura definida de 300 pixels. Se o texto não couber no banner em slideshow, o texto da descrição não aparecerá.
• Você pode desativar os estilos móveis, mas não recomendamos.

Um link Voltar ao topo aparece no fim da página.

• O link segue os ajustes Fonte da nav do rodapé e Cor do link de nav do rodapé na seção Rodapé de estilos do site. Se esses estilos não aparecerem, adicione páginas temporariamente à sua navegação de rodapé.
• O link não é exibido na prévia por aparelho.

Em smartphones:

• A navegação se recolhe para o ☰ no canto superior direito. O ☰ sempre aparece na versão móvel, mesmo com a navegação principal vazia.
• A cor de fundo da sobreposição do menu é a mesma da do cabeçalho.
• Rodapés com informações comerciais têm um link de E-mail em vez de um endereço de e-mail completo.

Opções de idiomas

O Bedford aceita 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 Bedford

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.

Uma Página de Layout no meu Índice está sobrepondo outro conteúdo

Se uma Página de Layout no Índice tiver o slug de URL /cabeçalho, o site tratará a página inteira como o cabeçalho do Índice. Isso pode fazer várias páginas se sobreporem e causar problemas na edição do conteúdo da página.

Para corrigir, troque o nome do slug de URL da página; siga nossas dicas de formatação e slugs de URL reservados.

Um link no banner não se transforma em botão

Somente links na última linha da descrição são formatados como botão. Se o link não aparecer como botão, verifique o texto de sobreposição na descrição da página ou da imagem. Veja se o link não está em negrito e se não há quebras de linha após o link.

Se o link não estiver em negrito e não houver linhas abaixo dele, tente este método para solucionar o problema:

1. Abra a descrição da página ou a descrição da imagem desse banner.
2. Copie todo o texto no campo de descrição e pressione Ctrl + X ( Command + X no Mac).
3. Pressione Ctrl + Shift + V (Command + Shift + V em um Mac) para colar sem formatar.
4. Adicione novamente o link na última linha. Verifique se não há quebras de texto ou linha abaixo dele.
5. Salve e atualize a página.

O texto de descrição do banner não aparece no smartphone

No modo de visualização por dispositivo móvel, o banner em slideshow tem altura definida de 300 pixels. Se o texto não couber no banner em slideshow, o texto da descrição não aparecerá.

A imagem do banner não aparece

Para banners de página:

1. Abra o painel "Páginas".
2. Passe o cursor do mouse sobre sua página e clique em .
3. Verifique se há uma imagem em destaque ou URL de vídeo carregado na aba Mídia.
4. Se você adicionou uma URL de vídeo, role até a aba Mídia e veja se há uma imagem de contingência para dispositivos móveis. Ela aparece quando o banner não pode ser carregado.
5. Clique em Salvare atualize a página.

Para banners de slideshow:

1. Passe o cursor do mouse sobre a visualização da página e clique em Editar para abrir o editor de página.
2. Certifique-se de que o Bloco de Galeria de slideshow seja o primeiro bloco da página.
3. Passe o mouse sobre o Bloco de Galeria em Slideshow e clique em Editar para abrir o editor.
4. Verifique se as imagens ou os vídeos estão carregados nele.
5. Clique em Salvare atualize a página.

Para banners de slideshow do blog, certifique-se de que cada publicação tenha uma imagem em destaque em suas configurações.

As páginas de galeria não aceitam imagens de banner.

O banner fica mais curto em outro computador

O design responsivo do Squarespace leva em conta tanto o tamanho da janela do browser quanto a resolução da tela. Nos aparelhos com resolução mais baixa (máx. 1366 x 768), o banner aparece mais curto para se ajustar à resolução da tela.

Não é possível ir para uma página no Índice

No painel Páginas, clicar em uma página no Índice leva você ao local dela na Página Índice, além de mostrar o visual da página no contexto. Dessa forma, você organiza o Índice de forma eficiente.

Para ver o visual da página fora do Índice, vá para o URL direto da página sem estar logado ou acesse no modo de navegação anônima.

Não vejo o Bloco de Newsletter

Ao adicionar o Bloco de Newsletter em uma Página de Layout, o fundo padrão do bloco é transparente com texto branco. Se a página também for branca, o texto ficará invisível.

Para corrigir o problema: na seção Bloco de Newsletter do painel Estilos do Site, deixe o Estilo de newsletter em Claro; ou mude a transparência com o ajuste Cor de fundo.

Uma cor aparece ao rolar até o fim da página na versão móvel

Quando você rola até o fim do website no iPhone ou iPad, o efeito de "elástico" da Apple gera uma área em branco abaixo do fim do site.

Na família Bedford, a cor dessa área é a mesma do rodapé. Para mudar:

1. Abra o painel "Estilos do site".
2. Role até a seção de Rodapé e mude o ajuste Fundo do rodapé.

Para dar coesão, recomendamos uma cor sem transparência, pois essa área é sempre opaca. Por exemplo: no caso do vermelho predominantemente transparente, o rodapé aparecerá em rosa-claro, mas a área de "elástico" abaixo dele terá um vermelho vivo.

Como faço para recriar o botão "Exibir nosso trabalho"?

O botão “Veja nosso trabalho” no conteúdo de demonstração Hayden é um link de âncora da página Índice.

O link de navegação não aparece como botão

Antes de procurar a solução do problema, lembre-se:

• Somente a última página na Navegação principal pode aparecer como botão.
• A lista suspensa não é formatada como botões.

Se o botão de navegação não estiver sendo exibido:

1. Abra o painel "Estilos do site".
2. Role até a seção Navegação do site .
3. Verifique se o ajuste do botão Ativar nav está marcado.
4. Salve e atualize a página.

O ícone do menu de navegação aparece no computador

O símbolo ☰ aparece quando não há espaço suficiente para todos os links de navegação na janela do browser. Clique no ícone do menu para mostrar uma sobreposição de navegação.

Com o ícone do menu e a sobreposição de navegação, o site fica responsivo, compatível com a versão móvel e fácil de navegar. Não é possível excluir esse recurso. No entanto, você pode reduzir a largura e mostrar todos os links da seguinte forma:

• Reduza o número de itens de navegação. Um método é usar menus suspensos.
• Reduza o tamanho da fonte e o espaçamento da navegação usando o ajuste Fonte do link de navegação na seção Navegação do Site do painel Estilos do Site.
• Reduza a largura do título ou do contêiner do logotipo do site na seção Cabeçalho do site do painel Estilos do Site.

Meu menu no dispositivo móvel não abre

O menu no dispositivo móvel não abre se você adicionou um banner de vídeo à página inicial usando um URL ou código de incorporação inválido. Para editar o URL do vídeo:

1. Abra o painel "Páginas".
2. Passe o cursor do mouse sobre o título da página inicial no painel esquerdo e clique em .
3. Clique na aba Mídia e depois em Vídeo.
4. Confirme se o campo de URL do vídeo contém um URL válido.

O banner da página é curto demais ou corta a imagem

Dê mais altura ao banner de página; para isso, pressione a tecla Return ou Enter acima ou abaixo da descrição da página e adicione espaços vazios. Isso pode corrigir cortes e ampliar o tamanho geral do banner na página, dando um efeito chamativo.

Para adicionar um espaço vazio sob um botão, pressione Shift + Enter ou Shift + Return para cada linha que você deseja adicionar.

Banners empilhados no Índice

Para empilhar imagens de banner sem nenhum espaço vazio entre elas, crie páginas de layout com imagens em destaque, mas sem nenhum conteúdo de página. Somente as imagens do banner e a sobreposição de texto aparecerão em cada página. Em cada página de layout, apague o bloco de texto padrão, ou aparecerá um espaço vazio entre cada banner.