homefinance blog
Escribir el texto alrededor de las imágenes es una técnica de diseño común que se encuentra más comúnmente en la prensa escrita, como revistas y periódicos. Pero puede encontrar esto en la web, especialmente para publicaciones de blog. Escribir el 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. ¡Puede ayudar a Div! En este tutorial, le mostraré 3 formas en que puede usar Divi para envolver el texto alrededor de las imágenes. Esto le permitirá crear modelos de impresión clásicos con el poder de Divi para ayudarlo con su diseño. Esto es lo que cubriremos:
Cómo envolver el texto alrededor de las imágenes (y las citas de 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
Cómo envolver el texto alrededor de una imagen enfocada para dos columnas únicas
Aunque este tutorial se centrará en las imágenes, en realidad puede usar el mismo proceso para envolver el texto alrededor de cualquier módulo en DIV. Tire con el ojo aquí hay una breve mirada al proyecto principal que construiremos hoy.
¡Vamos a empezar! Suscríbete a nuestro canal de YouTube
Descargue el texto sinuoso de forma gratuita alrededor de las imágenes para poner su mano en los dibujos en este tutorial, primero deberá descargarlo usando el botón a continuación. Para tener acceso a la descarga, deberá suscribirse a nuestra lista diaria de correo electrónico utilizando el formulario a continuación. ¡Como nuevo suscriptor, recibirá más buenas divisiones y un paquete Divaut gratuito todos los lunes! Si ya está en la lista, simplemente ingrese la dirección de correo electrónico a continuación y haga clic en Descargar. No se “volverá a suscribirse” y no recibirá correos electrónicos adicionales. Determine los archivos
Descargue el registro gratuito para el Boletín Informativo Divic y le enviaremos una copia de la página de la página de la página final, además de muchos otros recursos, consejos y consejos para Div gratis. Sigue a ti mismo y serás una división maestra en el menor tiempo. Si ya está suscrito, simplemente ingrese el correo electrónico a continuación y haga clic en Descargar para acceder al paquete de apariencia.
Te has suscripto satisfactoriamente. ¡Consulte su correo electrónico para confirmar su suscripción y obtener acceso a paquetes de diseño semanales gratuitos!
Para importar la apariencia en su página, simplemente extraiga el archivo zip y extraiga el archivo JSON al Builder Div. Pasemos al tutorial, ¿no? Lo que necesita para comenzar a comenzar, todo lo que necesita es división y algunas fotos.
Div: asegúrese de que el tema Div esté instalado y activo. Crearemos nuestros proyectos desde cero utilizando el Builder Divin en el frente (Visual Builder).
Imágenes: también asegúrese de tener al menos una imagen de 400 x 250 píxeles para usar para el tutorial. Cuando esté listo, acceda al tablero de WordPress y navegue por las páginas> Agregar una nueva. Dé el título de la nueva página e implementa Divi Builder en el frente. Seleccione la opción “Construir desde cero”. ¡Ahora estás listo para irte!
Cómo envolver el texto alrededor de las imágenes y las citas de bloque dentro de un módulo de texto con el editor Wysiwyg WordPress facilita el devanado de texto alrededor del editor implícito WordPress (Wysiwyg). Y debido a que el módulo de división de texto tiene el mismo editor Wildress Wysiwyg, podemos usar el mismo método que los usuarios de WordPress siempre han usado para envolver el texto alrededor de las imágenes. Aquí le mostramos cómo hacerlo. Cree una sección normal con una fila con una columna y luego agregue un módulo de texto en una fila.
Actualice el contenido del módulo de texto con su copia por ahora uso algunos párrafos de Lorem Ipsum.
Ahora, si aún no lo ha hecho, seleccione la pestaña visual del editor de contenido. Luego, asegúrese de hacer clic en la parte superior de la zona de contenido en la que desea agregar una imagen y hacer clic en el botón Agregar soporte de medios.
En la ventana emergente de la biblioteca de medios, seleccione la imagen que desea usar. Y debajo de la configuración de la pantalla de archivo adjunto, 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 flotará hacia la izquierda. La propiedad flotante que se agrega permitirá que el texto envuelva la imagen. WordPress también agregará un búfer alrededor de la imagen usando bordes para crear una pequeña distancia entre la imagen y el texto circundante. Y, por supuesto, si le da a la imagen una alineación correcta, la imagen flotará a la derecha, permitiendo que el texto estar envuelto alrededor de la imagen.
También puede usar una técnica similar para envolver el texto alrededor de un blockquote en un módulo de texto. Para hacer esto, cree una cita de bloque utilizando el editor de contenido.
Luego estilice BlockQuote utilizando la configuración de los módulos de texto Built -in para un BlockQuote.
Luego vuelva al editor de contenido y muévase a la pestaña Texto. Luego agregue una línea en línea a la etiqueta BlockQuote para crear una distancia alrededor del BLOCKQuote y flote a la izquierda. Su HTML BlockQuote debería verse así.
Esto es un
blockquote
Ahora el texto se extenderá alrededor del bloque.
Cómo envolver el texto alrededor de una imagen flotando un módulo de imagen junto a un módulo de texto en la división para envolver el texto alrededor de un módulo de imagen, podemos flotar todo el módulo de imagen junto a un módulo de texto. Este puede ser un método favorito para usar el editor de WordPress anterior, ya que le permite el control total de su imagen. Usando la configuración del Div Builder en lugar de agregar un estilo externo a una etiqueta de imagen.
Aquí le mostramos cómo hacerlo. Cree una nueva sección habitual con una fila con una columna. Luego agregue un módulo de imagen uno por uno con la imagen que elija. La imagen que uso es del paquete de paquete de diseño de caridad y tiene una resolución de 400 x 250 px. Luego agregue un módulo de texto debajo de la imagen con un contenido de texto simulado.
Ahora, con ambos módulos en posición, debemos flotar la imagen a la izquierda del módulo de texto. Para hacer esto, abra la configuración del módulo de imagen y agregue los siguientes elementos CSS personalizados al elemento principal: Float: Left;
Luego actualice la imagen personalizada de la imagen para crear el tampón que necesitamos para envolver el texto alrededor de la imagen:
Margen personalizado: 2% más, 2% inactividad, 2% correcto
Aquí está el resultado.
Y, si desea huir de la imagen a la derecha, abra la configuración del módulo de imagen y reemplace el CSS con lo siguiente: Float: Derecho;
Y actualice el espacio de margen a lo siguiente: Margen personalizado: 2% de arriba, $ 2 hacia abajo, 2% restante
Aquí está el resultado.
Usando este diseño también en varias columnas, puede usar esta configuración en varias columnas para crear un diseño de empaque de texto para presentar sus servicios. Para hacer esto, cambie la apariencia de la columna a dos columnas.
Luego, le dé a la imagen un valor porcentual de ancho máximo, para responder a diferentes anchos del navegador.
Ancho máximo: 33.33% (escritorio), 100% (teléfono)
Copie la imagen y el módulo de texto en 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 el texto alrededor de una imagen o módulo centrado para dos columnas únicas
En este ejemplo, le mostraré cómo envolver dos columnas de texto alrededor de un módulo de imagen enfocado. Esto le permite crear un aspecto único de la revista o periódico. Pero, dado que no hay propiedad CSS “Float: Center”, tendremos que ser un poco creativos con el aspecto para que este diseño funcione. Aquí le mostramos cómo hacerlo. Creando el contenido de la fila superior con una imagen enfocada para comenzar, cree una nueva sección con una fila de una columna. Luego agregue un módulo de imagen a su vez. Cargue una imagen de 400 x 250 PX. El tamaño debe ser preciso 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 modelo: Centro de revestimiento personalizado: 2% arriba, 2% de baja, 2% izquierda, 2% a la derecha de la configuración y la configuración abierta fila. Retire el revestimiento inferior de la fila. Revestimiento personalizado: 0 PX a continuación
Cree la fila de texto con dos columnas debajo de la fila que contiene la imagen, cree una nueva línea con dos columnas.
En la columna 1, agregue un módulo de texto con un contenido falso.
Luego, copie el módulo de texto y péguelo en la columna 2 para la segunda columna de texto.
Creando el espacio vacío con separadores flotantes para crear el espacio que necesitamos para la imagen, podemos usar módulos de división. En la columna izquierda crearemos un módulo divisor que tenga la mitad del tamaño de la imagen y la huiremos a la derecha, de modo que nuestro módulo de texto envuelva el divisor. Luego, en la columna derecha, crearemos otro separador que tenga la mitad del tamaño de la imagen y flotaremos a la izquierda. Para hacer esto, cree un módulo divisor y colóquelo directamente sobre el módulo de texto 1. luego actualice la configuración del módulo divisor de la siguiente manera: Mostrar divisor: No ancho: 200 px altura: 250 px Asegúrese de que la altura sea la misma altura de la imagen Creó anteriormente y que el ancho es exactamente la mitad del ancho de la imagen. Para el móvil, queremos deshabilitar los separadores en la tableta y el teléfono. Para esto, actualice la configuración de visibilidad para deshabilitar la tableta y la pantalla del teléfono.
Ahora que se ha creado nuestro primer separador, copie el módulo Divisor y peguelo sobre el módulo de texto en la columna 2.
Luego tenemos que flotar nuestros separadores. Para hacer esto, abra la configuración del divisor en la columna 1 y agregue los siguientes CSS personalizados al elemento principal: Float: Right;
Luego abra la configuración del módulo divisor en la columna 2 y agregue los siguientes CSS personalizados al elemento principal: Float: Izquierda;
Mover la imagen en su lugar con un borde personalizado ahora todo lo que tenemos que hacer es eliminar nuestra imagen primero, para que se adapte al espacio que creamos con nuestros separadores. Abra la configuración del módulo de imagen y agregue los siguientes bordes personalizados: Margen personalizado: -250 PX en la parte inferior (escritorio), 20 px (tableta) Aquí está el resultado. Agregue un título a la sección, cree un módulo de texto y colóquelo la imagen. Luego agregue el siguiente contenido al módulo de texto:
Obtenga más información sobre cómo dar
luego actualice la configuración de texto de la siguiente Texto: #FFFFFF Título 2 Altura de la línea: 2em
Justifique el texto para un diseño de empaque de texto más limpio cuando envuelva el texto alrededor de las imágenes, especialmente si el texto está centrado, siempre es una buena idea 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.
El resultado final aquí es el resultado final.
Y aquí está en la visualización de la tableta y el teléfono.
