Na família de templates York, a página de projetos é uma galeria personalizada, específica para criar um elegante layout de portfólio. Para chamar a atenção, use a página de projetos para criar um layout que misture texto e imagens.

York, Artesia, Flores, Harris, Jasper, Jones, Lange, Shibori e Taylor têm a mesma estrutura e funcionalidades. Este guia vale para todos esses templates. Eles também aceitam páginas de galeria, que oferecem diferentes opções.

A versão 7.1 não aceita páginas de projeto. Você não pode adicionar ou editar Páginas de projeto no aplicativo Squarespace.

Configure a Página de Projetos

Para configurar uma Página de Projetos:

1. Abra o painel "Páginas".
2. Clique no ícone + para adicionar um projeto.
3. Para um resultado melhor, adicione várias imagens ou vídeos e dê a cada um deles um título e uma descrição.

Adicione imagens e vídeos

Para adicionar imagens e vídeos:

1. Abra o painel "Páginas".
2. Clique na Página de Projetos no painel esquerdo.
3. Carregue imagens, adicione imagens de acervo e adicione vídeos. Os vídeos devem ter uma miniatura.
4. Especifique o status de publicação da imagem ou do vídeo.

Para editar as configurações das imagens e vídeos que você enviou, clique duas vezes na imagem ou no vídeo no painel lateral.

Layout

Use a seção Projeto: layout dos estilos do site para ajustar o layout.

• Alinhamento da imagem - alinhe todas as legendas e imagens à direita, à esquerda ou ao centro.
• Espaçamento da imagem - ajuste o espaço entre cada imagem no projeto.
• Espaçamento do banner - ajuste o espaço entre o cabeçalho da página e a primeira imagem. A altura do texto na seção Página: texto de introdução também ajusta isso.
• Permitir retrato e quadrado de largura total - mostra imagens em formato quadrado ou em retrato na largura da área de conteúdo principal. Se a opção Projeto sem margens for selecionada, elas aparecerão na largura do browser. Esse ajuste aparece quando o Estilo de legenda quadrado ou em retrato está como Padrão ou Offset.

Atenção: as páginas do projeto não são compatíveis com lightboxes ou URLs de links diretos. Você pode adicionar URLs de clickthrough às imagens da página do projeto, o que funcionará quando estiver conectado a blocos de galeria ou blocos de sumário, mas não funcionará na própria página do projeto. Se você quiser um link que funcione na página do projeto, adicione um link para a legenda da imagem.

Adicione legendas

Para adicionar ou ajustar o texto de um título e descrição:

1. Abra o painel "Páginas".
2. Clique na Página de Projetos.
3. Clique duas vezes na imagem no painel lateral.
4. Adicione o texto aos campos Título e Descrição.

O título e a descrição aparecem abaixo das imagens em paisagem; e abaixo ou ao lado da imagens quadradas ou em retrato. Ajuste o layout delas na seção Projeto: layout dos estilos do site.

• Use o ajuste Mostrar legendas do projeto para exibir ou ocultar todos os nomes de imagens e o texto de descrição.
• Na paisagem sem legendas, a opção Recolher espaçamento da paisagem exclui o espaço abaixo das imagens.

Use os ajustes de Projeto: seção de fontes nos estilos do site para editar o estilo do texto do título e da descrição da imagem.

• Para justificar o texto à esquerda, à direita ou ao centro, use os ajustes Alinhar título da legenda e Alinhar corpo da legenda.
• Nas legendas que aparecem ao lado das imagens quadradas ou em retrato, use o ajuste Alinhar legendas alternativas à imagem.

Se você selecionou Alinhamento de imagem: centralizar e marcou Mostrar legendas do projeto, é possível fazer mais ajustes onde as legendas aparecem na página, com os ajustes Estilo de legenda quadrado e em retrato e Estilo de legenda em paisagem.

• Nos dois ajustes, a opção Padrão mostra a legenda diretamente abaixo da imagem; e a opção Offset move a legenda mais para baixo, igualmente espaçada em relação à imagem seguinte.
• O Estilo de legenda quadrado ou em retrato: alternar move as legendas para o lado das imagens quadradas e em retrato. As legendas alternam da esquerda para a direita. Imagens sem legendas ficarão centralizadas.
• A opção Estilo de legenda em paisagem: inserção move as legendas para baixo das imagens em paisagem para se sobreporem ligeiramente.

Tamanhos de imagem e vídeo

As imagens na Página de Projetos nunca são maiores do que as dimensões originais, mesmo se definidas como sem margens. Isso evita que as imagens fiquem embaçadas ou pixeladas.

• Em geral, o tamanho da imagem na Página de Projetos é determinado pelas dimensões originais da imagem. Para que a imagem pareça maior na página, carregue uma imagem com dimensões maiores.
• Para reduzir o tamanho da imagem na página, carregue uma imagem com dimensões menores.
• O ajuste Espaçamento externo do site pode afetar a largura das imagens sem margens.
• A largura do vídeo é definida pelo site de hospedagem. Para personalizar a largura do vídeo, use o código de incorporação do vídeo e defina a largura manualmente dentro do código.
• Você encontra ajuda com banners e design responsivo nas nossas melhores práticas.

Imagem sem margens

As imagens sem margens se estendem até bordas do browser, ignorando o espaçamento externo. Para ativar essa opção, primeiro veja se as imagens são grandes o suficiente. Na página de projetos, as imagens nunca se estendem além das dimensões originais e só chegam a 2.500 pixels, devido ao modo como o Squarespace otimiza o design responsivo. Porém, recomendamos imagens com pelo menos 2.500 pixels de largura para um resultado melhor.

Se as imagens forem grandes o suficiente, você pode usar os estilos do site para deixá-las totalmente sem margens. Isso afeta todas as páginas de projetos do site.

Na Página de Projetos, as imagens só aparecem sem margens quando:

• As imagens estão centralizadas.
• As legendas estão abaixo das imagens.
• As imagens em paisagem devem estar sem margens antes de deixar as outras imagens sem margens.

Para mostrar todas as imagens sem margens, primeiro defina as imagens em paisagem:

1. Abra Estilo do site e role até a seção Projeto: layout.
2. Escolha Alinhamento da imagem: centro. Isso centraliza as imagens.
3. Veja se Mostrar legendas do projeto está marcada, mesmo que você não tenha legendas.
4. Escolha Projeto sem margens. Isso tira as margens das imagens em paisagem.

Em seguida, defina as imagens que não sejam em paisagem:

1. Escolha o estilo Retrato e legenda quadrada: padrão ou deslocado. Isso move todas as legendas abaixo de suas imagens que não são da paisagem.
2. Marque Permitir retrato e quadrado de largura total. Isso define suas imagens que não são da paisagem sem margens.
3. Save and refresh the page.

Mova imagens

Para reorganizar a ordem das imagens na página, altere a ordem dentro do painel da página. O painel lateral tem a mesma funcionalidade na página de projetos e na página de galeria.

Você pode transferir uma imagem e o título e legenda correspondentes entre qualquer Página de Projetos ou Página de Galeria. Saiba mais em Transferência de conteúdo entre páginas.

Cabeçalho e rodapé

Além de imagens e legendas, a Página de Projetos aceita:

• Banner da página - uma imagem ou vídeo que aparece no topo da página.
• Texto do título, descrição e categoria da página - texto que aparece no topo da página. Se você tiver um banner de página, esse texto aparecerá sobre a imagem ou vídeo.
• Áreas de cabeçalho e rodapé - áreas no topo e no fim da página que você pode personalizar com seu próprio conteúdo.

Se a página do seu projeto não tiver uma imagem em destaque, a primeira imagem adicionada à página do projeto se tornará automaticamente a imagem do banner na parte superior. Adicione uma imagem em destaque para substituí-la ou desmarque Mostrar banner do projeto nos estilos do site para ocultá-la em todas as páginas do projeto.

Carregamento da página

Na Página de Projetos, as imagens e legendas parecem deslizar de baixo para cima quando você rola a página para baixo. Para excluir esse efeito, desmarque o ajuste Imagens e legendas em cascata. Quando desmarcada, as imagens e legendas desaparecem.

Página de Galeria x Página de Projetos

Além das páginas do projeto, esses templates aceitam a página de galeria normal.

Embora a página de projetos seja ótima para combinar imagens e texto, a página de galeria é ideal para priorizar apenas imagens e vídeos. Ao contrário da página de projetos, a página de galeria aceita URL de deeplink, URL de clickthrough e funcionalidade lightbox.

Para testar ambas as opções, você pode transferir uma imagem entre a Página de Galeria e a Página de Projetos.

Atenção: a Página de Galeria não aceita vídeos no banner de página.

Trocando de templates

Exceto no York, Artesia, Flores, Harris, Jasper, Jones, Lange, Shibori ou Taylor, se você mudar de template, suas Páginas de Projetos serão convertidas em Páginas de Galeria.

Se você voltar para o York, Artesia, Flores, Harris, Jasper, Jones, Lange, Shibori e Taylor, talvez seja necessário criar novas páginas de projetos e páginas de galeria e transferir as imagens para recriar o formato original.

Dispositivo móvel

Na versão móvel e em browsers estreitos, o conteúdo é empilhado em uma única coluna na vertical.