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.
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.
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.
Puede ver que la imagen se añade al bloque.
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.
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.
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.
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.
Puede ver que la imagen se ha añadido al bloque.
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.
Puede ver que el texto se añade a la columna.
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.
Seleccione el número de columnas y filas que necesita para el diseño. Nosotros seleccionaremos 2*1.
Puedes ver que las columnas y la fila están listas.
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.
Sube la imagen de la unidad local o añade una de tu biblioteca multimedia.
Hemos añadido una imagen, que puede ver a continuación.
Paso 03: Añadir texto a la tabla
Basta con añadir texto a la columna derecha mediante el bloque de párrafo.
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.
Así, puede crear secciones web para poner texto e imagen uno al lado del otro en WordPress.
Método 4: Utilizar el bloque Sliderberg
¿Quiere mostrar texto e imágenes en un deslizador interactivo? En Sliderberg le permite hacer exactamente eso, utilizando el conocido bloque Media & Text, con total flexibilidad. A continuación te explicamos cómo configurarlo en unos minutos:
Paso 1: Instalar y activar el plugin Sliderberg
En primer lugar, vaya a Plugins → Añadir nuevo en su panel de control de WordPress, busque "Sliderberg" y haga clic en Instalar ahora. A continuación, active el plugin.
Paso 2: Insertar el bloque Sliderberg
Edita tu entrada o página. Haga clic en el botón + busque "Sliderberg" e inserte el bloque Sliderberg donde desee que aparezca el control deslizante.
Paso 3: Seleccione el tipo de deslizador "Bloques
Cuando se le solicite, elija la opción Deslizador de bloques opción. Esto le permite añadir cualquier bloque Gutenberg dentro de cada diapositiva.
Paso 4: Elija un color de fondo para el deslizador
Elija un color de fondo para su deslizador que combine con el estilo de su sitio, o manténgalo transparente para un aspecto limpio.
Paso 5: Añadir el bloque 'Media & Text' dentro del Slider
Dentro de su primera diapositiva, haga clic en el botón + e inserte el Medios y texto bloque.
Paso 6: Añadir imagen y texto al deslizador
Utiliza el bloque Media & Text para subir tu imagen (lado izquierdo) y añadir tu texto (lado derecho). Puedes utilizar encabezados, párrafos, botones o cualquier otro bloque que necesites.
Paso 7: Añadir o duplicar diapositivas
¿Quiere más diapositivas? Haga clic en Añadir diapositiva para crear uno nuevo, o Duplicar diapositiva para copiar un diseño existente.
Paso 8: Personalizar el deslizador y publicar
Ajusta la configuración del deslizador (animación, reproducción automática, flechas de navegación, etc.) según tus preferencias. Cuando esté listo, haga clic en Publique ¡en directo!
Ahora dispone de un deslizador fluido y adaptable que muestra texto e imágenes uno al lado del otro, perfecto para mostrar equipos, productos, testimonios y mucho más.
Consejo profesional: Puede utilizar cualquier dentro de sus diapositivas Sliderberg-¡no sólo Media & Text! Sea creativo con botones, iconos, columnas o incluso bloques de terceros.
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:
