Cómo diseñar contenido de alternancia de WordPress en Elementor

¿Cuál es la mejor manera de mostrar contenido que tiene varias secciones o ofrece opciones?

Por ejemplo, una página de precios puede contener diferentes tipos de esquemas de precios, como ofertas mensuales, anuales y de por vida. Mostrar todas esas ofertas en una página puede resultar problemático para los clientes. Tienen que desplazarse mucho hacia abajo para consumir el contenido.

Entonces, ¿cómo ordenará esto para que la página sea limpia y mínima y al mismo tiempo mantenga toda la información y el contenido necesarios?

Aquí es donde alternar contenido viene al rescate. Le permite crear contenido interactivo con una interfaz inteligente. 

Cuando se trata de WordPress, hay muchas formas de crear contenido alternativo. Sin embargo, la forma más sencilla viene con Elementor. Este artículo lo guiará a través de los pasos para crear contenido de alternancia de WordPress con Elementor.

¿Qué es alternar contenido?

La función de alternancia permite al usuario controlar la visibilidad del contenido en una página web. Alternar contenido se suele utilizar en sitios web para mostrar diferentes versiones o secciones del contenido.

Con la opción de alternar contenido, solo una parte del contenido será visible en la ventana gráfica, mientras que otras quedarán agrupadas bajo una pestaña o título. Cuando los usuarios hacen clic en una pestaña, el contenido que se encuentra debajo de ella solo será visible.

Por ejemplo, una página de precios que tiene dos ofertas de precios, mensual y anual. Si utiliza un contenido de alternancia, solo una de las ofertas, ya sea mensual o anual, será visible en la pantalla. 

Cuando el usuario haga clic en la pestaña mensual, las ofertas mensuales serán visibles. De manera similar, cuando se abre la pestaña anual, se muestran las ofertas anuales.

Una guía paso a paso para crear contenido avanzado de alternancia de Elementor en WordPress

Si bien hay muchos complementos de alternancia de WordPress disponibles, la forma más fácil de crear un botón de alternancia avanzado de Elementor en WordPress viene con ElementsKit.

El widget de alternancia avanzada de ElementsKit agrega funcionalidad adicional a su contenido de alternancia de WordPress. Le permite mostrar contenido de una manera más elegante con la mayor cantidad de opciones personalizables.

Así es como puede crear contenido sofisticado de alternancia de WordPress utilizando el widget de alternancia avanzada de ElementsKit:

Paso 1: elija estilos para el botón de alternancia de Elementor

Para usar el widget de alternancia avanzado, primero que nada, arrastre y suelte el widget en su diseño de Elementor. Después de eso, podrás configurar el contenido de alternancia y personalizar sus estilos.

El widget de alternancia avanzada de ElementsKit viene con dos estilos diferentes de botones. No sólo los estilos son diferentes, sino que sus funcionalidades también son diferentes. 

Con el Estilo 1 puedes mostrar varias pestañas. Debajo de esas pestañas, puede agregar contenido de alternancia. Cuando tenga varias opciones para mostrar, puede elegir este estilo.

El estilo 2 consiste en cambiar entre dos contenidos con un botón de alternancia tradicional. Cuando eliges este estilo, sólo se mostrarán las dos primeras pestañas. Aparecerá un botón de alternancia típico que cambia entre los dos contenidos. 

Para este tutorial, utilizará el Estilo 1 para mostrarle más opciones personalizables.

Paso 2: agregue pestañas en el menú de alternancia en WordPress

Puede agregar pestañas con solo un clic usando el widget de alternancia ElementsKit Advanced. Para agregar una nueva pestaña, haga clic en el botón AGREGAR ARTÍCULO. Para el contenido de cada pestaña, puede configurar el Título, Color de fondo del indicador, Color del título para Normal y efecto de desplazamiento para cada pestaña individualmente. Además, si desea que una pestaña sea visible de forma predeterminada, puede habilitar la opción Mantenga esta pestaña abierta característica.

Además, puedes configurar el Alineación para alternar pestañas hacia la derecha, izquierda o centro. la opción de Habilitar Ajax También está disponible.

Paso 3: ¿Cómo agregar contenido de alternancia de WordPress en Elementor?

El proceso de creación de contenido hace que este sea un "Avanzado”alternar widget. Literalmente puedes diseñar contenido para cada pestaña sin salir del editor de Elementor. Esto brinda una gran ventaja, ya que puede crear y personalizar el contenido dentro de la misma página en la que está editando el botón de alternancia.

Para crear el contenido de alternancia, haga clic en la sección de contenido debajo del botón de alternar. A Área de widgets aparecerá en su pantalla. En esta interfaz, puede diseñar contenido alternado con todos los elementos de Elementor y ElementsKit. tienes la opcion de crea tu propio diseño o usar plantillas guardadas. Además, puedes hacer uso de la Biblioteca de plantillas de ElementsKit para crear espléndido contenido de alternancia de WordPress.

Paso 4: personalice el botón de alternancia de Elementor con ElementsKit

Personalizar el botón de alternancia de Elementor es fácil y flexible con ElementsKit. En el Cambiar sección de contenedor (en la pestaña Estilo), puedes elegir el tipo de fondo para alternar botones, luego configure relleno, sombra de la caja estilo, y radio-frontera.

Para el interruptor de palanca, también están disponibles opciones para establecer el radio del borde y la sombra del cuadro.

Es más, en el Contenido sección, puedes configurar el Tipografía para alternar títulos de pestañas.

¡Eso es todo! El contenido de alternancia ya está listo. Ahora puede agregar el contenido de alternancia para hacer que su diseño web sea más elegante y dinámico.

Para obtener más información, lea la documentación completa en cómo utilizar el widget de alternancia avanzada de ElementsKit.

¿Por qué debería elegir ElementsKit para crear el botón de alternancia de Elementor?

Una pregunta muy legítima que puede hacer es: entre todos los complementos de alternancia de WordPress disponibles¿Por qué elegirías ElementsKit? La respuesta de una línea sería: es el widget de alternancia avanzado con todas las funciones avanzadas.

Para más detalles, ElemensKit tiene una función avanzada de creación de contenido. La mayoría de los widgets de alternancia de Elementor brindan la opción de alternar entre solo dos contenidos. Mientras utiliza ElementsKit, puede crear tanto contenido alternante como desee con un estilo determinado. Además, puede crear un botón de alternancia de Elementor y el contenido de alternancia en el mismo editor. Eso hace que WordPress alternar la creación de contenido sea más fácil que nunca. Además, también puedes utilizar plantillas prediseñadas.

He aquí por qué elegir Widget de alternancia avanzado de ElementsKit para crear contenido de alternancia de WordPress en Elementor:

• Creación de contenidos avanzada.
• Agregue una cantidad ilimitada de contenido alternante.
• Cree un botón de alternancia y diseñe contenido de alternancia en un solo lugar, sin tener que salir del editor.
• Diseñe contenido de alternancia sofisticado con Elementor.
• Hace que la sección sea interactiva para los usuarios.
• Reduce el tiempo de desplazamiento para mejorar la participación.

En una palabra

El contenido alternante de WordPress es una excelente manera de mejorar la experiencia del usuario en su sitio web. Los conmutadores le permiten cambiar la apariencia de su sitio web haciéndolo más interactivo. 

Al crear contenido alternativo, ElementsKit ofrece las funciones más flexibles y avanzadas. Si ha seguido la guía anterior, debería poder crear un botón de alternancia de Elementor con facilidad.