Como criar uma página de galeria de casamento com Divi

Esta postagem é a parte 2 de 5 de nossa minissérie Como Criar um Site de Casamento Elegante com Divi. Nesta série, iremos guiá-lo através das partes mais importantes da criação de um site de casamento para você ou um cliente com a Divi.

Na primeira parte de nossa minissérie, mostramos como fazer uma página elegante de anúncio de casamento. Esta segunda parte será dedicada à criação de uma página de galeria no site de seu casamento. A página da galeria tem o mesmo estilo da página de anúncio de casamento, o que permite que você use ambas no mesmo site sem ter que fazer muitas alterações.

Mostraremos passo a passo como criar o seguinte layout com o construtor visual de Divi:

Este layout é composto por 6 seções que ajudam você a criar uma página de galeria bonita e interativa.

A Seção Hero

Decidimos ir com um cabeçalho muito simples que não pareça muito ocupado. A página da galeria já terá muitas imagens e queremos que as pessoas se concentrem nisso. Ter uma seção de herói simples torna mais fácil para os visitantes encontrarem a essência da página, sem se distrair muito com o visual no início da página.

Crie uma página

Comece criando uma página, usando o Divi builder e mude para o Visual Builder.

Você pode ver que já existe uma seção automaticamente presente em sua nova página. Essa seção contém uma linha de largura total. Precisaremos de uma linha de largura total para a primeira parte desta seção, portanto, continue a usá-la.

Abra as configurações da seção que você acabou de criar e abra a subcategoria Plano de fundo na guia de conteúdo. Em seguida, altere a cor de fundo para '# fffaf6'.

Módulo de Texto

Continue adicionando um Módulo de Texto à coluna de largura total da linha. Insira o texto na caixa de texto da guia Conteúdo e vá para a guia Design.

Selecione a subcategoria Texto na guia Design para começar a editar o design do seu conteúdo. Para o layout que criamos, precisaremos fazer os seguintes ajustes na subcategoria Texto do seu Módulo Texto:

• Orientação do Texto: Centro
• Fonte do texto: tangerina
• Tamanho da fonte do texto: 90p (desktop), 80 (tablet), 66 (telefone)
• Cor do texto: # 9b857b
• Altura da linha de texto: 1,7em

Se não quiser rolar para baixo e procurar as diferentes opções para alterar, você também pode usar a opção de pesquisa. Esta opção ajuda você a se tornar mais produtivo e a mudar as coisas instantaneamente, sem ter que fazer muito esforço. No exemplo abaixo, estamos simplesmente pesquisando os termos 'Fonte do texto' e veremos a opção aparecer imediatamente.

Clique em Salvar e sair.

Noiva e noivo

Seguindo em frente, você terá que criar uma seção com duas imagens individuais da noiva e do noivo.

Vá em frente e adicione uma nova linha de duas colunas logo abaixo da linha anterior que você criou. Abra as configurações de linha e vá para a guia Design.

Em seguida, vá para a guia Design das configurações de linha e abra a subcategoria Dimensionamento. Ative a opção Largura personalizada e altere a porcentagem para '60% '. Role para baixo na mesma guia e adicione '5%' à margem inferior.

Mais uma vez, você pode escolher o caminho mais fácil e apenas escrever 'Largura personalizada' na barra de pesquisa.

Imagem da noiva

Adicione um Módulo de imagem à primeira coluna da linha. Carregue uma imagem da noiva na guia Conteúdo na subcategoria Imagem e vá para a guia Avançado. Clique na subcategoria CSS personalizado e adicione a seguinte linha de código ao campo Elemento principal:

border: 10px double #9b857b; 

Como mencionado antes, você também pode simplesmente digitar 'Elemento principal' na barra de pesquisa e ele aparecerá imediatamente. Usar a opção de pesquisa pode economizar muito tempo, especialmente quando você está tentando seguir as etapas de um tutorial. Você pode fazer exatamente o que é necessário sem pensar muito nisso.

Pressione Salvar e Sair.

Imagem do noivo

Como você pode notar, as imagens têm as mesmas configurações. Vá em frente e clonar o módulo de imagem, a única coisa que você terá que alterar é a imagem. Esta é a aparência que a página de sua galeria deve ter até agora:

Nota de agradecimento

A página da galeria geralmente aparece no site do casamento após a realização do casamento. As pessoas ficam animadas para ver as fotos que foram tiradas, então é provável que todos os seus convidados visitem a página. Isso torna a página da galeria o lugar ideal para dizer uma última coisa aos convidados.

Para começar, adicione uma nova seção padrão ao seu layout. Dentro da seção, use uma linha de largura total.

Em seguida, abra as configurações da seção e altere a cor de fundo para '# fffaf6' dentro da subcategoria de fundo.

Módulo de Primeiro Texto

Adicione um módulo de texto à linha que você acabou de criar. Na guia Conteúdo, insira o texto que deseja exibir no seu site na caixa de texto. Continue indo para a guia Design.

Comece selecionando a subcategoria Texto na guia de design e faça as seguintes alterações procurando-as manualmente ou pesquise-as na barra de pesquisa:

• Orientação do Texto: Centro
• Fonte do texto : tangerina
• Tamanho da fonte do texto: 70 (desktop e tablet), 50 (telefone)
• Cor do texto: # 9b857b
• Altura da linha de texto: 1em

Agora, selecione a subcategoria Espaçamento na mesma guia e altere a margem inferior para '5%'.

Clique em Salvar e sair.

Segundo Módulo de Texto

Adicione um novo módulo de texto no primeiro módulo de texto que você criou. Na guia de conteúdo, escreva a nota de agradecimento que deseja compartilhar com os convidados na caixa de texto e vá para a guia Design.

Faça as seguintes alterações na guia Design pesquisando-as manualmente ou pesquisando as opções com a barra de pesquisa.

• Orientação do Texto: Justificado
• Fonte do texto: Raleway Light
• Estilo do Texto: Negrito
• Tamanho da fonte do texto: 14
• Cor do texto: # 9b857b
• Altura da linha de texto: 1,6em

Clique em Salvar e sair e pronto. Esta é a aparência que a página da sua galeria deve ter agora:

Seção de fotos favoritas

Depois de terminar a seção de notas de agradecimento, você pode ir para a seção onde mostra as fotos favoritas da noiva e do noivo. Nesta parte, você usará duas seções e aplicará o código CSS aos módulos de imagem para torná-los polaroid.

Comece adicionando uma seção padrão. Dentro dessa seção padrão, você precisará de uma linha de largura total. Abra as configurações da seção e altere a cor do plano de fundo para '# 9b857b' na subcategoria Plano de fundo da guia de conteúdo.

Em seguida, adicione um módulo de texto à linha. Abra as configurações e insira o título que deseja mostrar na caixa de texto da subcategoria Texto. Continuando, vá para a guia Design e faça as seguintes alterações na subcategoria Texto:

• Orientação do Texto: Centro
• Fonte do texto: tangerina
• Tamanho da fonte do texto: 100 (desktop e tablet), 68 (telefone)
• Cor do texto: # fffaf6
• Altura da linha de texto: 1,6em

Clique em Salvar e sair.

Imagens Polaroid (Desktop)

Para esta parte, você precisará de outra seção padrão. Nessa seção, você precisará de uma linha com 4 colunas. Altere a cor de fundo desta seção para '# fae4de' na guia Conteúdo sob a subcategoria Fundo.

Continue adicionando um Módulo de imagem à primeira coluna da linha. Abra as configurações da imagem e carregue uma das imagens favoritas na subcategoria Imagem da guia de conteúdo.

Em seguida, vá para a guia Avançado, clique na subcategoria CSS ID & Classes e digite 'polaroid' no campo Classe CSS. No campo Elemento principal, adicione o seguinte código:

z-index: 1;
-webkit-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);

Agora, para colocar a classe 'polaroid' em ação, você terá que acessar o back-end do seu site. Vá para Divi> Opções de tema> e insira o seguinte código no campo CSS personalizado na parte inferior da página:

.polaroid {
background: white;
display: inline;
float: left;
margin: 0 15px 30px;
padding: 10px 10px 25px;
-webkit-box-shadow: 0 4px 6px rgba(0, 0, 0, .3);
-moz-box-shadow: 0 4px 6px rgba(0,0,0,.3);
box-shadow: 0 4px 6px rgba(0,0,0,.3);
-webkit-transition: all .15s linear;
-moz-transition: all .15s linear;
transition: all .15s linear;
z-index:0;
position:relative;
}

.polaroid::after {
color: #333;
font-size: 20px;
content: attr(title);
position: relative;
top:15px;
}

.polaroid.et_pb_image_2 {
display: block;
width: inherit;
}

Depois disso, você pode voltar para o Visual Builder. Você vai precisar de mais de uma imagem polaroid, por isso você deve clonar o Módulo de Imagem 7 vezes, e certifique-se de colocá-las nas diferentes colunas. Cada coluna deve ter 2 módulos de imagem.

Para fazer as imagens polaroid parecerem divertidas, você terá que alterar o código CSS no campo Elemento principal de cada Módulo de imagem individualmente. Para aplicar o código diferente, demos a cada Módulo de imagem um número diferente na imagem abaixo:

Dependendo do número atribuído, altere o código no campo Elemento principal de acordo. Você pode encontrar o elemento principal na guia Avançado na subcategoria CSS personalizado. Adicione um valor aos campos de Margem personalizada na subcategoria Espaçamento da guia Design também:

Imagem 1

Este é o primeiro módulo de imagem que você fez, mantenha-o assim.

Imagem 2

Margens personalizadas:
Superior: -10%
Esquerda: -20%

Elemento Principal:

z-index: 5;
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);

Imagem 3

Margens personalizadas:
Esquerda: -20%

Elemento Principal:
Nenhum

Imagem 4

Margens personalizadas:
Superior: -10%
Esquerda: -20%

Elemento Principal:

z-index: 3;
-webkit-transform: rotate(4deg);
-moz-transform: rotate(4deg);

Imagem 5

Margens personalizadas:
Nenhum

Elemento Principal:

-webkit-transform: rotate(14deg);
-moz-transform: rotate(14deg);
transform: rotate(14deg);

Imagem 6

Margens personalizadas:
Superior: -10%
Esquerda: -20%

Elemento Principal:

-webkit-transform: rotate(-18deg);
-moz-transform: rotate(-18deg);
transform: rotate(-18deg);

Imagem 7

Margens personalizadas:
Esquerda: -20%

Elemento Principal:

z-index: 1;
-webkit-transform: rotate(-10deg);l
-moz-transform: rotate(-10deg);

Imagem 8

Margens personalizadas:
Superior: -10%
Esquerda: -20%

Elemento Principal:

z-index: 5;
-webkit-transform:rotate(-3deg);
-moz-transform: rotate(-3deg);

Depois de configurar todas as imagens, abra as configurações da linha. Vá para a guia Avançado e oculte a linha para telefone e tablet na subcategoria Visibilidade.

Além disso, certifique-se de que as pessoas possam abrir a imagem nesta seção ativando a Lightbox na subcategoria Link da guia Conteúdo.

Imagens favoritas (tablet e telefone)

Para garantir que as imagens sejam responsivas, vamos adicionar outra linha à mesma seção. Faça uma linha de largura total e clone os módulos de imagem número 1 e 5. Coloque esses módulos clonados na nova linha. Para a versão móvel, vamos usar apenas essas duas versões dos Módulos de Imagem que criamos.

Agora, abra as configurações da linha. Vá para a guia Avançado e oculte a linha nas áreas de trabalho dentro da subcategoria Visibilidade.

Depois de fazer todas essas alterações, seu layout deve ficar assim até agora no desktop:

Galeria por sobrenome (área de trabalho)

Normalmente há muitas fotos tiradas em casamentos, o que pode tornar difícil encontrar uma certa estrutura nelas. É por isso que decidimos tornar a seção da galeria desta página da galeria um pouco mais fácil de usar. As galerias serão exibidas com base no sobrenome dos convidados, o que facilita a localização de suas próprias fotos.

Lista de Nomes

Para começar, você precisa mostrar a lista de sobrenomes e vinculá-los à seção da página onde encontrarão as imagens.

Crie uma nova seção padrão e coloque nela uma linha de largura total. Em seguida, adicione um módulo de texto. Digite o texto que deseja exibir na subcategoria Texto da guia Conteúdo. Em seguida, vá para a guia Design e faça as seguintes alterações na subcategoria Texto:

• Orientação do Texto: Centro
• Fonte do texto: tangerina
• Tamanho da fonte do texto: 100 (desktop e tablet), 68 (telefone)
• Cor do texto: # 9b857b
• Altura da linha de texto: 1,6em

Role para baixo na mesma guia e altere a margem superior para '2%' e a margem inferior para '5%' na subcategoria Espaçamento.

Clique em Salvar e sair. Agora, adicione outra linha, neste caso com três colunas. Na guia Design das configurações de linha, altere a margem inferior para '5%' na subcategoria Espaçamento.

Em seguida, adicione um módulo de texto à coluna esquerda da linha. No módulo de texto, adicione um terço dos sobrenomes dos convidados. Cada um desses sobrenomes precisará de um link âncora para a parte do site para a qual você deseja trazê-los. Selecione um dos nomes, clique no ícone do link e escreva um '#' + o nome. Posteriormente nesta postagem do blog, você vinculará esse nome a uma determinada seção. Repita a mesma coisa para cada um dos nomes da lista.

Selecione um dos nomes, clique no ícone do link e escreva um '#' + o nome. Posteriormente nesta postagem do blog, você vinculará esse nome a uma determinada seção. Repita a mesma coisa para cada um dos nomes da lista.

Vá para a guia Design e faça os seguintes ajustes na subcategoria Texto:

• Orientação do texto: direita
• Fonte do texto: Raleway Light
• Estilo do Texto: Negrito
• Tamanho da fonte do texto: 20
• Cor do texto: # 9b857b
• Altura da linha de texto: 1,6em

Continuando, clone o Módulo de Texto duas vezes e coloque os módulos clonados nas outras duas colunas. Certifique-se de alterar os sobrenomes nessas listas e a Orientação do Texto para 'Centro' na segunda coluna e 'Esquerda' na terceira coluna.

Abra as configurações da linha e altere a visibilidade para apenas desktop na subcategoria Visibilidade da guia Avançado.

Galeria por sobrenome (tablet e telefone)

Para garantir que o site seja responsivo, vamos criar uma nova linha que se adapta a tablets e telefones. Adicione uma nova linha com uma coluna de largura total. Em seguida, adicione um Módulo de Texto a essa linha de largura total e digite os sobrenomes na caixa de texto. Você pode encontrar a caixa de texto na subcategoria Texto da guia Conteúdo.

Repita a mesma coisa que fizemos na linha anterior clicando no ícone do link e escrevendo um '#' + o nome na caixa do URL.

Mas certifique-se de atribuir um link de âncora diferente a cada segundo nome. Neste exemplo, Avery e Brown terão um link de âncora diferente do que tinham nos desktops. Temos que fazer isso porque, na próxima parte do site, teremos duas seções de galeria diferentes para cada segunda galeria. Dessa forma, ele será responsivo para tablet e telefone.

Por último, mas não menos importante, vá para a guia Avançado da linha e desative a linha para desktops na subcategoria Visibilidade.

Seção da galeria (desktop)

Na última parte do site, teremos que fazer as diferentes seções da galeria que representam diferentes sobrenomes. Vamos mostrar como fazer dois deles e, em seguida, você pode adicionar outros também.

Primeiro, adicione uma seção padrão. Altere a cor de fundo para '# fae4de' na subcategoria Fundo da guia Conteúdo

Continuando, adicione uma linha como esta:

Dentro das seções de linha, use Custom Width. Vá para a guia Design, selecione e altere a Largura personalizada para '60% 'dentro da subcategoria Dimensionamento.

Em seguida, vá para a guia Design e altere as margens superior e inferior para '5%'.

Módulo de Texto

Agora, adicione um Módulo de Texto e digite o sobrenome de uma família na caixa de texto dentro da subcategoria Texto da guia Conteúdo. Continue acessando a guia Design e fazendo as seguintes alterações:

• Alinhamento de Texto: Centro
• Fonte do texto: tangerina
• Tamanho da fonte do texto: 60
• Cor do texto: # 9b857b
• Altura da linha de texto: 1,6em

Role para baixo na mesma guia e altere a margem superior para '20% 'dentro da subcategoria Espaçamento.

Vá para a guia Avançado. No campo CSS ID da subcategoria CSS ID & Classes, você terá que vincular o link de âncora que você fez acima ao Módulo de Texto. Portanto, se o primeiro link âncora na lista foi '#adams', você terá que preencher 'adams'. Certifique-se de que o ID é o mesmo que você vinculou ao nome na lista que você fez antes.

Na segunda coluna da linha, você terá que adicionar um Módulo de Galeria. Digite '8' no campo Número de imagens na subcategoria Imagens da guia Geral e escolha 8 imagens.

Em seguida, vá para a guia Design e certifique-se de que seu Layout é 'Grade' e sua Orientação da Miniatura 'Paisagem' na subcategoria Layout.

Continuando, vá para a guia Avançado. Nesta guia, você terá que adicionar código a duas seções diferentes da subcategoria CSS personalizado; o elemento principal e a sobreposição.

Elemento Principal:

box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
text-align: center;
border: 5px solid #FFFFFF;
column-count: 2; 
column-gap: 0px;

Sobreposição:

-webkit-filter: brightness(0%);

Clique em Salvar e sair.

Agora, vá em frente e clone a seção. Altere a estrutura da coluna para a seguinte e troque de lugar entre o Módulo de Texto e o Módulo Galeria:

Altere as imagens na galeria, o sobrenome mencionado na caixa de texto e o ID da turma. Esta seção também tem outra cor de fundo; '# fffaf6'.

Agora, vá para a guia Avançado desta linha e oculte-a para tablets e telefones dentro da subcategoria Visibilidade.

Você pode continuar fazendo seções de galeria como essa, dependendo do número de sobrenomes que estiveram presentes no casamento.

Seção da galeria (celular)

Como mencionamos antes, cada segunda seção da galeria precisará de uma alternativa para dispositivos móveis. Basta clonar a primeira linha da galeria que criamos e colocá-la na mesma seção da última linha da galeria que criamos.

Em seguida, abra as opções do Módulo de texto. Vá para a guia Design e remova a margem superior na subcategoria Espaçamento. Em seguida, vá para a guia Avançado e altere o ID CSS na subcategoria CSS ID & Classes para 'avery1'. Este é o mesmo ID da lista aplicada a tablets e telefones.

É isso. Seu layout agora deve ser exatamente igual ao que criamos e mostramos a você no início desta postagem do blog:

Próximo

Na terceira parte desta minissérie, veremos como você pode criar uma página de lista de presentes para adicionar no site do casamento. Se você tiver alguma dúvida sobre este tutorial, ou se você tiver alguma solicitação para tutoriais futuros; certifique-se de deixar um comentário na seção de comentários desta postagem do blog, então responda com as respostas!

Certifique-se de se inscrever em nosso boletim informativo por e-mail e canal no YouTube para que você nunca perca um grande anúncio, dica útil ou brinde Divi!