Ir para o conteúdo principal

Como criar uma imagem rodeada por texto no 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 envolvimento de imagens de texto é uma técnica de design comum, normalmente usada em mídia impressa, como revistas e jornais. Mas você também pode encontrar isso usado na web, especialmente para postagens de blogs. Quebra de texto em torno de uma imagem é realmente uma parte bastante normal do WordPress, que envolve um ajuste de alinhamento simples no editor WYSIWYG. O único problema é que é difícil personalizar o estilo da sua página usando o editor padrão do WordPress. É aqui que o Divi pode ajudar!

Embora este tutorial se concentre em imagens, você pode realmente usar esse mesmo processo para quebrar o texto em qualquer módulo Divi.

exame

Aqui está uma visão geral do projeto principal que vamos construir hoje.

Neste exemplo, mostrarei como envolver duas colunas de texto em torno de um módulo de imagem centralizado. Isso permite que você crie um layout de estilo de revista ou single-journal. Mas, como não há nenhuma propriedade "float: center" do css, precisaremos de alguma criatividade com o layout para que esse design funcione.

Veja como fazer isso.

Criando conteúdo na linha superior com uma imagem centralizada

Para começar, crie uma nova seção regular com uma linha de uma coluna. Em seguida, adicione um módulo de imagem à sua linha. Faça o download de uma imagem de 400 pixels em 250 pixels. O dimensionamento deve ser preciso para este design.

Em seguida, atualize os parâmetros de design da seguinte maneira:

Largura máxima: 400px (área de trabalho), 100% (tablet)
Alinhamento do módulo: centro
Preenchimento personalizado: 2% na parte superior, 2% na parte inferior, 2% na esquerda, 2% na direita

Em seguida, salve suas configurações e abra as configurações de linha. Remova o preenchimento da parte inferior da linha.

Preenchimento personalizado: 0px na parte inferior

Crie a linha de texto de duas colunas

Abaixo da linha que contém a imagem, crie uma nova linha com um layout de duas colunas.

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]

Na coluna 1, adicione um módulo de texto com conteúdo fictício.

Em seguida, copie o módulo de texto e cole-o na coluna 2 para uma segunda coluna de texto.

Criando espaço vazio com separadores flutuantes

Para criar o espaço que precisamos para a imagem, podemos usar módulos de divisão. Na coluna da esquerda, criaremos um módulo de divisão de metade do tamanho da imagem e flutuá-lo para a direita, para que o nosso módulo de texto envolva a divisão. Então, na coluna da direita, criaremos outro separador duas vezes menor que a imagem e flutuá-lo para a esquerda.

Para fazer isso, crie um módulo de separação e coloque-o diretamente acima do módulo de texto na coluna 1.

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

Mostrar divisor: NÃO
Largura: 200px
Altura: 250px

Certifique-se de que a altura seja a mesma que a criada anteriormente e que a largura seja exatamente a metade da largura da imagem.

Para dispositivos móveis, queremos desativar os separadores no tablet e no telefone. Para fazer isso, atualize as configurações de visibilidade para desativar a exibição do tablet e do telefone.

Agora que nosso primeiro separador é criado, copie o módulo de separação e cole-o na parte superior do módulo de texto na coluna 2.

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]

Então nós temos que flutuar nossos divisores. Para fazer isso, abra as configurações do divisor na coluna 1 e adicione o seguinte código CSS personalizado ao elemento principal:

float: right;

Em seguida, abra os parâmetros do módulo de divisão na coluna 2 e adicione o seguinte código CSS personalizado ao elemento principal:

float: left;

Movendo a imagem no lugar com uma margem personalizada

Nós apenas temos que reduzir nossa imagem na primeira linha para que ela se encaixe no espaço que criamos com nossos separadores.

Abra as configurações do módulo de imagem e adicione as seguintes margens personalizadas:

Margem personalizada: Low -250px (Desktop), 20px (Tablet)

Aqui está o resultado até agora.

Adicione um título à seção

Este último passo é opcional, mas se você quiser adicionar um título à seção, crie um módulo de texto e posicione-o acima da imagem.

Em seguida, adicione o seguinte conteúdo ao módulo de texto:

<h2> Saiba mais sobre como fornecer </ h2>

Em seguida, atualize as configurações de texto da seguinte maneira:

Cor de fundo: #000000
Título 2 Font: Playfair Display
Título 2 Alinhamento de texto: título central
2 Cor do texto: #ffffff
Título 2 Altura da linha: 2em

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]

Justifique o texto para um design de quebra automática de texto mais limpo

Quando você envolve texto com imagens, especialmente se o texto estiver centrado dessa maneira, é sempre recomendável justificar o texto em torno dele. Neste caso, simplesmente mude a orientação do texto para justificar o dois módulos de texto contendo o conteúdo de texto da capa.

Resultado final

Aqui está o resultado final.

Últimos pensamentos

Saber como efetivamente cercar o texto da imagem pode realmente tornar seu conteúdo profissional e fácil de ler. O conceito é bem simples. Tudo o que você precisa fazer é posicionar a imagem para a direita ou para a esquerda e, em seguida, usar um espaçamento personalizado ao redor da imagem para o buffer. E o que eu gosto é que você pode usar qualquer módulo (não apenas imagens) para inserir texto em qualquer tipo de conteúdo em Divi. Espero que isso lhe dê um pouco de inspiração para o seu próximo projeto.

Espero ouvir de você nos comentários.

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
0 ações
ação
chilrear
Enregistrer
Whatsapp