Cree una página cronológica interactiva con Avada, ¿está utilizando correctamente estas funciones ocultas?

Constructor Avada Proporciona una gran cantidad de módulos y capacidades de diseño. ¡Al construir una página de "Línea de tiempo", puede cumplir con el efecto visual básico, pero también esconde un montón de características que vale la pena explorar, ayudando a crear una pantalla de línea de tiempo más interactivo, rico en información y diseño flexible!página web.

Imagen[1]-Creación de una página de línea de tiempo interactiva con Avada, ¿está utilizando correctamente estas funciones ocultas?

I. Uso de la "lógica condicional" para crear contenidos dinámicos en la línea de tiempo

Avada es compatible con la función Visibilidad del contenedor, que permite controlar la visualización del contenido en función de la identidad del usuario, el tipo de dispositivo, el estado de inicio de sesión, el idioma, etc. Para configurarlo, en la pestaña General del elemento, active Visibilidad → Añadir condición de visualización.

Imagen[2]-Creación de una página de línea de tiempo interactiva con Avada, ¿está utilizando correctamente estas funciones ocultas?

Mejora de la interacción con animaciones de desplazamiento Avada

En cada nodo de la línea de tiempo, puede añadir animación de desplazamiento a iconos, texto y barras de progreso para impulsarpágina webUna sensación de dinamismo.

Cambiar a Extras pestaña (de una ventana) (informática)

  • localice Tipo de animación

Seleccionar el tipo de animación

  • Seleccione una animación del menú desplegable, por ejemplo:Desvanecer(se desvanece)

La animación con retardos y presentación por capas crea un efecto visual de "línea de tiempo desplazable".

Imagen[3]-Creación de una página de línea de tiempo interactiva con Avada, ¿está utilizando correctamente estas funciones ocultas?

En tercer lugar, la combinación de "Sticky Column" para crear una navegación de línea de tiempo flotante.

Avada permite establecer una columna en modo Sticky, es decir, el contenido de la columna permanece fijo mientras se desplaza por la página.

En la ventana de configuración que aparece, haga clic en la parte superior Extras pestaña (de una ventana) (informática)

Desplácese hacia abajo hasta encontrar el ajuste Posición pegajosa.

  • Encender (poner en "On")
  • Establezca el desplazamiento de transición del contenedor adhesivo (por ejemplo, en 80px)

Imagen[4]-Creación de una página de línea de tiempo interactiva con Avada, ¿está utilizando correctamente estas funciones ocultas?

En cuarto lugar, el uso de "Modal Popup" para ampliar la información del nodo de la línea de tiempo.

La información abreviada de cada momento puede activarse con un clicventana emergente(Modal Popup) para mostrar contenidos más ricos, imágenes, vídeos o formularios.

Añadir módulo emergente modal

golpe (en el teclado) + Elemento

Busque y seleccione el módulo:Modal

Imagen[5]-Creación de una página de línea de tiempo interactiva con Avada, ¿está utilizando correctamente estas funciones ocultas?

El contenido del nombre de configuración de ejemplo es el siguiente:

Imagen[6]-Creación de una página de línea de tiempo interactiva con Avada, ¿está utilizando correctamente estas funciones ocultas?

Inserte un botón e introduzca el enlace http://modal2020 para establecer el activador del botón en

Imagen [7]-Creación de una página cronológica interactiva con Avada, ¿está utilizando correctamente estas funciones ocultas?

V. Iconos personalizados y líneas de conexión para la personalización visual

La línea de tiempo de Avada permite un estilo visual más flexible al..:

  • Sustituir los iconos predeterminados por iconos SVG o iconos específicos de la marca (mediante el selector de iconos o el módulo SVG).
  • Utilice el módulo Divisor para simular líneas de conexión, personalizar el color de las líneas, el grosor y el estilo de las líneas de puntos.
  • Maquetación manual mediante contenedor Flexboxlínea de tiempoPárrafos para lograr una alineación escalonada izquierda-derecha

Seis, con el formulario, la animación, los contadores y otros módulos para mejorar la profundidad de la interacción

Los módulos ampliables incluyen:

  • Contador(Contadores): Muestra datos dinámicos como ventas, usuarios, etc.
  • Generador de formularios: los usuarios pueden enviar comentarios, apuntarse a citas, etc.
  • Módulo de animación Lottie: introducción de animación SVG de alta calidad para mejorar la dinámica de la línea de tiempo

VII. Bloques de contenido: creación de una estructura unificada para las plantillas de cronología

Imagen[8]-Creación de una página de línea de tiempo interactiva con Avada, ¿está utilizando correctamente estas funciones ocultas?

La funcionalidad web de Avada permite diseñar los párrafos de la línea de tiempo como bloques de plantillas para lograr uniformidad y una rápida reutilización.

Ventaja:

  • Todos los estilos de nodos son coherentes y fáciles de mantener
  • No es necesario arrastrar y soltar módulos repetidamente, basta con cambiar el contenido
  • Puede utilizarse con lógica condicional para lograr una "visualización dinámica a nivel de bloque".

Avada Live Editor: Creación de experiencias cronológicas en tiempo real

Avada El editor visual del front-end (Live Editor) permite arrastrar y soltar en tiempo real + vista previa, lo que mejora la eficacia a la hora de crear páginas de línea de tiempo y es adecuado para retoques:

  • alineación
  • efecto de animación
  • Optimización de la visualización adaptativa (vista previa para móviles)

Contacte con nosotros
¿No puede leer el tutorial? Póngase en contacto con nosotros para obtener una respuesta gratuita. Ayuda gratuita para sitios personales y de pequeñas empresas
Servicio de atención al cliente WeChat
Servicio de atención al cliente WeChat
Tel: 020-2206-9892
QQ咨询:1025174874
(iii) Correo electrónico: info@361sale.com
Horario de trabajo: de lunes a viernes, de 9:30 a 18:30, días festivos libres
© Declaración de reproducción
Este artículo ha sido escrito por Millie
EL FIN
Si le gusta, apóyela.
felicitaciones687 compartir (alegrías, beneficios, privilegios, etc.) con los demás
comentarios compra de sofás

Por favor, inicie sesión para enviar un comentario

    Sin comentarios