Ir para o conteúdo principal

Como criar reflexões de imagem em Divi

Divi: o tema WordPress mais fácil de usar

Divi: O melhor tema WordPress de todos os tempos!

mais Downloads 600.000Divi é o tema WordPress mais popular do mundo. É completo, fácil de usar e vem com mais de modelos livres 62. [Recomendado]

O design de reflexão para imagens e texto é uma técnica de design clássica que pode ser usada para incrementar o conteúdo de uma página da web. Além disso, o Divi facilita a criação dessas reflexões diretamente do Divi Builder sem precisar usar um editor de fotos.

Neste tutorial, mostrarei como projetar reflexões para imagens Divi. A chave para reflexões é usar a opção de transformação Divi para criar uma versão espelhada de um elemento. Depois disso, você pode adicionar uma sobreposição personalizada que mostrarei como usar com um módulo de texto.

Vamos começar!

exame

Aqui está uma visão geral dos projetos que iremos construir neste tutorial.

O que você precisa para começar

Para começar, tudo que você precisa é Divi. Certifique-se de que o tema Divi esteja instalado e ativo. Vamos criar nossos projetos a partir do zero usando o Divi Builder no front-end (construtor visual). Você também precisará de algumas imagens fictícias para este tutorial (uma imagem de fundo de aproximadamente 1920px x 600px e outra imagem de aproximadamente 500px x 350px).

Quando estiver pronto, vá para o seu painel do WordPress e vá para Páginas> Adicionar. Dê um título à sua nova página e implemente o Divi Builder no front-end. Selecione a opção "Build from Scratch". Agora você está pronto para ir!

A ideia básica por trás da criação de uma imagem e reflexão de texto em Divi

A ideia básica de criar padrões de pensamento em Divi consiste em três etapas:

  1. Crie um módulo com sua imagem ou texto
  2. Duplique o módulo e use a escala de transformação para criar a imagem espelhada ou texto
  3. Adicione uma sobreposição de gradiente ao elemento espelhado usando um divisor ou um módulo de texto de posicionamento absoluto.

Esta técnica de design não está limitada a módulos individuais. Na verdade, você pode adicionar reflexos a linhas inteiras em Divi usando esse método, o que é útil para criar designs de cabeçalho exclusivos. Vamos adicionar reflexo a uma linha do nosso projeto de reflexão de texto mais adiante neste tutorial. Mas por enquanto, vamos começar criando uma reflexão de imagem.

Como criar uma reflexão de imagem

Para criar uma reflexão 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.

Você está procurando os melhores temas e plugins do WordPress?

Baixe os melhores plugins e temas WordPress no Envato e crie facilmente o seu site. Já mais do que 49.720.000 downloads. [EXCLUSIVO]

Baixe a imagem que você deseja da biblioteca 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 na parte inferior

Crie a imagem espelhada

Para criar o efeito de reflexão, devemos primeiro criar uma cópia duplicada da imagem diretamente abaixo da imagem.

Para fazer isso, duplique o módulo de imagem. Em seguida, atualize os parâmetros da imagem duplicada da seguinte maneira:

Opacidade: 40%
Eixo X da escala de transformação: -100%

A propriedade da escala Transform é o que magicamente gira a imagem vertical e horizontalmente para criar uma versão espelhada da imagem.

Isso suporta o projeto básico de reflexão. No entanto, podemos adicionar uma sobreposição de degradê adicional à nossa imagem inferior para um design de reflexão mais realista.

Adicione 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 de baixo. Então podemos adicionar um fundo gradiente ao módulo de texto. Usar um módulo de texto (em vez de um separador) lhe dará a opção adicional de adicionar conteúdo sobre a imagem de reflexão 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.

Crie facilmente seu site com Elementor

Elementor permite criar facilmente qualquer design de site com uma aparência profissional. Pare de pagar caro pelo que você pode fazer por si mesmo. [Grátis]

Reflexões Divi para texto e imagens

Em seguida, atualize as configurações do módulo de texto da seguinte maneira:

Gradiente de fundo esquerdo Cor: rgba (255,255,255,0)
Gradiente de fundo à direita Cor: #ffffff

Largura: 100%
Altura: 50%

Em seguida, adicione o seguinte código CSS personalizado ao elemento principal:

posição: absoluta! importante; top: 50%;

Esse posicionamento absoluto do módulo de texto sobrepõe o módulo de texto na metade inferior da linha.

Adicionando uma cor de fundo

Se você não quiser um plano de fundo branco, poderá usar outras cores de plano de fundo para criar um padrão de reflexo em toda a largura.

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: 0px alto, 0px baixo

Crie facilmente sua loja online

Baixe gratuitamente o WooCommerce, os melhores plugins de e-commerce para vender seus produtos físicos e digitais no WordPress. [FREE]

Vamos ver o resultado agora.

Os reflexos podem parecer muito legais se você dedicar algum tempo para projetá-los corretamente. Felizmente, a Divi tem as ferramentas para fazer isso acontecer. Existem outros métodos para fazer reflexões de CSS, mas, infelizmente, eles tendem a não ter suporte de navegadores. Os desenhos deste tutorial ficarão ótimos em todos os navegadores.

Descobri que as reflexões ficam ótimas em cabeçalhos de página e na apresentação de imagens para um item de portfólio. E tenho certeza que existem muitas outras implementações.

Isso é tudo para este tutorial, espero que permita adicionar reflexões em seu site WordPress usando os recursos internos do Divi.

Deixe um comentário

Seu endereço de email não será publicado. Campos obrigatórios estão marcados com *

Este site usa Akismet para reduzir indesejados. Saiba mais sobre como seus dados de comentários são usados.

Cool WordPress temas que eu encontrei em
E há mais temas e modelos 50 000 para você escolher!

De volta ao topo
1 ações
ação1
chilrear
Enregistrer
Whatsapp