Por lo tanto, debes aprender a usar el bloque de galerías en WordPress. Una vez que domines las funciones del bloque de galerías, podrás utilizarlo para mejorar el aspecto visual de tu sitio web, haciéndolo más profesional y atractivo.

Hoy, en este tutorial, hablaremos del bloque de galería de WordPress, las características de la barra de herramientas, las opciones de personalización y cómo usarlo correctamente. Asegúrate de seguirnos de principio a fin.

¿Qué es el bloque de galería de WordPress?

El bloque Galería de WordPress es un bloque central en el Editor de bloques de WordPress. Te permite crear y mostrar una colección de imágenes en un cuadrícula formato. Es perfecto para mostrar fotos de eventos, organizar imágenes en un diseño atractivo o presentar imágenes con el mínimo esfuerzo.

Ciertas características le benefician cuando utiliza el bloque. Descúbralas a continuación.

1. Personalización: Ajusta las columnas, el espaciado y los pies de foto para adaptarlos a tu diseño. También puede establecer diferentes resoluciones para imágenes individuales en la galería.
2. Diseño adaptable: Las imágenes se adaptan automáticamente a los distintos tamaños de pantalla para ofrecer una experiencia fluida en móviles, tabletas y ordenadores de sobremesa.
3. Integración incorporada: No hay necesidad de plugins adicionales; el bloque funciona de forma nativa en WordPress.
4. SEO-Friendly: El texto alternativo y las leyendas pueden mejorar la accesibilidad de tu contenido y su posicionamiento en los motores de búsqueda. También puedes configurar el texto ALT para imágenes individuales dentro de la galería.

Funciones de la barra de herramientas del Bloque de Galería

Cuando insertas el bloque de galería, aparece una barra de herramientas en la parte superior del bloque de galería con varias funciones para personalizar tu galería. Estas funciones se muestran a continuación.

1. Transfórmate: Puede transformar este bloque en un bloque de Imagen, Columnas, Detalles y Grupo.
2. Arrastra: Permite arrastrar y soltar el bloque dedicado en cualquier lugar del editor.
3. Asa móvil:  Permite mover el bloque arriba y abajo.
4. Alinear: La opción de alineación le permite ajustar la alineación de la imagen a Ninguna, Ancho, Ancho completo, Izquierda, Centro y Derecha.
5. Enlace: Esta opción le permite añadir enlaces para el contenido seleccionado dentro del bloque.
6. Pie de foto: Puedes añadir pies de foto utilizando la opción del editor para cada imagen.
7. Añade: La opción de añadir permite añadir o cargar nuevas imágenes en la galería.
8. Más opciones: Ofrece más opciones relacionadas con la sección del bloque, como duplicar, copiar, agrupar, etc.

Cómo utilizar el bloque de galería en WordPress

Usar el bloque de Galería en WordPress es simple. Solo sigue los pasos de abajo:

Paso 1: Añadir Bloque de Galería en el Editor

Abre la publicación o página, haz clic en el icono "+" para añadir un bloque y busca "Galería". Selecciona el Bloque de Galería para insertarlo en tu post o página.

Paso 2: Cargue sus imágenes

Puedes subir tus imágenes o seleccionarlas de la mediateca.

Cómo insertar imágenes mediante la opción de carga

Para insertar archivos de imagen, haga clic en el botón de carga, seleccione las imágenes con el cursor mientras que manteniendo pulsado el botón CTRL de tu teclado y haz clic en Abrir. Y ya está. Podrás ver tus imágenes en el editor.

Cómo insertar una imagen a través de la opción de biblioteca multimedia

Haga clic en el botón Biblioteca multimedia, seleccione sus imágenes y haga clic en el botón Crear una nueva galería e Insertar galería para insertar las imágenes en el editor.

Cuando hayas insertado todas las imágenes en la galería, podrás ver todas las funciones de la barra de herramientas del bloque de imágenes. Puedes comprobar esas funciones aquí.

Paso 3: Personalización de la galería

Para personalizar la galería, vaya a Ajustes (1) > Bloquear (2) > Ajustes (3). Encontrará las opciones de selección de columnas, resolución y otras opciones.

• Columnas: Las columnas le permiten determinar cuántas imágenes desea mostrar en su editor. Cuantas más imágenes añadas, más columnas se añadirán a la Galería. (4)
• Resolución: Puedes configurar la resolución de la imagen en Miniatura y Tamaño completo. (5)
• Recortar imágenes para ajustarlas: Esta función mantiene la proporción de cada imagen y hace que su tamaño se ajuste.
• Orden aleatorio: Esta función no mantiene la serie, sino que muestra imágenes en una serie aleatoria.

La opción Estilos presenta las siguientes opciones.

1. Color: La opción de color le permite cambiar el color de fondo de su bloque Galería.
2. Dimensiones: La opción Dimensiones le permite modificar el Espaciado entre bloques (espacio entre dos bloques como las imágenes), el Margen y el Relleno.
3. Borde y radio: Con esta función, puede añadir un borde, un color de borde y un radio de borde a su galería.

Aquí está la demo completa de la galería que he creado.

Crea una galería interactiva con Galleryberg

Si bien el bloque de Galería predeterminado es excelente para cuadrículas simples, carece de funciones como lightbox, efectos de desplazamiento y diseños diversos.

Si quieres una galería más atractiva sin escribir código, la Galleryberg plugin es una alternativa gratuita que amplía el editor de bloques con herramientas adicionales. Te permite alternar entre diseños de mosaico, albañilería, justificado y cuadrado, y añade una luz incorporada para hacer zoom y navegar.

Galleryberg también incluye efectos sutiles al pasar el ratón y controles receptivos para que tus galerías se sientan modernas en escritorio y móvil.

Ahora veamos cómo usar el plugin Galleryberg.

Paso 1: Instalar el plugin Galleryberg

Ve a tu panel de WordPress y navega a Plugins → Añadir nuevo y busca Galleryberg. Luego instala y activa el plugin.

Paso 2: Inserta el bloque de Galería Galleryberg

Crea una nueva publicación/página o edita una existente. Haz clic en el botón “+”, busca Galleryberg y añade el bloque.

Paso 3: Agrega tus imágenes

Sube nuevas imágenes o selecciónalas de la Biblioteca de medios y haz clic en Seleccionar.

Paso 4: Elegir un diseño

Por defecto, el bloque utiliza un diseño de Mosaicos. En la barra lateral del bloque, puedes cambiar a Albañilería, Justificadoo Cuadrado para que coincida mejor con tu diseño.

Cada diseño reorganiza automáticamente las imágenes y puedes ajustar las columnas, el espaciado y los bordes.

Paso 5: Habilitar la lightbox

Conmutar Habilitar Lightbox en la configuración del bloque para permitir que los visitantes hagan clic en una imagen y la vean en una ventana emergente con zoom y navegación deslizante.

La lightbox incluye controles de teclado y táctiles, por lo que funciona perfectamente en ordenadores y teléfonos.

Paso 5: Explora los efectos de desplazamiento y las leyendas

Usa los ajustes de Leyenda para mostrar texto debajo de las imágenes o como una superposición que aparece al pasar el cursor. Las animaciones de paso de cursor de Galleryberg (zoom de entrada/salida y superposiciones) hacen que la galería se sienta interactiva sin distraer

Paso 6: Vista previa y publicación

Una vez satisfecho, previsualiza tu galería y publica o actualiza la entrada. Tu galería será adaptable y estará optimizada en rendimiento gracias a la renderización del lado del servidor.

¿Por qué usar Galleryberg en lugar del bloque principal?

El bloque Galería principal ofrece diseños de cuadrícula básicos pero carece de funciones como lightbox, animaciones al pasar el ratón y diseños variados. Galleryberg proporciona cuatro estilos de galería diferentes, un lightbox adaptable con zoom y navegación por teclado, y controles intuitivos para espaciado, colores y leyendas. Incluso admite efectos adaptables al pasar el ratón para añadir animaciones sutiles. Si necesitas una galería que anime a los visitantes a interactuar con tus imágenes y se integre perfectamente en el editor de bloques, Galleryberg es una solución ligera y fácil de usar.

Reflexiones finales

El Bloque de Galería es una potente herramienta con el editor de bloques Gutenberg. Te permite mostrar tus colecciones de imágenes sin necesidad de plugins adicionales.

Es una opción excelente para todos por su flexibilidad, opciones de personalización y perfecta integración con WordPress.

Pruébelo y vea cómo puede transformar la forma de mostrar imágenes en su sitio web.

Déjame saber tu opinión sobre el tutorial en la sección de comentarios. También, deje que sus compañeros saben acerca de él a través de su plataforma de medios sociales.

Más información

• Cómo utilizar el bloque de imágenes en WordPress en 3 sencillos pasos
• Cómo utilizar el bloque preformateado en WordPress en 3 sencillos pasos
• Cómo utilizar el editor de bloques de WordPress (Guía para principiantes)
• 7 Mejores Alternativas a wpDataTables en 2024 (Comparadas)
• Los mejores plugins de WordPress para sitios y portales de noticias (2024)

<p>The post How to Use the Gallery Block in WordPress in 3 Easy Steps first appeared on Tableberg.</p>

Debido a ello, los diseñadores web y los creadores de contenidos tienen que dedicar mucho tiempo a la maquetación del sitio web, los iconos, los colores, las formas, la tipografía, etc. Hoy en día existen numerosos plugins en línea con los que se puede presentar el contenido web de una forma visualmente atractiva.

En esta entrada hablaremos de algunos de los mejores plugins de contenido de WordPress para potenciar el compromiso y el atractivo visual. Echa un vistazo rápido a ellos en la siguiente tabla.

Hablemos ahora de ellos. 

1. Bloques definitivos

Ultimate Blocks es un magnífico plugin de bloques Gutenberg para crear contenido impresionante en tu sitio web. Cuenta con más de 25 bloques personalizados. Los más populares son el control deslizante de imagen, calificación, revisión, línea de tiempo, contenido con pestañas, caja con estilo, testimonial, cuenta atrás, botón, llamada a la acción, cupón, y el filtro de contenido.

Puede utilizarlos en las entradas y páginas de su blog. Cada bloque es altamente personalizable. Sólo tienes que ir a la pestaña Configuración y Estilos en la barra lateral derecha. Allí verás enormes opciones de personalización. Nunca te sentirás abrumado, ya que estas opciones de personalización ofrecen el diseño nativo de WordPress.

Además, todos los bloques de este plugin son aptos para móviles. Hacen automáticamente que su contenido responda a dispositivos móviles sin necesidad de tocarlo. Sin embargo, puede añadir puntos de interrupción si es necesario. Por último, Ultimate Blocks es ligero, lo que permite que su sitio se cargue rápidamente.

Características principales de Ultimate Blocks:

• Fácil de instalar y configurar
• Incluye una biblioteca de iconos integrada
• Tiene un esquema en el bloque Revisión
• Cada bloque incluye numerosas opciones de personalización
• Proporciona un panel de control minimalista en el backend
• Funciona perfectamente con WooCommerce y muchos plugins populares
• Ofrece una versión gratuita junto a la premium

2. Rank Math SEO

Sin SEO, no puedes hacer llegar tu contenido de forma orgánica a muchas audiencias. Rank Math es un plugin SEO muy conocido en la industria de WordPress. Este plugin muestra en tiempo real lo bien que has sido capaz de optimizar tu contenido para un rendimiento SEO de primera categoría con muchos indicadores.

Incluye puntuación de optimización de palabras clave, legibilidad, recomendaciones de enlaces internos/externos, etc. Rank Math soporta rich snippets. Puede añadir marcas de esquema a sus páginas para mejorar las tasas de clics.

Rank Math SEO ofrece un monitor 404 que detecta los enlaces rotos y los redirecciona adecuadamente. Además, el plugin se integra con varias consolas de búsqueda para mostrar el rendimiento de su contenido en el panel de WordPress.

Características principales de Rank Math:

• Asistente de configuración sencillo
• Gestor de redireccionamientos
• Apoya la gestión SEO local
• Genera el mapa del sitio XML
• Soporta WooCommerce SEO
• Gestor de roles para permisos de usuario
• Conecte su sitio a seis consolas de búsqueda populares

3. Tableberg

A menudo es obligatorio añadir tablas a las entradas y páginas web para presentar determinada información, como estadísticas, cifras financieras, resultados de encuestas, datos cuantitativos, etc. Y es que las tablas permiten organizar datos complejos en formatos claros y fáciles de digerir.

Tableberg es un plugin prometedor y rico en funciones que puede utilizar para crear diversas tablas interactivas. Por ejemplo, tablas de precios, tablas comparativas, tablas de especificaciones de productos, tablas de presentación de datos, etc.

Tableberg es un plugin versátil. Puedes usarlo para diseñar secciones web como secciones de servicio, cajas de llamada a la acción, cajas de iconos, cajas de imágenes, etc.

Características principales de Tableberg:

• Permite añadir imágenes, valoraciones, iconos, cintas, listas y mucho más
• Personalizar la altura y anchura de las filas, columnas y celdas
• Facilidad para cambiar el color de fondo de las celdas individuales
• Permite añadir un filtro, un cuadro de búsqueda y una fila/columna fija.
• Ocultar/mostrar bordes de celdas, filas y columnas
• 100% sensible al móvil

4. OpinionCamp

OpinionCamp makes it easy to collect feedback and spark conversation on your posts or pages. Instead of relying on shortcodes, the plugin provides a Gutenberg‑native poll block. Just add a question, define answer options, and publish.  

You can visually adjust colours, button styles, and layouts without writing any CSS. Voters see results instantly, and you can choose to allow anonymous votes for privacy. OpinionCamp is lightweight and designed to feel like part of WordPress; data is stored locally, so there’s no need for external accounts.

Key features of OpinionCamp:

• 100 % block‑based polls: build and manage polls directly in the WordPress editor.
• Single and multiple-choice options: support for both single‑choice and multiple-choice polls.
• Visual customisation: customise colours, layout, and button styles without CSS.
• Instant preview: see how your poll will look as you edit.
• Anonymous voting & local storage: optional anonymous voting; all data is stored locally for privacy.
• Lightweight & modern: designed for speed with a clean interface that blends into any theme.

5. Galleryberg

Galleryberg helps you create attractive, professional‑looking image galleries in the Gutenberg editor. It offers multiple layout styles, including Masonry, Tiles, Justified, Square, and Mosaic. All layouts are fully responsive, and you can adjust column counts for tablets and phones.  

A built‑in lightbox provides smooth zooming and navigation, with keyboard and touch controls for an engaging viewing experience. Each image can be customized individually with borders, captions, aspect ratios, and duotone filters.  

Server‑side rendering keeps galleries lightweight and fast, while ARIA labels and keyboard navigation ensure they are accessible.

Características principales de Galleryberg:

• Multiple gallery layouts: choose from tiles, square, masonry, or justified layouts.
• Responsive design with column control: adjust the number of columns to ensure perfect display on any device.
• Built‑in lightbox: includes smooth zoom effects, keyboard and touch navigation, and loop functionality.
• Detailed image customisation: adjust borders, captions, aspect ratios, and spacing; apply duotone filters.
• Performance‑optimised: uses server‑side rendering for faster page loads.
• Accessibility ready: ARIA labels and keyboard navigation make galleries usable for all visitors.

6. Cohete WP

La carga rápida de las páginas es esencial para el éxito de cualquier sitio web. Según muchas estadísticas, más del 60% de los usuarios abandonan un sitio web si tarda más de tres segundos en cargarse. Un plugin de caché como WP Rocket puede reducir notablemente el tiempo de carga de la página.

WP Rocket almacena copias de las entradas y páginas de tu web en una ubicación temporal conocida como caché. Cada vez que un usuario visita tu sitio, el plugin permite al servidor enviar archivos prealmacenados en lugar de generarlos desde cero, lo que mejora el rendimiento de tu sitio web.

Características principales de WP Rocket:

• Admite el almacenamiento en caché de páginas y navegadores
• Integra CDN (red de distribución de contenidos)
• Permite controlar el latido del corazón
• Minificar y combinar los archivos CSS y JS
• Incluye la opción de carga diferida
• Elimina los archivos innecesarios de la base de datos

7. Thrive Leads

La generación de clientes potenciales es imprescindible para el futuro financiero de cualquier sitio web. Le ayuda a construir una base de datos de clientes potenciales para ejecutar campañas de marketing y aumentar las ventas con éxito. Thrive Leads es un maravilloso plugin de generación de leads.

Con el complemento, puede crear varios tipos de formularios de suscripción, como ventanas emergentes, presentaciones de diapositivas y formularios incrustados, para captar las direcciones de correo electrónico de sus clientes potenciales. Una vez que tu lista de suscriptores crezca, será más fácil realizar campañas de marketing.

Características principales de Thrive Leads:

• Generador de formularios de arrastrar y soltar
• Múltiples tipos de formularios (lightbox, slide-in, inline)
• Opciones avanzadas de segmentación
• Análisis detallados para informes sólidos
• Ofrece muchas plantillas prediseñadas
• Integración con servicios de marketing por correo electrónico

8. Bit Social

La participación en las redes sociales es inevitable si quieres que tu identidad de marca crezca en todas partes. Según una estadística de HubSpot, la participación en las redes sociales genera alrededor del 3%- 4% del tráfico del sitio web. Aunque este porcentaje no es mucho, puede ayudarle a hacer crecer su marca y aumentar las ventas durante las temporadas altas.

Bit Social es un plugin que puede ayudarte mucho en este sentido. Te permite programar y compartir tus publicaciones en las redes sociales de forma automática. Bit Social tiene integraciones con más de 7 plataformas de medios sociales. Esto puede ahorrarte mucho tiempo ya que no tienes que compartir publicaciones manualmente.

Características principales de Bit Social:

• Incluye un calendario de redes sociales
• Filtrar entradas por categorías
• Compartir publicaciones en diferentes plataformas sociales simultáneamente
• Funciona con 19 plataformas de medios sociales
• Dispone de una versión gratuita

9. Análisis independiente

Estudiar el tráfico web es indispensable para comprender el comportamiento de los visitantes e identificar qué es lo que más resuena entre su público. Este conocimiento le permite tomar decisiones informadas sobre las campañas de marketing para aumentar las conversiones.

Independent Analytics es un plugin analítico de tráfico web minimalista pero completo. Si el original Google Analytics es abrumador y quieres una alternativa sencilla, prueba este. Puede hacer todo lo que Google Analytics puede hacer.

• Configuración sencilla y panel de control fácil de usar
• El panel de control muestra los visitantes, las visitas, la tasa de rebote, las visitas por sesión, etc.
• Muestra el rendimiento de la publicación/página en tiempo real
• Muestra las fuentes de tráfico, su ubicación y los dispositivos utilizados
• Ayuda a observar el rendimiento de la campaña
• La versión gratuita es suficiente para los sitios web que no realizan campañas.

10. UpdraftPlus

Su sitio web puede bloquearse por varias razones, muchas de las cuales pueden estar fuera de su control. Mantener regularmente una copia de seguridad puede restaurar rápidamente su sitio web, no importa si su sitio se bloquea. UpdraftPlus es un popular plugin de copia de seguridad para WordPress.

Puedes programar copias de seguridad automáticas de todo tu sitio web con UpdraftPlus. Las copias de seguridad incluirán tus bases de datos web, temas, plugins y cargas, garantizando que todos los datos importantes estén seguros y sean recuperables.

UpdraftPlus tiene integraciones con varios sistemas de almacenamiento en la nube, como Google Drive, Dropbox, Amazon S3, etc., para guardar copias de seguridad.

Características principales de UpdraftPlus:

• Capaz de realizar copias de seguridad de grandes bases de datos (incluso de más de 100 GB)
• Admite copias de seguridad horarias, diarias, semanales, mensuales y quincenales.
• Admite más de 14 nubes y almacenamiento remoto
• Las copias de seguridad están encriptadas
• Compatible con multisitio

11. Afiliados sedientos

Thirsty Affiliates es un plugin de gestión de enlaces de afiliados todo en uno para WordPress. Le permite ocultar, organizar y realizar un seguimiento de todos los enlaces de afiliados desde su panel de control. Soporta varios tipos de enlaces, incluyendo enlaces de texto, imagen y botón.

Por lo tanto, si usted es un profesional del marketing de afiliación, debe darle una oportunidad a este plugin. No importa si su sitio tiene varios miles de enlaces de afiliados. Puede gestionarlos como un profesional con Thirsty Affiliates.

Características principales de Thirsty Affiliates:

• Enlace automático de palabras clave
• Categorización de enlaces para la organización
• Creación y edición masiva de enlaces
• Seguimiento y análisis detallados de los clics
• Se integra con los creadores de páginas más populares

Palabras finales

Elegir el conjunto adecuado de plugins puede mejorar significativamente la funcionalidad de su sitio web y la experiencia de los usuarios. Si no elige el plugin adecuado, seguramente sufrirá enormemente. Una vez más, sustituir un plugin a mitad de camino puede afectar a la funcionalidad de tu sitio.

Por este motivo, hemos enumerado algunos de los mejores plugins de contenido de WordPress para impulsar el compromiso y el atractivo visual en los que puede confiar sin pensárselo dos veces. Háganos saber qué plugins ha seleccionado en el cuadro de comentarios a continuación.

<p>The post 11 Best WordPress Content Plugins to Boost Engagement and Visual Appeal first appeared on Tableberg.</p>

Si administras un sitio web deportivo, un blog o incluso vendes equipo deportivo, agregar una tabla de clasificación puede hacer que tu contenido sea más atractivo e informativo.

En este tutorial, te mostraremos dos formas sencillas de crear una tabla de liga en WordPress — usando el Plugin Tableberg.

• Método 1: Copiar y pegar el patrón listo para usar
• Método 2: Crear una liga Table desde cero

Método 1: Copiar y pegar el patrón prefabricado

¿No quieres construir todo desde cero?

Puede añadir instantáneamente un hermoso diseño predefinido Clasificación Premier League Table en tu sitio web utilizando Tableberg’s Biblioteca de Patrones.

Here’s how

Paso 1: Instala el plugin Tableberg Pro

Aunque Tableberg tiene un versión gratuita, necesitarás el Versión Pro para acceder a los patrones predeterminados.

Consigue Tableberg Pro en la sitio web oficial, instálalo y activa tu licencia.

Paso 2: Visita el patrón y cópialo

Ve a este enlace: Clasificación de la Premier League: patrón Table y haz clic en el “Copiar patrón” botón en la página. El patrón se copiará automáticamente.

Paso 3: Pega el Patrón en el Editor de Bloques de WordPress

Ahora, abre la publicación o página donde quieres agregar tu tabla de clasificación.

En el editor de bloques de WordPress (Gutenberg), pega (Ctrl/Cmd + V) —y la tabla completa aparecerá al instante.

Paso 4: Personalizar la mesa

Puedes fácilmente:

• Reemplazar los nombres y logotipos de los equipos
• Actualizar estadísticas del partido (Jugados, Ganados, Perdidos, Empatados, Puntos, etc.)
• Ajusta los colores, los bordes o la tipografía desde la configuración de la barra lateral
• Añadir o eliminar filas y columnas

Eso es todo — tu La Liga Table está lista en cuestión de segundos sin construirlo manualmente.

Método 2: Crear una liga Table desde cero

Si prefiere tener control total o desea diseñar su propia disposición, siga este proceso paso a paso para crear una tabla de liga manualmente.

Paso 1: Instalar y activar el plugin Tableberg

Tableberg es un plugin constructor de tablas avanzado. Sin una herramienta tan avanzada, no se pueden crear tablas de clasificación completas con el bloque de tablas predeterminado de WordPress.

Para instalar el plugin, vaya a Plugins > Añadir nuevo plugin. Obtenga el plugin escribiendo Tableberg en el cuadro de búsqueda. Instalar y activar después de que aparezca a continuación.

Paso 2: Añada el bloque Tableberg a su editor de entradas/páginas

Abra la entrada/página en la que desea crear la tabla clasificatoria. Busque y añadir el bloque Tableberg pulsando la tecla (+) icono.

Defina el número de fila y columna como desee. Para este tutorial, seleccionaremos el número de fila y columna 6*11.

El diseño de la tabla está listo. A continuación, vamos a añadir contenido a la misma.

Paso 3: Añadir contenido a la tabla

El tipo de contenido que se añade a la tabla depende en gran medida del tipo de deporte. Los contenidos habituales para una tabla de la primera división de fútbol son posición, logotipo del club, nombre del club, partido jugado, diferencia de goles, y puntos.

# Definir posición (Pos)

El equipo con más puntos suele quedar más arriba en la clasificación. Esta sección viene en la columna más a la izquierda de una tabla. Puedes ver que hemos creado esta columna en la tabla.

# Añadir logotipo y nombres de clubes

Queremos poner el nombre del club y el logotipo bajo el mismo título de columna. Por lo tanto, las dos siguientes celdas de la parte superior de la columna deben fusionarse. Selecciónalas pulsando Mayúsculas + Clic derecho (Windows) o CMD + Clic derecho (Mac).

A continuación, seleccione Fusión del Editar tabla en la barra de herramientas. Vea el vídeo a continuación. Después de eso, hemos alineado centralmente el título.

Cada celda viene con un bloque Gutenberg. Al hacer clic en el bloque (+) iconopuede añadir otros tipos de contenido a la tabla. Para los logotipos, seleccionaremos el bloque de imagen.

Puedes ver que hemos añadido logotipos de clubes a la tabla. No se preocupe si las imágenes cargadas son de gran tamaño. TableBerg le permite personalizarlas arrastrándolas.

A continuación, añada los nombres de los clubes, respectivamente, junto a las celdas del logotipo.

# Añadir número de partido jugado, diferencia de goles y puntos

Esto es sencillo. Similar a la posición, puedes añadir el número de partidos jugados de cada club, la diferencia de goles y la cantidad de puntos aquí también, con texto plano. Puedes ver que lo hemos hecho en la imagen de abajo.

Paso 04: Estilizar la mesa

Con Tableberg, puede añadir varios niveles de estilización y personalización a su tabla. Con la barra de herramientas de Gutenberg, puede personalizar la alineación y audacia del contenido de la tabla.

Puede ver que hemos alineado centralmente y aplicado negrita a la mayor parte del contenido de la tabla.

A continuación, puede cambiar el color del texto y del fondo, tipografía, tamaño de letra, y dimensión de la tabla de la barra lateral derecha. Espero que puedas hacerlo tú mismo.

Paso 05: Cambiar el ancho de la tabla y los colores de las filas

Si tiene mucho contenido, puede que desee aumentar la anchura de la tabla. Seleccione toda la tabla haciendo clic en el botón Icono TableBerg en la barra de herramientas tres veces consecutivas.

En Ficha Configuración aparecerá en la barra lateral derecha, donde encontrará la sección Ancho de la mesa opción. Puede aumentar la anchura de la tabla ajustando el valor aquí.

Ven al Ficha Estilos. Inmediatamente debajo, tendrás opciones para cambiar el color de fondo de las columnas de las filas pares e impares. Hágalo usted mismo.

Así, puede crear una tabla de clasificación en WordPress.

Tutorial en vídeo

Nota final

Los amantes del deporte siempre están deseando conocer las actualizaciones de sus equipos y jugadores favoritos. Puedes crear una tabla en WordPress y compartir sus enlaces en las redes sociales para que la gente venga a explorar tu sitio.

Puedes crear tablas para productos de comercio electrónico de forma similar con este plugin. Aprenda cómo crear una tabla comparativa de productos con Tableberg.

<p>The post How to Create a League Table in WordPress first appeared on Tableberg.</p>

WordPress le permite añadir imágenes a su sitio de numerosas maneras. Una de las formas más eficaces es añadir imágenes en columnas y filas. Te permite presentar tus imágenes de forma organizada.

En esta entrada del blog, le mostraremos múltiples maneras de cómo mostrar imágenes de WordPress en Columnas y Filas.

• Método 1: Uso del bloque de columnas (Lo mejor para un control manual total y diseños personalizados)
• Método 2: Uso del bloque Galería (Lo mejor para rejillas de imágenes sencillas con un estilo mínimo)
• Método 3: Utilización del bloque Galleryberg (Lo mejor para diseños avanzados con lightbox y personalización)
• Método 4: Uso del complemento Tableberg (Ideal para cuadrículas de imágenes estructuradas, como tablas de precios, horarios o productos)

Cree bonitas mesas
Con el editor de bloques

Pruebe gratis

Conseguir Pro

Método 1: Utilizar el bloque de columnas

WordPress tiene un bloque de columnas por defecto. Puedes añadir muchos más bloques dentro de ella, incluyendo el bloque de imagen. Aquí está la guía.

Paso 01: Añadir el bloque Columna Gutenberg

Find and add the Column block haciendo clic en el icono más (+) del editor.

Seleccione el número de variaciones de columna que desea añadir al bloque de columnas. Para este tutorial, seleccionaremos la variación de columna 50/50.

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

Como dijimos, puedes otros bloques de Gutenberg dentro del bloque de columna. Ahora, haga clic en el icono más (+) dentro de la columna. Buscar y añadir el bloque Imagen a ella.

Ahora puede añadir imágenes de la biblioteca multimedia o de la unidad local. Hazlo como desees.

Paso 03: Estilizar el Bloque de Imagen dentro del Bloque de Columna

Puede ver que hemos añadido una imagen. Puede alinearla en el centro utilizando la opción de alineación de la barra de herramientas. Cambia el tamaño de la imagen con el icono del círculo de borde. Por último, puedes darle más estilo utilizando las opciones de la pestaña Estilo.

Del mismo modo, añada también una imagen a la otra columna.

Método 2: Utilizar el Bloque Galería

WordPress tiene un bloque de Galería por defecto mediante el cual puedes añadir múltiples imágenes con el mismo diseño de bloque.

Paso 01: Añadir el Bloque de Galería

Como en el método anterior, encontrar y añadir el bloque Galería al editor.

Podrás cargar imágenes desde tu unidad local o el Mediateca. En este tutorial, cargaremos imágenes desde la Biblioteca multimedia.

Paso 02: Seleccionar y cargar imágenes

Seleccione las imágenes que desea cargar en el bloque Galería. Puede seleccionar tantas imágenes como desee. Una vez hecho esto, haga clic en el botón Crear una nueva galería.

Si quieres, puedes añadir leyendas para cada imagen. No hay problema si no añades nada. Pulsa el botón Botón Insertar Galería al final.

Puede ver que se han añadido imágenes a la galería. A continuación, puede personalizar el bloque Imagen utilizando las opciones del menú Ajustes y Ficha Estilos en la barra lateral derecha.

Espero que puedas hacerlo solo, así que no entro en detalles.

Método 3: Utilizar el plugin Galleryberg

Si busca una forma más flexible y visualmente más cuidada de mostrar imágenes en columnas o filas, la función Galleryberg es una opción fantástica. Es un plugin de bloque de galería nativo de Gutenberg que te da múltiples opciones de diseño - incluyendo Azulejos, Mampostería, Justificado y Cuadrado - todos con caja de luz apoyo.

Paso 1: Instalar el plugin Galleryberg

Vaya a su panel de WordPress y navegue hasta Plugins > Añadir nuevo. A continuación, busque "Galleryberg" e instale y active el plugin.

Paso 2: Añadir el bloque Galleryberg

Abra la página o la entrada en la que desea mostrar las imágenes. A continuación, haga clic en el botón + y busque "Galleryberg". Añádalo a la página.

Paso 3: Cargar o seleccionar imágenes

Utiliza la biblioteca multimedia o sube nuevas imágenes. Puedes reorganizar las imágenes arrastrándolas y soltándolas.

Paso 4: Elegir un diseño

En el panel de configuración de bloques, seleccione el diseño que desee:

• Azulejos: Diseño de cuadrícula con espacios iguales (ideal para filas y columnas)
• Albañilería: Diseño apilado al estilo Pinterest
• Justificado: Filas ordenadas de igual altura
• Cuadrado: Cuadrados perfectos para una visualización uniforme de la cuadrícula

Paso 5: Activar la opción Lightbox

En la barra lateral de configuración del bloque, active la casilla Activar Lightbox opción.

Tus imágenes se abrirán ahora en una ventana emergente con transiciones suaves, efectos de zoom y navegación por diapositivas.

Paso 5: Personalizar y publicar

• Establezca el número de columnas (de 1 a 8)En la barra lateral de configuración del bloque, desplácese hasta la opción Caja de luz sección.
• Alternar Activar Lightbox opción.
• Tus imágenes se abrirán ahora en una ventana emergente con transiciones suaves, efectos de zoom y navegación por diapositivas.
• Ajuste el espaciado, los subtítulos, los bordes, etc.
• Activar lightbox para previsualizar imágenes interactivas

Haga clic en Publique o Actualización y tu galería aparecerá en filas y columnas limpias y adaptables.

Método 4: Utilizar el plugin Tableberg

TableBerg es un plugin constructor de tablas fácil de usar. Permite añadir varios bloques personalizados a las celdas de la tabla para crear tablas multifuncionales. En esta sección, le mostraremos cómo añadir imágenes en WordPress utilizando el plugin Tableberg plugin.

Paso 01: Instalar y activar el plugin Tableberg

Ir a Plugins > Añadir nuevo plugin. Tipo Tableberg en el cuadro de búsqueda. Instale y activar una vez que el plugin aparece a continuación.

Paso 02: Añade el bloque Tableberg a tu post/página

El plugin viene con un bloque Gutenberg llamado TableBerg. Busca y añade el bloque Bloque TabelBerg a su editor.

Defina el número de fila y columna de la tabla. El proceso es similar al del bloque de tabla por defecto. Hágalo usted mismo.

Paso 03: Buscar y añadir el bloque de imagen a la tabla

Espero que tu tabla esté lista. Selecciona la celda donde quieres añadir una imagen. Una vez que seleccione una celda, aparecerá el icono icono más (+) aparecerá.

Click the plus (+) icon. Obtendrá el bloque Imagen. Pulsa el bloque Imagen.

Tendrás opciones para subir imágenes desde la unidad local o desde la biblioteca multimedia. Haz clic en la opción que quieras y sube la imagen.

Paso 04: Estilizar la imagen cargada

Con suerte, su imagen ya está cargada en la tabla. Vaya a la pestaña Estilos en la barra lateral derecha. Encontrarás opciones como Duotono, Borde y Radio para estilizar tu bloque Imagen.

Por lo tanto, puede subir imágenes a la tabla de WordPress con el plugin. Explorar cómo crear una sección de miembros de equipo en WordPress mediante el bloque de columnas.

Observaciones finales

Para mantener con éxito un sitio web, es necesario cargar y presentar el contenido de diferentes maneras. A veces, el mismo contenido tiene que ser presentado de diferentes maneras en diferentes posts y páginas. Y lo mismo ocurre con el bloque de imágenes.

Con suerte, después de leer este tutorial, usted será capaz de añadir su bloque de imagen de varias maneras en WordPress y traer variaciones al contenido.

<p>The post How to Display WordPress Images in Columns & Rows first appeared on Tableberg.</p>

Con el editor de bloques Gutenberg, puedes añadir fácilmente pestañas a las entradas de tu blog. En este artículo, te mostraremos cómo crear pestañas en WordPress para organizar el contenido. Antes de eso, responderemos a algunas preguntas básicas.

Crear pestañas para cualquier contenido en WordPress

La biblioteca de bloques por defecto de Gutenberg no tiene el bloque de pestañas. Debes usar un plugin como Bloques definitivos para tenerlo en la biblioteca de plugins. El plugin tiene 25+ plugins adicionales mediante los cuales puedes llevar tu diseño web y marketing de contenidos al siguiente nivel.

La "Tabbed Contenidode Ultimate Blocks te permite añadir cualquier contenido en las pestañas. Veamos cómo hacerlo.

Paso 01: Instalar y activar el plugin Ultimate Blocks

Ir a Plugins > Añadir nuevo plugin. Tipo Bloques definitivos en la barra de búsqueda de la esquina superior derecha. Instale y activar el plugin después de que aparezca a continuación.

Paso 02: Insertar el bloque de contenido con pestañas

Abra una entrada o página. Busque el icono Contenido por pestañas pulsando Botón más (+). Una vez que encuentres el bloque, añádelo al editor de Gutenberg.

Paso 03: Añadir nuevas pestañas y cambiarles el nombre

Haciendo clic en el botón icono más (+)puede añadir tantas pestañas como desee al bloque.

Coge el cursor y haz clic en la pestaña una a una. Se te permitirá renombrarlas. Entonces, renombra las pestañas en función del contenido que vayas a mostrar.

Paso 04: Añadir contenido a las pestañas

Seleccione una pestaña en la que desee añadir contenido. A continuación, sitúe el cursor en su editor. Verás el icono Botón más (+) del editor Gutenberg. Haz clic y elige el bloque de contenido que necesites.

Para el tutorial, hemos añadido los bloques de texto e imagen a la pestaña. De la misma manera, puedes añadir otros bloques a la pestaña. Haga lo mismo en otras pestañas.

Paso 05: Personalizar las pestañas

Acércate a la barra lateral derecha mientras mantienes seleccionado el bloque Contenido en pestañas. Encontrarás varias opciones para configurar, como los Tipos de pestañas, el Anclaje de pestañas y la Capacidad de respuesta.

Una vez que actualices a la versión premium, podrás añadir iconos a los títulos de las pestañas, textos secundarios y botones de llamada a la acción a las pestañas.

A continuación Ficha Estilos. Tendrás opciones para colorear el contenido de las pestañas, cambiar el diseño de las pestañas y establecer una nueva dimensión. Espero que puedas explorar y hacer esto por ti mismo.

Tutorial en vídeo

Crear pestañas para tablas en WordPress

Las pestañas no son sólo para texto o imágenes: también son una forma excelente de organizar varias tablas una al lado de la otra en tu sitio web. Tanto si quieres que los usuarios cambien entre precios mensuales y anuales, compare las características de los productoso presentar datos en varios idiomas, Tableberg te lo pone fácil con su función Alternar pestañas.

Con el programa "Conmutador para Tableberg", puedes hacerlo:

• Añadir varias tablas en pestañas separadas
• Permita que los visitantes comparen planes de precios, funciones o conjuntos de datos con un solo clic
• Mantén tus mesas organizadas, limpias y súper fáciles de navegar

A continuación te explicamos cómo crear pestañas para tablas utilizando Tableberg:

Paso 1: Insertar el bloque "Toggle for Tableberg

• Abra su entrada o página en el editor de WordPress.
• Haga clic en el icono (+), busque Conmutador para Tablebergy añade el bloque.

Paso 2: Configurar y personalizar las pestañas

• Por defecto, verás pestañas etiquetadas como "Pestaña 1", "Pestaña 2" y "Pestaña 3".
• Haga clic en los iconos + o - para añadir o eliminar pestañas según sea necesario.
• Cambie el nombre de cada pestaña (por ejemplo, "Mensual", "Anual", "Estándar", "Premium").
• Utilice el panel de configuración de la derecha para ajustar los títulos, la alineación, los colores y los bordes al estilo que prefiera.

Paso 3: Añadir una tabla a cada pestaña

• Selecciona una pestaña y haz clic dentro de ella para añadir una tabla Tableberg.
• Puede crear una nueva tabla desde cero o insertar uno de los patrones de tabla prediseñados de Tableberg.
• Cada pestaña puede contener una tabla única, ideal para comparar o mostrar opciones.

Paso 4: Vista previa y publicación

• Utiliza la vista previa para asegurarte de que tus tablas con pestañas tienen el aspecto y el funcionamiento adecuados.
• Cuando estés satisfecho, publica o actualiza tu entrada/página.

He aquí un ejemplo de cómo queda una tabla de precios con pestañas con Tableberg:

Conclusión

El bloque Contenido por pestañas que viene con el plugin Ultimate Blocks responde automáticamente en todos los dispositivos. Como resultado, usted no tiene que gastar mucho tiempo en lo que es la capacidad de respuesta del dispositivo.

Pero lo que hay que hacer es colocar el bloque en un lugar adecuado que hace que todo su post / página perfecta. Explorar nuestro otro post - cómo crear un botón de llamada a la acción en WordPress.

<p>The post How to Create Tabs in WordPress to Organize Content first appeared on Tableberg.</p>

Con un botón de alternancia, los visitantes pueden cambiar instantáneamente entre dos o más opciones, como precios mensuales frente a anuales, modo claro frente a oscuro o incluso secciones de contenido completamente diferentes, sin saturar la página.

En esta entrada, descubrirá dos formas sencillas de añadir botones de alternancia a su sitio de WordPress:

• Método 1: Añadir un botón de alternancia para cualquier tipo de contenido (texto, imágenes, formularios, etc.)
• Método 2: Añadir un botón de alternancia para tablas de precios o cualquier tipo de datos tabulares

Sumerjámonos.

Método 1: Añadir un botón de alternancia para cualquier tipo de contenido

Si desea que los usuarios puedan alternar entre distintos bloques de contenido, por ejemplo Preguntas frecuentesEste método es para usted.

Utilizaremos el Bloques definitivos que ofrece un versátil bloque de alternancia de contenido (contenido en pestañas) que sirve para todo tipo de contenido.

Paso 1: Instalar el plugin Ultimate Blocks

• Vaya a su panel de control de WordPress.
• Vaya a Plugins > Añadir nuevo.
• Busque "Ultimate Blocks" e instálelo/actívelo.

Paso 2: Añadir el bloque de contenido con pestañas

• Abra una entrada o página en el editor de WordPress.
• Tipo /contenido por pestañas o utilice el icono + para añadir el bloque Contenido por pestañas.

El bloque "Contenido por pestañas" tendrá el siguiente aspecto -

Paso 3: Personalizar el bloque para alternar funciones

Seleccione el bloque y elija la opción Píldoras estilo en la configuración (esto hace que las pestañas parezcan botones).

Centra la alineación para conseguir un aspecto clásico.

Haga clic en el botón + signo junto a la primera pestaña para añadir otra pestaña. Añada al menos dos pestañas (por ejemplo, "Mensual" y "Anual" o "Detalles" y "Resumen"). Cambia el nombre de las pestañas para que coincidan con tus opciones de alternancia.

Utilice la Configuración de color para establecer colores contrastados, de modo que quede claro qué pestaña está activa.

Paso 4: Añada su contenido

Haga clic dentro de cada pestaña para añadir el contenido que prefiera (texto, imágenes, listas, formularios o incluso otros bloques).

Personalícelo aún más si es necesario: cambie el fondo de las pestañas, los colores del contenido, etc.

Paso 5: Vista previa y publicación

• Utilice la opción Vista previa para probar la alternancia.
• Cuando esté satisfecho, publique o actualice la página.

¡Eso es! Ahora dispone de un botón de alternancia flexible para cualquier tipo de contenido en su sitio de WordPress.

Método 2: Añadir un botón de alternancia para las tablas de precios (y más)

¿Desea que los usuarios puedan alternar entre tablas de precios mensuales y anuales, o comparar diferentes conjuntos de datos? En Conmutador para Tableberg del plugin Tableberg está diseñado precisamente para eso.

Con Tableberg Propuede organizar cualquier número de tablas en pestañas ordenadas y en las que se puede hacer clic, perfectas para planes de precios, comparaciones de productos, tablas multilingües o cualquier situación en la que tengan sentido varias tablas.

Paso 1: Insertar el bloque "Toggle for Tableberg

• Abra su entrada o página en el editor de WordPress.
• Haz clic en el icono + (más) y busca "Toggle for Tableberg".
• Añade el bloque a tu página.

Paso 2: Configurar y personalizar las pestañas

• Por defecto, verás tres pestañas denominadas "Pestaña 1", "Pestaña 2" y "Pestaña 3".
• Añada o elimine pestañas según sea necesario utilizando los iconos + o -.
• Cambie el nombre de cada pestaña (por ejemplo, "Mensual", "Anual" o "Plan básico", "Plan Pro").
• Utiliza el panel de opciones de la derecha para ajustar los títulos de las pestañas, la alineación, los colores y los bordes para conseguir un aspecto de marca.

Paso 3: Añada sus tablas

• Haga clic en cada pestaña para añadir una tabla única en su interior.
• Construya una nueva tabla desde cero o inserte un patrón de tabla Tableberg ya construido.
• Cada pestaña puede contener una tabla completamente distinta: ideal para comparaciones de funciones, niveles de precios, conjuntos de datos, etc.

Casos de uso populares

• Tablas de precios: Permita a los usuarios alternar entre precios mensuales y anuales, o entre distintos planes.
• Comparación de datos: Muestre datos regionales, especificaciones de productos diferentes o métricas de rendimiento en pestañas separadas.
• Contenido educativo: Organice las lecciones o el material del curso para facilitar la navegación.
• Tablas multilingües: Mostrar los mismos datos en diferentes idiomas para los visitantes internacionales.

Paso 4: Vista previa y publicación

• Previsualiza tus pestañas de alternar para asegurarte de que todo se ve y funciona como se espera.
• Publique o actualice su entrada/página cuando esté listo.

Este es un ejemplo de cómo se ve el toggle para una tabla de precios.

Conclusión

Añadir un botón de alternancia a su sitio de WordPress es una forma estupenda de mejorar la navegación, ahorrar espacio y ofrecer a los visitantes acceso instantáneo al contenido que les interesa, ya sea cambiar entre planes de precios, ver detalles o comparar datos.

• Para cualquier tipo de contenido, utilice Bloques definitivos para crear toggles flexibles en segundos.
• Para tablas de precios y diseños de tablas más avanzados, pruebe con Bloqueo de palanca Tableberg Pro para una experiencia de pestañas fluida.

Pruebe estos métodos en su sitio web y haga que su contenido sea más interactivo y fácil de usar. ¿Tiene alguna pregunta o necesita ayuda? Háganoslo saber en los comentarios.

<p>The post How to Add a Toggle Button To Your WordPress Site first appeared on Tableberg.</p>

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

Pruebe gratis

Conseguir Pro

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:

• Cómo poner imágenes una al lado de la otra en WordPress
• Cómo añadir texto encima de una imagen en WordPress
• Cómo cambiar el tamaño de los bloques en WordPress

<p>The post How to Put Text and Image Side by Side in WordPress first appeared on Tableberg.</p>

WYSIWYG significa "What You See Is What You Get" (lo que ves es lo que obtienes). Significa que usted construye y edita tablas de una manera que refleja el aspecto final, tal como lo haría cuando trabaja en un documento de Word. Si el bloque Tabla por defecto le deja con ganas de más, esta guía es para usted.

Hoy, te mostraré cómo crear una tabla visualmente impresionante usando el plugin WYSIWYG table builder. La tabla está por debajo.

¿Qué es una tabla WYSIWYG en WordPress?

Una tabla WYSIWYG le permite editar el contenido visualmente, directamente dentro del editor de WordPress. Sin HTML. Sin shortcodes. Sólo resultados en tiempo real y controles intuitivos.

Lo tendrás:

• Edición en tiempo real sin recargas
• Formato flexible con medios enriquecidos
• Una estructura de arrastrar y soltar
• Fácil integración de imágenes, iconos y botones

Es la forma más sencilla de crear tablas ricas en contenido sin gastos técnicos.

Por qué el bloque de tabla predeterminado de WordPress se queda corto

El bloque Tabla incorporado sirve para diseños básicos, pero ahí acaban sus posibilidades:

• No es posible arrastrar y soltar filas o columnas
• Personalización limitada de bordes, espaciado o colores
• No es posible fusionar ni dividir celdas
• No hay soporte para medios dentro de las células
• Poca capacidad de respuesta móvil

Si su tabla necesita algo más que texto plano, se topará rápidamente con un muro.

¿Por qué elegir un plugin de tabla WYSIWYG?

Para liberar todo el potencial del diseño de tablas, un plugin visual de tablas como Tableberg es una elección inteligente. Te da:

• Editor visual: Realice los cambios que considere oportunos, sin conjeturas
• Arrastrar y soltar: Reorganizar celdas lleva segundos
• Bloques multimedia: Añade imágenes, botones, iconos y valoraciones con estrellas
• Estilos personalizados: Controla el relleno, los bordes, la alineación y los colores de las celdas.
• Para móviles: Elige cómo responde tu mesa en pantallas más pequeñas

Este tipo de plugin hace que diseñar tablas enriquecidas sea tan sencillo como editar una entrada de blog.

Cree bonitas mesas
Con el editor de bloques

Pruebe gratis

Conseguir Pro

Cómo crear una tabla WYSIWYG con Tableberg

Para crear una tabla WYSIWYG con Tableberg, primero debemos instalar el plugin.

1. Instalar el plugin Tableberg

Ir a Plugins (1) > Añadir nuevo (2), busque "Tableberg" (3) y haga clic en Instalar (4) seguido de Activar.

2. Añadir una nueva tabla

Abra una entrada o página en la que desee añadir la tabla. Haz clic en el botón icono más (+) sobre el editor (1). Tipo Tableberg en el cuadro de búsqueda (2). Añadir el bloque al editor (3).

Establezca el número de columnas y filas de la tabla. Seleccionaremos 3 × 5 por ahora, pero creará o eliminará columnas y filas si es necesario. Haga clic en el botón Crear tabla al final.

En breve verá la tabla insertada en el editor, como a continuación.

Paso 3: Añadir contenido visualmente

A. Insertar contenido de texto

Coloque el cursor en las celdas de la tabla y escriba lo que desee.

B. Añadir imágenes

Ahora, inserte el bloque de imágenes para insertar las imágenes de sus productos haciendo clic en el botón "+". Puede cargar imágenes o seleccionarlas de la biblioteca multimedia.

C. Añadir clasificación por estrellas

Añade estrellas si quieres. Las estrellas son una buena forma de demostrar la calidad de sus productos.

D. Añada sus botones

Los botones son una forma eficaz de promocionar cualquier producto o servicio. Así que colóquelos estratégicamente

Enlazar un botón también es fácil: haga clic en el botón, seleccione la opción de enlace, introduzca el enlace de destino y ajuste los atributos del enlace.

Puedes ajustar y personalizar tus botones desde el panel lateral derecho.

E. Insertar iconos

Los iconos funcionan a las mil maravillas para indicar qué funciones están disponibles y cuáles no. Insertar el bloque de iconos es igual que cualquier otro bloque.

F. Insertar lista con estilo

Styled List es otro bloque esencial que le ayuda a añadir un conjunto de características con iconos simultáneamente.

Ahora, añade tus características. Cada vez que pulses la tecla "Intro" de tu teclado, podrás añadir nuevas funciones.

Puede acceder a las opciones de personalización del bloque Lista estilizada en la parte derecha del editor.

Aquí está la tabla que he creado usando Tableberg sin personalización.

He añadido algunos colores, el relleno, el margen, y la cinta en la parte superior. A continuación se presentan las imágenes para la personalización que he hecho.

Estos son los códigos de color que he utilizado en la tabla. (Color de cabecera: #f3f3f3, Color de fondo de fila par: #3fad3d63, Color de fondo de fila impar: #d1dec8)

Tras la personalización, a continuación se presenta la versión final.

Nombre del producto	Canon EOS $1400 ¡Consíguelo ya! La mejor opción	Lumix GH6 $1200 ¡Consíguelo ya!
Weather Sealing
Touchscreen LCD
Características adicionales	Fast Autofocus Alto control ISO Opción AWB	Fast Autofocus Alto control ISO Opción AWB
Conectividad WIFI

Cuando esté satisfecho, publique o actualice la página. Su tabla con estilo visual ya está lista.

Otros plugins de tablas WYSIWYG que merece la pena tener en cuenta

En Tableberg ofrece una experiencia fluida y basada en bloques, hay otras opciones sólidas en función de tus necesidades:

• Generador de tablas WP - Arrastrar y soltar, soporte de contenido flexible, compatible con Every Page Builder.
• Mesas Ninja - Integración de muchas funciones y lógica condicional
• TablePress (con extensiones) - Bueno para grandes conjuntos de datos

Cada uno tiene puntos fuertes, pero Tableberg está construido para trabajar de forma nativa con Gutenberg y prioriza la edición visual.

Casos prácticos

Las tablas WYSIWYG son perfectas para:

• Comparación de precios y desglose de funciones
• Tablas de afiliados con botones y clasificaciones
• Cuadrículas de los miembros del equipo o calendarios de eventos
• Catálogos de productos con células ricas en medios
• Desglose paso a paso
• Resúmenes de contenidos para entradas de blog largas

Si su contenido implica estructura o comparación, estas tablas lo hacen más atractivo e informativo.

Reflexiones finales

Crear una tabla atractiva no debería ser un reto técnico. Un plugin WYSIWYG como Tableberg le da libertad para diseñar tablas que se adapten a su estilo de contenido, sin tocar una sola línea de código.

Si desea mostrar características, comparaciones o listas dinámicas, Tableberg se lo pone fácil.

¿Listo para probar Tableberg?
Empiece hoy mismo con Tableberg ➔.

Más información

• Cómo crear su primera mesa con Tableberg
• Cómo la IA puede ayudarle a crear tablas automáticamente en WordPress
• Cómo generar tablas de WordPress a partir de archivos CSV o XML (sin necesidad de programación)
• Cómo generar una tabla comparativa a partir de una entrada de blog con ChatGPT
• Las mejores formas de utilizar tablas para el marketing de afiliación en WordPress

<p>The post WordPress WYSIWYG Table: Create Visually Editable Tables Without Coding first appeared on Tableberg.</p>

Ahora bien, ¿qué ocurre si implementa correctamente los acordeones? Su contenido se vuelve más fácil de explorar, los usuarios se mantienen centrados, la navegación móvil mejora y los motores de búsqueda pueden recompensarle con una mejor visibilidad. Si lo haces todo bien, funcionarán como una tabla de contenidos que responde a las preguntas antes incluso de que los usuarios las formulen.

Esta guía le mostrará cómo implementar acordeones en WordPress utilizando herramientas amigables para el editor que mantienen el proceso simple y limpio, sin necesidad de codificación.

Añadir Acordeones en WordPress

Hay más de una forma de añadir acordeones en WordPress, pero no todas son fáciles de usar dentro del Editor de Bloques. En las siguientes secciones, empezaremos con un método básico usando un bloque incorporado, y luego pasaremos a una opción más flexible con un plugin.

Método 1: Utilizar el Bloque de Detalles Nativo

La forma más sencilla de crear un acordeón en WordPress es utilizar la función integrada Bloque de detalles. Veamos cómo funciona.

Paso 1: Añadir el bloque Detalles

Abre tu entrada o página en el Editor de bloques. Haz clic en el icono de signo más (+), busca Detalles e inserta el bloque.

Paso 2: Añadir el título y el contenido

Introduzca el título de su acordeón en el marcador de posición "Escribir resumen". A continuación, haga clic en el icono de flecha situado junto a él para expandir la sección. Una vez expandida, aparecerá debajo un área de contenido donde podrá añadir texto, imágenes, listas o cualquier otro bloque.

Paso 3: Añadir más conmutadores

Para añadir más elementos de acordeón, repita el mismo proceso insertando nuevos bloques Detalles. Para un diseño anidado, expanda el área de contenido de un bloque Detalles existente, haga clic en el icono más (+) dentro de él y añada otro bloque Detalles.

Este método es perfecto para FAQs rápidas o configuraciones mínimas. Ten en cuenta que solo ofrece un estilo básico y no incluye opciones de diseño avanzadas.

Método 2: Utilizar el plugin Ultimate Blocks

Si desea más opciones de estilo y un mejor control de su acordeón, la función Bloques definitivos es una gran elección. Ofrece un bloque Content Toggle que funciona perfectamente en el Editor de bloques.

Paso 1: Añada el plugin a su sitio web

Desde el panel de control de WordPress, dirígete al menú Plugins y haz clic en Añadir nuevo. En la barra de búsqueda, escribe Ultimate Blocks y haz clic en Instalar ahora en la ficha del plugin. Una vez finalizada la instalación, actívalo para que los nuevos bloques estén disponibles en el editor.

Paso 2: Insertar el bloque de alternancia de contenido

Abra la página o la entrada en la que desea el acordeón. Haz clic en el icono más (+), busca Content Toggle y añádelo. Este bloque crea una sección ampliable con un título y un área de contenido.

Paso 3: Añadir título y contenido

Escriba el título de su acordeón en el campo de etiqueta y, a continuación, añada su contenido debajo. Puedes incluir cualquier tipo de bloque dentro del toggle, como texto, imágenes, botones, listas o incluso otro bloque Content Toggle dentro del área de contenido para crear un acordeón anidado. 

Para añadir más secciones de alternancia, basta con hacer clic en el icono (+) cuando pase el ratón por encima de los paneles existentes. Para eliminar un panel, haga lo mismo, salvo que en lugar de hacer clic en el icono (+), elija el icono (x) de la esquina superior derecha. 

Paso 4: Personalizar el acordeón

Desde el panel de configuración de bloques de la derecha, puede controlar el título del panel, ajustar el estado de alternancia, activar FAQ Schema, añadir una opción de búsqueda integrada para su acordeón, elegir un icono de estado, cambiar el texto o los colores de fondo, y mucho más. 

Si lo utilizas para preguntas frecuentes, también puedes habilitar el marcado FAQ Schema desde la configuración para ayudar a que tu contenido sea apto para los fragmentos enriquecidos en la búsqueda de Google.

Conclusión

Si su objetivo es hacer que el contenido largo sea más fácil de escanear, los acordeones ofrecen una solución limpia. Has aprendido dos enfoques: el bloque nativo Detalles ofrece una configuración ligera sin plugins adicionales y una carga rápida. El bloque Content Toggle de Ultimate Blocks añade controles de estilo avanzados, paneles anidados y un esquema de preguntas frecuentes integrado. Ambos métodos mejoran la usabilidad móvil y el potencial SEO. Elige el método que mejor se adapte a tu flujo de trabajo y a tus necesidades de contenido.

<p>The post How to Add Accordions in WordPress Block Editor first appeared on Tableberg.</p>

Pero seamos sinceros: crearlos manualmente puede parecer una tarea pesada. Incluso los usuarios experimentados pierden tiempo alineando celdas y formateando diseños.

Ahora hay una forma mejor. La IA está cambiando nuestra forma de crear tablas. En lugar de arrastrar columnas o jugar con HTML, describe lo que necesitas y verás cómo cobra vida. No es el futuro, ya está aquí.

¿Por qué utilizar IA para la creación de tablas en WordPress?

Después de trabajar durante años con sitios de WordPress llenos de contenido, he visto cuánto tiempo puede llevar la creación de tablas. Para los no diseñadores y los blogueros ocupados, eso es un asesino de la productividad. La IA lo soluciona.

1. Genera instantáneamente diseños de tablas utilizables.
2. Ideal para creadores sin conocimientos de diseño o programación.
3. Elimina la molestia de ajustar el formato y el diseño
4. Convierte los contenidos escritos en datos estructurados y fáciles de descifrar.
5. Maneja conjuntos de datos largos o complejos sin ralentizar el trabajo

No se trata de sustituir el esfuerzo. Se trata de redirigirlo hacia lo que más importa: tu contenido.

¿Qué tipo de tablas puede ayudarle a crear la IA?

La belleza de AI reside en su gama. No te limita a un único tipo de tabla. Se adapta a tu flujo de trabajo:

• Tablas comparativas: Desglosar las diferencias entre productos o planes
• Tablas de precios: Perfecto para SaaS, servicios o tiendas WooCommerce
• Tablas de datos: Útil para encuestas, métricas de blogs o listados
• Lista de cuadros: "Las mejores herramientas", "las mejores aplicaciones", "las preferidas del editor"... todo perfectamente ordenado.
• Tablas de características: Ideal para las características de los plugins, las especificaciones de los productos o los aspectos más destacados.

Si su contenido tiene una estructura, AI puede presentarlo en formato de tabla.

Cree bonitas mesas
Con el editor de bloques

Pruebe gratis

Conseguir Pro

Cómo la IA puede ayudarle a crear tablas en WordPress

He aquí cómo la IA está agilizando el proceso para los usuarios de WordPress:

1. Generar una tabla a partir del contenido del blog

¿Tienes un post tipo lista o resumen? La IA escanea el contenido, extrae los puntos clave y construye una tabla estructurada en torno a ellos.

Ejemplo: Usted escribió un blog "Top Herramientas SEO" - AI extrae los nombres, precios y características clave en un diseño de tabla limpia. Echa un vistazo a la demo a continuación.

2. Generar una tabla a partir de una consulta

Incluso si empiezas desde cero, puedes decirle a AI lo que necesitas. Con una simple pregunta, como "tabla de precios de 3 columnas para una aplicación de fitness", obtendrás una tabla lista para usar que podrás modificar fácilmente.

Aquí tienes la demo.

3. Convertir listas de viñetas o datos brutos en tablas

¿Has redactado algunas características o notas en formato de viñetas? Pégalas y deja que AI las convierta en una tabla pulida en cuestión de segundos.

Como se puede ver a continuación, he copiado un poco de texto de la WowStore y Carrusel de productos de mi proyecto y lo pegó en ChatGPT. Le pedí que creara una tabla para mí a partir del texto que he proporcionado. Mira como creó la tabla maravillosamente.

4. Crear tablas a partir de hojas de cálculo o CSV

¿Tienes un archivo CSV o una hoja de cálculo? Dáselo a AI. Estructurará los datos correctamente e incluso te ayudará a adaptarlos a tu sitio web.

5. Sugerir estilos o diseños de mesa

¿No sabes qué aspecto debe tener tu tabla? La IA puede sugerir formatos basados en el tipo de contenido, como comparaciones de afiliados, planes de precios o pros y contras.

¿Cómo está aportando Tableberg la IA a la creación de mesas?

Si ha utilizado Tableberg antes, ya sabes que es un plugin de tablas destacado para Gutenberg. Pero lo que viene a continuación es la parte emocionante.

Pronto, Tableberg te lo permitirá:

• Crear una tabla a partir del contenido existente del blog
• Construya una tabla con sólo describirla en lenguaje natural
• Obtenga sugerencias instantáneas de diseño y estilo

Todo esto encaja directamente en tu flujo de trabajo de Gutenberg. Sin herramientas externas. Sin codificación. Simplemente escriba, describa y publique.

¿Por qué es importante para los creadores de contenidos?

Estas mejoras no son sólo actualizaciones menores. Pueden cambiar todo su flujo de trabajo de contenidos:

• Publique de forma más rápida y eficaz
• Dedique menos tiempo a arreglar los diseños y más a la estrategia
• Utilice tablas limpias y preparadas para dispositivos móviles que mejoren la experiencia del usuario.
• Adaptarse rápidamente a medida que la IA se convierte en una herramienta estándar en la creación de contenidos para WordPress.

Cuando el tiempo es dinero, la automatización ya no es opcional. Es una ventaja.

Conclusión

La creación de tablas asistida por IA no es sólo una comodidad: es una forma más inteligente de trabajar. Elimina las partes repetitivas del proceso, lo que le permite centrarse en crear mejores contenidos. Desde entradas de blog hasta comparaciones de productos, las tablas son más fáciles, rápidas y limpias cuando la IA se encarga del trabajo pesado.

¿Quiere probarlo? Visite Tableberg y explora las posibilidades de las mesas controladas por inteligencia artificial.

Más información

• Cómo generar una tabla comparativa a partir de una entrada de blog con ChatGPT
• El futuro de los plugins de mesa: Tendencias actuales y futuras
• Las mejores formas de utilizar tablas para el marketing de afiliación en WordPress
• Las 5 funciones del plugin Tableberg que le ahorrarán tiempo
• 10 características principales que debe tener un plugin de WordPress para tablas (antes de comprarlo)
• Cómo destacar productos recomendados en una tabla de WordPress

<p>The post How AI Can Help You Create Tables Automatically in WordPress first appeared on Tableberg.</p>