Como criar um poste de sinalização 3D com efeitos de flutuação em Divi
Publicados: 2019-05-13Todos sabemos que um bom site torna mais fácil para os visitantes encontrarem o que procuram de forma rápida e eficiente. E sempre ajuda se você pode tornar seu conteúdo mais envolvente. Neste tutorial, vou mostrar a você como projetar um poste de sinalização 3D que irá envolver os usuários e tornar mais fácil para eles encontrarem o que procuram de uma maneira única. Para fazer isso, usaremos as opções de transformação de Divi e a propriedade css de perspectiva em vários módulos do blurb para criar o efeito 3D de sinais girados em um poste.
Vamos começar!
Espiada
Baixe o 3D Sign Post Layout GRATUITAMENTE
Para colocar suas mãos no design do Poste de Sinalização 3D deste tutorial, primeiro você precisa baixá-lo 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.
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.
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
O que você precisa para começar
Para começar, você precisará do seguinte:
- Certifique-se de ter o Divi Theme instalado e ativo no seu site WordPress.
- Se você deseja criar sua própria imagem de postagem, você precisará de um editor de fotos como o Photoshop, Gimp ou Sketch. Ou você pode usar a imagem fornecida no download do layout gratuito para este design acima.
- Fora isso, estaremos construindo tudo do zero no front end do Divi Builder.
Criando a imagem para a placa de sinalização
A maneira mais fácil de criar um poste de sinalização para este projeto é criar um pequeno bloco de imagem repetível que podemos adicionar como uma imagem de fundo que se repete verticalmente na seção ou linha da página. Se quiser pular esta etapa, você pode importar o layout json incluído no download gratuito acima para começar. Mas se você quiser criar o seu próprio com uma cor personalizada de sua escolha, veja como fazer isso.
Para este exemplo, vou usar o Photoshop, mas o processo também é muito semelhante para outros editores de fotos populares.
No Photoshop, clique para criar um novo documento com altura e largura personalizadas de 25px.
Defina a cor do primeiro plano como preto (# 000000) ou qualquer cor desejada.
Em seguida, selecione a ferramenta balde de tinta e clique dentro da camada quadrada vazia para pintar o quadrado de preto.
Em seguida, salve sua imagem como um jpeg em seu computador. Esta é a imagem que usaremos no projeto para criar o poste para o nosso projeto de poste de sinalização 3D.
Implementando o 3D Sign Post Design em Divi
Quando estiver pronto, certifique-se de criar uma nova página, fornecer um título para a página e implantar o Divi Builder no front end. Selecione a opção “Build From Scratch”.
Sua tela em branco o aguarda!
Agora crie uma nova seção regular com uma linha de uma coluna.
Personalizando a Linha
Antes de adicionar um módulo, abra as configurações de linha e atualize o seguinte:
Imagem de fundo: [inserir imagem quadrada personalizada para postagem]
Tamanho da imagem de fundo: tamanho real
Repetição da imagem de fundo: repetir Y (verticalmente)
Em seguida, atualize o seguinte:
Largura da calha: 1
Largura máxima: 980 px
Preenchimento personalizado: 2vw superior, 2vw inferior
Em seguida, precisamos adicionar o seguinte CSS personalizado ao elemento principal da coluna da seguinte maneira:
perspective: 1000px;
Esta propriedade css de perspectiva é necessária para obter o efeito 3D do sinal (ou sinopse) sempre que o girarmos com as opções de transformação.
Para obter mais informações sobre isso, verifique como a perspectiva funciona com as opções de transformação do Divi.
Criando um sinal com um módulo do Blurb
Para criar nosso primeiro sinal em nosso poste de sinalização 3D, usaremos um módulo de sinopse. Vá em frente e adicione um módulo de sinopse à linha.
Em seguida, abra as configurações da sinopse e atualize o conteúdo da sinopse da seguinte maneira:
Diminua o conteúdo da simulação para incluir apenas algumas linhas de texto.
Ícone de uso: SIM
Ícone: seta para a esquerda (veja a imagem)
Cor de fundo: # 1a233f
Cor do ícone: # 9eb3c2
Posicionamento de imagem / ícone: esquerda
Use o tamanho da fonte do ícone: SIM
Tamanho da fonte do ícone: 80px
Orientação do texto: centro
Fonte do título: Playfair Display
Cor do texto do título: # 9eb3c2
Tamanho do texto do título: 38 px (desktop), 26 px (telefone)
Largura máxima: 600px
Alinhamento do Módulo: Centro
Preenchimento personalizado: 5% superior, 5% inferior, 5% esquerdo, 5% direito
Cantos arredondados: 20px
Largura da borda: 3px
Cor da borda: # 21335e
Isso cuida do estilo de nosso módulo de sinopse, mas para obter nosso efeito 3D, precisamos usar as opções de transformação para girar nosso módulo de sinopse. Para fazer essa atualização, faça o seguinte:
Transformar, girar, eixo X: 20deg
Duplique a linha para mais sinais
Agora que concluímos um de nossos designs de sinalização, podemos duplicar a linha para fazer mais. Cada vez que duplicamos a linha, simplesmente precisamos atualizar a rotação de transformação para que os sinais girem em graus diferentes ao redor do poste.
Vá em frente e duplique a linha e atualize o módulo de sinopse na nova linha da seguinte maneira:
Transformar, girar o eixo X: -30deg
Duplique a linha para criar um terceiro sinal e atualize o módulo blurb nessa nova linha da seguinte forma:
Transformar, girar, eixo X: 40deg
Mudando a direção do segundo sinal
No momento, todas as setas estão apontando na mesma direção. Para mudar a direção da esquerda para a direita, precisamos atualizar um pouco as configurações do módulo blurb.
Abra as configurações do módulo blurb na segunda linha (a do meio) e atualize o seguinte:
Ícone: seta para a direita (veja a imagem)
Orientação do Texto: Esquerda
Podemos inverter a ordem do conteúdo da sinopse para que o texto fique à esquerda e o ícone à direita. Para fazer isso, precisamos adicionar uma única linha de CSS personalizado ao elemento principal da seguinte maneira:
direction: rtl;
Agora o conteúdo da sinopse está invertido e você tem um sinal apontando em uma nova direção!
Girar os sinais de volta ao estado original ao pairar
Uma das coisas interessantes sobre esta configuração é que você pode facilmente adicionar um estado de foco para trazer o módulo girado de volta à rotação original (0 graus). Isso permite que o usuário se envolva com o conteúdo e tenha uma visão clara do texto ao passar o mouse sobre o módulo.
Como queremos adicionar o mesmo estado de foco a todos os três módulos do blurb, use multiselect para selecionar todos os três módulos do blurb e abra as configurações de um dos módulos para abrir o modal de configurações do elemento. Em seguida, atualize o seguinte:
Transformar, girar o eixo X (pairar): 0deg
Salve as configurações e pronto!
Agora verifique o design e a funcionalidade até agora.
Personalizando nossa seção com uma imagem de fundo
Em nossa última etapa, podemos adicionar uma nova imagem de fundo à nossa seção. Isso é opcional, claro, mas a imagem certa pode parecer muito legal, especialmente se você usar o efeito de paralaxe.
Abra a seção e adicione uma nova imagem de fundo. (Estou usando uma imagem de nosso pacote de layout de agência)
Em seguida, atualize o seguinte:
Use o efeito de paralaxe: SIM
Preenchimento personalizado: 0 px superior, 0 px inferior
Resultado final
Pensamentos finais
Criar um post de sinalização 3D realmente adiciona um elemento de design criativo e envolvente ao seu site que pode realmente fazer seu conteúdo se destacar (literalmente). E o efeito de foco permite que o usuário visualize o conteúdo sem o efeito 3D para um bom retrocesso. Não se esqueça de que você pode adicionar facilmente um URL de link ao módulo blurb para que ele possa servir como um elemento de navegação clicável, se desejar. De qualquer forma, espero que isso lhe dê alguma inspiração para seu próximo projeto.
Estou ansioso para ouvir de você nos comentários.
Saúde!