Tutorial de Avada Theme: Cómo crear una línea de tiempo personalizada en la página de inicio para presentar la historia de la marca en profundidad basándose en la dimensión temporal.

Al presentar la historia de la empresa, los avances de los proyectos o los hitos, "línea de tiempo" es una forma de presentación muy intuitiva y orientada al diseño. En este artículo, le enseñaremos a expresar su diseño a través de Constructor Avada(matem.) géneroSin código, sin dependencia de pluginsque implementa un responsive,Línea de tiempo personalizada con adhesivo desplazableEfecto.

¿Por qué debería crear una línea de tiempo personalizada en mi página de inicio?

La página de inicio es la cara del sitio web, y la primera impresión que los visitantes tienen del sitio web suele venir de la página de inicio. Poner "Calendario personalizado"Únetefig. inicioA continuación se enumeran algunas de las funciones importantes que se pueden desempeñar:

1. Contar claramente la historia de la marca

El calendario puede tardarManera lineal de mostrar el crecimiento de la empresaLa introducción, como el año de fundación, los hitos importantes, los lanzamientos de productos, la ampliación del equipo, etc., es más legible y estructurada que una introducción de un simple párrafo.Ofrezca a los visitantes una visión general de su experiencia en desarrollo.

2. Mejorar el atractivo visual y la profesionalidad

La página de inicio añade una línea de tiempo que puedeRomper la monotonía de los diseños convencionalesA través de las columnas izquierda y derecha, la coordinación de imágenes, la animación de desplazamiento, los elementos adhesivos y otras técnicas, creamos un bloque de páginas con un diseño que realza el tono de la marca y la estética general.

3. Aumentar la duración de la estancia de los usuarios

Los contenidos bien estructurados y con ritmo atraen a los usuarios a quedarse y leer, y las líneas de tiempo son exactamente ese tipo de contenido.tipo de letra guíalo que ayuda a prolongar el tiempo de navegación del usuario y a reducir la tasa de rebote.Mejorar el rendimiento SEO.

Explicación de la visualización de efectos

con el fin de Acerca de la plantilla Avada InvestmentPor ejemplo, en la sección "Historial de la empresa", puede ver el siguiente efecto:

• Marca de tiempo izquierda durante el desplazamientoPegado en la parte superior de la pantalla.;
• El contenido del periodo de tiempo se muestra a la derecha;
• El diseño global responsivo se convierte automáticamente en tipografía adaptativa en dispositivos móviles.

Pasos para crear un calendario

Paso 1: Añadir un nuevo Contenedor

• Abra Avada Builder y vaya a la página en la que desea añadir una línea de tiempo;
• Pulse "+ Contenedor", creando un nuevo contenedor;
• Se puede añadir color de fondo o márgenes superior e inferior a los contenedores para mejorar la separación visual.

Paso 2: Añada un diseño de columnas con 4 columnas en el contenedor.

Añada una nueva fila al contenedor y configúrela con una estructura de 4 columnas con los siguientes anchos de columna:

Número de columna	utilice	Recomendación de anchura
Columna 1	Línea vertical izquierda	2%
Columna 2	línea de conexión puntual	8%
Columna 3	Hora + Texto del título	35%
Columna 4	Visualización de contenidos a la derecha	55%

Paso 3: Definir el contenido y el estilo de cada columna

Columna 1: línea de tiempo vertical (borde vertical)

• No se añade ningún contenido;
• Establezca el borde izquierdo en la pestaña Diseño:
  • Anchura del borde izquierdo: 5px
  • Color del bordeColores personalizados

• Ocultar esta columna en Configuración de respuesta para dispositivos de pantalla pequeña (Móvil).

Columna 2: líneas horizontales de conexión (borde horizontal)

• De nuevo, no se añade ningún contenido;
• Fije el borde superior:
  • Anchura del borde superior: 5px
  • Color del borde:: Ibid.

Columna 3: Mostrar hora y título

• Añadir un módulo "Bloque de texto" o "Título

Fijar pegajoso:

• Abre la pestaña Extras y activa Sticky;

• Ajustar el valor de desplazamiento superior (recomendado) 50px) para no ocultar el contenido superior;

• Desactivar Sticky en dispositivos de pantalla pequeña (se ajusta a través de Opciones de respuesta).

Columna 4: mostrar detalles (gráfico o lista)

• Añada cualquier módulo de contenido, como imágenes, párrafos, listas de iconos, etc;

• La columna no establece Sticky para garantizar una visualización de desplazamiento normal;
• Esta estructura puede repetirse según puntos temporales para mostrar múltiples etapas de contenido.

resúmenes

Haciendo un uso flexible de las herramientas de Avada Builderdiseño multicolumnayConfiguración de los bordesjunto con Funciones de la columna adhesivaEl módulo de línea de tiempo se puede crear fácilmente en un módulo de línea de tiempo receptivo y claramente estructurado sin escribir una sola línea de código. Tanto si quieres mostrar la historia de tu empresa, el desarrollo de tu marca, la cronología de un proyecto o la recapitulación de un evento, este diseño de cronología ofrece una experiencia visual más orientada al diseño.

Para obtener más información y tutoriales relacionados con WordPress, siga el enlaceRed de fluctuación de fotonestiene los tutoriales de WordPress más completos y los más activos.Comunidad de intercambio de WordPress.

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
① 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