Como projetar reflexos para imagens e texto em Divi
Publicados: 2019-05-19Projetar reflexos para imagens e texto é uma técnica clássica de design que pode ser usada para incrementar o conteúdo de uma página da web. Além disso, o Divi facilita a criação desses reflexos diretamente do Divi Builder, sem a necessidade de usar um editor de fotos.
Neste tutorial, vou mostrar como criar reflexos para imagens e texto em Divi. A chave para fazer reflexos é usar a opção de escala de transformação de Divi para criar uma versão espelhada do elemento. Depois disso, você pode adicionar uma sobreposição personalizada que mostrarei como fazer com um módulo de texto.
Vamos começar!
Espiada
Aqui está uma prévia dos designs que construiremos neste tutorial.
Baixe o Layout de Reflexões de Texto e Imagem GRATUITAMENTE
Para colocar suas mãos nos designs deste 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.
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, tudo que você precisa é Divi. Certifique-se de que o Divi Theme está instalado e ativo. Estaremos criando nossos projetos do zero usando o Divi Builder no front end (construtor visual). Você também precisará de algumas imagens simuladas para este tutorial (uma imagem de fundo em torno de 1920px x 600px e outra imagem em torno de 500px x 350px).
Quando estiver pronto, vá para o painel do WordPress e navegue até Páginas> Adicionar novo. Dê um título à sua nova página e implante o Divi Builder no front end. Selecione a opção “Construir do zero”. Agora você está pronto para ir!
A ideia básica por trás da criação de imagem e reflexão de texto em Divi
A ideia básica por trás da criação de designs de reflexão no Divi envolve três etapas:
- Crie um Módulo com Sua Imagem ou Texto
- Duplique o módulo e use a escala de transformação para criar a imagem ou texto espelhado
- Adicione uma sobreposição de gradiente ao elemento espelhado usando um divisor de posição absoluta ou módulo de texto.
Esta técnica de design não se limita a módulos individuais. Você pode realmente adicionar reflexos a linhas inteiras dentro do Divi usando este método, que é útil para criar designs de cabeçalhos exclusivos. Estaremos adicionando reflexão a uma linha em nosso design de reflexão de texto um pouco mais tarde neste tutorial. Mas, por enquanto, vamos começar explicando como criar reflexo na imagem.
Como Criar Reflexo de Imagem
Para criar um reflexo de imagem, vamos começar criando uma nova seção regular com uma linha de uma coluna.
Em seguida, adicione um módulo de imagem à linha.
Carregue a imagem desejada da galeria de mídia para o módulo de imagem. Em seguida, atualize as seguintes configurações de imagem:
Largura máxima: 600px
Alinhamento do Módulo: centro
Margem personalizada: 0px inferior
Crie a imagem espelhada
Para criar o efeito de reflexo, primeiro precisamos criar uma duplicata espelhada da imagem diretamente abaixo da imagem.
Para fazer isso, duplique o módulo de imagem. Em seguida, atualize as configurações da imagem duplicada da seguinte maneira:
Opacidade: 40%
Eixo X da escala de transformação: -100%
A propriedade de escala de transformação é o que vira magicamente a imagem vertical e horizontalmente para criar uma versão espelhada da imagem.
Isso cuida do design básico do reflexo. No entanto, podemos adicionar uma sobreposição de gradiente adicional à nossa imagem inferior para um design de reflexão mais realista.
Adicionar uma sobreposição de gradiente usando um módulo de texto
Para adicionar uma sobreposição de gradiente à nossa imagem inferior, podemos usar um módulo de texto. Podemos dar ao módulo de texto uma posição absoluta para que fique acima da imagem inferior. Em seguida, podemos adicionar um fundo gradiente ao módulo de texto. Usar um módulo de texto (em vez de um divisor) lhe dará a opção bônus de adicionar algum conteúdo em cima da imagem refletida mais tarde, se desejar.
Vá em frente e crie um módulo de texto sob a imagem inferior.
Exclua o conteúdo padrão para que o módulo de texto fique vazio.
Em seguida, atualize as configurações do módulo de texto da seguinte forma:
Cor do gradiente de fundo à esquerda: rgba (255,255,255,0)
Cor certa do gradiente de fundo: #ffffff
Largura: 100%
Altura: 50%
Em seguida, adicione o seguinte CSS personalizado ao elemento principal:
position: absolute !important; top: 50%;
Este posicionamento absoluto do módulo de texto sobrepõe o módulo de texto na metade inferior da linha.
Vamos verificar a aparência do design até agora.
Adicionando uma cor de fundo
Se você não quiser um fundo branco, pode experimentar outras cores de fundo que criam um design de reflexão de largura total exclusivo.
Para fazer isso, abra as configurações de linha e atualize o seguinte:
Cor de fundo: # 000000
Largura: 100%:
Largura máxima: 100%;
Preenchimento personalizado: 0 px superior, 0 px inferior
Agora vamos verificar o resultado.
Adicionando texto à sobreposição do módulo de texto
Lembre-se, como estamos usando o módulo de texto como sobreposição na imagem inferior, podemos adicionar algum conteúdo se quisermos.
Para fazer isso, abra as configurações do módulo de texto e atualize o seguinte:
Conteúdo: “Reflexão da imagem”
Cor do texto do texto: #ffffff
Tamanho do texto do texto: 30px
Orientação do texto: centro
Design final
Aqui está o design final do reflexo da imagem.
Criação de reflexo de texto em Divi
Para este próximo exemplo, vamos criar um design de reflexão de texto. O processo é muito semelhante a como você criaria um reflexo de imagem. No entanto, para este exemplo, vou criar um reflexo para uma linha inteira. Isso permitirá o uso para refletir o texto e a imagem de fundo para um bom design de cabeçalho.
Aqui está como fazer.
Primeiro crie uma nova seção regular com uma linha de uma coluna. Em seguida, adicione um módulo de texto à linha.
Atualize o conteúdo com a palavra “Reflexão”.
Em seguida, atualize as configurações de design da seguinte forma:
Fonte do Texto: Oswald
Estilo da fonte do texto: TT
Cor do texto do texto: # 333333
Tamanho do texto do texto: 10vw
Altura da linha de texto: .9em
Orientação do texto: centro
Margem personalizada: 0px inferior
Preenchimento personalizado: 4vw superior
Atualize as configurações de linha
Agora que nosso módulo de texto está personalizado, é hora de atualizar as configurações da linha.
Abra as configurações de linha e atualize o seguinte:
Imagem de fundo: insira a imagem de fundo
Largura da calha: 1
Largura: 100%
Largura máxima: 100%
Preenchimento personalizado: 0 px superior, 0 px inferior
Aqui está a aparência do design até agora.
Criando a linha de texto de reflexão
Para criar o texto de reflexão para este desenho, vamos refletir toda a linha para que possamos incluir a imagem de fundo no reflexo.
Duplique a linha e atualize o seguinte:
Eixo Y da escala de transformação: -100%
Agora, a linha abaixo é uma imagem espelhada da linha acima. Agora tudo o que precisamos fazer é adicionar uma sobreposição.
Adicionar uma sobreposição de gradiente usando um módulo de texto
Para adicionar uma sobreposição de gradiente à reflexão de texto da linha inferior, podemos usar um módulo de texto como fizemos no primeiro design de reflexão de imagem acima. Como antes, podemos dar ao módulo de texto uma posição absoluta para que ele preencha toda a linha e fique em cima do outro módulo de texto com nosso texto de reflexão. Em seguida, podemos adicionar um fundo gradiente à sobreposição do módulo de texto.
Vá em frente e crie um novo módulo de texto sob o módulo de texto na linha inferior.
Abra as novas configurações do módulo de texto e exclua o conteúdo para que o módulo de texto fique vazio.
Em seguida, atualize as configurações da seguinte forma:
Cor do gradiente de fundo à esquerda: #ffffff
Cor do gradiente de fundo à direita: rgba (255,255,255,0,13)
Posição inicial: 38%
Largura: 100%
Altura: 100%
Em seguida, adicione o seguinte CSS personalizado ao elemento principal:
position: absolute !important; top: 0;
É isso!
Resultado final
Confira o resultado final.
Aqui está o mesmo design sem nenhuma imagem de fundo.
Pensamentos finais
Os reflexos podem parecer muito legais se você reservar um tempo para projetá-los da maneira certa. Felizmente, Divi tem as ferramentas para fazer isso acontecer. Existem outros métodos para fazer reflexos CSS, mas infelizmente eles tendem a não ter suporte para navegadores diferentes. Os designs neste tutorial ficarão bem em todos os navegadores.
Descobri que os reflexos ficam ótimos nos cabeçalhos das páginas e na exibição de imagens para um portfólio. E tenho certeza de que existem muitas outras implementações também.
Estou ansioso para ouvir de você nos comentários.
Saúde!