Usando os controles de transformação da Divi para criar layouts de módulo exclusivos do Blurb

Os controles de transformação do Divi tornam realmente fácil posicionar e estilizar os elementos de sua página para criar layouts exclusivos. O módulo blurb do Divi é um dos elementos mais comuns para apresentar itens em um site. Então, pensei em mostrar como colocar esses efeitos Transform em uso, criando alguns layouts exclusivos com o módulo blurb. Claro, você pode conseguir um posicionamento semelhante usando margens e preenchimento, mas o processo seria muito mais complicado e não tão divertido. Além disso, os controles de transformação permitem adicionar um estilo adicional para dimensionar e girar suas sinopses para designs ainda mais exclusivos.

Neste tutorial, vou mostrar como posicionar e girar sinopses de maneiras criativas usando os controles de transformação do Divi.

Vamos começar.

Primeiros passos

Para este tutorial, tudo o que você realmente precisa é Divi. Para configurar as coisas, vá em frente e crie uma nova página. Dê um título à sua página e implante o construtor Divi no front end para construir uma página do zero.

Agora você está pronto para começar.

Criando o design do layout Blurb nº 1

Neste primeiro projeto de layout, vamos estruturar nossas sinopses usando duas linhas diferentes. Em seguida, usaremos as opções de transformação Divi para dimensionar e posicionar os módulos de propaganda para criar um layout de módulo de propaganda exclusivo.

Crie a primeira linha

Para começar, crie uma seção regular e adicione o seguinte layout de coluna para a linha: 1/2 1/6 1/6 1/6

Adicionar e definir o estilo do módulo de texto

Na coluna 1/2 à esquerda, adicione um módulo de texto com o seguinte conteúdo:

<h2>Our Services</h2>
<p>Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.</p>

Em seguida, atualize as seguintes configurações de design:

Cor de fundo: #ffffff
Largura: 500px
Margem personalizada (desktop): -70px à esquerda
Margem personalizada (tablet): 20 px restantes
Preenchimento personalizado: 20px superior, 20px inferior

Atualizar o preenchimento da seção

Em seguida, precisamos adicionar algum preenchimento à nossa seção. Abra as configurações da seção e atualize o seguinte:

Preenchimento personalizado: 20vw superior

Atualizar configurações para a primeira linha

Em seguida, atualize as configurações de linha da seguinte maneira:

Largura da calha: 1
Preenchimento personalizado: 10vw superior, 0px inferior
Largura da borda: 5px
Cor da borda: #eeeeee

Adicione a segunda linha

Em seguida, adicione outra linha sob a linha que acabou de personalizar. Dê a ele um layout de seis colunas.

Crie e estilize os módulos do Blurb

Agora é hora de começar a criar os módulos de sinopse que iremos posicionar usando os controles de transformação. Adicione uma coluna de módulo blurb 2 da primeira linha (superior) que você criou.

Nas configurações do blurb, exclua o conteúdo e atualize o texto do Título com a palavra “Serviços”. Em seguida, clique para usar um ícone em vez de uma imagem. Para este exemplo, estou usando o ícone da nuvem.

Atualize o restante das configurações de sinopse da seguinte maneira:

Cor do ícone: #ffffff
Ícone de círculo: SIM
Cor do círculo: # 5e89fb
Fonte do título: Nunito
Alinhamento do Texto do Título: Centro
Tamanho do texto do título: 16px
Preenchimento personalizado: 1vw superior, 1vw inferior, 1vw esquerdo, 1vw direito

Em seguida, atualize a margem padrão sob o ícone de blurb adicionando o seguinte CSS à caixa de CSS de imagem do Blurb na guia avançada:

margin-bottom: 5px

Em seguida, copie o módulo do blurb que você acabou de criar e cole-o em cada uma das colunas, certificando-se de que você tenha dois módulos do blurb na coluna 3 da linha superior e deixe as colunas 5 e 6 vazias na segunda linha.

Adicione efeitos de transformação para dimensionar e posicionar os Blurbs

Agora estamos prontos para usar os controles de transformação para posicionar e dimensionar as sinopses em um design exclusivo.

Primeiro, abra a configuração da sinopse na coluna 2 da linha superior e atualize os controles de transformação da seguinte maneira:

Eixo X da escala de transformação: 242%
Eixo Y da escala de transformação: 242%

Transform Translate X-axis: -96px
Transformar o eixo Y da tradução: -44px

Em seguida, atualize as configurações do módulo superior do Blurb na coluna 3 da primeira linha da seguinte maneira:

Eixo X da escala de transformação: 192%
Eixo Y da escala de transformação: 192%

Transformar Traduzir eixo X: -70px
Transformar o eixo Y da tradução: -13px

Em seguida, atualize o módulo de sinopse na coluna 4 da linha superior da seguinte maneira:

Eixo X da escala de transformação: 158%
Eixo Y da escala de transformação: 158%

Transform Translate X-axis: 33px
Transformar o eixo Y da tradução: -13px

Em seguida, atualize o módulo de sinopse inferior na coluna 3 da linha superior da seguinte maneira:

Eixo X da escala de transformação: 132%
Eixo Y da escala de transformação: 132%

Transform Translate X-axis: 89px
Transformar Traduzir eixo Y: 39px

Em seguida, atribua a ele a seguinte cor de fundo para criar uma quebra na borda da linha para um elemento de design sutil:

Cor de fundo: #ffffff

É isso!

Para um elemento de design adicional, você pode aumentar gradualmente a opacidade da cor do círculo em cada um dos ícones usados ​​em todo o layout.

Ajustes para celular

Para ajustar o layout do módulo de sinopses para telas de tablets e telefones, podemos simplesmente definir os efeitos de transformação de volta ao estado original para que as sinopses voltem ao tamanho original e sejam posicionadas de forma adequada dentro das colunas. Para fazer isso, podemos usar o recurso de seleção múltipla do Divi. Como pode ser difícil clicar nos módulos que foram posicionados com a propriedade transform, é um bom momento para ativar o modo de grade nas configurações do construtor. Isso permitirá que você veja os módulos do blurb em suas posições originais. Quando estiver no modo de grade, continue e segure ctrl ou cmd e clique em cada um dos módulos que têm um efeito de transformação. Em seguida, clique no ícone de engrenagem de qualquer um dos módulos selecionados para abrir o modal de configurações do elemento.

No modal Configurações do elemento, atualize o seguinte:

Eixo X da escala de transformação: 100%
Eixo Y da escala de transformação: 100%

Transform Translate X-axis: 0 px
Transformar Traduzir eixo Y: 0 px

Isso restaurará a posição original e a escala das sinopses nas telas do tablet e do telefone.

Resultado final

Aqui está o design final.

Criando o Layout do Módulo Blurb nº 2

Neste próximo exemplo, vou mostrar a você um layout de módulo de blurb exclusivo usando as opções de transformação de escala, translação e rotação do Divi. Também adicionarei um snippet CSS bônus que adiciona perspectiva a cada uma das sinopses. Veja como fazer.

Crie o Título

Primeiro, adicione uma nova seção regular com uma linha de uma coluna. Em seguida, adicione um módulo de texto à linha com o seguinte conteúdo:

<h2>Our Process</h2>
<p>Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.</p>

Em seguida, atualize o resto das configurações do módulo de texto da seguinte forma:

Fonte do título 2: Nunito
Cabeçalho 2 Peso da fonte: Semi negrito
Tamanho do texto do título 2: 50px
Cabeçalho 2 espaçamento entre letras: 7px
Largura: 500px

Criando o layout do Blurb com uma linha de seis colunas

Isso cuida do título. Agora é hora de adicionar a linha para nosso layout de módulo de sinopse. Vá em frente e crie uma nova linha com um layout de seis colunas diretamente sob a linha atual.

Estilizando o Módulo Blurb

Na primeira coluna, adicione um novo módulo de blurb e atualize as configurações da seguinte maneira:

Exclua o corpo do texto na caixa de conteúdo e atualize o texto do título com a palavra “Etapa”.

Em seguida, clique para usar um ícone e escolha o ícone de verificação do círculo.

Dê ao Blurb uma cor de fundo branca da seguinte maneira:

Cor de fundo: #ffffff

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

Cor do ícone: #ffffff
Ícone de círculo: SIM
Cor do círculo: # 3d0dad
Fonte do título: Nunito
Peso da fonte do título: negrito
Estilo da fonte do título: TT
Alinhamento do Texto do Título: Centro
Espaçamento entre letras de título: 4px

Em seguida, dê à sinopse uma sombra de caixa da seguinte maneira:

Sombra da caixa: Veja a captura de tela
Cor da sombra: rgba (0,0,0,0.12)

E, finalmente, adicione o efeito de transformação de rotação ao módulo de propaganda:

Transformar, girar, eixo X: -3deg
Transformar e girar eixo Y: -10deg
Transformar, girar, eixo Z: 31deg

Isso cuida do nosso primeiro módulo de sinopse.

Atualizar configurações de linha

Agora, antes de começarmos a duplicar nosso módulo de blurb, precisamos atualizar as configurações de linha da seguinte maneira:

Largura da calha: 2
Preenchimento personalizado: 11vw superior, 0px inferior

Isso ajudará no espaçamento das sinopses no layout.

Duplicando e estilizando o resto do Blurbs

Agora estamos prontos para duplicar e personalizar o restante das sinopses. Vá em frente e copie o módulo blurb na coluna 1 e cole-o em todas as colunas restantes, exceto na última coluna (coluna 6). Deixaremos a coluna 6 vazia para deixar mais espaço para as sinopses serem movidas para a direita.

Agora abra a configuração do módulo blurb na coluna 2 e atualize o seguinte:

Cor do círculo: # 62de9d

Eixo X da escala de transformação: 120%
Eixo Y da escala de transformação: 120%

Transformar Traduzir eixo Y: -10% (certifique-se de digitar o valor da porcentagem aqui)

Em seguida, atualize o módulo de sinopse na coluna 3 da seguinte maneira:

Cor do círculo: # 5e89fb

Eixo X da escala de transformação: 140%
Eixo Y da escala de transformação: 140%

Transformar Traduzir eixo Y: -20%
Transformar Traduzir eixo X: 10%

Atualize o módulo de sinopse na coluna 4 da seguinte maneira:

Cor do círculo: # 2a3fc9

Eixo X da escala de transformação: 160%
Eixo Y da escala de transformação: 160%

Transformar Traduzir eixo Y: -30%
Transformar Traduzir eixo X: 30%

E, finalmente, atualize o módulo de sinopse na coluna 5 da seguinte maneira:

Cor do círculo: # 62de9d

Eixo X da escala de transformação: 180%
Eixo Y da escala de transformação: 180%

Transformar Traduzir eixo Y: -40%
Transformar Traduzir eixo X: 55%

Como você pode ver, cada uma das sinopses aumentará o tamanho em 20% da esquerda para a direita. E os valores de porcentagem de conversão de transformação garantem que as sinopses permaneçam bem alinhadas.

Como o design transborda para a última coluna (coluna 6), vamos deixá-lo em branco. Mas você sempre pode adicionar outra sinopse na coluna 6 se aumentar o tamanho da linha.

Adicionando a Propriedade Perspectiva a Cada Coluna

Em CSS, a propriedade perspectiva é usada para dar a um elemento posicionado em 3D alguma perspectiva no Z-Space. Basicamente, ele define o quão longe o objeto aparece do usuário quando ele olha para a tela. A propriedade da perspectiva deve ser aplicada ao contêiner pai daquele que tem a posição 3D que, neste caso, é o nosso módulo de sinopse. Portanto, devemos adicionar a perspectiva a cada uma das colunas usando um pequeno trecho de CSS da seguinte maneira.

Adicione o seguinte CSS à caixa CSS do elemento principal da coluna para cada uma das 5 colunas da seguinte maneira:

Elemento principal da coluna 1:

perspective: 1000px

Elemento principal da coluna 2:

perspective: 1000px

Elemento principal da coluna 3:

perspective: 1000px

Elemento principal da coluna 4:

perspective: 1000px

Elemento principal da coluna 5:

perspective: 1000px

Nesse caso, a mudança é muito sutil, mas vale o esforço adicional em minha opinião.

Aqui está o design do layout do módulo de divulgação sem perspectiva.

E aqui está com a perspectiva no lugar.

Se quiser que as sinopses pareçam mais perto do usuário, você pode diminuir o valor da perspectiva. Por exemplo, é assim que as sinopses ficarão com “perspectiva: 400px” adicionado a cada coluna.

Adicionando um Fundo Divisor à Seção

Para fazer com que as sinopses pareçam estar em uma superfície, podemos adicionar um fundo divisor à seção. Abra as configurações da seção e atualize o seguinte:

Estilo do divisor inferior: veja a captura de tela
Cor do divisor inferior: #dddddd
Altura do divisor inferior: 27vw
Repetição horizontal do divisor inferior: 0,8x
Virar divisor inferior: horizontal

Para ajustar o layout para telas de tablet e telefone, você precisará selecionar cada um dos módulos de sinopse e atualizar as seguintes opções de transformação nas configurações de Elemento para tela de tablet:

Eixo X da escala de transformação: 100%
Eixo Y da escala de transformação: 100%

Transformar traduzir eixo Y: 0%
Transformar Traduzir eixo X: 0%

Resultado final

Agora vamos verificar o resultado final do layout do módulo blurb.

Pensamentos finais

Com os controles de transformação do Divi, você pode colocar seus módulos de sinopse em áreas precisas de sua página com grande facilidade. Isso torna divertido experimentar e criar novos layouts de módulo de blurb para apresentar serviços, etapas de processo e inúmeros outros usos. Espero que este tutorial lhe dê um pouco de inspiração para testar essas técnicas de design por si mesmo.

Para mais inspiração, dê uma olhada nestes 5 designs criativos de módulo de blurb.

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

Saúde!