Cuando cambiamos por primera vez al editor de bloques de WordPress, incluso tareas sencillas como agregar y alinear imágenes se sintieron diferentes.
Después de ayudar a tantos usuarios a través de WPBeginner, hemos notado que este es uno de los obstáculos más comunes que la gente enfrenta al hacer la transición a Gutenberg.
La buena noticia es que trabajar con imágenes en el editor de bloques se ha vuelto más intuitivo, una vez que sabes dónde buscar.
En esta guía, te mostraremos exactamente cómo agregar y alinear imágenes en el editor de bloques de WordPress. Estas son las mismas técnicas que usamos todos los días en WPBeginner, explicadas en términos sencillos que cualquiera puede seguir.
Alineación de imágenes en el editor de WordPress
Anteriormente, WordPress usaba un área de texto con botones de edición como su editor predeterminado. Un problema particular en el editor antiguo era la alineación de imágenes, lo que podía dificultar la correcta disposición de los elementos en tu sitio web de WordPress.
A pesar de que había opciones para alinear imágenes a la izquierda, derecha o al centro, no siempre se veían bien. A veces, las imágenes no se alineaban, tenían el tamaño incorrecto o simplemente se veían mal.
WordPress 5.0 introdujo un nuevo editor de publicaciones de WordPress llamado editor de bloques Gutenberg. Solucionó varios problemas con el editor antiguo, incluidos los problemas de alineación de imágenes.
En las siguientes secciones, explicaremos cómo agregar y alinear imágenes fácilmente en el nuevo editor para crear diseños atractivos para las publicaciones y páginas de tu blog de WordPress.
Aquí tienes un resumen rápido de todos los temas que compartiremos:
- Cómo agregar y alinear imágenes en WordPress
- Cómo alinear perfectamente una imagen junto a texto
- Cómo alinear imágenes de galería en WordPress
- Cómo agregar dos imágenes una al lado de la otra en WordPress
- Más formas de agregar y alinear imágenes en WordPress
- Consejo extra: Cómo centrar un video en WordPress
- Preguntas frecuentes sobre la alineación de imágenes en WordPress
¡Empecemos!
Cómo agregar y alinear imágenes en WordPress
El editor viene con varios bloques que puedes usar para agregar imágenes a tus publicaciones y páginas de WordPress. En esta guía, nos centraremos en los más populares:
- Imagen
- Galería
- Medios y texto
- Portada
Empecemos primero con un bloque de imagen simple.
Puedes hacer clic en el botón 'Agregar nuevo bloque' o escribir /imagen en el editor de publicaciones para insertar un bloque de imagen.
Esto activará los 3 botones dentro del bloque de imagen vacío.
Ahora, puedes subir una imagen desde tu computadora, seleccionar una imagen ya subida de la biblioteca de medios, o insertar una imagen proporcionando la URL del archivo de imagen.
A continuación, haz clic en el botón 'Subir' y luego selecciona la imagen que deseas subir desde tu computadora.
Tan pronto como selecciones la imagen, WordPress la subirá a tu biblioteca de medios y la insertará en el bloque de imagen.
Ahora, notarás una barra de herramientas en la parte superior de tu imagen y algunas configuraciones de bloque de imagen en la columna derecha.
Para alinear tu imagen, usarás la barra de herramientas que aparece en la parte superior de la imagen.
El bloque de imagen te ofrece varias opciones de alineación. Dependiendo de tu tema de WordPress, es posible que veas todas las siguientes:
- Ninguno: La alineación predeterminada, que coloca la imagen en línea con tu texto.
- Alinear a la izquierda: Empuja la imagen hacia la izquierda, permitiendo que el texto fluya alrededor de su lado derecho.
- Centrar: Centra la imagen dentro de la columna de contenido principal.
- Alinear a la derecha: Empuja la imagen hacia la derecha, permitiendo que el texto fluya alrededor de su lado izquierdo.
- Ancho amplio: Hace que la imagen sea más ancha que el área de contenido principal para una apariencia más dinámica.
- Ancho completo: Extiende la imagen para llenar todo el ancho del navegador, de borde a borde.
Haz clic en el botón 'Centrar' para centrar tu imagen en tu publicación.
Cómo alinear perfectamente una imagen junto a texto
Muchas veces, es posible que necesites alinear una imagen junto a texto perfectamente. El editor de bloques de WordPress facilita esto con el bloque de Medios y Texto.
Este bloque básicamente agrega un área de dos columnas: una columna para imágenes (medios) y la segunda columna para contenido de texto.
Simplemente sube tu imagen haciendo clic en el botón 'Subir'.
Luego, puedes agregar el texto que deseas mostrar junto a ella.
Si necesitas una descripción más larga, adelante y escríbela.
La alineación de la imagen se ajustará automáticamente a la altura del texto en la siguiente columna.
Cómo alinear imágenes de galería en WordPress
El editor de bloques de WordPress también incluye un bloque para agregar galerías de imágenes. Esto te permite mostrar fácilmente imágenes en una cuadrícula de filas y columnas.
El bloque Galería viene con opciones de alineación similares en la barra de herramientas. Por defecto, el bloque mostrará las imágenes en un diseño de 3 columnas.
Entonces, tu galería de imágenes podría verse así:
Puedes ajustar el diseño de la galería moviendo el control deslizante hacia la izquierda o hacia la derecha. Alternativamente, puedes simplemente escribir el número de columnas que deseas en el cuadro.
Aquí, probamos el diseño de 4 columnas:
Si tu galería no se ve bien debido a diferencias en el tamaño de las imágenes, entonces necesitarás ajustar su alineación.
En el editor de publicaciones, puedes hacer clic en la galería. Luego, puedes hacer clic en el ícono ‘Seleccionar bloque padre: Galería’ para abrir el panel de personalización.
Desde aquí, asegúrate de habilitar la opción ‘Recortar imágenes para que encajen’.
Tan pronto como hagas eso, WordPress ajustará la galería al centro.
La función de galería predeterminada en WordPress es bastante buena. Sin embargo, si agregas regularmente galerías de fotos a tus publicaciones y páginas de WordPress, considera usar un plugin de galería de fotos como Envira Gallery.
Estos plugins te darán más opciones para alinear imágenes en tus galerías de fotos, mostrarlas en una ventana emergente y darles un estilo diferente.
Para más detalles, consulta nuestro tutorial sobre cómo agregar una galería de imágenes en WordPress.
Cómo agregar dos imágenes una al lado de la otra en WordPress
La forma más fácil de mostrar 2 imágenes una al lado de la otra en una publicación de WordPress es agregar ambas imágenes a un bloque de Galería.
Para abrir la opción de personalización del bloque de Galería, puedes hacer clic en la galería y luego una vez más en el ícono ‘Seleccionar bloque padre: Galería’.
Esto abrirá el panel de personalización en el lado derecho.
Desde aquí, simplemente selecciona un diseño de 2 columnas para que el bloque de galería muestre ambas imágenes una al lado de la otra.
También puedes habilitar la opción 'Recortar imágenes para que encajen' para asegurarte de que ambas imágenes tengan el mismo tamaño y estén centradas.
Más formas de agregar y alinear imágenes en WordPress
Aparte de los bloques que ya hemos cubierto, también puedes usar el bloque de Portada.
Su propósito principal es permitirte colocar texto directamente sobre una imagen, lo cual es perfecto para crear encabezados de sección llamativos y llamadas a la acción.
El bloque de Portada tiene las mismas opciones de alineación que una imagen normal.
También puedes agregar una superposición de color para que tu texto sea más fácil de leer e incluso marcar la opción 'Fondo Fijo', que crea un genial efecto de desplazamiento parallax.
Para obtener más información sobre el uso de imágenes de portada, consulta nuestro artículo sobre la diferencia entre imágenes destacadas y de portada en WordPress.
Hasta ahora, hemos hablado de agregar imágenes directamente a tus publicaciones y páginas. ¿Qué pasa con las imágenes de sitios de terceros?
El editor de bloques también facilita esto. Puedes agregar imágenes de sitios populares para compartir en redes sociales, incluyendo Instagram, Facebook, Flickr, Imgur, Photobucket y más.
Por ejemplo, si deseas agregar una foto de Instagram, simplemente agrega el bloque de Instagram al editor de publicaciones e ingresa la URL de la publicación que deseas compartir.
Luego, puedes hacer clic en la alineación que desees en la barra de herramientas. Los bloques incrustados también te permiten incrustar fácilmente videos en WordPress.
Para más detalles, consulta nuestra guía sobre cómo incrustar Instagram en WordPress.
Consejo extra: Cómo centrar un video en WordPress
Al igual que con las imágenes, es posible que desees cambiar la alineación de tus videos. Afortunadamente, los bloques de video en WordPress utilizan las mismas herramientas de alineación.
Ya sea que estés incrustando un video de YouTube o subiendo el tuyo, simplemente haz clic en el bloque de video. Verás aparecer la familiar barra de herramientas de alineación en la parte superior.
Simplemente haz clic en el botón 'Alinear al centro' para centrar todo el reproductor de video en tu área de contenido. Esto crea un diseño mucho más limpio y pulido para tu página.
Para obtener más información, puedes leer nuestra guía sobre cómo centrar un video en WordPress.
Preguntas frecuentes sobre la alineación de imágenes en WordPress
Aquí hay algunas preguntas que nuestros lectores hacen con frecuencia sobre la alineación de imágenes en WordPress:
¿Cuál es el mejor tipo de archivo de imagen para WordPress?
Para fotografías, JPEG suele ser la mejor opción porque equilibra la calidad y un tamaño de archivo pequeño. Si tu imagen necesita un fondo transparente, como un logotipo, deberías usar el formato PNG.
¿Cómo hago que mis imágenes sean responsivas en dispositivos móviles?
El editor de bloques de WordPress se encarga de esto automáticamente. Cualquier imagen que agregues será responsiva, lo que significa que se ajustará para adaptarse al tamaño de pantalla de cualquier dispositivo.
¿Puedo ajustar texto alrededor de una imagen?
Absolutamente. Simplemente agrega un bloque de Imagen y usa la opción 'Alinear a la izquierda' o 'Alinear a la derecha' en la barra de herramientas. El texto del párrafo que sigue se ajustará automáticamente alrededor de la imagen.
¿Cómo agrego un pie de foto a mi imagen?
Una vez que insertes una imagen, verás un campo de “Agregar pie de foto” directamente debajo de ella. Simplemente haz clic en esta área y escribe el texto que deseas usar para tu pie de foto.
¿Por qué las imágenes de mi galería no se alinean correctamente?
Esto sucede a menudo cuando las imágenes de tu galería tienen diferentes alturas o anchos. Para solucionar esto, selecciona el bloque de Galería y activa la opción ‘Recortar imágenes para que encajen’ en el panel de configuración de la derecha. Esto hará que todas las imágenes de la galería tengan un tamaño uniforme.
Esperamos que este artículo te haya ayudado a aprender cómo agregar y alinear imágenes fácilmente en el editor de bloques de WordPress. También te puede interesar nuestra guía sobre cómo cambiar la altura y el ancho de los bloques en WordPress y preguntas comunes de Gutenberg respondidas.
Si te gustó este artículo, suscríbete a nuestro canal de YouTube para obtener tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.
Jiří Vaněk
Gutenberg sigue siendo un gran desconocido para mí. Admito que solo empecé a descubrirlo después de que llegó WordPress 6.4 y leyendo estas páginas. Durante mucho tiempo, por ejemplo, no podía averiguar cómo colocar una imagen y texto uno al lado del otro (en Elementor era algo completamente sencillo). Después de leer este artículo, puedo hacer un poco más con Gutenberg. Gracias por eso.
Soporte de WPBeginner
You’re welcome
Administrador
fred dugas
¿funcionará esto con Iframes? Edito un bloque de HTML personalizado y agrego un iframe, y al guardar, el agregado se alinea completamente a la izquierda, donde todos los demás bloques están centrados.
Soporte de WPBeginner
Dependería del iframe, pero normalmente los iframes no tendrán opciones de alineación automáticas.
Administrador
Harry Goldhagen
¿Cómo se alinean las Imágenes Destacadas que aparecen en la página de Blog generada automáticamente y en la página de Categoría? Al hacer clic en la imagen se abre la publicación, y no parece haber una configuración de alineación para la imagen destacada al completar la configuración de la publicación.
Soporte de WPBeginner
Para la imagen destacada, eso estaría determinado por tu tema. Si consultas con el soporte de tu tema específico, deberían poder ayudarte con la alineación de tu imagen destacada.
Administrador
john McIntyre
Deseo que todos los subtítulos de mi sitio tengan el mismo tamaño y fuente.
¿Cómo se logra esto?
Soporte de WPBeginner
A menos que tu tema tenga una configuración específica para ello, la mayoría de los temas deberían tener el texto uniforme si es solo el pie de foto de la imagen y no un bloque de texto diferente.
Administrador
Sharon
Quiero cambiar la configuración predeterminada para que al subir una imagen, esta se centre siempre. Cambiar cada imagen que subo para centrarla cada vez que añado una imagen es muy tedioso. ¿Puedo cambiar la configuración predeterminada para que se centre?
Soporte de WPBeginner
Por el momento no hay un método sencillo que recomendaríamos para principiantes, pero estaremos atentos a algo que podamos recomendar.
Administrador
Amanda A.
Estoy intentando usar el Editor de Bloques para mostrar dos imágenes una al lado de la otra. Usé la función de dos columnas y luego bloques de imagen en cada columna. Mientras diseño, se muestra correctamente, pero cuando previsualizo en una nueva pestaña, las columnas una al lado de la otra desaparecen y las imágenes se apilan. ¿Qué estoy haciendo mal? ¿Es un problema común? ¿Cómo puedo solucionarlo?
Soporte de WPBeginner
Es posible que desees asegurarte de que las imágenes no sean demasiado grandes para que quepan una al lado de la otra en tu tema específico, ya que es la razón más común para ese problema.
Administrador
Sheryl Zeiset
Estoy intentando aprender a usar el nuevo editor de bloques. Cuando hago clic en el botón 'Añadir bloque' y elijo 'imagen' para añadir una foto, solo me aparece la opción 'insertar desde URL' y no encuentro la manera de añadir fotos desde mi Biblioteca de Medios. ¿Pueden ayudarme?
Soporte de WPBeginner
Deberías revisar de cerca para encontrar el texto junto al botón de carga para seleccionar la imagen de tu biblioteca de medios
Administrador
Luther Mckinnon
He estado publicando un blog durante muchos años. He aprendido a temer la introducción de un nuevo sistema. Hacer algo tan simple como agregar fotografías es ahora muy difícil.
Soporte de WPBeginner
Hopefully, once you are comfortable with the new system it becomes easier for you
Administrador
Ward
Gran información, el problema es que en el backend funciona pero en el frontend siempre se alinea a la izquierda. ¿Sería posible que esto tenga algo que ver con mi plantilla de Elementor?
Soporte de WPBeginner
Si estás utilizando un constructor de páginas, existe la posibilidad de que tu constructor de páginas esté anulando el estilo y puedas contactar al soporte de tu constructor para obtener ayuda.
Administrador
tanmay
característica absolutamente increíble, no es para todos usar el editor HTML
Soporte de WPBeginner
Glad you like the block editor feature
Administrador
Louie Adem
Acabo de empezar con WordPress ayer. Soy totalmente principiante y estoy muy feliz de que wpbeginner me haya proporcionado las "ruedas de entrenamiento" para empezar. La educación en este sitio web es muy valiosa. No puedo agradecerles lo suficiente.
Soporte de WPBeginner
Glad we could help get you started
Administrador
BadlyDrawmWolf
Thank you for this little gold nugget – really struggling getting in to the “new” way of handling my blog and almost giving up and searching for other alternatives….
Soporte de WPBeginner
Nos alegra que nuestro artículo haya sido de ayuda. Para otro artículo útil, te recomendamos echar un vistazo a nuestro artículo a continuación:
https://www.wpbeginner.com/beginners-guide/how-to-use-the-new-wordpress-block-editor/
Administrador
Karen
Mencionas "Imagen en línea", pero no veo ningún bloque de ese tipo. Tu artículo fue escrito hace tiempo pero supuestamente actualizado en enero de 2020. ¿Ese bloque desapareció y olvidaste quitarlo de este artículo? O una mejor pregunta: ¿Cómo puedo agregar una imagen en línea dentro de otro bloque como Párrafo o Encabezado?
Soporte de WPBeginner
El bloque de imagen en línea no está disponible actualmente, pero normalmente puedes recrear el formato con el texto y la imagen o el bloque de imagen estándar
Administrador
Ted Strutz
Cuando agrego una imagen de mis medios, la barra de herramientas de la imagen no aparece para alinear a la izquierda o a la derecha. Puedo cambiar el tamaño de la imagen.
Soporte de WPBeginner
Querrías asegurarte de no haberlo configurado para que esté en la parte superior de la página en lugar de como lo tenemos en este momento.
Administrador
Hannah
Hola, he alineado todas las imágenes usando el editor de bloques y todo se ve bien hasta que previsualizo.
Entonces, algunas imágenes se han vuelto mucho más grandes que otras, tengo una galería de dos imágenes de repente sentada encima de una sola imagen. ¡Todo se ha movido aleatoriamente!
Incluso cuando lo publiqué, todavía estaba todo mal. ¡Me encantaría tu ayuda, gracias!
Soporte de WPBeginner
Querrías contactar al soporte de tu tema para asegurarte de que no haya un conflicto de estilo, de lo contrario, podrías intentar deshabilitar tus plugins para ver si también es un conflicto de plugins.
Administrador
Harry
Hola, estoy buscando alinear los shortcodes uno al lado del otro como describes con las imágenes, ¿es esto posible? Muchas gracias.
Soporte de WPBeginner
Eso dependería de los shortcodes en sí
Administrador
Ap
Hola,
¿Cómo se organiza la posición del título para los bloques de portada?
Tienes esa opción en tu barra, pero por alguna razón, cuando hago clic en el bloque de portada, no hay opción de alineación de texto.
¿Alguna idea sobre esto?
Gracias por el gran artículo.
Soporte de WPBeginner
Querrías revisar la parte superior de tu página, ya que esa sería la otra ubicación de las opciones de alineación en lugar de flotar sobre el elemento.
Administrador
Cheryl
¿Cómo se hace una imagen enlazable con un enlace clickeable? He estado buscando tutoriales y todos parecían basarse en un bloque de Gutenberg anterior que desde entonces ha cambiado y los tutoriales ya no coinciden con el bloque.
Soporte de WPBeginner
Querrías revisar la barra de herramientas superior para ver la ubicación actual de dónde agregar un enlace a una imagen.
Administrador
Alejandro
Hola, ¿es posible escribir una leyenda de imagen justo debajo de la imagen cuando se usa el "Bloque de medios y texto"?
Soporte de WPBeginner
Dependería del estilo de tu tema específico, pero deberías poder hacerlo.
Administrador
Lancer Kind
¡Genial! ¡Muchas gracias!
Soporte de WPBeginner
You’re welcome
Administrador
Pete Newman
Existe un problema de incompatibilidad entre Gutenberg y los temas. ¿Tienen una lista de temas que sean compatibles con Gutenberg (y que permitan la funcionalidad completa de Gutenberg)?
Gracias y saludos,
Pete.
Soporte de WPBeginner
Debería haber menos problemas con eso a medida que los temas se actualizan, pero para temas específicamente amigables con Gutenberg, puedes echar un vistazo a nuestra lista aquí: https://www.wpbeginner.com/showcase/gutenberg-friendly-wordpress-themes/
Administrador
Pete Newman
He estado usando WordPress durante años, pero he estado un poco ausente últimamente. Gutenberg me da un dolor de cabeza. Sigo estas instrucciones pero simplemente no puedo alinear imágenes en un bloque de imagen/texto. Cuando voy a previsualizar, la imagen está alineada a la extrema izquierda de la página sin ningún margen. ¿Hay alguna solución que ofrezcan?
¡¡Gracias!!
Soporte de WPBeginner
Si se están ignorando la configuración, es posible que necesites consultar con el soporte de tu tema para asegurarte de que no esté anulando tu estilo. Si quisieras intentar revertir al editor clásico, tenemos nuestra guía aquí: https://www.wpbeginner.com/plugins/how-to-disable-gutenberg-and-keep-the-classic-editor-in-wordpress/
Administrador
Pete Newman
¡Gracias! Excelente soporte. Agregué el plugin del editor clásico y el plugin para deshabilitar Gutenberg y pude crear una aproximación de lo que quiero. Espero que Gutenberg funcione como se pretende y que los desarrolladores se pongan al día; es una gran idea.
Soporte de WPBeginner
Glad we could help
Jimmie
¿Pero no puedes enlazar imágenes en una galería? Eso hace que la función de galería sea menos atractiva.
Soporte de WPBeginner
If each image needs its own link then setting up columns would likely be what you’re looking to do
Administrador
Roxana Snedeker
What is the best way to add multiple images at once, I can’t seem to add more than one at the time
Soporte de WPBeginner
Si quieres agregar varias imágenes en la misma área, deberías echar un vistazo al bloque de galería para agregar varias imágenes en una sección
Administrador
Aaranja
¿Cómo agregar una imagen directamente en el “Editor de Código”, sin pasar por el “Editor Visual”?
Soporte de WPBeginner
Podrías deshabilitar el editor visual en Usuarios > Tu Perfil, pero eso te impediría usar el editor visual para otras secciones.
Administrador
Alice
Estoy centrando todas mis imágenes correctamente en el editor, pero todas aparecen alineadas a la izquierda en la vista previa y en las publicaciones en vivo, sin importar qué. ¿Sabes qué podría estar causando esto? ¡Me está volviendo loca!
Soporte de WPBeginner
Es posible que tu tema esté anulando el estilo que estás configurando. Si te pones en contacto con el soporte de tu tema, deberían poder ayudarte.
Administrador
Anne
Me gustaría tener una imagen junto a un archivo (pdf) – todo en la misma línea. ¿Puedo hacerlo en un solo bloque o necesitaría crear dos? ¡Gracias!
Soporte de WPBeginner
Querrás agregar el bloque de columnas para dividir el contenido y permitirte mostrar el contenido de esa manera.
Administrador
Suzy Algar
Estoy teniendo problemas para crear subtítulos para imágenes y descargas que aparecen en mis archivos. No sé a dónde ir una vez que tengo la imagen en mis archivos.
Soporte de WPBeginner
Si estás intentando agregar la imagen a una publicación o página, normalmente agregarías un bloque de imagen y luego seleccionarías el archivo que quieres usar en el bloque.
Administrador
Roxana Safipour
Entonces, ¿cómo se hace ahora el "sin alineación", donde la imagen está a la izquierda y no tiene texto que la rodee? Esto solía ser fácil con la opción de sin alineación, que ahora ha desaparecido. ¡Por favor, tráiganla de vuelta! Me estoy volviendo loca intentando averiguar cómo poner mi imagen a la izquierda (no centrada) y sin texto a su lado, ¡pero el texto sigue rodeándola automáticamente!
Soporte de WPBeginner
Por lo que parece que quieres, si no estableces específicamente la alineación de una imagen, la imagen debería colocarse de esa manera.
Administrador
Ben
Solo un rápido seguimiento sobre esto, ya que también me estaba molestando. Hay una respuesta simple pero no es tan obvia, ya que estaba buscando una configuración: simplemente presiona el botón de alineación seleccionado nuevamente para desactivar la alineación y volver a la alineación predeterminada sin alineación.
Jesse
Gran publicación, muy útil. Me he actualizado a WordPress 5.1 pero ahora tengo problemas para vincular imágenes a URL. ¿Puedes ayudarme?
Soporte de WPBeginner
Si estás usando el editor de bloques, en la configuración del bloque de imagen debería haber una sección de Configuración de enlace para que establezcas a dónde enlaza una imagen.
Administrador