Como quebrar o texto em torno de imagens em Divi (3 maneiras)
Publicados: 2019-05-27Envolver o texto em torno das imagens é uma técnica de design comum, mais comumente encontrada na mídia impressa, como revistas e jornais. Mas você também pode encontrar isso sendo usado na web, especialmente para postagens de blog. Envolver o texto em torno de uma imagem é na verdade uma parte bastante padrão do WordPress, envolvendo um ajuste de alinhamento simples no editor WYSIWYG. O único problema é que é difícil personalizar o estilo de sua página usando o editor padrão do WordPress. É aí que a Divi pode ajudar!
Neste tutorial, vou mostrar três maneiras de usar Divi para envolver o texto em imagens. Isso permitirá que você crie layouts de estilo de impressão clássicos com o poder do Divi para ajudá-lo com o design. Aqui está o que vamos cobrir:
- Como envolver o texto em imagens (e citações em bloco) dentro de um módulo de texto com o editor WYSIWYG
- Como quebrar o texto em torno de uma imagem flutuando um módulo de imagem ao lado de um módulo de texto em Divi
- Como quebrar o texto em torno de uma imagem centralizada para um layout exclusivo de duas colunas
Embora este tutorial se concentre em imagens, você pode usar esse mesmo processo para envolver o texto em qualquer módulo do Divi.
Espiada
Aqui está uma prévia do design principal que construiremos hoje.
Vamos começar!
Inscreva-se no nosso canal no Youtube
Baixe o Layout de Wrapping Text Around Images 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?
O que você precisa para começar
Para começar, tudo que você precisa é Divi e algumas imagens.
- 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).
- Imagens - Além disso, certifique-se de ter pelo menos uma imagem de 400 x 250 pixels para usar no tutorial.
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!
Como envolver o texto em imagens e citações em bloco dentro de um módulo de texto com o editor WYSIWYG
O WordPress torna mais fácil envolver o texto em imagens usando o editor padrão do WordPress (WYSIWYG). E como o módulo de texto do Divi tem o mesmo editor WYSIWYG do WordPress embutido, podemos usar o mesmo método que os usuários do WordPress sempre usaram para envolver o texto em imagens.
Veja como fazer.
Crie uma seção regular com uma linha de uma coluna e, em seguida, adicione um módulo de texto à linha.
Atualize o conteúdo do módulo de texto com sua cópia. Por enquanto, estou usando alguns parágrafos de lorem ipsum.
Agora, se ainda não o fez, selecione a guia visual no editor de conteúdo. Em seguida, certifique-se de clicar na parte superior da área de conteúdo onde deseja adicionar uma imagem e clique no botão Adicionar mídia.
No pop-up da biblioteca de mídia, selecione a imagem que deseja usar. E nas configurações de exibição do anexo, escolha esquerda ou direita para a opção de alinhamento. Para este exemplo, quero posicionar a imagem à esquerda.
O WordPress adicionará uma classe à sua imagem (chamada “alignleft”) que fará a imagem flutuar para a esquerda. A propriedade float adicionada permitirá que o texto contorne a imagem. O WordPress também adicionará um buffer ao redor da imagem usando as margens para criar um pequeno espaçamento entre a imagem e o texto ao redor.
E, é claro, se você der à imagem um alinhamento correto, ela irá flutuar para a direita, permitindo que o texto se enrole em torno da imagem.
Você também pode usar uma técnica semelhante para quebrar o texto em torno de um blockquote em um módulo de texto. Para fazer isso, crie um blockquote usando o editor de conteúdo.
Em seguida, estilize o blockquote usando as configurações dos módulos de texto embutidos para um blockquote.
Em seguida, volte para o editor de conteúdo e mude para a guia de texto. Em seguida, adicione algum estilo embutido à tag blockquote para criar algum espaçamento ao redor do blockquote e flutue-o para a esquerda. Seu blockquote html deve ser parecido com isto.
<blockquote style="margin: 0 15px 15px 0; float:left;">This is a <br> blockquote</blockquote>
Agora, o texto contornará o blockquote.
Como envolver o texto em uma imagem flutuando um módulo de imagem próximo a um módulo de texto em Divi
Para envolver o texto em um módulo de imagem, podemos flutuar todo o módulo de imagem próximo a um módulo de texto. Este pode ser o método preferido para usar o editor WordPress acima, porque permite controle total sobre o estilo de sua imagem usando as configurações do Divi builder em vez de adicionar estilo embutido ou css externo a uma tag de imagem.
Veja como fazer.
Crie uma nova seção regular com uma linha de uma coluna. Em seguida, adicione um módulo de imagem à linha com a imagem de sua escolha. A imagem que estou usando é do Pacote de layout de caridade e tem 400 x 250 pixels.
Em seguida, adicione um módulo de texto sob o módulo de imagem com algum conteúdo de texto simulado.
Agora, com os dois módulos no lugar, precisamos flutuar a imagem à esquerda do módulo de texto. Para fazer isso, abra as configurações do módulo de imagem e adicione o seguinte CSS personalizado ao elemento principal:
float:left;
Em seguida, atualize a margem personalizada da imagem para criar o buffer de que precisamos para o texto que envolve a imagem:
Margem personalizada: 2% superior, 2% inferior, 2% direita
Aqui está o resultado.
E, se você quiser fazer a imagem flutuar para a direita, abra as configurações do módulo de imagem e substitua o css pelo seguinte:
float:right;
E atualize o espaçamento da margem para o seguinte:
Margem personalizada: 2% superior, 2 $ inferior, 2% restante
Aqui está o resultado.
Usando este design em várias colunas
Você também pode usar esta configuração em várias colunas para criar um design de quebra automática de texto para mostrar seus serviços. Para fazer isso, altere o layout da coluna da sua linha para duas colunas.
Em seguida, dê à imagem um valor de porcentagem de largura máxima para que ela responda a diferentes larguras de navegador.
Largura máxima: 33,33% (desktop), 100% (telefone)
Copie o módulo de imagem e texto da primeira coluna e cole-os na coluna 2. Em seguida, atualize o conteúdo e as imagens conforme necessário.
É isso. Aqui está o resultado.
Como envolver o texto em uma imagem ou módulo centralizado para um layout exclusivo de duas colunas
Neste exemplo, vou mostrar como envolver duas colunas de texto em um módulo de imagem centralizado. Isso permite que você crie um layout de estilo de revista ou jornal exclusivo. Mas, como não há propriedade css “float: center”, precisaremos ser um pouco criativos com o layout para que esse design funcione.
Veja como fazer.
Criando o conteúdo da 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 upload de uma imagem de 400 x 250 pixels. O dimensionamento deve ser exato para este projeto.
Em seguida, atualize as configurações de design da seguinte forma:
Largura máxima: 400 px (desktop), 100% (tablet)
Alinhamento do Módulo: centro
Preenchimento personalizado: 2% superior, 2% inferior, 2% esquerdo, 2% direito
Em seguida, salve suas configurações e abra as configurações de linha. Retire o acolchoamento inferior da linha.
Preenchimento personalizado: 0px inferior
Crie a linha de duas colunas de texto
Sob a linha que contém a imagem, crie uma nova linha com um layout de duas colunas.
Na coluna 1, adicione um módulo de texto com algum conteúdo simulado.
Em seguida, copie o módulo de texto e cole-o na coluna 2 para uma segunda coluna de texto.
Criação de espaço vazio com divisores flutuantes
Para criar o espaço de que precisamos para a imagem, podemos usar módulos divisores. Na coluna da esquerda, criaremos um módulo divisor com metade do tamanho da imagem e movê-lo-emos para a direita para que o nosso módulo de texto envolva o divisor. Então, na coluna da direita, criaremos outra divisória com a metade do tamanho da imagem e faremos com que ela flutue para a esquerda.
Para fazer isso, crie um módulo divisor e coloque-o diretamente acima do módulo de texto na coluna 1.
Em seguida, atualize as configurações do módulo divisor da seguinte forma:
Mostrar divisor: NÃO
Largura: 200px
Altura: 250px
Certifique-se de que a altura seja a mesma altura da imagem que você criou anteriormente e que a largura seja exatamente a metade da largura da imagem.
Para celular, queremos desabilitar os divisores no tablet e no telefone. Para fazer isso, atualize as configurações de visibilidade para desativar a tela do tablet e do telefone.
Agora que nosso primeiro divisor foi criado, copie o módulo divisor e cole-o acima do módulo de texto na coluna 2.
Em seguida, precisamos flutuar nossos divisores. Para fazer isso, abra as configurações do divisor na coluna 1 e adicione o seguinte CSS personalizado ao elemento principal:
float: right;
Em seguida, abra as configurações do módulo divisor na coluna 2 e adicione o seguinte CSS personalizado ao elemento principal:
float: left;
Movendo a imagem para o lugar com margem personalizada
Agora, tudo o que precisamos fazer é baixar nossa imagem na primeira linha para que ela se encaixe no espaço que criamos com nossas divisórias.
Abra as configurações do módulo de imagem e adicione as seguintes margens personalizadas:
Margem personalizada: -250 px inferior (desktop), 20 px (tablet)
Aqui está o resultado até agora.
Adicionando um Título à Seção
Esta última etapa é 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>Learn more about how to give</h2>
Em seguida, atualize as configurações de texto da seguinte forma:
Cor de fundo: # 000000
Fonte do título 2: Playfair Display
Título 2 Alinhamento de texto: centro
título 2 Cor do texto: #ffffff
Cabeçalho 2 Altura da linha: 2em
Justificar texto para design de quebra automática de texto mais limpo
Ao quebrar o texto em torno das imagens, especialmente se o texto estiver centralizado assim, é sempre uma boa ideia usar justificar o texto ao redor. Nesse caso, tudo o que precisamos fazer é alterar a orientação do texto para justificar os dois módulos de texto que contêm nosso conteúdo de texto de quebra.
Resultado final
Aqui está o resultado final.
E aqui está na tela do tablet e do telefone.
Pensamentos finais
Saber como envolver o texto em imagens de maneira eficaz pode realmente fazer com que seu conteúdo pareça profissional e fácil de ler. O conceito é bastante simples. Tudo o que você precisa fazer é flutuar a imagem para a direita ou esquerda e, em seguida, usar o espaçamento personalizado ao redor da imagem como buffer. E o que eu amo é que você pode flutuar qualquer módulo (não apenas imagens) para envolver o texto em torno de qualquer tipo de conteúdo no Divi. Espero que isso lhe dê um pouco de inspiração para seu próximo projeto.
Estou ansioso para ouvir de você nos comentários.
Saúde!