Ir para o conteúdo principal

Tutorial Divi: Como usar o módulo de imagem no Divi Builder

Divi: o tema WordPress mais fácil de usar

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]

O Divi facilita a adição de imagens em qualquer lugar do seu blog. Todas as imagens suportam carregamento progressivo e vêm com 4 diferentes estilos de animação que tornam a navegação no seu site divertida e envolvente. Os módulos de imagem podem ser colocados em qualquer coluna que você criar e seu tamanho será ajustado para se ajustar.

módulo de imagem divi.png

Como adicionar um módulo de imagem da Divi

Antes de adicionar um módulo de imagem à sua página, você deve primeiro entrar no Divi Builder. Quando o tema Divi estiver instalado no seu site, você notará um botão Use o Divi Builder acima do editor sempre que você criar uma nova página. Clique neste botão para ativar o Divi Builder e acessar todos os módulos do Divi Builder. Então clique no botão Use o Visual Builder para iniciar o gerador no modo visual. Você também pode clicar no botão Use o Visual Builder quando você navega no seu site em primeiro plano, se estiver conectado ao seu painel do WordPress.

construtor divi

Depois de ativar o Visual Builder, você pode clicar no botão cinza (+) para adicionar um novo módulo à sua página. Novos módulos só podem ser adicionados dentro de linhas. Se você iniciar uma nova página, não se esqueça de adicionar uma linha à sua página primeiro.

divi module image.png

Localize o módulo de imagem na lista de módulos e clique nele para adicioná-lo à sua página. A lista de módulos é pesquisável, o que significa que você também pode digitar a palavra "imagem" e, em seguida, clicar em entrar para pesquisar e adicionar automaticamente o módulo de imagem! Depois que o módulo for adicionado, você será saudado pela lista de opções do módulo. Essas opções são separadas em três grupos principais: Conteúdo , Projeto et avançado .

Exemplo de Caso de Uso: Adicionando Imagens Sobrepostas para Ilustrar Serviços em uma Página de Serviço

Existem inúmeras maneiras de usar o módulo de imagem. Para este exemplo, mostrarei como adicionar imagens a uma página de serviço para um site de pequena empresa. Aqui é onde vou adicionar as fotos. Cada círculo vermelho representa uma imagem.

adicionar uma imagem de módulo divi builder.jpg

Como adicionar uma imagem a uma página é um processo bastante direto e direto, adicionarei um pequeno estilo personalizado para posicionar minhas imagens de modo que elas se sobreponham, criando um efeito de empilhamento.

Vamos começar.

Use o construtor visual para adicionar uma seção padrão com um layout 1 / 4 1 / 4 1 / 2. Em seguida, adicione um módulo de texto à coluna 1 / 2 correta na sua linha. Digite um cabeçalho e uma descrição do serviço.

Em seguida, adicione um módulo de imagem à coluna 1 / 4 à esquerda.

adicionar imagem divi builder.png

Atualize as configurações do módulo de imagem da seguinte maneira:

Opções de conteúdo

URL da imagem: [insira o URL ou faça o download da imagem com as dimensões 500 × 625]

Opções de design

Margem personalizada: esquerda -60px

Opções avançadas

Animação: da esquerda para a direita

animação divi image.png

Salvar configurações

Adicione outro módulo de imagem na segunda coluna 1 / 4 (ou coluna do meio) e atualize as configurações de imagem da seguinte forma:

Opções de conteúdo

URL da imagem: [insira o URL ou faça o download da imagem com as dimensões 500 × 625]

Opções de design

Margem personalizada: superior 100px, -60px esquerda

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]

Opções avançadas

Animação: da direita para a esquerda

imagem sobreposta divi.png

Salvar configurações

Isso cuida da primeira seção. Agora, para a próxima seção de serviço, podemos duplicar a seção que acabamos de criar para a primeira seção de serviço. Quando a seção estiver duplicada, altere a estrutura da coluna para um layout de coluna 1 / 2 1 / 4 1 / 4 (o oposto do anterior).

escolha uma seção divi.jpg

Em seguida, arraste o módulo de texto com o cabeçalho e a descrição do serviço na coluna 1 / 2 à extrema esquerda. Certifique-se de arrastar os dois módulos de imagem para preencher cada coluna 1 / 4 (agora à direita).

Como os módulos de imagem são duplicados, devemos fazer o download de novas imagens para esta seção de serviço específica. Além disso, os módulos têm sempre as configurações de margem personalizadas como os dois primeiros módulos de imagem criados. Vamos mudar isso.

Começando com o módulo Imagem na coluna 1 / 4 correta, atualize as seguintes configurações de imagem:

Opções de conteúdo

URL da imagem: [insira o URL ou faça o download da imagem com as dimensões 500 × 625]

Opções de design

Margem personalizada: -60px esquerda (somente)

Guia Avançado

Animação: da direita para a esquerda

Por fim, atualize as configurações de imagem para o módulo de imagem da coluna central 1 / 4 com os seguintes elementos:

Opções de conteúdo

URL da imagem: [insira o URL ou faça o download da imagem com as dimensões 500 × 625]

Opções de design

Margem personalizada: 100px para cima, -60px para a direita

Guia Avançado

Animação: da esquerda para a direita

Salvar configurações

Agora confira a página!

exemplo de página de serviço divi.jpg

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]

Opções de conteúdo do módulo de imagem

Na aba de conteúdo, você encontrará todos os elementos de conteúdo do módulo, como texto, imagens e ícones. Tudo o que controla o que aparece no seu módulo será sempre encontrado nesta aba.

seção imagem divi área contents.png

URL da imagem

Coloque um URL de imagem válido aqui ou escolha / faça upload de uma imagem por meio da Biblioteca de mídia do WordPress. As imagens sempre aparecerão justificadas à esquerda nas colunas e cobrirão toda a largura da coluna. No entanto, sua imagem nunca será maior que seu tamanho original. A altura da imagem é determinada pela proporção da sua imagem original.

Abra no visualizador

Você pode escolher aqui se sua imagem será aberta em um visualizador quando você clicar nela. Se esta opção estiver ativada, sua imagem será ampliada para o tamanho máximo quando você clicar em uma janela modal. Esse é um excelente recurso para portfólios.

URL do link

Coloque um URL da web válido nesse campo para transformar sua imagem em um link. Deixar este campo vazio simplesmente deixará sua imagem como um elemento estático.

Abrindo o URL

Você pode escolher aqui se o seu link abrir em uma nova janela.

Rótulo de administração

Isso mudará o rótulo do módulo no construtor para fácil identificação. Quando você usa a exibição WireFrame no Visual Builder, esses rótulos aparecem no bloco do módulo da interface do Divi Builder.

Opções de design de módulo de imagem

Na guia Design, você encontrará todas as opções de estilo do módulo, como fontes, cores, tamanho e espaçamento. Esta é a guia que você usará para alterar a aparência do seu módulo. Cada módulo Divi possui uma longa lista de parâmetros de design que você pode usar para alterar qualquer coisa.

módulo de design de opção image divi.png

Sobreposição de imagem

Se essa opção estiver ativada, um ícone de cor e de sobreposição será exibido quando um visitante passar por cima da imagem.

Sobreposição do ícone de cor

Aqui você pode definir uma cor personalizada para o ícone de sobreposição

Cobrir a cor de sobreposição

Aqui você pode definir uma cor personalizada para a sobreposição.

Ícone de Sobrevoo

Aqui você pode definir um ícone personalizado para a sobreposição.

Exclua o espaço abaixo da imagem

Esta opção afeta apenas as imagens quando elas são o último módulo de uma coluna. Quando esta opção está ativada, a distância entre a parte inferior da imagem e a próxima seção é removida, permitindo que a imagem enquadre a parte superior da próxima seção da página.

Alinhando a imagem

Aqui você escolhe a direção na qual sua imagem flutua na coluna. Você pode flutuar a imagem para a esquerda ou para a direita ou mantê-la centralizada.

Sempre foque a imagem no celular

Frequentemente, as imagens pequenas são mais agradáveis ​​de assistir em dispositivos móveis quando elas estão centralizadas. À medida que as colunas falham, imagens alinhadas à esquerda ou à direita em colunas menores tornam-se órfãs quando as colunas falham e atingem uma largura de 100%. Ativando esta coluna com imagens forçadas para alinhar ao centro da coluna no celular sem afetar o alinhamento da imagem nos desktops.

Use a fronteira

Ativar esta opção colocará uma borda ao redor do seu módulo. Essa borda pode ser personalizada usando os seguintes parâmetros condicionais.

Cor da fronteira

Esta opção afeta a cor da sua borda. Selecione uma cor personalizada no seletor de cores para aplicá-la à sua borda.

Largura da fronteira

Por padrão, as bordas têm uma largura de 1 pixel. Você pode aumentar esse valor arrastando o controle deslizante de intervalo ou inserindo um valor personalizado no campo de entrada à direita do controle deslizante. Unidades de medida personalizadas suportadas, o que significa que você pode alterar a unidade padrão de "px" para outra coisa, como em, vh, vw etc.

Estilo da beira

Bordas suportam oito estilos diferentes: sólido, pontilhado, pontilhado, duplo, groove, crista, inlay e start. Selecione o estilo desejado no menu suspenso para aplicá-lo à sua borda.

Largura máxima da imagem

Por padrão, a largura máxima da imagem é definida como 100%. Isso significa que a imagem será exibida em sua largura natural, a menos que a largura da imagem exceda a largura da coluna pai, caso em que a imagem será limitada a 100% da largura da coluna. Se você quiser limitar ainda mais a largura máxima da imagem, você pode fazer isso inserindo o valor de largura máxima desejado aqui. Por exemplo, um valor de 50% limitaria a largura da imagem a 50% da largura da coluna pai.

Forçar largura total

Por padrão, as imagens são exibidas em sua largura nativa. No entanto, você pode optar por forçar a imagem a estender a largura total da coluna pai ativando essa opção.

Margem personalizada

Margem é o espaço adicionado ao exterior do seu módulo, entre o módulo e o próximo elemento acima, abaixo ou à esquerda e à direita dele. Você pode adicionar valores de margem personalizados a um dos quatro lados do módulo. Para remover a margem personalizada, remova o valor adicionado do campo de entrada. Por padrão, esses valores são medidos em pixels, mas você pode inserir unidades de medida personalizadas nos campos de entrada.

Opções avançadas do módulo de imagem

Na guia avançada, você encontrará opções que os designers da Web mais experientes podem achar úteis, como atributos CSS e HTML personalizados. Aqui você pode aplicar CSS personalizado a um dos muitos elementos do módulo. Você também pode aplicar classes personalizadas e IDs CSS ao módulo, que pode ser usado para personalizar o módulo no arquivo style.css de seu tema filho.

seção advanced module image.png

ID CSS

Digite um identificador CSS opcional para usar neste módulo. Um ID pode ser usado para criar um estilo CSS personalizado ou para criar links para seções específicas de sua página.

Classe CSS

Digite as classes CSS opcionais para usar neste módulo. Uma classe CSS pode ser usada para criar um estilo CSS personalizado. Você pode adicionar várias classes, separadas por um espaço. Essas classes podem ser usadas em seu tema filho Divi ou na folha de estilo CSS personalizada que você adiciona à sua página ou site usando as opções de tema Divi ou as configurações da página Divi Builder.

CSS personalizado

O CSS personalizado também pode ser aplicado ao módulo e a um dos elementos internos do módulo. Na seção CSS personalizado, você encontrará um campo de texto no qual é possível adicionar folhas de estilo CSS personalizadas diretamente a cada elemento. As entradas CSS nesses parâmetros já estão agrupadas nas tags de estilo. Então, basta inserir regras CSS separadas por ponto e vírgula.

Animação

Use este menu suspenso para especificar a animação de carregamento lento para sua imagem. Você pode escolher se sua imagem aparece da direita, esquerda, inferior ou superior.

visibilidade

Esta opção permite controlar os dispositivos nos quais seu módulo aparece. Você pode optar por desativar seu módulo em tablets, smartphones ou desktops individualmente. Isso é útil se você quiser usar módulos diferentes em dispositivos diferentes ou se quiser simplificar o design móvel eliminando determinados elementos da página.

Texto alternativo da imagem

O texto alternativo fornece todas as informações necessárias se a imagem não for carregada, não for exibida corretamente ou em qualquer outra situação em que um usuário não possa ver a imagem. Também permite que a imagem seja lida e reconhecida pelos mecanismos de busca.

Outros tutoriais 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
10 ações
ação4
chilrear1
Enregistrer5
Whatsapp