Si tienes que publicar mucha información de varios tipos en entradas de blog o páginas de forma concisa, las pestañas pueden ser un elemento web útil para hacerlo. Te permiten organizar el contenido en secciones separadas para que los usuarios puedan explorar y encontrar selectivamente la información que necesitan.
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.
Las pestañas sirven como herramienta de navegación, permitiéndole mostrar mucha información en varias secciones. Como resultado, los usuarios no tienen que depender de un desplazamiento excesivo para explorar una amplia información en tu post o página.
Proporcionan un formato estructurado para que los usuarios puedan encontrar la información específica que buscan haciendo clic en ellas. Normalmente, las pestañas se utilizan para mostrar las páginas web en las secciones hero y header.
Pero hoy en día, con la ayuda de ciertos plugins de Gutenberg, puedes crear contenido con pestañas en cualquier lugar de cualquier publicación o página.
El contenido tabulado funciona excepcionalmente cuando se tiene una gran cantidad de información que necesita ser mostrada en un formato tabular. Este elemento es especialmente eficaz para organizar los siguientes tipos de información.
Descripciones de los productos: Puede utilizar este bloque para cubrir las especificaciones del producto, las características y las opiniones de los clientes en pestañas separadas.
Oferta de servicios: Si tiene varios planes o paquetes de servicios, es mejor mostrarlos en secciones separadas.
Planes de precios: Ya es una práctica habitual mostrar varios planes de precios en distintas pestañas de los sitios web.
Preguntas frecuentes: Aunque a la mayoría de la gente le gusta utilizar los bloques de preguntas frecuentes y de alternancia de contenidos para la sección de preguntas frecuentes, también puede utilizar el bloque de pestañas para cubrir esta sección.
Información comparativa: Si hay información que se presentaría mejor en una sección contigua, el bloque de pestañas es útil en este caso.
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.
