Como criar módulos flutuantes que colidem no espaço 3D em Divi

É sempre divertido explorar novos designs possíveis com o Divi. E hoje, vamos usar o Divi para explorar o espaço 3D! Tecnicamente, exploraremos como projetar módulos flutuantes que parecem estar colidindo no espaço 3D. Este design funcionará bem como uma forma criativa de impressionar os visitantes, mostrando que você tem uma “extensão” de serviços, produtos ou recursos em seu site.

Obviamente, este tutorial não se compara ao que eu imagino que a exploração do espaço na vida real seria. Mas, espero que vocês exploradores Divi possam aprender algumas coisas ao longo do caminho.

Espiada

Aqui está uma prévia do design que construiremos juntos.

Baixe os módulos flutuantes que colidem no layout do espaço 3D GRATUITAMENTE

Para colocar suas mãos no design construído neste 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 para sua página, simplesmente extraia o arquivo zip e arraste o arquivo json para o Divi Builder.

Vamos para o tutorial, vamos?

Inscreva-se no nosso canal no Youtube

Primeiros passos com um layout pré-fabricado

Para começar, certifique-se de ter o tema Divi instalado e ativo. Em seguida, crie uma nova página, dê um título a ela e implante o Divi Builder (no front end). Selecione a opção “Choose a premade layout”. Em seguida, selecione o layout da página inicial do videogame e importe-o para sua nova página.

Para obter uma vantagem inicial em nosso design, usaremos a seção intitulada “Características do jogo”, que contém as sinopses que usaremos em nosso design. Como esta é a única seção de que realmente precisamos, vá em frente e exclua todas as seções e linhas, exceto as duas linhas de sinopses.

Implementando os Blurbs flutuantes em design de espaço 3D em Divi

Criação da primeira linha do Blurbs

Dentro da seção do layout predefinido contendo as duas linhas de sinopses, crie uma nova linha de uma coluna e arraste-a para o topo da seção.

Agora, usando o recurso multisseleção do Divi (segure ctrl / cmd enquanto seleciona cada sinopse), selecione 5 das sinopses nas duas colunas abaixo e arraste-as para a nova linha de uma coluna no topo da seção.

Agora você pode excluir as duas linhas que vieram com o layout predefinido abaixo. Depois disso, você deve ter apenas uma linha de uma coluna contendo 5 sinopses.

Adicionando perspectiva à nossa seção

Para obter o efeito 3D que procuramos neste projeto, precisamos adicionar a propriedade css da perspectiva à nossa seção. Isso adicionará a perspectiva 3D à nossa linha sempre que girarmos a linha usando as opções de transformação.

Abra as configurações da seção e adicione o seguinte CSS personalizado ao elemento principal:

perspective: 1000px;

Posteriormente, você pode querer aumentar ou diminuir o valor da perspectiva para trazer os elementos 3D (neste caso, as linhas) para mais perto ou mais longe da perspectiva do usuário ao olhar para a tela.

Para obter mais informações, verifique como a perspectiva funciona com as opções de transformação no Divi.

Personalizando a Linha

Antes de começarmos a estilizar nossas sinopses, vamos primeiro definir nossas configurações de linha. Existem três coisas principais que precisamos mudar no nível da linha para este design:

1. Precisamos alinhar nossas sinopses horizontalmente usando “display: flex”. Isso manterá nosso design consistente e responsivo em todos os dispositivos (ao contrário de usar um layout de 5 colunas que pode quebrar no tablet e no telefone).
2. Precisamos nos livrar das margens da coluna padrão definindo a largura da medianiz como 1.
3. Precisamos usar a rotação de transformação para girar a linha 45 graus no eixo X. Com a propriedade perspectiva adicionada ao pai (a seção), a linha e todos os seus elementos têm o efeito 3D que estamos procurando.

Abra as configurações de linha e atualize o seguinte:

Largura da calha: 1
Largura: 80% (desktop), 100% (tablet), 100% (telefone)
Transformar, girar, eixo X: 45 graus

CSS do elemento principal da coluna:

display: flex;
justify-content: center;

Ajustando o estilo e espaçamento do Blurb

Agora é hora de ajustar um pouco o conteúdo e o estilo de nossas sinopses.

Como queremos aplicar as mesmas personalizações a todas as nossas sinopses, use multiselect novamente para selecionar todas as sinopses e implantar o modal de configurações de elemento.

Primeiro, exclua o conteúdo do corpo.

Em seguida, adicione uma cor de fundo:

Cor de fundo: rgba (20.241.217,0.16)

Em seguida, atualize o seguinte espaçamento:

Margem personalizada (desktop): 2vw à direita
Margem personalizada (tablet e telefone): 0vw à direita

Preenchimento personalizado: 2% superior, 2% inferior, 3% esquerdo, 3% direito

Em seguida, adicione uma borda da seguinte maneira:

Largura da borda: 2 px
Cor da borda: rgba (20,241,217,0,66)

Neste ponto, todas as sinopses têm o estilo adequado. Ainda precisamos usar as opções de transformação para alterar a escala e a posição de cada uma das sinopses individualmente, o que aumentará o efeito flutuante 3D das sinopses. Mas antes de fazermos isso, vamos duplicar a linha para criar nossa segunda linha de sinopses.

Criando a segunda linha de sinopses

Para criar a segunda linha de sinopses, basta duplicar a linha de 5 sinopses que você acabou de personalizar.

Para criar um efeito de colisão, podemos girar a linha duplicada na direção oposta (-45deg).

Abra a linha duplicada e atualize o seguinte:

Transformar, girar eixo X: -45deg

Aumentar o enchimento da seção superior e inferior

Neste ponto, as sinopses frontais podem se estender para fora da seção. Para corrigir isso, adicione o seguinte preenchimento à sua seção:

Preenchimento personalizado: 15% superior, 15% inferior

Usando opções de transformação para dimensionar e posicionar cada Blurb individualmente

Neste ponto, você está pronto para ser criativo com a forma como deseja que cada um de seus anúncios "flutue" no espaço 3D. Para fazer isso, você pode usar as opções de transformação para dimensionar e posicionar cada sinopse, um por um, exatamente onde quiser. Ao fazer isso, suas sinopses parecerão ter diferentes profundidades no espaço 3D.

Para facilitar as coisas, numerarei as sinopses de 1 a 10, começando com a sinopse da extrema esquerda na linha superior (Blurb # 1) e terminando com a sinopse da extrema direita na segunda linha (Blurb # 10).

Blurb # 1

Vamos começar com nossa primeira sinopse na linha superior. Abra as configurações do blurb e atualize o seguinte:

Escala de transformação (eixos xey): 90%

Blurb # 2

Abra as configurações do Blurb # 2 e atualize o seguinte:

Escala de transformação (eixos xey): 80%
Transformar Traduzir eixo X: -10%

Blurb # 3

Escala de transformação (eixos xey): 80%
Transformar Traduzir eixo X: 20%

Blurb # 4

Escala de transformação (eixos xey): 85%
Transformar Traduzir eixo X: -30%

Blurb # 5

Escala de transformação (eixos xey): 60%

Uma vez feito isso, sua primeira linha deve ser parecida com isto.

Continue personalizando as opções de transformação para as sinopses 6 a 10, começando com a sinopse # 6 na extremidade esquerda da segunda linha.

Blurb # 6

Escala de transformação (eixos xey): 60%
Transformar o eixo X da tradução: -40%
Transformar o eixo Y da tradução: -20%

Blurb # 7

Escala de transformação (eixos xey): 90%
Transformar Traduzir eixo X: 20%

Blurb # 8

Escala de transformação (eixos xey): 70%
Transformar o eixo X da tradução: -50%

Blurb # 9

Escala de transformação (eixos xey): 80%
Transformar o eixo X da tradução: -20%

Blurb # 10

Escala de transformação (eixos xey): 70%
Transformar o eixo X da tradução: -60%

Agora vamos verificar a aparência da segunda linha ao colidir com nossa primeira linha no espaço 3D.

Para completar o design, podemos adicionar uma bela imagem de fundo do espaço 3D à seção. Estou usando a imagem de plano de fundo da seção superior que veio com o layout da página inicial do videogame que usamos para este tutorial.

Design final

Agora vamos verificar o design final de nossos módulos flutuantes 3D.

Área de Trabalho

Tábua

Telefone

Por causa das 5 sinopses que se estendem pela linha, é um pouco mais desafiador ajustar todas as 5 sinopses sem que elas se estendam para fora da janela de visualização. Para corrigir isso, você pode simplesmente ocultar a sinopse mais distante em cada linha do telefone. Ou você pode dar a cada uma de suas sinopses um tamanho menor no telefone.

Pensamentos finais

Espero que este tutorial lhe dê alguma inspiração sobre como criar seus próprios módulos flutuantes no Espaço 3D. Tudo o que realmente precisa são algumas etapas para fazer com que toda a sua linha de módulos seja girada em 3D usando as opções de perspectiva e transformação. Depois disso, você pode posicionar cada um dos módulos para colocá-los em flutuação em qualquer lugar que desejar.

Divirta-se explorando.

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

Saúde!