Como projetar um layout de grade geométrica em Divi

Projetar um layout de grade geométrica para o seu site pode ser extraordinariamente bonito. Um dos meus elementos de desenho geométrico favorito é um hexágono. Os hexágonos podem ser usados ​​para projetar layouts de grade bem equilibrados e harmoniosos (pense na colmeia de abelhas). Mas o design pode trazer desafios. Você criou formas para servir de plano de fundo para o seu conteúdo. Então você tem que ajustar seu conteúdo dentro da forma. Em seguida, você deve certificar-se de que essas formas estão espaçadas corretamente em diferentes tamanhos de tela. Mas não se preocupe. Não é tão difícil quanto você pensa.

Quanto à criação dessas formas geométricas, existem maneiras de fazer isso usando algum CSS personalizado avançado, mas acho que a maneira mais simples é criar uma imagem. Então você pode usar o poder do Divi para o resto.

Neste tutorial, vou mostrar como é fácil criar uma imagem em forma de hexágono para projetar um layout de grade geométrica com Divi.

Vamos começar!

Espiada

Aqui está uma olhada no design de grade geométrica que construiremos neste tutorial.

O que você precisa

• Um editor de fotos (usarei o Sketch) para criar uma imagem hexagonal. Ou, por enquanto, você pode simplesmente arrastar esta imagem para sua área de trabalho e usá-la.
  
• Tema Divi (instalado e ativo)

Criação da imagem de fundo hexagonal

Para construir a imagem de fundo do hexágono, usarei o editor de fotos Sketch (apenas para Mac). No entanto, essa deve ser uma forma fácil de criar em qualquer número de editores de fotos por aí (como Photoshop, Illustrator ou Gimp).

Se você não quiser se preocupar com esta parte do tutorial, você pode simplesmente arrastar esta imagem para sua área de trabalho por enquanto. É uma imagem de hexágono escuro semitransparente que deve funcionar com uma série de designs, considerando que permitirá que as cores de fundo por trás dela apareçam.

Aqui está como criar a imagem no esboço. Primeiro, clique no ícone de inserção no canto superior direito. Em seguida, passe o mouse sobre a opção de forma e selecione a forma hexagonal.

Agora segure a tecla Shift e clique (e segure) na tela e arraste o mouse para criar a forma, em seguida, solte o mouse. Manter a tecla shift pressionada permite que você crie dimensões perfeitamente quadradas para sua forma. Agora atualize as propriedades de sua forma na barra lateral direita da seguinte maneira:

Tamanho: 360 largura, 360 altura
Lados: 6
Cor de preenchimento: 000000 hex, 0 R, 0 G, 0 B, 30 A (basicamente, esta é uma cor preta com 30% de opacidade)

Em seguida, exporte sua imagem como um PNG e importe-a para sua Biblioteca de mídia do WordPress para mais tarde.

Criando a primeira seção com três colunas

Este projeto terá três seções empilhadas uma sobre a outra, cada uma com uma linha que contém nossas diferentes estruturas de coluna. A primeira seção terá nossa estrutura de três colunas, a segunda seção terá duas colunas e a terceira terá apenas uma coluna.

Para criar a primeira seção, crie uma nova página e implemente o construtor visual para construir um novo layout do zero. Uma nova seção regular será criada para você e o construtor visual solicitará que você escolha sua estrutura de coluna para sua seção. Escolha a estrutura de três colunas (um terço, um terço, um terço).

Agora, antes de começarmos a editar nossa linha e adicionar nossos módulos, vamos dar à nossa seção gradientes de cor de fundo, atualizando as configurações da seção com o seguinte:

Cor do gradiente de fundo à esquerda: # 2b87da
Cor do gradiente de fundo à direita: rgba (0,0,0,0.6)

Personalize as configurações de linha e adicione imagens hexagonais aos planos de fundo da coluna

Para alcançar o design que procuramos, precisamos adicionar nossa imagem de fundo a cada coluna de nossa linha de três colunas. Portanto, para cada coluna, adicione a imagem do hexágono (deve ter 360px por 360px) a cada coluna. Em seguida, defina o tamanho da imagem de fundo para “tamanho real” e a repetição da imagem de fundo para “sem repetição”.

Certifique-se de fazer isso para as imagens de fundo das colunas 1, 2 e 3.

Em seguida, precisamos personalizar nossas configurações de linha para criar o espaçamento de que precisamos para que nossas imagens de fundo do hexágono sejam exibidas corretamente em cada coluna. Esse espaçamento também ajudará a manter as coisas responsivas e a maximizar o espaço horizontal no celular.

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

Usar largura personalizada: SIM
Unidade: %
Largura personalizada: 100%
Usar largura de calha personalizada: SIM
Largura da calha: 2
Equalize a altura das colunas: SIM

Preenchimento personalizado (desktop): 0 px superior, 0 px inferior, 10% à esquerda, 10% à direita
Preenchimento personalizado (tablet): 0% à esquerda, 0% à direita

Salve suas configurações de linha por enquanto.

Adicionando seus módulos do Blurb a cada coluna

Adicione um novo módulo de sinopse à sua primeira coluna e atualize as configurações de sinopse da seguinte maneira:

Conteúdo: “Seu conteúdo vai aqui. Edite ou remova este texto inline ou nas configurações de conteúdo do módulo. ” (seja breve porque você só tem uma quantidade limitada de espaço na imagem do hexágono)
Ícone de uso: Sim
Selecione o ícone (quem você quiser, obviamente)

Em seguida, atualize as configurações de design da seguinte forma:

Cor do ícone: # 66d1ff
Tamanho da fonte do ícone: 66px
Orientação do Texto: Centro
Cor do Texto: Claro
Largura: 360 px (a mesma largura da imagem de fundo do hexágono)
Alinhamento do Módulo: centro
Preenchimento personalizado: 85px superior, 85px inferior, 10% à esquerda, 10% à direita

É importante adicionar o conteúdo que deseja exibir na frente do hexágono primeiro, para que agora você saiba como ajustar o espaçamento do módulo de sinopse para revelar a imagem de fundo por completo. Observe que adicionei um preenchimento superior e inferior de 85 px. Isso é apenas o suficiente para expor o fundo do hexágono, mesmo ao ajustar o navegador para tamanhos de dispositivos móveis.

Depois de salvar seu módulo de sinopses, copie e cole-o nas colunas 2 e 3 para que todas as três sinopses estejam presentes.

Agora, adicionamos com sucesso fundos hexagonais à nossa primeira linha de sinopses.

Criando a segunda seção com duas colunas

Para criar nossa segunda seção, vá em frente e duplique a primeira seção, em seguida, atualize as configurações da seção com a seguinte cor de fundo: rgba (0,0,0,0.6) e exclua o gradiente existente.

Em seguida, altere a estrutura da coluna de sua linha para duas colunas e exclua o módulo extra na coluna inferior direita.

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

Largura da calha: 3
Margem personalizada (desktop): -145 px superior
Margem personalizada (tablet): -70px superior
Preenchimento personalizado (desktop): 24% à esquerda, 24% à direita

Eu adicionei mais preenchimento à esquerda e à direita para posicionar os fundos do hexágono entre as sinopses na seção acima (preenchimento de 24% em cada lado nos aproxima). Eu também alterei a largura da medianiz de volta para 3 para acomodar o espaço de coluna reduzido devido a mais preenchimento de linha. Então usei uma margem de -145 px para puxar a linha um pouco para cima.

Como você pode ver, o layout da grade está se formando.

Criando a terceira seção com uma coluna

Para a última seção, vá em frente e duplique a seção da seção. Em seguida, vá para a primeira seção, copie o gradiente de fundo e cole-o na terceira seção que acabou de criar. Em seguida, inverta os gradientes clicando no ícone "alternar" ao passar o mouse sobre a visualização da cor do gradiente. Em seguida, exclua a cor de fundo na terceira seção.

Agora atualize a estrutura da coluna da linha para uma coluna e exclua o módulo extra blurb.

Para que o fundo da imagem hexagonal seja dimensionado com as outras sinopses em janelas de navegador menores, precisamos adicionar mais preenchimento à linha. Isso fará com que a imagem do hexágono se junte um pouco para coincidir com as outras. Este é apenas um pequeno detalhe para tornar o design mais consistente.

Nas configurações de linha, atualize o preenchimento personalizado da seguinte maneira:

Preenchimento personalizado (desktop): 37% à esquerda, 37% à direita

Agora vamos verificar o resultado final do nosso layout de grade geométrica.

Aqui está o que parece no celular.

Aqui está como ele se ajusta a diferentes tamanhos de tela.

Pensamento final

Este tutorial mostra como criar uma grade geométrica adicionando um fundo em forma de hexágono às suas colunas, mas você pode aplicar facilmente essa mesma técnica para adicionar qualquer imagem de fundo que desejar. Isso abre muitas portas para a criação de belos layouts para destacar seu site.

Espero que seja útil para seu próximo projeto e estou ansioso para ouvir de você nos comentários.

Saúde!