Si desea imaginar un escenario en el que sus usuarios puedan cambiar entre diferentes estados u opciones, un botón de alternancia es la solución perfecta. Estos botones ofrecen a los usuarios un acceso rápido a las opciones sin ocupar demasiado espacio en la página. Por ejemplo, son perfectos para cambiar entre precios mensuales y anuales, entre vistas detalladas y resumidas, o entre preferencias de visualización como los modos claro y oscuro.
Aunque WordPress no es compatible de forma nativa con los botones de alternancia, el bloque de contenido en pestañas de Ultimate Blocks facilita la replicación de su funcionalidad. El plugin es versátil y, a diferencia de muchas otras opciones, ofrece un amplio conjunto de bloques que permiten transformar simples pestañas en estados conmutables con solo unos pocos ajustes.
Esta guía se presenta para mostrarle cómo utilizar este plugin para lograr un efecto de botón de alternancia elegante y fácil de usar. Vamos a empezar.
Paso 1: Instalar el plugin Ultimate Blocks
Para empezar, inicie sesión en el panel de control de WordPress y vaya a Plugins > Añadir nuevo. En la barra de búsqueda, escriba "Ultimate Blocksy, cuando aparezca, haga clic en Instale. Después de la instalación, activar el plugin.
Paso 2: Añadir el bloque de contenido con pestañas
Una vez que Ultimate Blocks esté activo, decida dónde añadir el botón de alternar. Puede abrir una nueva página o entrada o continuar con una ya existente.
En el editor de WordPress, escriba /contenido por pestañas o haga clic en el botón + icono para abrir la biblioteca de bloques. Si utiliza el método del icono +, escriba "contenido tabulado" en la barra de búsqueda para localizar el Bloque de contenido con pestañas e insértalo en tu página o post.
Una vez que haya añadido el bloque a su editor, ésta es la interfaz que obtendrá en su editor.
En este punto, el bloque aún no se parece a un botón de alternancia. Lo que necesitamos ahora son algunos ajustes en la configuración del bloque para acercarlo a una configuración que imite un botón de alternancia que permita a los usuarios cambiar entre secciones de contenido visibles.
Paso 3: Personalizar y configurar el bloque de contenido por pestañas
Con el bloque seleccionado, pasamos al ajustes a la derecha. Seleccione la opción Píldoras en la configuración para que cada pestaña parezca un botón en lugar de una pestaña.
A continuación, tenemos que ajustar el bloque alineación al centro para que se parezca más a un botón basculante.
Ahora, para crear un estado de alternancia, necesitamos tener al menos dos pestañas. Basta con hacer clic en el botón + signo junto a la primera pestaña para añadir otra pestaña. Si quieres tener más pestañas, sigue el mismo procedimiento.
Una vez hecho esto, tenemos pestañas separadas con las que trabajar. Lo que necesitamos ahora es transformar estas pestañas en botones basculantes con la ayuda de los ajustes de color.
Pero primero, renombrar las pestañas con diferentes etiquetas para representar los diferentes estados de conmutación, a continuación, pasar a la ajustes de estilo en la barra lateral derecha. Desde allí, utilice el botón Ajustes de color para añadir colores contrastados a cada pestaña y distinguir mejor la pestaña activa.
En este punto, su botón de alternar está listo. Ahora sólo queda añadir el contenido. Haga clic dentro de cada pestaña para añadir contenido específico. Puede incluir texto, imágenes, vídeos o cualquier bloque que se adapte a sus necesidades. Sólo tiene que hacer clic en el botón + signo y añada el bloque relacionado para su contenido preferido.
A continuación, añada contenido relacionado a cada pestaña. Aquí hemos creado un ejemplo para una sección de precios utilizando bloques de párrafo, encabezado y lista en ambas pestañas. Puedes especificar el color de cada bloque desde la sección de color y, si crees que es necesario resaltar más esas pestañas, cambia el botón contenido fondo de todo el bloque.
Paso 4: Vista previa y publicación
Utiliza el Vista previa para probar cómo funcionan sus pestañas como botón de alternancia. Comprueba si cada pestaña abre la sección de contenido correcta. Cuando esté satisfecho con el aspecto y la funcionalidad, haga clic en Publicar o actualizar si se trata de una entrada existente. El efecto del botón de alternancia ya está activo y listo para ofrecer a los usuarios una forma sencilla de alternar entre secciones de contenido.
Conclusión
Siguiendo estos pasos, puede convertir con éxito las pestañas estándar en un botón de alternancia totalmente funcional. Esta configuración mejorará el diseño de su contenido y lo hará accesible y fácil de navegar. Sus visitantes ahora pueden cambiar entre opciones instantáneamente, ya sea explorando diferentes precios, viendo detalles adicionales o eligiendo sus preferencias de visualización. Esta pequeña adición aporta claridad y flexibilidad a su sitio y permite a los usuarios explorar el contenido en sus propios términos, manteniendo la página limpia y organizada.
