Adicionando sombras transformadas à sua cópia com Divi
Publicados: 2019-06-16Com as novas opções de transformação do Divi, você pode criar um belo design da web enquanto visualiza todas as configurações de transformação em tempo real. E ao combinar diferentes módulos entre si, você pode obter alguns efeitos únicos e contínuos que ajudarão a elevar a aparência da seção em que está trabalhando. Neste post específico, vamos nos concentrar na criação de sombras transformadas para sua cópia usando apenas as opções integradas do Divi. Você também poderá baixar o arquivo JSON de exemplo gratuitamente.
Vamos lá!
Antevisão
Antes de mergulharmos no tutorial, vamos dar uma olhada rápida no resultado em diferentes tamanhos de tela.
Área de Trabalho
Móvel
Baixe o layout da seção Transformed Shadows Hero GRATUITAMENTE
Para colocar suas mãos no layout da seção do herói das sombras transformadas gratuitamente, 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.
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!
Inscreva-se no nosso canal no Youtube
Vamos começar a recriar a seção Hero
Adicionar nova seção
Espaçamento
A primeira coisa que você precisa fazer é adicionar uma nova seção regular a uma página nova ou existente. Abra as configurações da seção e remova todo o preenchimento padrão superior e inferior.
- Preenchimento superior: 0 px
- Preenchimento inferior: 0 px
Transbordar
Vá para a guia avançada e certifique-se de que os estouros de seção estejam ocultos. Posteriormente neste post, usaremos algumas opções de transformação e ocultar o estouro garantirá que nada ultrapasse o contêiner da seção.
- Excesso horizontal: oculto
- Estouro vertical: oculto
Adicionar nova linha
Estrutura da Coluna
Continue adicionando uma nova linha usando a seguinte estrutura de coluna:
Dimensionamento
Sem adicionar nenhum módulo ainda, abra as configurações de linha e permita que a linha ocupe toda a largura da tela aplicando as seguintes configurações:
- Usar largura de calha personalizada: Sim
- Largura da calha: 1
- Equalize Alturas de Coluna: Sim
- Largura: 100%
- Largura máxima: 100%
Espaçamento
Passe para as configurações de espaçamento, remova o preenchimento inferior padrão e adicione algum espaço personalizado no lado esquerdo e direito da linha.
- Preenchimento inferior: 0 px
- Preenchimento esquerdo: 4vw
- Preenchimento direito: 4vw
Adicione o Módulo de Texto # 1 à Coluna 1
Adicionar conteúdo
É hora de começar a adicionar os diferentes módulos, começando com um Módulo de Texto. Insira a cópia de sua escolha.
Configurações de texto
Vá para a guia de design e altere as configurações de texto de acordo:
- Fonte do texto: Playfair Display
- Alinhamento de Texto: Direito
- Cor do texto: #ffffff
- Tamanho do texto: 11vw
- Altura da linha de texto: 1em
- Comprimento vertical da sombra do texto: 0,02em
- Força do borrão da sombra do texto: 0,16em
- Cor da sombra do texto: rgba (0,0,0,0.44)
Clone Text Module # 1
Mudar o Conteúdo
Depois de concluir o primeiro Módulo de texto, você pode cloná-lo e alterar a cópia da duplicata.
Adicionar novo módulo de texto acima do módulo de texto nº 1
Adicionar conteúdo
Passe para o próximo módulo, que é outro Módulo de Texto. Desta vez, estamos colocando o módulo no topo da coluna. Nas próximas etapas, transformaremos este Módulo de texto na sombra de texto transformada do módulo que vem a seguir. Certifique-se de usar a mesma cópia.
Configurações de texto
Vá para a guia de design e altere as configurações de texto de acordo:
- Fonte do texto: Playfair Display
- Peso da fonte do texto: negrito
- Alinhamento de Texto: Direito
- Cor do texto: rgba (94,150,187,0,28)
- Tamanho do texto: 11vw
- Espaçamento entre letras do texto: 4,5 px
- Altura da linha de texto: 1em
Transformar Traduzir
É hora de transformar o módulo para torná-lo parecido com a sombra de texto transformada do próximo módulo! Vá para as configurações de espaçamento e modifique os valores de conversão de transformação.
- Direito: 13,9vw
- Inferior: -2,1vw
Transformar, girar
Gire o módulo também.
- Centro: 291deg
Transformar inclinação
E aumente o valor de inclinação inferior.
- Inferior: 30deg
Clonar Módulo de Texto Transformado e Colocar Acima do Módulo de Texto Nº 2
Mudar o Conteúdo
Depois de criar o módulo de sombra de texto transformado, você pode cloná-lo e colocá-lo acima do terceiro Módulo de texto na coluna. Certifique-se de alterar a cópia.
Alterar configurações de texto
Vá para a guia de design e altere a cor do texto.
- Cor do texto: # f3e4df
Adicionar Espaçamento
Para compensar o espaço extra que foi criado pelo módulo de sombra de texto transformado, vamos adicionar uma margem superior negativa.
- Margem superior: -12vw
Adicionar Módulo de Texto de Descrição à Coluna 1
Adicionar conteúdo
O próximo módulo de que precisamos na coluna 1 é outro Módulo de Texto. Insira uma descrição de sua escolha.
Configurações de texto
Vá para a guia de design e altere as configurações de texto de acordo:
- Fonte do texto: Open Sans
- Alinhamento de Texto: Direito
- Altura da linha de texto: 2.3em
Dimensionamento
Altere a largura do módulo em diferentes tamanhos de tela nas configurações de dimensionamento.
- Largura: 53% (desktop), 70% (tablet), 90% (telefone)
- Alinhamento do Módulo: Direito
Adicionar Módulo de Botão à Coluna 1
Adicionar cópia
Passe para o próximo e último módulo na coluna 1, que é um Módulo de Botão. Insira alguma cópia de sua escolha.
Alinhamento
Vá para a guia de design e altere o alinhamento do botão.
- Alinhamento do Botão: Direito
Configurações de botão
Modifique as configurações do botão também.
- Usar estilos personalizados para botão: Sim
- Tamanho do texto do botão: 20 px
- Cor de fundo do botão: # 5e96bb
- Largura da borda do botão: 0 px
- Raio da borda do botão: 50 px
- Fonte do botão: Playfair Display
Espaçamento
E brinque com as configurações de espaçamento para completar o estilo do botão.
- Margem superior: 2vw
- Margem inferior: 3vw
- Enchimento superior: 20 px
- Preenchimento inferior: 20 px
- Preenchimento esquerdo: 50 px
- Preenchimento direito: 50 px
Adicione o Módulo de Imagem # 1 à Coluna 2
Carregar imagem 1: 1
Vamos para a segunda coluna! Aqui, precisaremos de dois Módulos de imagem. Comece com o primeiro Módulo de imagem e carregue uma imagem com uma proporção de 1: 1. Isso significa que a largura e a altura precisam ter o mesmo valor de pixel. Certificar-se de que sua imagem é um quadrado ajudará a transformá-la em um círculo nas próximas etapas.
Dimensionamento
Vá para as configurações de dimensionamento do Módulo de imagem e habilite a opção 'Forçar largura total'.
- Forçar largura total: Sim
Espaçamento
Também estamos adicionando alguma margem superior.
- Margem superior: 2vw
Fronteira
Para transformar o Módulo de imagem em um círculo, vamos adicionar '50vw' a cada um dos cantos. Usar um valor realmente alto nos ajuda a manter uma forma circular em diferentes tamanhos de tela.
Sombra da caixa
Por último, mas não menos importante, também adicionaremos uma sombra de caixa ao Módulo de imagem, usando as seguintes configurações:
- Posição horizontal da sombra da caixa: -300 px
- Posição vertical da sombra da caixa: -300 px
- Cor da sombra: rgba (94.150.187,0.28)
Adicionar Módulo de Imagem # 2 à Coluna 2
Carregar imagem 1: 1
Vamos para o segundo Módulo de Imagem na coluna 2. Estamos, novamente, nos certificando de que a imagem que carregamos tem uma proporção de 1: 1.
Dimensionamento
Vá para a guia de design e altere a largura.
- Largura: 62%
Fronteira
Adicione '50vw' a cada um dos cantos deste Módulo de imagem também.
Sombra da caixa
Também adicionaremos uma sombra de caixa personalizada.
- Posição horizontal da sombra da caixa: -200 px
- Posição vertical da sombra da caixa: 150 px
- Cor da sombra: # d4c1bd
Transformar Traduzir
Por último, mas não menos importante, altere a posição do Módulo de Imagem usando a opção transformar traduzir e pronto!
- Direito: -13vw
- Inferior: 19vw
Antevisão
Agora que já passamos por todas as etapas, vamos dar uma olhada final no resultado em diferentes tamanhos de tela.
Área de Trabalho
Móvel
Pensamentos finais
Nesta postagem, mostramos como usar de forma criativa módulos de texto duplicados para criar sombras de texto transformadas. Esta é uma maneira interessante de colocar sua cópia em destaque e usar as opções integradas do Divi de outra perspectiva. Esperamos que tenha gostado deste tutorial e se você tiver alguma dúvida ou sugestão, deixe um comentário na seção de comentários abaixo!
Se você está ansioso para aprender mais sobre o Divi e obter mais brindes do Divi, certifique-se de assinar nosso boletim informativo por e-mail e canal no YouTube para que você sempre seja uma das primeiras pessoas a saber e obter os benefícios desse conteúdo gratuito.