Conclusiones clave
- Estos 10 ejemplos de alternancia de contenido para Elementor son demostraciones en vivo creadas con el widget Master Addons Toggle Content, y cada uno cambia entre dos versiones de la misma sección.
- Un cambio de contenido funciona mejor cuando ambas opciones comparten un diseño y solo cambian los detalles, como precios mensuales y anuales o medidas métricas e imperiales.
- El precio es el ejemplo de alternancia de contenido más común, y dos de las diez demostraciones son conmutadores de facturación, uno etiquetado como Mensual y Anual y otro etiquetado como Facturado Mensual y Facturado Anual.
- Los cambios de contenido también se adaptan al contenido que no tiene precios, incluidas tablas de especificaciones, resultados trimestrales, menús de almuerzo y cena y mensajes escritos para dos audiencias.
- Cada opción en el widget Alternar contenido contiene texto del editor o una plantilla de sección, página o widget guardada, por lo que cualquier diseño de Elementor puede ubicarse detrás del conmutador.
Los ejemplos de alternancia de contenido para Elementor que funcionan mejor muestran el mismo tipo de contenido en ambos lados del conmutador. Los planes siguen siendo los mismos y el precio cambia. La tabla sigue igual y las unidades cambian. A continuación se muestran diez demostraciones en vivo que siguen esa regla, con lo que cambia cada una y cuándo usar el patrón.
Los diez fueron construidos con Alternar contenido, el widget de alternancia de contenido en Master Addons Pro. Haga clic en cualquier enlace de demostración para probar el cambio usted mismo.
Tabla de contenidos
Lo que hace que un buen contenido cambie
Vale la pena utilizar un cambio de contenido cuando un visitante necesita una de dos versiones y nunca ambas a la vez. Si la gente quisiera leer ambos lados juntos, colóquelos uno al lado del otro.
| Patrón | Opción izquierda | Opción correcta | Ejemplo a continuación |
|---|---|---|---|
| Periodo de facturación | Mensual | Anual | 1, 2 |
| Unidades | Métrica | Imperial | 4 |
| Alcance de los datos | Operaciones propias | Cadena de suministro | 5 |
| Audiencia | Como equipo | Por tu cuenta | 7 |
| Periodo de tiempo | Q3 | P4 | 6 |
| Proceso | Hecho a pedido | En stock | 8 |
| Categoría | Residencial | Cívico | 9 |
| Hora del día | Almuerzo | Cena | 10 |
| Alcance del plan | Soltero | Ilimitado | 3 |
Ejemplos de cambios de precios
El precio es donde la mayoría de las personas conocen por primera vez un cambio de contenido. Dos períodos de facturación comparten los mismos planes, por lo que un interruptor reduce a la mitad la cantidad de tarjetas en la página.
1. Tarjetas de precios de cambio de facturación
Un interruptor mensual y anual se encuentra encima de las tarjetas de inicio, equipo y escala. En Anual, cada tarjeta muestra la tarifa mensual más baja y una línea con el total anual y el ahorro. El plan intermedio lleva una etiqueta de Más Elegido en ambos lados.
Úselo para: SaaS y precios de suscripción. Abra la demostración de Billing Switch.
2. Alternar contenido con precios
Este utiliza las etiquetas Facturado Mensual y Facturado Anual encima de los planes Personales y de Inicio. Cada opción contiene un conjunto completo de tablas de precios, por lo que toda la fila cambia con un clic.
Úselo para: páginas de precios construido a partir de Widgets de tabla de precios. Abra la demostración de precios.
3. Alternar contenido redondeado
Un interruptor redondeado se mueve entre un plano único y un plano ilimitado, cada uno con su propio encabezado y descripción. Las dos partes difieren según el alcance, por lo que el interruptor no está vinculado a un período de facturación.
Úselo para: planes que difieren según el alcance, como único e ilimitado. Abra la demostración redondeada.
Ejemplos de alternancia de tablas y datos
Las tablas son el segundo ajuste natural. Las filas y columnas permanecen colocadas y los números cambian, por lo que los visitantes mantienen su lugar cuando accionan el interruptor.
4. Tabla de especificaciones del interruptor unitario
Una tabla de geometría de bicicleta cambia entre Métrica e Imperial. El alcance, la pila y las otras medidas se enumeran para tres tamaños de cuadro, con una columna de tolerancia. Los compradores de diferentes países obtienen números que pueden leer.
Úselo para: especificaciones del producto, tablas de tallas y recetas. Abra la demostración de Unit Switch.
5. Tabla comparativa del cambio de datos
Un informe de emisiones cambia entre operaciones propias y cadena de suministro. Cada lado enumera las fuentes, su participación en la línea de base y el tonelaje. Dos tablas que llenarían una pantalla ahora comparten una cada una.
Úselo para: informes, puntos de referencia y cifras de antes y después. Abra la demostración de Data Switch. Si los datos nunca cambian con un clic, un simple widget de tabla es más sencillo.
6. Métricas de cambio de cuarto Bento
Una cuadrícula bento de resultados cambia entre el tercer y cuarto trimestre. Los ingresos, el crecimiento y las notas debajo de cada cifra cambian juntos. Se lee como un panel y ocupa el espacio de uno.
Úselo para: actualizaciones de inversores, informes anuales y estadísticas mensuales. Abra la demostración de Quarter Switch.
¿Quieres los diez en un solo lugar? El Alternar página de widget de contenido tiene un visor que carga cada demostración, además de la configuración completa del widget.
Ejemplos de alternancia de audiencia y categoría
El último grupo cambia el mensaje. Cada lado está escrito para un lector diferente o cubre una categoría diferente.
7. Panel de funciones de cambio de audiencia
Una página de curso cambia entre Como equipo y Por tu cuenta. Cada lado tiene su propio titular, punto de prueba y lista de funciones. Los visitantes eligen la versión que los describe y se saltan el resto.
Úselo para: productos vendidos tanto a empresas como a particulares. Abra la demostración de Audience Switch.
8. Cronología del paso de ruta de pedido
Una lista de pasos numerados cambia entre Hecho a pedido y En stock. Los pasos y la espera difieren en cada ruta, y el diseño sigue siendo el mismo. Responde “¿qué pasa después de realizar el pedido?” para ambos tipos de compradores.
Úselo para: envío, incorporación y cualquier proceso con dos vías. Abra la demostración de Ruta del pedido. Para una única secuencia fechada, el Widget de línea de tiempo es el mejor ajuste.
9. Tarjeta superpuesta del interruptor del proyecto
Un estudio de arquitectura cambia una gran tarjeta de proyecto entre Residencial y Cívico. Cada lado tiene su propia foto, ubicación, año y resumen. Dos estudios de caso encajan donde normalmente se iría.
Úselo para: portafolios con dos líneas de trabajo. Abra la demostración de Project Switch.
10. Lista de menús del interruptor de servicio
El menú de un restaurante cambia entre Almuerzo y Cena. El horario de servicio se sienta debajo del interruptor y los platos y precios cambian con él. Los huéspedes ven el menú de la comida que están planeando.
Úselo para: restaurantes, salones y cualquier negocio con dos listas de servicios. Abra la demostración de Service Switch.
Cómo construir uno de estos ejemplos
Cada ejemplo es un widget de Alternar contenido con dos elementos. Cree la primera versión de su sección, cópiela, cambie los detalles y coloque una versión en cada elemento.
- Arrastrar Alternar contenido en la página y nombre los dos elementos del Elementos lista.
- Para contenido breve, vete Tipo sobre Contenido y escribe en el editor.
- Para un diseño completo, configúrelo Tipo para Planificar y elegir una plantilla guardada para cada elemento.
- Conjunto Índice activo en Alternar configuración para elegir la opción que se muestra primero.
- Estilee el interruptor en las secciones Alternador, Indicador y Etiquetas de la pestaña Estilo.
La versión de precios tiene algunos pasos adicionales, que cubrimos cómo agregar un cambio de precios mensual y anual en Elementor. La lista completa de configuraciones está en el Alternar documentación de contenido.
Preguntas frecuentes
¿qué es un cambio de contenido en Elementor?
Un cambio de contenido es un widget con un interruptor y dos o más etiquetas. Al hacer clic en una etiqueta se muestra el contenido de esa opción y se ocultan los demás. Elementor no incluye uno, por lo que proviene de un complemento como Master Addons Pro, donde el widget se llama Alternar contenido.
¿qué puedo poner dentro de un alternar contenido?
En Alternar contenido, cada opción contiene texto del editor integrado o una plantilla de Elementor guardada. Debido a que una plantilla puede contener cualquier widget, la opción puede ser una tabla de precios, una tabla de datos, un formulario, una galería de imágenes o una sección completa.
¿puede un alternar contenido tener tres opciones?
Sí. Haga clic en Agregar elemento en la lista Elementos para agregar una tercera o cuarta opción. Un interruptor se lee mejor con dos o tres etiquetas. Por más que eso, las pestañas suelen ser más fáciles de escanear para los visitantes.
¿estas demostraciones de alternancia de contenido están disponibles como plantillas?
Las demostraciones se muestran en el visor de plantillas en la página del widget Alternar contenido, donde puedes abrir cada una. Fueron creados con el widget Alternar contenido, que forma parte de Master Addons Pro.
Pensamientos finales
Los diez ejemplos de alternancia de contenido anteriores cubren tres trabajos: cambiar un precio, cambiar un conjunto de números y cambiar un mensaje. En cada uno, el diseño se mantiene quieto y solo se mueven los detalles, por lo que el cambio es fácil de seguir.
Pruébalos en el Alternar página de widget de contenido, luego construye el tuyo propio con dos versiones de una sección que ya tienes.
Lectura relacionada
