Las imágenes de ajuste de texto son una técnica de diseño común, que se usa normalmente en medios impresos, como revistas y periódicos. Pero también puede encontrar esto usado en la web, especialmente para publicaciones de blog. Envolver texto alrededor de una imagen es en realidad una parte bastante estándar de WordPress que implica un simple ajuste de alineación en el editor WYSIWYG. El único problema es que es difícil diseñar tu página usando el editor predeterminado de WordPress. es ahi que Divi poder ayudar !

Aunque este tutorial se enfoca en imágenes, en realidad puede usar este mismo proceso para ajustar texto en cualquier módulo. Divi.

vista

Aquí hay un vistazo al diseño principal que construiremos hoy.

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 estilo de revista o periódico único. Pero, dado que no hay una propiedad CSS "float: center", necesitaremos un poco de creatividad con el diseño para que este diseño funcione.

Aquí está cómo hacerlo.

Crear contenido en 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. Sube una imagen de 400 x 250 píxeles. El tamaño debe ser exacto para este diseño.

Luego actualice los parámetros de diseño de la siguiente manera:

Ancho máximo: 400px (escritorio), 100% (tableta)
Alineación del módulo: centro
Relleno personalizado: 2% en la parte superior, 2% en la parte inferior, 2% a la izquierda, 2% a la derecha

Luego, guarde su configuración y abra la configuración de línea. Saque el acolchado de la parte inferior de la fila.

Acolchado personalizado: 0px en la parte inferior

Crear la línea 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 un contenido ficticio.

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

Creando espacio vacío con divisores flotantes

Para crear el espacio que necesitamos para la imagen, podemos usar módulos de división. En la columna de la izquierda, crearemos un módulo divisor de la mitad del tamaño de la imagen y lo colocaremos a la derecha para que nuestro módulo de texto se envuelva alrededor del divisor. A continuación, en la columna de la derecha, vamos a crear otro separador que tenga la mitad del tamaño de la imagen y lo haremos flotar hacia la izquierda.

Para hacer esto, cree un módulo de separación y colóquelo directamente encima del módulo de texto en la columna 1.

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

Mostrar divisor: NO
Ancho: 200px
Altura: 250px

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

Para dispositivos móviles, queremos deshabilitar los separadores en tabletas y teléfonos. Para hacer esto, actualice la configuración de visibilidad para apagar la pantalla de la tableta y el teléfono.

Ahora que se creó nuestro primer separador, copie el módulo de separación y péguelo en la parte superior del módulo de texto en la columna 2.

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

float: right;

A continuación, abra la configuración del módulo de división en la columna 2 y agregue el siguiente código CSS personalizado al elemento principal:

float: left;

Mueva la imagen a su lugar con un margen personalizado

Ahora solo tenemos que reducir nuestra imagen en la primera fila para que encaje en el espacio que hemos creado con nuestros separadores.

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

Margen personalizado: bajo -250px (escritorio), 20px (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 encima de la imagen.

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

Más información sobre cómo donar

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

Color de fondo: #000000
Título 2 Font: Playfair Display
Título 2 Alineación de texto: Título central
Color del texto 2: #ffffff
Título 2 Altura de línea: 2em

Justifique el texto para un diseño de ajuste de texto más limpio

Al rodear texto con imágenes, especialmente si el texto está centrado de esta manera, siempre es una buena idea justificar el texto circundante. En este caso, simplemente cambie la orientación del texto a justificar el dos módulos de texto que contienen nuestro contenido de ajustar el texto.

Resultado final

Aquí está el resultado final.

Consideraciones finales

Saber cómo rodear eficazmente el texto con imágenes puede hacer que su contenido parezca profesional y fácil de leer. El concepto es bastante simple. Todo lo que tienes que hacer es hacer flotar tu imagen hacia la derecha o hacia la izquierda y luego usar un espaciado personalizado alrededor de la imagen para almacenarla en el búfer. Y lo que me gusta es que puedes usar cualquier módulo (no solo imágenes) para insertar texto en cualquier tipo de contenido en Divi. Espero que esto te dé un poco de inspiración para tu próximo proyecto.

Espero saber de ti en los comentarios.