El contenido visual desempeña un papel crucial a la hora de captar la atención de los usuarios en línea. Lo que una sola imagen puede transmitir a menudo requiere cientos de palabras. Además, las imágenes pueden evocar emociones y realzar la estética general.
Una forma eficaz de mostrar imágenes es colocarlas una al lado de la otra. Esta técnica es especialmente útil para comparar varios productos, presentar imágenes del antes y el después y contar una historia.
En este artículo, le mostraremos tres formas sencillas de poner imágenes una al lado de la otra en WordPress.
Cree bonitas mesas
Con el editor de bloques
Método 1: Utilizar el Bloque Galería
WordPress viene con el bloque Galería por defecto. Puede presentar imágenes lado a lado con el bloque de las siguientes maneras.
Paso 01: Añadir el Bloque de Galería a WordPress
Sólo tienes que abrir un post o una página. Busque el icono Bloque de la galería en la biblioteca de bloques de Gutenberg pulsando la tecla Botón más (+). Añádelo al editor.
Haga clic en el botón Botón de carga para añadir imágenes frescas desde tu almacenamiento local al lateral. O bien, puede cargarlas desde sus archivos existentes haciendo clic en el botón Mediateca botón.
Para este tutorial, subiremos imágenes desde la Biblioteca Multimedia. Seleccione las imágenes que desea añadir. Pulsa el botón Crear una nueva galería al final.
Una vez añadidas las imágenes al editor, las verás aparecer una al lado de la otra. A continuación, puedes personalizar los ajustes y estilizaciones del bloque Galería utilizando las opciones correspondientes de la barra lateral derecha.
Nota: Si las imágenes no se muestran juntas por defecto, seleccione todo el bloque haciendo clic en el botón Icono de la galería en la barra de herramientas. Especifique los números de columna en la barra lateral derecha.
Segundo método: utilizar el bloque de columnas
El bloque Columna le permite dividir su contenido en varias columnas. Puedes añadir otros bloques para añadir distintos tipos de contenido dentro de cada columna.
Paso 01: Añadir el bloque de columnas a su sitio web
Añada el Bloque de columnas a su editor siguiendo el mismo método descrito anteriormente.
Seleccione la disposición de las columnas a su gusto. Puede mostrar un número igual de imágenes una al lado de la otra, correspondiente al número de columnas que añada. Hemos seleccionado el diseño de dos columnas para el bloque.
Añada el Bloque de imágenes pulsando el botón Botón más (+) dentro del Bloque de columnas.
Sube una imagen de la misma manera que te mostramos arriba.
Nota: Como se trata del bloque Imagen, puede añadir sólo una imagena diferencia del bloque Galería.
Del mismo modo, añada el Bloque de imágenes de nuevo a la segunda columna.
Puede ver que la segunda imagen ha aparecido junto a la primera. Ahora puedes añadir textos alternativos y otros ajustes para las imágenes una a una.
Method Three: Using the Tableberg Block
Tableberg es un complemento constructor de tablas basado en bloques. Con él, también puede crear columnas y mostrar imágenes lado a lado. Siga los pasos que se explican a continuación después de instalación de y activación de el plugin.
Paso 01: Añadir el bloque TableBerg
El plugin incluye un Bloque TableBerg. Añádelo a tu editor.
Puede seleccionar varias filas si lo desea. Pero explicaremos el tutorial de hoy con una sola fila y varias columnas.
TableBerg le permite añadir diferentes tipos de bloques a las celdas de la tabla. Añada los Bloque de imágenes a las celdas de la tabla.
Cargar una imagen a la celda de la tabla de la misma forma que te mostramos en los dos métodos anteriores.
Sigue añadiendo imágenes a otras columnas de la tabla utilizando la función Bloque de imágenes. Espero que puedas hacerlo solo.
Vea la imagen siguiente. Hemos mostrado tres imágenes una al lado de la otra dentro de la tabla creada con el bloque TableBerg.
# Eliminar el borde de la mesa
Puede ver un borde alrededor de la mesa. Para quitarlo, haga clic en el icono TableBerg tres veces en la barra de herramientas. Ir a Estilos > Borde en la barra lateral derecha. Ponga el valor cero (0) para definir el tamaño del borde de la tabla.
De este modo, puede mostrar las imágenes una al lado de la otra en los sitios web de WordPress.
Conclusión
Mostrar imágenes una al lado de la otra es muy ventajoso, mientras que la comparación visual entre diferentes productos, opciones, características y variaciones es esencial. Espero que puedas hacerlo solo hoy con este tutorial.
Usted puede hacer más en su sitio mediante la creación de diferentes tipos de tablas utilizando el plugin TableBerg. Eche un vistazo a cómo crear una tabla comparativa de productos de Amazon en WordPress.
