¿Quiere ofrecer a sus usuarios una forma rápida y limpia de cambiar entre diferentes contenidos u opciones de precios en su sitio WordPress? Un botón de alternancia es la solución perfecta.
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ñaso 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.
