Cómo envolver texto alrededor de imágenes en Divi (3 formas)
Publicado: 2019-05-27Envolver texto alrededor de imágenes es una técnica de diseño común que se encuentra más comúnmente en medios impresos como revistas y periódicos. Pero también puede encontrar que esto se usa 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 personalizar el estilo de su página utilizando el editor predeterminado de WordPress. ¡Ahí es donde Divi puede ayudar!
En este tutorial, le mostraré 3 formas en las que puede usar Divi para ajustar texto alrededor de imágenes. Esto le permitirá crear diseños de estilo de impresión clásicos con el poder de Divi para ayudarlo con el diseño. Esto es lo que vamos a cubrir:
- Cómo envolver texto alrededor de imágenes (y citas en bloque) dentro de un módulo de texto con el editor WYSIWYG
- Cómo envolver texto alrededor de una imagen flotando un módulo de imagen junto a un módulo de texto en Divi
- Cómo envolver texto alrededor de una imagen centrada para un diseño único de dos columnas
Aunque este tutorial se concentrará en las imágenes, en realidad puede usar este mismo proceso para envolver texto alrededor de cualquier módulo en Divi.
Vistazo
Aquí hay un adelanto del diseño principal que construiremos hoy.
¡Empecemos!
Suscríbete a nuestro canal de Youtube
Descargue GRATIS el diseño de envoltura de texto alrededor de imágenes
Para poner sus manos sobre 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 nuestra lista de correo electrónico Divi Daily mediante 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 se le “volverá a suscribir” ni recibirá correos electrónicos adicionales.
Descárgalo gratis
Únase al boletín de Divi y le enviaremos por correo electrónico una copia del último paquete de diseño de página de destino de Divi, además de toneladas de otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguelo y serás un maestro de Divi en poco tiempo. Si ya está suscrito, simplemente escriba su dirección de correo electrónico a continuación y haga clic en descargar para acceder al paquete de diseño.
Te has suscripto satisfactoriamente. ¡Verifique su dirección de correo electrónico para confirmar su suscripción y obtenga acceso a paquetes de diseño Divi semanales gratuitos!
Para importar el diseño a su página, simplemente extraiga el archivo zip y arrastre el archivo json al 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 usando Divi Builder en la parte frontal (constructor visual).
- Imágenes : 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 a Páginas> Agregar nuevo. Asigne un título a su nueva página e implemente Divi Builder en la interfaz. 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 envolver texto alrededor de imágenes usando 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 a las imágenes.
He aquí 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 "alignleft") que hará flotar la imagen a la izquierda. La propiedad flotante que se agrega permitirá que el texto se ajuste a la imagen. WordPress también agregará un búfer alrededor de la imagen usando márgenes para crear un pequeño espacio entre la imagen y el texto circundante.
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 utilizar una técnica similar para ajustar 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 blockquote para crear algo de espacio alrededor del blockquote y flotarlo hacia la izquierda. Su html blockquote debería verse así.
<blockquote style="margin: 0 15px 15px 0; float:left;">This is a <br> blockquote</blockquote>
Ahora el texto se ajustará a la cita en bloque.
Cómo envolver texto alrededor de una imagen flotando 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 constructor Divi en lugar de agregar estilo en línea o CSS externo a una etiqueta de imagen.
He aquí 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 que elija. 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 algo de 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 hacerlo, abra la configuración del módulo de imagen y agregue el siguiente CSS personalizado al elemento principal:
float:left;
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 hacer flotar la imagen a la derecha, abra la configuración del módulo de imagen y reemplace el CSS con lo siguiente:
float:right;
Y actualice el espaciado de los márgenes 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 utilizar 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éguelo 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 estilo de revista o periódico único. Pero, dado que no existe la propiedad css "float: center", necesitaremos ser un poco creativos con el diseño para que este diseño funcione.
He aquí cómo hacerlo.
Creación del 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. Sube 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% izquierda, 2% derecha
Luego guarde su configuración y abra la configuración de la fila. Saque el acolchado 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 contenido simulado.
Luego copie el módulo de texto y péguelo en la columna 2 para una segunda columna de texto.
Crear espacio vacío con divisores flotantes
Para crear el espacio que necesitamos para la imagen, podemos usar módulos divisores. En la columna de la izquierda crearemos un módulo divisor que tiene 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. Luego, en la columna de la derecha, crearemos otro divisor que tenga la mitad del tamaño de la imagen y lo haremos flotar hacia la izquierda.
Para hacer esto, cree un módulo divisor y colóquelo directamente encima del 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: 200px
Alto: 250px
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 pantalla de la tableta y el teléfono.
Ahora que se creó nuestro primer divisor, copie el módulo divisor y péguelo encima 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 CSS personalizado al elemento principal:
float: right;
Luego, abra la configuración del módulo divisor en la columna 2 y agregue el siguiente CSS personalizado al elemento principal:
float: left;
Mover la imagen a su lugar con un margen personalizado
Ahora todo lo que tenemos que hacer es bajar nuestra imagen en la primera fila para que encaje 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 en la parte 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 encima de la imagen.
Luego agregue el siguiente contenido al módulo de texto:
<h2>Learn more about how to give</h2>
Luego actualice la configuración de texto de la siguiente manera:
Color de fondo: # 000000
Fuente del título 2: Playfair Display
Alineación del texto del encabezado 2: centro
encabezado 2 Color del texto: #ffffff
Altura de línea de rumbo 2: 2em
Justifique el 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 así, 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 hacer que su contenido se vea profesional y fácil de leer. El concepto es bastante sencillo. Todo lo que necesita hacer es hacer flotar su imagen hacia la derecha o hacia la izquierda y luego usar un espaciado personalizado alrededor de la imagen como 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 tener noticias tuyas en los comentarios.
¡Salud!