Tabla de contenido
¿Necesita colocar texto alrededor de la imagen de forma elegante? Aprenda cómo hacerlo fácilmente sin experiencia en codificación y diseño. El editor de Gutenberg ofrece más opciones para envolver texto alrededor de texto en WordPress.
Puede lograr un sitio web atractivo y una rutina de edición de contenido fácil al mismo tiempo. Elegir el editor de Gutenberg para su sitio web de WordPress le brinda la mejor herramienta desde una perspectiva a largo plazo. Tendrá más opciones para ajustar el texto alrededor de las imágenes de manera diferente. Gutenberg ofrece muchas ventajas, como un código fuente más claro del sitio web, velocidad, seguridad y facilidad de uso.
¿Cómo envolver el texto alrededor de la imagen en WordPress?
El editor y los bloques de Gutenberg hacen que el contenido del sitio web sea más ligero, moderno y fácil de leer. Le mostramos más formas de envolver el texto alrededor de la imagen en las páginas de WordPress, publicaciones y tipos de publicaciones personalizadas también. Hay diferentes bloques, y también puede usarlos en combinación, como un conjunto de partes y características que le brindan opciones adicionales para la envoltura.
Puede seleccionar el bloque para el texto envuelto alrededor de la imagen según la subpágina y su tipo de contenido. Puede elegir un estilo para la página de presentación y otro para una publicación de blog. Además, considere el tipo de contenido que representa la imagen. ¿Es una imagen de descripción o un medio más representativo o de venta?
Envolver texto alrededor de la imagen – Selección de bloques
Hay 4 bloques que puede usar para envolver un bloque de texto alrededor de una imagen. Te los describimos todos:
- El bloque de imagen y el bloque de párrafo encuentran más abajo
- El bloque de medios y texto encuentra más abajo
- bloque de columnas en publicación individual
- bloque de racimo en publicación individual (función disponible solo con Complemento Citadela Pro)
Ajusta el texto y la imagen para una mejor experiencia de lectura
Hay varias razones por las que debería usar este bloque. Lo apreciará más si está escribiendo publicaciones de blog. Las imágenes son parte integral de la historia. No importa si escribe un blog de viajes o una revista sobre noticias de TI. Entonces, cuando agregue fotos dentro de su contenido, piense en la alineación de la imagen. Los lectores podrán entender mejor sobre lo que estás escribiendo.
En muchos casos es necesario insertar imagen y texto uno al lado del otro. ¿Lo que es importante?
- Tiene que tener sentido. La imagen tiene que estar al lado del texto correcto.
- Tiene que estar bien alineado.
- Tiene que adaptarse a todo el diseño del sitio web.
Bloques de imagen y párrafo
mientras que en el Editor clásico también podría colocar texto junto a la imagen, no podría hablar de una buena alineación. Especialmente si la imagen era pequeña y pones más texto al lado. El texto envolvía la imagen y no se veía bien.
redactor de Gutenberg y su bloque Imagen trae una gran característica: cambiar el tamaño de la imagen. Arrastra puntos alrededor de la imagen para cambiar automáticamente su tamaño y la alineación del texto.
Bloque de medios y texto: WordPress alinea el texto junto a la imagen
- Envuelva texto e imágenes con bloque de medios y texto
- Cómo agregar un bloque de medios y texto en el editor
- Cómo funciona este bloque
- Configuración de bloque de medios y texto
- Que hace "Apilar en el móvil” significar
- Bono: Cómo justificar el texto en WordPress
¿Cómo alinear el texto al lado de la imagen?
Empieza ahora
Comience ahora con una prueba sin riesgos. No se requiere tarjeta de crédito.
El bloque de medios y texto es una característica fantástica. El bloque Media & Text resuelve este problema y garantiza una alineación perfecta del texto con la imagen sin interrumpir la composición y el diseño. Esa es la razón por la que deberías usar este bloque.
También mejora el diseño del sitio web en dispositivos móviles. Este bloque envolvente ayuda al tema de WordPress a cubrir diferentes diseños móviles. En un teléfono inteligente, cada parte del sitio web debe ser claramente visible y legible. ¿Cómo se verá el bloque de medios y texto en los teléfonos móviles y la tabla maneja la función "Apilar en el móvil" que veremos a continuación?
En poco tiempo podrá usar el bloque de medios y texto en nuestro nuevo tema de WordPress llamado Citadela. Obtenga más información sobre el tema Citadela en un artículo separado.
¿Cómo agregar un bloque de medios y texto en el editor de bloques?
Agregar un bloque de medios y texto es tan fácil como agregar cualquier otro bloque. Es un bloque central que significa que no necesita descargar ni instalar nada.
Usando el ícono "+" en el panel superior o en cualquier parte del editor y seleccionando Bloque de medios y texto.
La última opción es escribir "/" y escribir "medios" después. WordPress le mostrará automáticamente los bloques seleccionados que coincidan con lo que buscó.
¿Cómo funciona el bloque de medios y texto?
El bloque de medios y texto básicamente agrupa 2 tipos diferentes de contenido en uno. El primero es medio, por ejemplo, una imagen o un video que puede agregar a través de:
- Subir
- Mediateca
- Arrastrar y soltar
El segundo es espacio para contenido de texto. Puede escribir allí párrafos de texto, listas de viñetas o títulos. También puedes agregar allí Bloque de botones que hablábamos antes.
El bloque de medios y texto siempre alinea la imagen y el texto uno al lado del otro sin importar cuánto texto escriba. ¿Como funciona? La imagen se ajusta automáticamente según la altura del contenido en la columna de texto.
Configuración de bloque de medios y texto
Configuraciones generales de bloqueo
1. Barra de herramientas superior
La barra de herramientas encima del bloque ofrece varias opciones. Si su tema activo lo admite, puede configurar el bloque de medios y texto como ancho o ancho completo. También puede elegir dónde desea colocar la imagen o el video haciendo clic en:
- Mostrar medios a la izquierda
- Mostrar medios a la derecha
En la barra de herramientas superior también hay un icono para editar el medio donde puede configurar Texto alternativo, Título, Leyenda o Descripción. Obtenga más información sobre la edición de imágenes en nuestro artículo Trabajando con el bloque de imagen de WordPress.
2. Barra lateral derecha
La barra lateral derecha ofrece una configuración adicional para el bloque de medios y texto. Es posible agregar aquí Texto alternativo, establecer el color de fondo o agregar Clase CSS adicional. También puede habilitar la función "Apilar en el móvil".
¿Qué es Stack en dispositivos móviles?
Gracias a esta función, la imagen y el texto se muestran de forma agradable en los dispositivos móviles. Si deshabilita "Apilar en el móvil", la imagen y el texto permanecerán uno al lado del otro y será difícilmente legible en la versión receptiva.
Si habilita esta función, en el teléfono móvil, el contenido del lado izquierdo se mostrará sobre el contenido que está en el lado derecho.
Alineación del texto
Parte del bloque de medios y texto está junto con la imagen o el video y también el contenido de texto. Puede ser uno de los siguientes tipos de contenido:
1. Párrafo
En la barra de herramientas superior, puede configurar la alineación del texto, poner el texto en negrita, cursiva o agregar un enlace URL.
En la barra lateral del lado derecho, puede elegir el tamaño de fuente, el color de fuente o el color de párrafo. La característica interesante es "Capitular" que resaltará el primer carácter del texto. Es una buena característica en las publicaciones en bloque para hacer que el texto sea más interesante.
2. Título
El encabezado es muy similar al párrafo. También puede configurar su aspecto, ponerlo en negrita o cursiva e insertar un enlace URL. La diferencia es que puede elegir el tipo de encabezado: H2, H3, H4.
Otros tamaños de encabezado y configuraciones de alineación están disponibles en la barra lateral del lado derecho.
3. Lista
Si agrega Bloque de lista a su contenido, puede ser viñetas, lista numerada o lista de varios niveles. También puede poner el texto en negrita, cursiva y agregar un enlace URL.
4. Bloque de botones
Este bloque que agrega botón al contenido se puede ajustar al diseño del sitio web. El color y el estilo del botón o el color de fondo se pueden configurar en la barra lateral del lado derecho.
No olvides leer el artículo sobre Bloque de botones.
Cambiar entre tipos de bloque
En el bloque de medios y texto es posible convertir un tipo de bloque de contenido a otro. También puede cambiar el bloque de medios y texto al bloque de imagen y la parte de texto se eliminará.
En el contenido de texto, es posible cambiar el bloque de párrafo al bloque de encabezado o lista.
Bono: Cómo justificar el texto en WordPress
El uso de texto justificado tiene sus aspectos positivos y negativos. El texto justificado generalmente se puede encontrar en libros o periódicos, pero ya no se usa en sitios web. ¿Por qué?
Hace varios años, la función Justificar estaba integrada dentro del editor de WordPress Classic. Texto justificado utilizado para causar problemas de visibilidad en varios navegadores o dispositivos móviles. También está relacionado con la difícil legibilidad del texto justificado. Por lo tanto, esta función quedó en desuso y se eliminó.
Esta particular funcionalidad no existe en el editor de bloques nuevos (Gutenberg).
Entonces, ¿cómo justificas el texto si realmente quieres?
La solución es agregar un código CSS simple en unos pocos pasos:
- Hay una configuración para el bloque Clase CSS adicional de párrafo en la barra lateral del lado derecho
- Escriba allí el nombre de la clase „justificar“
- Publicar página o artículo
- Si tiene una vista previa, haga clic en Personalizar en la barra superior principal
- En el lado izquierdo hay una nueva barra lateral con configuraciones
- Haga clic en CSS adicional
- Inserte el siguiente código CCS:
p.justificar { texto-alinear: justificar; }
Hecho. A partir de ahora, el texto en su bloque de medios y texto está justificado.
WordPress se ha vuelto más útil sin creadores de páginas de terceros, gracias al editor Gutenberg. Tiene un valor excelente para su sitio web desde un punto de vista a largo plazo y al crear o rediseñar un sitio web. Los bloques de Gutenberg brindan una gran variedad de estilos, sin embargo, puede encontrar la mano Código de WordPress para envolver texto alrededor de imágenes.
¿Cuál es su opinión sobre el bloque de medios y texto? ¿Ya lo usaste? ¿Cómo te gusta trabajar con él? Háganos saber en los comentarios a continuación.
En general, me gusta el sistema de bloques, pero a menos que me falte algo, esto es un paso atrás. Actualmente estoy buscando simplemente hacer flotar una imagen hacia la izquierda o hacia la derecha y hacer que el texto se ajuste como realmente debería ser tan fácil de hacer, pero parece que WordPress simplemente no quiere que eso suceda. ¿Por qué no? El uso del bloque multimedia e imagen solo funciona si el texto tiene la longitud adecuada. Una página como esta, por ejemplo, no se quiere rehacer con un espacio extraño entre los párrafos si el texto no tiene exactamente la longitud adecuada para el tamaño de la imagen.
http://www.thorntonincraven.co.uk/our-village/welcome-to-the-village/
Hola,
muchas gracias por tus comentarios Suena como una muy buena idea, por lo tanto, me gustaría pedirle que nos de un minuto de su tiempo para responder 4 preguntas simples: https://aitthemes.typeform.com/to/vc7arn que pueden ayudar a nuestro equipo a hacer mejores productos con características únicas más rápido.
Muchas gracias por su tiempo y comprensión.
¡Saludos cordiales!
Zlatko
equipo AIT
Sí, no puedo obtener texto para ajustar. Esta combinación de bloques de texto parece ser inútil.
Esta idea apesta como la única forma de insertar imágenes en un blog: no puedo hacer que el texto se ajuste bien y no tiene el mismo tamaño sin importar lo que haga. Buena idea para CIERTAS situaciones, pero no para todo. A veces, solo desea una imagen con los párrafos que la envuelven, en lugar de decir algo sobre la imagen.
Cómo agregar un envoltorio y usar contenido en todo el ancho, en serio, cómo cubrirlo por completo y luego tomar un contenedor en él. El generador es muy confuso.
Hola,
Gracias por tus cumplidos. No dude en consultar nuestra página de blog https://www.ait-themes.club/blog/ donde encontrará muchos consejos útiles sobre cómo escribir publicaciones atractivas y útiles.
¡Saludos cordiales!
Zlatko
equipo AIT
Hola Abder,
¡Muchas gracias por sus comentarios, son muy apreciados por nuestro equipo!
Atentamente.
Zlatko
equipo AIT
Estoy teniendo la misma dificultad que varias otras personas en este hilo. en el pasado, podía envolver fácilmente el texto alrededor de una imagen como en nuestra página "acerca de nosotros" donde tenemos fotos y biografías. tal vez estaba usando el antiguo editor. no recuerdo pero ahora estoy tratando de actualizar nuestro sitio con nuevas fotos y biografías y no pude encontrar una manera de envolver fácilmente el texto como en nuestras combinaciones anteriores de biografía/foto. Traté de cambiar al editor clásico, pero el sitio me advirtió que tenía secciones de "nuevo editor de bloques" y que tenía que quedarme con el modo de edición más nuevo. ¿Puedes decirme cómo hacer que nuestras nuevas biografías e imágenes se parezcan a nuestras publicaciones anteriores? gracias.
Hola,
Si desea deshabilitar Gutenberg y continuar con el editor clásico de WordPress, considere un complemento del equipo central de WordPress que le permite hacerlo con el "Complemento del editor clásico".
¡Atentamente!
Zlatko
equipo AIT
Para aquellos que solo quieren un texto simple que envuelva la imagen, pueden hacerlo insertando el Bloque de texto clásico (basado en la primera parte de los Bloques cuando hace clic en Examinar. Puede usar el editor clásico en un solo bloque y sí) , que te permite insertar una imagen y luego elegir la opción de envolver Problema resuelto 🙂
GRACIAS Londres SEO Guy!!! ¡Una solución simple pero la había pasado por alto!
Y luego... simplemente use la opción Convertir en bloques.
Dado que esto funciona, el Editor de bloques tiene la capacidad, pero no puede encontrar la forma de configurarlo correctamente. Mientras tanto, este truco funciona.
Mismo problema aquí. Esta nueva versión es horrible: no hay forma de envolver correctamente el texto o incluso hacer que la foto sea más pequeña, a menos que solo desee recortar.
Puedo envolver mi texto alrededor de una imagen en el editor de bloques de WordPress. Se ve exactamente como quiero que se vea en "Vista previa". Sin embargo, cuando publico mi blog y WordPress lo envía por correo electrónico a mis seguidores, lo reciben con la imagen en la parte superior y el texto debajo de la imagen. Esto también sucede en las computadoras de escritorio, no solo en los teléfonos celulares pequeños. Lo quiero envuelto, no apilado.
Hola,
Gracias por escribirnos. El bloque no envolverá el texto alrededor de la imagen en WordPress como cabría esperar. Eche un vistazo a las siguientes instrucciones, ya que pueden resultarle útiles: https://motopress.com/blog/how-to-wrap-text-around-images-in-gutenberg/
¡Atentamente!
Zlatko
equipo AIT
Hago todo eso, y mi blog se ajusta perfectamente en Vista previa. Cuando lo publico, se ve muy bien en mi página de blog. Pero cuando WordPress lo envía por correo electrónico a mis seguidores y abren ese correo electrónico, no lo ven envuelto. Las fotos están encima del texto. Tiene un aspecto muy poco profesional. Nunca tuve ese problema con el antiguo Editor clásico. Ahora que estoy usando el Editor de bloques, no me deja volver al Editor clásico aunque hay una opción clásica en la que hacer clic.
Hola,
Gracias por escribir
Nos gustaría pedirle que consulte nuestra base de conocimientos y/o documentación con tutoriales en vídeo:
https://www.ait-themes.club/ait-themes-documentation/
O siéntase libre de publicar preguntas técnicas directamente en nuestro sistema de tickets de soporte dedicado. Inicie sesión en su cuenta en https://system.ait-themes.club/support/add-question.
El servicio de atención al cliente se proporciona durante los días laborables de 8:00 a. m. a 5:00 p. m., hora de Europa Central.
Además, hay un complemento que te permite usar el editor anterior. Debes instalar y activar el “Editor clásico”.
¡Atentamente!
Zlatko
equipo AIT
No estoy de acuerdo, esto es superior a la edición clásica, porque las opciones son más limitadas. Encuentro que este bloque, debido a que usa diferentes fuentes y es más ancho que un bloque de texto, es visualmente discordante. Ser capaz de ajustar el texto suavemente alrededor de una imagen manteniendo la misma fuente, tamaño y configuración de márgenes brinda la profesionalidad de una página de revista. Este es solo un ejemplo de por qué estoy profundamente decepcionado con esta versión de wordpress.
Hola Terence
Gracias por su opinión. ¿Has probado nuestra versión de prueba de Citadela? Tenemos algunos bloques exclusivos que pueden ayudarlo a ajustar el texto y las imágenes. De todos modos, puede probar la versión completa, todas las funciones, de forma gratuita.
Que tenga un lindo día.