Como criar um layout de grade de imagem responsivo com CTAs e sobreposições de foco em Divi

Layouts de grade responsivos são perfeitos para mostrar uma coleção de imagens com links (ou CTAs) porque eles ficam bem em todos os dispositivos. O Divi builder tem alguns módulos integrados fantásticos que usam telas de grade, incluindo a Grade de Portfólio, a Grade de Blog e a Grade de Galeria. Mas às vezes você pode querer construir seu próprio layout de grade de imagem personalizado com CTAs. Isso dá a você mais controle sobre o design e o conteúdo que deseja exibir para cada item da grade, sem ter que recorrer a um plug-in.

Hoje, vamos mostrar como criar um layout de grade de imagem responsivo com CTAs usando as opções de design integradas do Divi. Para fazer isso, vamos ser criativos na forma como organizamos a grade usando uma seção de especialidade e adicionamos sobreposições a cada imagem usando um módulo de Call to Action.

Vamos começar!

Espiada

Aqui está uma rápida olhada no design que construiremos neste tutorial.

Baixe o Layout GRATUITAMENTE

Para colocar suas mãos nos designs deste tutorial, primeiro você precisa fazer o download usando o botão abaixo. Para obter acesso ao download, você precisará se inscrever em nossa lista de e-mail Divi Daily usando o formulário abaixo. Como um novo assinante, você receberá ainda mais bondade Divi e um pacote Divi Layout grátis toda segunda-feira! Se você já está na lista, basta inserir seu endereço de e-mail abaixo e clicar em download. Você não será “reinscrito” nem receberá e-mails extras.

Baixe os arquivos

Download de graça

Junte-se ao Divi Newsletter e nós lhe enviaremos por e-mail uma cópia do último pacote de layout de página de destino Divi, além de toneladas de outros recursos, dicas e truques Divi incríveis e gratuitos. Acompanhe e você será um mestre Divi em nenhum momento. Se você já está inscrito basta digitar seu endereço de e-mail abaixo e clicar em download para acessar o pacote de layout.

DOWNLOAD

Você se inscreveu com sucesso. Por favor, verifique seu endereço de e-mail para confirmar sua assinatura e tenha acesso a pacotes de layout Divi semanais gratuitos!

Para importar o layout da seção para sua biblioteca Divi, navegue até a biblioteca Divi.

Clique no botão Importar.

No pop-up de portabilidade, selecione a aba de importação e escolha o arquivo de download do seu computador.

Em seguida, clique no botão importar.

Feito isso, o layout da seção estará disponível no Divi Builder.

Vamos para o tutorial, vamos?

O que você precisa para começar

Para começar, você precisará fazer o seguinte:

1. Se ainda não o fez, instale e ative o Divi Theme.
2. Crie uma nova página no WordPress e use o Divi Builder para editar a página no front end (construtor visual).
3. Escolha a opção “Build From Scratch”.

Depois disso, você terá uma tela em branco para começar a desenhar no Divi.

Criação de um layout de grade de imagem responsivo com CTAs e sobreposições de foco em Divi

Parte 1: Criando o Layout da Seção Especial

Para começar, adicione uma nova seção de especialidade com um layout de barra lateral esquerda de um terço e dois terços.

Exclua a seção regular padrão para que apenas a nova seção de especialidade permaneça.

Abra as configurações da seção e atualize a cor de fundo da seguinte maneira:

• Cor de fundo: # 84dbda

Na guia de design, atualize as opções de tamanho, largura e preenchimento da seguinte forma:

• Equalize a altura das colunas: SIM
• Usar largura de calha personalizada: SIM
• Largura da calha: 1
• Largura interna: 100%
• Largura máxima interna: 1080px (desktop), 500px (tablet e telefone)
• Acolchoamento: 12vh superior, 12vh inferior
• Preenchimento da coluna 1: 0 px superior, 0 px inferior

Depois que os estilos de seção estiverem no lugar, adicione uma linha de uma coluna à seção.

Configurações de linha

Atualize as configurações de linha da seguinte forma:

• Largura da calha: 1
• Equalize a altura das colunas: SIM
• Preenchimento: 0 px superior, 0 px inferior

Para criar uma segunda linha, duplique a primeira linha.

Em seguida, atualize a linha duplicada com um layout de duas colunas.

Parte 2: Adicionando imagens como imagens de fundo da coluna

Agora que todas as linhas e colunas estão no lugar, estamos prontos para adicionar nossas imagens ao nosso layout de grade. Para garantir que as imagens sejam responsivas dentro do layout da grade, vamos adicionar cada uma de nossas imagens como imagens de fundo a cada uma das quatro colunas da seção. Como cada imagem de fundo terá um tamanho de fundo de “capa”, a imagem sempre preencherá a coluna inteira ao ajustar o tamanho do navegador.

Imagem de fundo da coluna da linha superior

Para começar, abra as configurações de coluna da coluna da linha superior.

Em seguida, adicione uma imagem de plano de fundo à coluna.

Imagens de fundo das colunas da linha inferior

Em seguida, abra as configurações da coluna 1 na segunda linha (inferior) e adicione uma imagem de plano de fundo a essa coluna também.

Em seguida, adicione uma imagem de plano de fundo à coluna 2 na mesma linha.

Imagem de fundo da coluna 1 da seção especial

E, finalmente, abra as configurações da seção de especialidades e adicione uma imagem de fundo à coluna 1.

Parte 3: Adicionando a frase de chamariz de sobreposição de imagem a cada coluna

Agora que nossas imagens de fundo foram adicionadas a cada coluna do layout de grade, vamos adicionar um módulo de call to action a cada coluna que servirá como uma sobreposição para a imagem com um botão CTA. Usar um módulo de call to action como uma sobreposição na parte superior da imagem de plano de fundo da coluna permitirá que você adicione estilos de sobreposição de plano de fundo personalizados e efeitos de foco à imagem com facilidade. Além disso, oferece a opção de adicionar um CTA personalizado sobre a imagem. Para este exemplo, vamos simplesmente usar o elemento de botão no módulo Call to action, mas você também pode adicionar facilmente ao título ou ao conteúdo do corpo acima do botão usando as opções de conteúdo.

Criação do módulo de apelo à ação

Para adicionar o primeiro apelo à ação de sobreposição de imagem, adicione um módulo de apelo à ação à coluna da linha superior.

Contente

A atualização do conteúdo da frase de chamariz da seguinte maneira:

• apague o texto do título
• apague o corpo do texto
• URL do link do botão: #
• Cor de fundo: transparente (área de trabalho), rgba (255,235,77,0.5) (foco)

NOTA: Adicionar um “#” para o URL do link do botão é apenas um preenchimento por enquanto para que o botão apareça. Adicionar a cor de fundo semitransparente ao passar o mouse fornecerá uma bela cor de sobreposição personalizada ao passar o mouse sobre o módulo (e a imagem atrás dele).

Estilos de Buttton

Continue atualizando as configurações de design da frase de chamariz para o botão da seguinte maneira:

• Use estilos personalizados para botão: SIM
• Tamanho do texto do botão: 22 px
• Cor do texto do botão: # ffeb4d
• Cor de fundo do botão: # 000 (área de trabalho), # ec5f00 (foco)
• Largura da borda do botão: 0 px
• Raio da borda do botão: 100 px
• Fonte do botão: areia movediça
• Peso da fonte do botão: Semi negrito
• Preenchimento do botão: 0,5em superior, 0,5em inferior, 2em à esquerda, 2em à direita

Dimensionamento, preenchimento e borda

Em seguida, precisamos ter certeza de que nosso módulo tem alguma altura para expor a imagem de fundo da coluna atrás dele. Para fazer isso, adicionaremos algum preenchimento na parte superior e inferior do módulo. Também adicionaremos uma borda sutil ao módulo para dar a ele um pouco de separação de outras imagens no layout da grade.

Atualize o seguinte:

• Largura: 100%
• Preenchimento: 15vh superior, 15vh inferior
• Largura da borda inferior: 5 px
• Largura da borda esquerda: 5 px
• Cor da borda: rgba (255,255,255,0,5)

NOTA: Usar a unidade de comprimento vh para o preenchimento tornará o valor do preenchimento relativo à altura da janela de visualização do navegador. Portanto, seus itens de grade de imagem aumentarão e diminuirão em altura conforme a janela do navegador aumenta e diminui em altura.

Centralizando verticalmente o conteúdo do CTA

Para garantir que o conteúdo do módulo de call to action permaneça centralizado verticalmente, podemos adicionar um pequeno fragmento de CSS personalizado usando a propriedade flex.

Na guia avançada, adicione o seguinte CSS ao elemento principal:

display:flex;
flex-direction:column;
justify-content:center;

Adicionando a sobreposição de frase de chamariz às outras colunas

Agora que o primeiro módulo de call to action está estilizado, copie e cole o módulo nas outras 3 colunas em todo o layout, incluindo as 2 colunas na linha inferior e a coluna 1 na seção de especialidades.

Para garantir que o módulo de apelo à ação se estenda por toda a altura da coluna 1 na seção de especialidades, atualize a altura mínima para 100%.

• Altura mínima: 100%

Normalmente, isso não funcionaria para um módulo em uma coluna normal. Mas, por causa da propriedade flex na coluna, o módulo é essencialmente um elemento filho flex, então o valor de 100% min-height funcionará.

É isso. Vamos conferir o resultado final.

Resultado final

Aqui está o resultado final do layout de grade de imagem responsivo em uma página ao vivo.

E aqui estão os efeitos de foco.

E aqui está como o design responde ao ajustar o tamanho do navegador.

Pensamentos finais

Layouts de grade de imagem responsivos continuam a ser um aspecto popular em muitos sites. O aspecto visual fornecido pela imagem de plano de fundo combinado com a sobreposição da frase de chamariz pode realmente fazer esses links de navegação importantes se destacarem. Além disso, a natureza responsiva do layout da grade de imagem ficará ótima em todos os dispositivos, o que é sempre uma necessidade. Espero que isso aconteça em seu próximo projeto.

Estou ansioso para ouvir de você nos comentários.

Saúde!