Como adicionar marcadores de imagem com as opções de transformação do Divi

Os marcadores de imagem são uma ótima maneira de mostrar as características especiais de um produto. Nesta postagem, mostraremos como criar marcadores de imagem usando um módulo de texto e um divisor vertical. Graças às configurações de transformação dentro das colunas, um marcador de imagem pode ser colocado em qualquer lugar que você precisar. Para mostrar como essa técnica é versátil, mostraremos dois exemplos de design diferentes. Você também poderá baixar o arquivo JSON gratuitamente!

Vamos lá!

Antevisão

Antes de mergulharmos no tutorial, vamos dar uma olhada rápida no resultado em diferentes tamanhos de tela.

Exemplo 1

Área de Trabalho

Móvel

Exemplo # 2

Área de Trabalho

Móvel

Baixe o layout dos marcadores de imagem GRATUITAMENTE

Para colocar suas mãos no layout de marcadores de imagem gratuitos, 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!

Inscreva-se no nosso canal no Youtube

Recriar o Exemplo # 1

Vamos começar a recriar o primeiro exemplo de design!

Adicionar nova seção

Adicione uma nova seção à página em que está trabalhando. Antes de adicionar uma linha, ajuste as configurações da seção primeiro.

Fundo

Adicione um gradiente e, em seguida, uma imagem com um modo de mesclagem de tela.

• Plano de fundo: gradiente + imagem
• Gradient Color 1: White #ffffff
• Gradient Color 2: Medium Grey # 666666
• Posição inicial do gradiente: 22%
• Mistura de imagem de fundo: tela

Espaçamento

Remova o preenchimento padrão superior e inferior da seção seguinte.

• Preenchimento superior e inferior: 0vw

Visibilidade

Conclua as configurações da seção, ocultando os estouros da seção.

• Excesso vertical e horizontal: oculto

Adicionar linha # 1

Agora, adicione uma nova linha com três colunas.

Antes de adicionar qualquer módulo, ajuste as configurações de linha.

Dimensionamento

Primeiro, ajuste o tamanho da linha.

• Usar largura de calha personalizada: Sim
• Largura da calha: 1
• WIdth: 100%
• Largura máxima: 100%

CSS customizado

Em seguida, adicione uma única linha de código CSS ao elemento principal da linha. Isso permitirá que as colunas apareçam lado a lado em telas menores também.

• Elemento principal CSS: display: flex;

display: flex;

Coluna 1

Transformar Traduzir

Aplique um efeito de conversão de transformação personalizado à primeira coluna para reposicionar a coluna. Esta etapa fará sentido quando você adicionar os módulos de marcador de imagem posteriormente na postagem. Se estiver usando essa técnica em outro design, você precisará alterar esses valores de acordo.

• Transformar Traduzir: eixo x 2vw, eixo y 16vw

Índice Z

Adicione um valor de índice z maior à guia de visibilidade.

• Índice Z: 10

Coluna 2

Transformar Traduzir

Aplique um efeito de conversão de transformação à segunda coluna.

• Transformar Traduzir: eixo x -11vw, eixo y 6vw

Índice Z

Aumente o valor do índice z.

• Índice Z: 10

Coluna 3

Transformar Traduzir

Modifique os valores de conversão de transformação da terceira coluna.

• Transformar Traduzir: eixo x -11vw, eixo y 8vw

Índice Z

E mude o valor do índice z.

• Índice Z: 10

Adicionar linha # 2

Antes de adicionar qualquer módulo à primeira linha, adicione uma nova linha de uma coluna. Faça isso antes de adicionar os marcadores de imagem para que você possa ver o que está acontecendo na tela enquanto projeta.

Dimensionamento

Altere as configurações de dimensionamento da linha.

• Usar largura de calha personalizada: Sim
• Largura da calha: 1
• WIdth: 100%
• Largura máxima: 100%

Adicionar Módulo de Imagem

Adicione um módulo de imagem a seguir.

Dimensionamento

Força a largura total no módulo de imagem para garantir que o design permaneça responsivo em todos os tamanhos de tela.

• Forçar largura total: Sim

Espaçamento

Em seguida, adicione um pouco de preenchimento esquerdo e direito para diminuir a imagem.

• Preenchimento esquerdo e direito: 10vw

Adicionar 3 Módulos de Texto

Agora, volte para a primeira linha de 3 colunas e adicione 3 módulos de texto.

Use a visualização de wireframe para um acesso mais fácil.

Adicione um módulo de texto à primeira coluna, clone-o duas vezes e arraste as duplicatas para as outras colunas.

Comece modificando o módulo de texto na coluna 1. Insira algum conteúdo de sua escolha e altere as configurações como segue.

Fundo

Adicione um fundo preto.

• Cor de fundo: Preto # 000000

Texto

Defina o estilo do texto.

• Fonte do Texto: Aldrich
• Cor do Texto: Branco #ffffff
• Alinhamento de texto: centralizado
• Tamanho do texto:
  • Desktop: 1.2vw
  • Tablet: 2vw
  • Telefone: 2.4vw
• Peso da fonte do cabeçalho: negrito

Dimensionamento

Ajuste o tamanho do módulo de texto.

• Largura:
  • Desktop: 17vw
  • Tablet: 23vw
  • Telefone: 30vw
• Alinhamento do Módulo: Centro

Espaçamento

Adicione preenchimento superior e inferior.

• Preenchimento superior e inferior: 0,9vw

Fronteira

Altere as configurações de borda.

• Cantos arredondados: 14 px em todos os cantos
• Estilos Inferiores: Borda Inferior
• Largura da borda inferior: 4 px
• Cor da borda inferior: vermelho # E02B20

Sombra da caixa

Aplique uma sombra de caixa.

• Sombra da caixa: terceira opção

Expandir Estilos de Texto

Para economizar tempo, use a opção estender estilo para estilizar os outros módulos de texto na seção.

• Primeiro, clique nos três pontos à direita do módulo de texto e selecione “Estender estilos de texto”.
• Em seguida, na caixa pop-up, clique em “Em todo” e selecione “Esta seção” quando o menu desce.
• Altere o conteúdo em cada módulo de texto.

Adicionar 3 Módulos Divisores

Adicione um divisor abaixo do módulo de texto na coluna 1. Em seguida, clone-o duas vezes e arraste as duplicatas para as outras colunas.

Abra o módulo divisor na coluna 1 e faça algumas alterações.

Linha

Faça a divisória preta.

• Cor da linha: Preto # 000000

Dimensionamento

Ajuste a espessura do divisor.

• Peso do divisor: 3px
• Largura: 20vw
• Alinhamento do Módulo: Centro

Espaçamento

Ajuste a margem superior.

• Margem superior: 7vw

Transformar

Adicione um efeito de rotação de transformação para tornar o divisor vertical.

• Transformar rotação: primeira opção a 90 graus

Expanda as configurações do divisor

Economize tempo e use a opção estender estilos.

• Primeiro, clique nos três pontos no lado direito do módulo divisor e selecione “Estender estilos de divisor”.
• Em seguida, na caixa pop-up, clique em “Em todo” e selecione “Esta seção” no menu suspenso.

O design agora deve ser semelhante a este:

Adicionar linha # 3

Adicione uma terceira linha à seção usando a seguinte estrutura de coluna:

Agora, antes de adicionar qualquer módulo, ajuste as configurações de linha de acordo.

Dimensionamento

Altere as configurações de dimensionamento.

• Usar largura de calha personalizada: Sim
• Largura da calha: 1
• WIdth: 100%
• Largura máxima: 100%

Coluna 1

Transformar

Aplique um efeito de conversão de transformação à primeira coluna.

• Transformar Traduzir: eixo y -8vw

Índice Z

Ajuste o valor do índice z também.

• Índice Z: 10

Coluna 2

Transformar

Reposicione a segunda coluna usando algumas configurações de conversão de transformação personalizadas.

• Transformar Traduzir: eixo x -17vw, eixo y -14vw

Índice Z

Ajuste o valor do índice z.

• Índice Z: 10

Adicionar 2 divisores

Adicione dois divisores, um em cada coluna.

Estender estilos divisores

Depois de adicionar as divisórias, use as divisórias anteriores para estender os estilos aos novos.

• Primeiro, clique nos três pontos no módulo divisor na primeira linha acima e selecione “Estender estilos de divisor”.
• Em seguida, no pop-up, selecione “Em toda esta página”.

Agora, vamos fazer algumas alterações no divisor na primeira coluna de nossa terceira linha.

Dimensionamento

Remova a margem.

• Margem superior: padrão

Índice Z

Altere o índice z também.

• Índice Z: -2

Adicionar 2 Módulos de Texto

Adicione um módulo de texto a cada coluna.

Estender Estilos de Texto

Depois de adicionar os novos módulos de texto, estenda os estilos de texto do módulo de texto na primeira linha.

• Primeiro, clique nos três pontos no primeiro módulo de texto na linha superior e selecione “Estender estilos de texto”.
• Em seguida, no pop-up, selecione “Em toda esta página”.

Agora, altere o texto para combinar com o design. Além disso, adicione alguma margem superior a ambos os módulos de texto na terceira linha.

Espaçamento

• Margem superior: 7vw

Recriar o Exemplo # 2

Vamos para o próximo exemplo!

Adicionar nova seção

Adicione uma nova seção à página em que está trabalhando. Antes de adicionar uma linha, ajuste as configurações da seção.

Visibilidade

Oculte os transbordamentos da seção nas configurações de visibilidade.

• Excesso horizontal e vertical: oculto

Adicionar linha # 1

Agora, adicione uma linha com cinco colunas. Antes de adicionar qualquer módulo, ajuste as configurações de linha da seguinte maneira.

Dimensionamento

Primeiro, modifique as configurações de dimensionamento.

• Usar largura de calha personalizada: Sim
• Largura da calha: 1
• WIdth: 100%
• Largura máxima: 100%

Espaçamento

Em seguida, ajuste o espaçamento.

• Preenchimento esquerdo e direito: 19,5vw

CSS customizado

Permita que as colunas apareçam lado a lado adicionando uma linha de código CSS ao elemento principal da linha.

• Elemento principal CSS: display: flex;

display: flex;

Todas as configurações de coluna

Em seguida, faça algumas alterações em cada uma das colunas.

CSS customizado

• Elemento principal: largura: 20%! Importante;

width: 20% !important;

Índice Z

Ajuste o valor do índice z também.

• Índice Z: 10

Adicionar 5 Módulos de Texto

Adicione um módulo de texto a cada coluna.

Adicione algum conteúdo relevante à caixa de conteúdo e continue modificando as configurações do módulo de texto do módulo de texto na coluna 1.

Fundo

Adicione uma cor de fundo.

• Cor de fundo: Verde # 2f7713

Texto

Defina o estilo do conteúdo da seguinte maneira.

• Fonte do Texto: Allerta
• Alinhamento de Texto: Centro
• Cor do Texto: Branco #ffffff
• Tamanho do texto:
  • Desktop: 1.3vw
  • Tablet: 2vw
  • Telefone: 2.4vw
• Altura da linha de texto: 2,9em

Dimensionamento

Ajuste o tamanho.

• Largura:
  • Desktop: 6vw
  • Tablet: 8vw
  • Telefone: 9vw
• Alinhamento do Módulo: Centro

Espaçamento

Ajuste o espaçamento para transformar o módulo em um quadrado.

• Margem inferior: -2vw
• Preenchimento superior e inferior: 1vw
• Preenchimento esquerdo e direito: 1vw

Fronteira

Transforme o módulo de texto em um círculo nas configurações de borda.

• Cantos arredondados: 50vw nos quatro lados

Sombra da caixa

Selecione uma sombra de caixa também.

• Sombra da caixa: terceira opção

Estender Estilos de Texto

Use a opção estender estilos para ajustar as configurações de todos os módulos de texto na linha.

• Primeiro, clique nos pontos à direita do módulo de texto e escolha “Estender estilos de texto”.
• Em seguida, no pop-up, clique em “Em todo” e escolha “Esta página”.
• Por fim, altere o texto na caixa de conteúdo de cada módulo.

O design agora deve ser semelhante a este.

Módulo de Texto 2

Faça o segundo círculo amarelo.

• Cor de fundo: amarelo # f2e200

Módulo de Texto 3

Faça o terceiro círculo laranja.

• Cor de fundo: laranja # f2b100

Módulo de Texto 4

Faça o quarto círculo vermelho-alaranjado.

• Cor de fundo: vermelho alaranjado

Módulo de Texto 5

Deixe o quinto módulo roxo.

• Cor de fundo: Roxo # 8e008c

Adicionar 5 Módulos Divisores

Agora, abaixo de cada módulo de texto, adicione um módulo divisor.

Ajuste as configurações para o primeiro divisor de acordo.

Linha

Dê uma cor ao divisor.

• Cor da linha: Verde # 2f7713

Dimensionamento

Ajuste a largura.

• Largura do divisor: 4px
• Largura: 13vw

Espaçamento

Adicione um valor de margem superior.

• Margem superior:
  • Desktop: 7vw
  • Tablet + Telefone: 5vw

Transformar

Gire o divisor para torná-lo vertical.

• Transformar rotação: 90 graus na primeira opção

Estender as configurações do divisor

Use a opção Estender estilos para estilizar os outros divisores.

• Primeiro, clique nos pontos à direita do módulo divisor e escolha “Estender estilos de divisor”.
• Em seguida, no pop-up, clique em “Em todo” e escolha “Esta seção”.

Combine as cores

Divisor 2

Faça o segundo divisor amarelo.

• Cor da linha: Amarelo # f2e200

Divisor 3

Faça o terceiro divisor laranja.

• Cor da linha: laranja # f2b100

Divisor 4

Faça o quarto divisor de vermelho alaranjado.

• Cor da linha: Laranja Vermelho # ef4a21

Divisor 5

Faça o quinto divisor roxo.

• Cor da linha: Roxo # 8e008c

Adicionar linha # 2

Adicione uma nova linha de uma coluna.

Antes de adicionar o módulo de imagem, ajuste as configurações da linha.

Dimensionamento

Primeiro, ajuste o tamanho.

• Usar largura de calha personalizada: Sim
• Largura da calha: 1
• WIdth: 100%
• Largura máxima: 100%

Visibilidade

Depois, a visibilidade.

• Excesso horizontal e vertical: visível

Adicionar Módulo de Imagem

Adicione um módulo de imagem e faça o upload da imagem de sucos.

Dimensionamento

Força a largura total da imagem.

• Forçar largura total: Sim

Espaçamento entre linhas

É hora do toque final. Abra as configurações da linha # 1 novamente e adicione algumas margens superior e inferior.

• Margem superior: 7vw
• Margem inferior:
  • Desktop: -24vw
  • Tablet: -31vw
  • Telefone: -35vw

Antevisão

Agora que já passamos por todas as etapas, vamos dar uma olhada final no resultado em diferentes tamanhos de tela.

Exemplo 1

Área de Trabalho

Móvel

Exemplo # 2

Área de Trabalho

Móvel

Isso é um envoltório!

Nesta postagem, mostramos como criar dois designs diferentes de marcadores de imagem. Usamos as opções de coluna para manter as colunas de texto e divisores juntos. Esperamos que esses designs o inspirem a criar seus próprios designs de marcadores de imagem. Lembre-se de usar as opções de conversão de transformação dentro das colunas para melhor controle de cada marcador de imagem. Se você tiver alguma dúvida, fique à vontade para deixar um comentário na seção de comentários abaixo!