Cómo poner texto e imagen uno al lado del otro en WordPress

Al cubrir reseñas de productos, tablas comparativas, tutoriales, relatos de viajes, infografías, contenidos educativos, etc., es posible que tenga que poner textos e imágenes uno al lado del otro. Existen numerosas formas de hacerlo en WordPress.

En este artículo, le mostraremos varias maneras efectivas de cómo poner texto e imagen lado a lado en WordPress. Así que, quédate con nosotros hasta el final. Realmente aprenderás algo emocionante.

Cree bonitas mesas
Con el editor de bloques

Método 1: Utilizar el bloque multimedia y de texto

Medios y texto es un bloque predeterminado del editor de bloques de Gutenberg. Con este bloque, puedes poner texto e imágenes uno al lado del otro sin depender de ninguna herramienta de terceros.

Paso 01: Añadir los medios y el texto al editor

Haga clic en el botón icono más (+) en el editor. Escriba a Medios y texto en la barra de búsqueda. Añade el bloque al editor.

Añadir el bloque Media & Text a WordPress

Paso 02: Añadir/subir una imagen al bloque

Puedes añadir una imagen ya sea subiéndola desde la unidad local, la biblioteca multimedia o desde la destacada. Elige la opción que más te guste.

Añadir/subir una imagen al bloque

Puede ver que la imagen se añade al bloque.

La imagen se añade al bloque Media & Text

Paso 03: Añadir texto al bloque de medios y texto

Escriba el texto que desee en la columna derecha del bloque. Puede personalizar el color del texto, la alineación y mucho más si lo desea.

Añadir texto al bloque de medios y texto

Paso 04: Alterne la posición del texto y del archivo multimedia

El bloque permite alternar la posición de los archivos de texto y multimedia haciendo clic en las respectivas opciones de la barra de herramientas.


Método 2: Utilizar el bloque de columnas

En Columnas es también un bloque por defecto del editor. Es uno de los más utilizados a los bloques en la creación de contenido de WordPress.

Paso 01: Añadir el Bloque de Columnas al Editor

Puede mostrar texto e imagen uno al lado del otro añadiendo el botón Párrafo y Bloques de imágenes por separado dentro de los bloques de columnas.

Así que.., añadir el bloque Columnas primero al editor.

Añadir el bloque Columnas al editor

Seleccione un diseño a dos columnas.

Seleccione un diseño a dos columnas

Paso 02: Añadir el Bloque de Imagen al Bloque de Columnas

Es mejor mostrarlo a la izquierda. Así, añadir el bloque Imagen a la columna de la izquierda.

Añadir el bloque de imágenes al bloque de columnas

Una vez más, añada la imagen que desee, ya sea desde la unidad local, la biblioteca multimedia o a través de una URL.

Cargar una imagen en el bloque de columnas

Puede ver que la imagen se ha añadido al bloque.

La imagen se añade al bloque de columnas

Paso 03: Añadir texto al bloque Cloumns

Añada el Bloque de párrafos en la columna de la derecha. Esto le permitirá añadir texto.

Añadir el bloque Párrafo al bloque Columnas

Puede ver que el texto se añade a la columna.

Se añade texto al bloque de columnas

A continuación, puede personalizar el bloque de columnas, incluida la imagen y el texto que contiene.


Método 3: Utilizar el bloque Tableberg

Tableberg es un maravilloso plugin constructor de tablas que le permite diseñar numerosas partes para su sitio web. Este plugin también le permite poner texto e imágenes lado a lado. Descargar el plugin haciendo clic en los botones adjuntos a la bandera de abajo.

Cree bonitas mesas
Con el editor de bloques

Empieza a seguir el tutorial ahora.

Paso 01: Añadir el bloque Tableberg al editor

Este plugin añade un bloque llamado Tableberg a la biblioteca de bloques de Gutenberg. Añadir el bloque Tableberg al editor.

Añade el bloque TableBerg a tu editor de Gutenberg

Seleccione el número de columnas y filas que necesita para el diseño. Nosotros seleccionaremos 2*1.

Establecer el número de filas y columnas

Puedes ver que las columnas y la fila están listas.

Se añaden filas y columnas al editor

Paso 02: Añadir una Imagen a una Celda de la Tabla

Tableberg te permite añadir varios bloques personalizados a sus celdas. Haciendo clic en el botón icono más (+)encontrar y añadir el bloque Imagen a una de sus celdas.

Añadir un bloque de imagen a Tableberg

Sube la imagen de la unidad local o añade una de tu biblioteca multimedia.

Sube o añade una imagen a Tableberg

Hemos añadido una imagen, que puede ver a continuación.

Se añade una imagen a la tabla

Paso 03: Añadir texto a la tabla

Basta con añadir texto a la columna derecha mediante el bloque de párrafo.

Añadir texto a Tableberg

Paso 04: Modificar la frontera Tableberg

Puede hacer más atractiva esta sección eliminando o colonizando el borde de la mesa. Ir a el Ficha Estilos.

Ven a la mesa Frontera desplazándose hacia abajo por la pestaña. Obtendrá opciones para eliminar o colorear el borde de la tabla desde estas opciones.

Eliminar los bordes de la tabla

Así, puede crear secciones web para poner texto e imagen uno al lado del otro en WordPress.


Conclusión

De hecho, puedes aprovechar los bloques predeterminados de Gutenberg para crear y diseñar tus publicaciones y páginas web. Pero como carecen de muchas funciones avanzadas, a menudo necesitas plugins de bloques adicionales que vienen con muchas características interesantes.

Tableberg es un plugin interesante que puede utilizar en este caso. Ultimate Blocks es otro gran plugin de bloques que deberías considerar. Explora las versiones gratuitas de estos dos plugins haciendo clic en los botones adjuntos a continuación.

Lea también:



El equipo de Tableberg