Cómo envolver texto alrededor de imágenes en Divi (3 formas)

Vistazo

Aquí hay un adelanto del diseño principal que construiremos hoy.

¡Empecemos!

Suscríbete a nuestro canal de Youtube

Descargue el diseño de ajuste de texto alrededor de imágenes GRATIS

Para poner sus manos en los diseños de este tutorial, primero deberá descargarlo usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestro boletín utilizando el formulario a continuación. Como nuevo suscriptor, ¡recibirás aún más bondad Divi y un paquete Divi Layout gratis todos los lunes! Si ya está en la lista, simplemente ingrese su dirección de correo electrónico a continuación y haga clic en descargar. No será «resuscrito» ni recibirá correos electrónicos adicionales.

Para importar el diseño a su página, simplemente extraiga el archivo zip y arrastre el archivo json a Divi Builder.

Vayamos al tutorial, ¿de acuerdo?

Lo que necesitas para empezar

Para comenzar, todo lo que necesita es Divi y algunas imágenes.

• Divi : asegúrese de que el tema Divi esté instalado y activo. Crearemos nuestros diseños desde cero utilizando Divi Builder en la parte delantera (constructor visual).
• Imágenes : también, asegúrese de tener al menos una imagen de 400 px por 250 px para usar en el tutorial.

Cuando esté listo, vaya a su Panel de WordPress y navegue hasta Páginas > Agregar nuevo. Asigne un título a su nueva página e implemente Divi Builder en la parte delantera. Seleccione la opción «Construir desde cero». ¡Ahora estás listo para ir!

Cómo envolver texto alrededor de imágenes y citas en bloque dentro de un módulo de texto con el editor WYSIWYG

WordPress facilita el ajuste de texto alrededor de las imágenes utilizando el editor predeterminado de WordPress (WYSIWYG). Y debido a que el módulo de texto de Divi tiene el mismo editor WYSIWYG de WordPress incorporado, podemos usar el mismo método que los usuarios de WordPress siempre han usado para ajustar el texto alrededor de las imágenes.

Aquí está cómo hacerlo.

Cree una sección regular con una fila de una columna y luego agregue un módulo de texto a la fila.

Actualice el contenido del módulo de texto con su copia. Por ahora estoy usando un par de párrafos de lorem ipsum.

Ahora, si aún no lo ha hecho, seleccione la pestaña visual en el editor de contenido. Luego, asegúrese de hacer clic en la parte superior del área de contenido donde desea agregar una imagen y haga clic en el botón Agregar medios.

En la ventana emergente de la biblioteca de medios, seleccione la imagen que desea usar. Y en la configuración de visualización de archivos adjuntos, elija izquierda o derecha para la opción de alineación. Para este ejemplo, quiero colocar la imagen a la izquierda.

WordPress agregará una clase a su imagen (llamada «alinear a la izquierda») que hará flotar la imagen hacia la izquierda. La propiedad flotante que se agrega permitirá que el texto se ajuste alrededor de la imagen. WordPress también agregará un búfer alrededor de la imagen usando márgenes para crear poco espacio entre la imagen y el texto que la rodea.

Y, por supuesto, si le da a la imagen una alineación correcta, la imagen flotará hacia la derecha permitiendo que el texto se ajuste alrededor de la imagen.

También puede usar una técnica similar para envolver texto alrededor de una cita en bloque en un módulo de texto. Para hacer esto, cree una cita en bloque usando el editor de contenido.

Luego diseñe la cita en bloque usando la configuración de los módulos de texto incorporados para una cita en bloque.

Luego regrese al editor de contenido y cambie a la pestaña de texto. Luego agregue un poco de estilo en línea a la etiqueta de la cita en bloque para crear un espacio alrededor de la cita en bloque y flotarla hacia la izquierda. Su blockquote html debería verse así.

Ahora el texto se ajustará a la cita en bloque.

Cómo envolver texto alrededor de una imagen haciendo flotar un módulo de imagen junto a un módulo de texto en Divi

Para envolver texto alrededor de un módulo de imagen, podemos hacer flotar todo el módulo de imagen junto a un módulo de texto. Este puede ser un método preferido para usar el editor de WordPress anterior porque le permite un control total sobre el estilo de su imagen usando la configuración del generador Divi en lugar de agregar un estilo en línea o CSS externo a una etiqueta de imagen.

Aquí está cómo hacerlo.

Cree una nueva sección regular con una fila de una columna. Luego agregue un módulo de imagen a la fila con la imagen de su elección. La imagen que estoy usando es del Charity Layout Pack y mide 400 px por 250 px.

Luego agregue un módulo de texto debajo del módulo de imagen con algún contenido de texto simulado.

Ahora, con ambos módulos en su lugar, necesitamos hacer flotar la imagen a la izquierda del módulo de texto. Para hacer eso, abra la configuración del módulo de imagen y agregue el siguiente CSS personalizado al elemento principal:

Luego actualice el margen personalizado de la imagen para crear el búfer que necesitamos para el texto que envuelve la imagen:

Margen personalizado: 2 % superior, 2 % inferior, 2 % derecho

Aquí está el resultado.

Y, si desea que la imagen flote hacia la derecha, abra la configuración del módulo de imagen y reemplace el css con lo siguiente:

Y actualice el espaciado del margen a lo siguiente:

Margen personalizado: 2% superior, 2$ inferior, 2% restante

Aquí está el resultado.

Usando este diseño en múltiples columnas

También puede usar esta configuración en varias columnas para crear un diseño de envoltura de texto para mostrar sus servicios. Para hacer esto, cambie el diseño de la columna de su fila a dos columnas.

Luego asigne a la imagen un valor de porcentaje de ancho máximo para que responda a diferentes anchos de navegador.

Ancho máximo: 33,33 % (escritorio), 100 % (teléfono)

Copie el módulo de imagen y texto de la primera columna y péguelos en la columna 2. Luego actualice el contenido y las imágenes según sea necesario.

Eso es todo. Aquí está el resultado.

Cómo envolver texto alrededor de una imagen o módulo centrado para un diseño único de dos columnas

En este ejemplo, le mostraré cómo envolver dos columnas de texto alrededor de un módulo de imagen centrado. Esto le permite crear un diseño de revista o periódico único. Pero, dado que no existe la propiedad css «float: center», tendremos que ser un poco creativos con el diseño para que este diseño funcione.

Aquí está cómo hacerlo.

Crear el contenido de la fila superior con una imagen centrada

Para comenzar, cree una nueva sección regular con una fila de una columna. Luego agregue un módulo de imagen a su fila. Cargue una imagen de 400 px por 250 px. El tamaño debe ser exacto para este diseño.

Luego actualice la configuración de diseño de la siguiente manera:

Ancho máximo: 400 px (escritorio), 100 % (tableta)

Alineación del módulo: centro

Relleno personalizado: 2 % arriba, 2 % abajo, 2 % a la izquierda, 2 % a la derecha

Luego guarde su configuración y abra la configuración de la fila. Saque el relleno inferior de la fila.

Relleno personalizado: 0px inferior

Crear la fila de texto de dos columnas

Debajo de la fila que contiene la imagen, cree una nueva fila con un diseño de dos columnas.

En la columna 1, agregue un módulo de texto con algún contenido simulado.

Luego copie el módulo de texto y péguelo en la columna 2 para una segunda columna de texto.

Creando espacios vacíos con divisores flotantes

Para crear el espacio que necesitamos para la imagen, podemos utilizar módulos divisorios. En la columna de la izquierda, crearemos un módulo divisor que tenga la mitad del tamaño de la imagen y lo haremos flotar hacia la derecha para que nuestro módulo de texto se ajuste al divisor. Luego, en la columna de la derecha, crearemos otro divisor que tenga la mitad del tamaño de la imagen y lo flotaremos hacia la izquierda.

Para hacer esto, cree un módulo divisor y colóquelo directamente sobre el módulo de texto en la columna 1.

Luego actualice la configuración del módulo divisor de la siguiente manera:

Mostrar divisor: NO

Ancho: 200 px

Alto: 250 px

Asegúrese de que la altura sea la misma que la de la imagen que creó anteriormente y que el ancho sea exactamente la mitad del ancho de la imagen.

Para dispositivos móviles, queremos deshabilitar los divisores en tabletas y teléfonos. Para hacer eso, actualice la configuración de visibilidad para deshabilitar la visualización de la tableta y el teléfono.

Ahora que se creó nuestro primer divisor, copie el módulo divisor y péguelo sobre el módulo de texto en la columna 2.

A continuación, necesitamos flotar nuestros divisores. Para hacer esto, abra la configuración del divisor en la columna 1 y agregue el siguiente CSS personalizado al elemento principal:

Luego, abra la configuración del módulo divisor en la columna 2 y agregue el siguiente CSS personalizado al elemento principal:

Mover la imagen a su lugar con margen personalizado

Ahora todo lo que tenemos que hacer es bajar nuestra imagen en la primera fila para que quepa dentro del espacio que creamos con nuestros divisores.

Abra la configuración del módulo de imagen y agregue los siguientes márgenes personalizados:

Margen personalizado: -250 px inferior (escritorio), 20 px (tableta)

Aquí está el resultado hasta ahora.

Agregar un título a la sección

Este último paso es opcional, pero si desea agregar un título a la sección, cree un módulo de texto y colóquelo sobre la imagen.

Luego agregue el siguiente contenido al módulo de texto:

Luego actualice la configuración de texto de la siguiente manera:

Color de fondo: #000000

Encabezado 2 Fuente: Playfair Display

Encabezado 2 Alineación de texto:

Encabezado central 2 Color de texto: #ffffff

Encabezado 2 Altura de línea: 2em

Justificar texto para un diseño de envoltura de texto más limpio

Al envolver texto alrededor de imágenes, especialmente si el texto está centrado de esta manera, siempre es una buena idea usar justificar el texto circundante. En este caso, todo lo que tenemos que hacer es cambiar la orientación del texto para justificar ambos módulos de texto que contienen nuestro contenido de texto envolvente.

Resultado final

Aquí esta el resultado final.

Y aquí está en la pantalla de la tableta y el teléfono.

Pensamientos finales

Saber cómo envolver el texto alrededor de las imágenes de manera efectiva puede realmente hacer que su contenido se vea profesional y fácil de leer. El concepto es bastante sencillo. Todo lo que necesita hacer es flotar su imagen hacia la derecha o hacia la izquierda y luego usar un espaciado personalizado alrededor de la imagen para el búfer. Y lo que me encanta es que puedes hacer flotar cualquier módulo (no solo imágenes) para envolver texto alrededor de cualquier tipo de contenido en Divi. Espero que esto te sirva de inspiración para tu próximo proyecto.

Espero escuchar de usted en los comentarios.

¡Salud!