Las imágenes dan vida a sus publicaciones y páginas de WordPress haciéndolas más atractivas. Sin embargo, a muchos principiantes les resulta difícil alinear las imágenes de la manera que desean. El nuevo editor de bloques de WordPress (Gutenberg) resuelve este problema facilitando la adición y alineación de imágenes en WordPress. En este artículo, le mostraremos cómo puede agregar y alinear imágenes fácilmente en WordPress para crear hermosos diseños de contenido.
Alineación de imágenes en el editor de WordPress
Contents
Anteriormente, WordPress usaba un cuadro de texto con botones de edición como editor predeterminado. Un problema particular del antiguo editor era la alineación de las imágenes. Aunque había opciones para alinear las imágenes a la izquierda, a la derecha o al centro, no siempre se veían bien. A veces, las imágenes no se alineaban, no tenían el tamaño exacto o simplemente se veían extrañas. WordPress 5.0 introdujo un nuevo editor de publicaciones de WordPress llamado Gutenberg Block Editor. Solucionó varios problemas con el editor anterior, incluidos problemas de alineación de imágenes. Veamos cómo puede agregar y alinear imágenes fácilmente en el nuevo editor para crear hermosos diseños para sus publicaciones y páginas.
Agregar y alinear imágenes en WordPress
El nuevo editor viene con los siguientes bloques que puede usar para agregar imágenes a sus publicaciones y páginas de WordPress.
- Fotografía
- Imagen en línea
- Galería
- Medios y texto
- Cubrir
Comencemos primero con un bloque de imágenes simple. Haga clic en el botón « Agregar un nuevo bloque » o escriba /fotografía en el editor de publicaciones para insertar un bloque de imagen.
Verá tres botones dentro del cuadro de imagen en blanco. Puede cargar una imagen desde su computadora, seleccionar una imagen ya descargada de la biblioteca de medios o insertar una imagen proporcionando la URL del archivo de imagen. A continuación, haga clic en el botón «Descargar» y luego seleccione la imagen que desea descargar de su computadora. Tan pronto como seleccione la imagen, WordPress la descarga a su biblioteca de medios y la inserta en el bloque de imágenes.
Ahora notará una barra de herramientas sobre su imagen y algunas configuraciones de cuadro de imagen en la columna de la derecha. Para alinear su imagen, utilizará la barra de herramientas que aparece en la parte superior de la imagen.
El cuadro de imagen le proporciona las siguientes opciones de alineación de imágenes como botones en la barra de herramientas.
- Alinear a la izquierda
- Alinear al centro
- Alinear a la derecha
- Gran ancho
- Ancho completo
Si su imagen tiene un ancho más pequeño, alinearla hacia la izquierda o hacia la derecha hará que aparezca texto junto a la imagen. Al alinearlo en el centro, se mostrará la imagen en su propia línea sin texto en ninguno de los lados.
Elegir la opción de ancho ancho hará que su imagen sea más ancha que el cuadro de texto, y la opción de ancho completo la empujará hacia los bordes derecho e izquierdo de la pantalla del navegador.
Cómo alinear perfectamente una imagen junto al texto
A menudo, es posible que deba alinear perfectamente una imagen junto al texto. El editor de bloques de WordPress facilita esto agregando el bloque de Medios y Texto. Este bloque esencialmente agrega un área de dos columnas. Una columna para imágenes (medios) y la segunda columna para contenido textual.
Simplemente cargue su imagen y luego agregue el texto que desea mostrar junto a ella.
Después de agregar la imagen y el texto, notará más opciones para el bloque. Puede agrandar o agrandar todo el bloque, también puede cambiar los lados de la imagen y el texto. La alineación de la imagen se ajustará automáticamente a la altura del texto en la siguiente columna.
Cómo alinear las imágenes de la galería en WordPress
El editor de publicaciones de WordPress también viene con un bloque para agregar galerías de imágenes. Esto le permite mostrar imágenes fácilmente en una cuadrícula de filas y columnas. El bloque de galería viene con opciones de alineación similares en la barra de herramientas. Puede alinear todo el bloque de la galería a la izquierda, al centro o a la derecha. También puede ampliarlo o cambiarlo a una línea de ancho completo.
La funcionalidad de la galería predeterminada de WordPress es bastante buena. Sin embargo, si agrega regularmente galerías de fotos a sus publicaciones y páginas de WordPress, considere usar un complemento de galería de fotos como Envira Gallery. Estos complementos le brindarán más opciones para alinear imágenes en sus galerías de fotos, mostrarlas en la ventana emergente y diseñarlas de manera diferente.
Cómo agregar dos imágenes una al lado de la otra en WordPress
La forma más fácil de mostrar dos imágenes una al lado de la otra en una publicación de WordPress es agregar ambas imágenes en un bloque de Galería.
Simplemente seleccione un diseño de 2 columnas para que el bloque de la galería muestre las dos imágenes una al lado de la otra. También puede marcar la opción «Recortar miniatura» para asegurarse de que ambas imágenes tengan el mismo tamaño.
Más formas de agregar y alinear imágenes en WordPress
Además de la imagen, los medios y el texto, así como el bloque Galería, también puede usar el bloque Portada para agregar una imagen de portada. En el diseño web moderno, las imágenes de portada se utilizan para crear diseños de contenido muy atractivos. Estas imágenes se utilizan para resaltar diferentes secciones de una página. El bloque de imagen de portada viene con las mismas opciones de alineación que un bloque de imagen. Puede agregar texto en la imagen y elegir un color de superposición en la configuración del bloque. La mejor parte es que puede marcar la opción ‘Fondo fijo’ que crea un efecto de fondo de paralaje.
Para obtener más información sobre el uso de imágenes de portada, consulte nuestro artículo sobre la diferencia entre imágenes destacadas e imágenes de portada en WordPress. Hasta ahora hemos hablado de agregar imágenes directamente a sus publicaciones y páginas. ¿Qué pasa con las imágenes de sitios de terceros? El editor de bloques también facilita esta tarea. Viene con bloques de inserción para sitios populares de intercambio social, incluidos Instagram, Flickr, Imgur, Photobucket y más. Por ejemplo, si desea agregar una foto de Instagram, simplemente agregue el bloque de Instagram al editor de publicaciones e ingrese la URL de la publicación que desea compartir.
WordPress tomará automáticamente la publicación de Instagram y la integrará por usted. Después de eso, podrá utilizar las opciones de alineación en la barra de herramientas.
Los bloques incrustados también le permiten incrustar videos fácilmente en WordPress. Después de eso, puede usar las mismas opciones en la barra de herramientas para alinear videos en WordPress. Esperamos que este artículo le haya ayudado a aprender cómo agregar y alinear imágenes fácilmente en el editor de bloques de WordPress. También puede consultar nuestra guía sobre cómo optimizar imágenes para acelerar WordPress. Si le gustó este artículo, suscríbase a nuestro canal de YouTube para ver tutoriales en video de WordPress. También puede encontrarnos en Twitter y Facebook.
){kind=link}