Sección de la línea de tiempo

Esta sección de línea de tiempo permite a los usuarios mostrar los hitos y tareas del proyecto en una secuencia cronológica.

Esto es particularmente beneficioso para resaltar el progreso del proyecto, ilustrar los procesos de solicitud, mostrar logros como premios y ofrecer otras opciones personalizables.

Proporciona una forma estructurada y visualmente atractiva de presentar información en un formato de línea de tiempo, mejorando la experiencia y el compromiso del usuario.

Agregar sección a su página

Se puede agregar una sección a una página. Puede agregar una sección a una página ya existente o crear una nueva página dentro de su sitio web.
En tu pagina, Haga clic en el azul + icono para agregar un Nueva sección a tu página.

Ahora verá el categorías de sección en el lado izquierdo.
Haga clic en el elemento Cronograma pestaña (1) donde puede elegir diferentes diseños de la sección de línea de tiempo (2).
La sección ahora se agregará a la página. Haga clic en Guardar (3) botón para mantener los cambios.

Agregar y editar elementos de la lista

Agregar elemento de lista

Una vez que haya agregado la sección:

Haga clic en el elemento Editar línea de tiempo (1) botón para abrir el Panel de elementos de lista.

Haga clic en el elemento Añadir artículo (2) botón para agregar un nuevo elemento de lista.
Usted puede optar por Duplicar o eliminar (3) los elementos de la lista.
Especifique un Titular (4) para la sección de línea de tiempo.

Editar elemento de la lista

Haga clic en el elemento de la lista que desea editar. Se abrirán las opciones de edición de ese elemento de lista en particular.

Desde aquí puede:

Subir/Eliminar imagen primaria y secundaria (1)
Puedes subir un Imagen secundaria junto con la Imagen principal para cada elemento de la lista. Cuando un usuario pasa el cursor sobre el elemento, se mostrará la imagen secundaria, reemplazando la imagen principal. Además, puede configurar la Color de acento de la imagen, que se mostrará al pasar el cursor sobre la imagen.
Agregue un Título (2), Subtítulo (3)y Descripción (4) del elemento de la lista.
Es posible que no encuentre la opción de subtítulo y descripción en determinados elementos de la lista según el diseño que elija.

Nota:

Antes de añadir la descripción, compruebe este vídeo .

5. Acción al hacer clic: Título e imagen

Puede personalizar el comportamiento de clic de elementos individuales en el Cronograma Sección. A continuación se muestran las opciones disponibles:

Ir a un enlace
Al seleccionar esta opción se abre el Creador de enlaces, lo que le permite agregar un hipervínculo a este elemento. El vínculo puede dirigir a los usuarios a otra página dentro de su sitio web o a una URL externa. Más información ¡Hola! Creador de enlaces.
Abrir en Lightbox
Esta opción muestra el elemento en una imagen ampliada. Lightbox Ver al hacer clic. En este modo, el Subtítulo y Mareas Ideales para Lecciones Los elementos asociados con el elemento no aparecerán en la vista de cuadrícula, pero serán visibles en el modo Lightbox.
No Acción
Seleccione esta opción para que no se pueda hacer clic en el elemento. Cuando se selecciona, hacer clic en el elemento no activará ninguna acción.

6. Abrir enlace en nueva ventana: Configure el vínculo para que se abra en un nueva pestaña o en la misma pestaña. Esto sólo será visible cuando Ir a un enlace La opción está seleccionada debajo de Acción al hacer clic .

7. Botones y enlaces: Agrega cualquier tipo de Enlace al elemento de la lista. Puede agregar un botón, un enlace de imagen, un icono social o un enlace de texto. Más información.

8. Anulación del estilo de la tarjeta

Puede anular la configuración global del estilo de la tarjeta desde la sección Ajustes Personaliza la tarjeta de cada elemento individualmente en la sección Cronología. Esto te permite aplicar estilos únicos a diferentes elementos de la lista para una mejor personalización.

Más información Acerca de la opción Tarjetas en la sección dinámica.

9. Anulación del estilo de forma

Utilice la opción Anular para asignar una forma diferente a cada imagen individualmente dentro de la sección Línea de tiempo, lo que le brinda un mayor control sobre el estilo visual de cada elemento. Más información Acerca de Shape Mask.

10. Guardar: Después de realizar las personalizaciones, guarde los cambios.

Elementos de la lista de secuencias

Administrar elementos de la sección Línea de tiempo

La sección de línea de tiempo incluye una Pestaña Elementos que le permite administrar la visibilidad de varios elementos dentro de la sección con facilidad. Con simples interruptores, puede habilitar o deshabilitar elementos específicos sin tener que eliminar o modificar los elementos en sí.

Haga clic en el elemento Editar línea de tiempo Botón (1).

Elija el Elementos (2) pestaña.
Después de realizar los cambios, presione el botón Guardar Botón (3).

Opciones de sección

Mostrar título:Habilita o deshabilita la visibilidad del título para la sección Línea de tiempo.
Mostrar Botones:Controla si los botones se muestran en el nivel de sección.

Opciones de artículos

Mostrar imagen: Alternar la visibilidad de las imágenes.
Mostrar título:Controla si se muestra el título.
Mostrar subtítulo:Habilitar o deshabilitar subtítulos.
Mostrar descripcion:Administrar la visibilidad de las descripciones de los artículos.
Mostrar Botones:Decide si se deben mostrar los botones de elementos individuales.

Cambiar diseño de sección

Haga clic en el Editar línea de tiempo para abrir el panel de edición de la sección.
Elija el Diseño .
Desde aquí, puedes cambiar fácilmente el diseño de la sección incluso después de agregarla a la página.

Mientras cambia el diseño, verá los diseños relacionados con las secciones en la parte superior.

Aparte de estos, también tiene la opción de elegir un diseño de otras secciones en el Más diseños .

Opciones de estilo

Haga clic en Editar lista de imágenes .
Elija el Estilo (1) .
Cambie el estilo de los elementos de la sección y Guardar (2) tus cambios

Tendrá múltiples opciones de estilo para la sección:

Opciones de visualización
Alineación
Tamaño del texto
Espaciado
Título de la sección
Opciones de estilo de la línea de tiempo
Opciones de imágenes
Máscara de forma
Opciones de desplazamiento de imagen
borde de la imagen
Opciones de tarjeta
Opciones de sombra
Botones y enlaces

Opción de Visualización

Especifica el Espacio entre filas de los elementos de la lista.

Alineación

Alineación el texto horizontalmente En la sección. Puedes configurarlos para que se alineen a la izquierda, a la derecha o al centro.
Alineación el contenido verticalmente En la sección. Puedes configurarlos para que se alineen arriba, al centro y abajo.
Elija el Orden de contenido es decir, las imágenes de los elementos de la lista que se mostrarán primero o el texto asociado.

Tamaño del texto

Haga clic en el elemento Cambiar estilo de texto botón para visitar el Diseño sección y administre sus tamaños y estilos de fuente.
Configure Título estilo de fuente para los elementos de la lista de la sección.
Configure Subtítulo estilo de fuente para los elementos de la lista de la sección.
Establecer el valor predeterminado Mareas Ideales para Lecciones estilo de fuente para los elementos de la lista de la sección.
Habilitar esta opción para animar cualquier número Presente en el Título y Subtítulo campos. Cuando se activa, los valores numéricos aparecerán con una animación de conteo dinámica, lo que los hace más atractivos visualmente.

Espaciado

Especifica el Ancho de imagen para los elementos de la lista.
Especifica el Espacio debajo del título de la sección en píxeles
Especifica el Imágenes de Space Above de los elementos de la lista (en %).
Especifica el Espacio alrededor del divisor horizontalmente de los elementos de la lista (en %).
Especifica el Espacio debajo de los títulos de los elementos de la lista (en %).
Especifica el Espacio debajo de los subtítulos de los elementos de la lista (en %).

Título de la sección

Alinear horizontalmente El texto del título de la sección. Puede configurarlo a la izquierda, al centro o a la derecha.
Habilitar/Deshabilitar el Divisor entre el título de la sección y el contenido de la sección.
Configure Grosor del divisor (en píxeles).
Especifica el Color del divisor del selector de color.
Elija un Estilo divisor desde el desplegable.
Configure Ancho del titular para definir qué tan ancho aparecerá el título de la sección, comenzando desde un mínimo del 50%.

Opciones de estilo de la línea de tiempo

Habilítelo si prefiere que uno de cada dos elementos de la sección esté en la Suplente (lado opuesto.
Seleccione el elemento SENTIDO DE SALIDA: de los artículos.
Especifica el Ancho de la línea divisoria para la sección.
Especifica el Línea base (fondo) Color del divisor.
Especifica el Línea activa (resaltado) Color para el divisor.

Imágenes

Elija el Icultivo de mago para los elementos de la lista. Puede configurar las imágenes como Cuadrado, Círculo, Horizontal, Retrato y Original.
Elija tener un radio de esquina común o un radio de esquina diferente para cada lado de los elementos de la lista y establezca un número (en px) para el CRadio interior de las imágenes de elementos de la lista. Más información.

Máscara de forma

Máscara de forma: Active este interruptor para aplicar una máscara de forma a la imagen en la sección Línea de tiempo. Una vez activado, la forma seleccionada recortará visualmente la imagen en esa forma.
Seleccionar forma: Elige entre varias formas predefinidas para aplicar a tu imagen. Esto te permite estilizar tu contenido de forma creativa, mostrando la imagen en una forma única, como redondeada, en forma de diamante, en forma de gota, etc.

Notas

La opción Máscara de forma depende del diseño – Es posible que no aparezca en diseños en los que se muestra texto como título o subtítulo sobre la imagen.
La configuración de estiramiento depende de varios factores – incluidas las configuraciones de tamaño de imagen, alineación y recorte definidas en la pestaña Estilo.
Si el recorte de imagen está configurado en OriginalLas dimensiones reales de la imagen determinarán si se estirará vertical u horizontalmente.

Desplazamiento de imagen

Elija el Color de desplazamiento de la imagen ser el acentuar el color o ser especificado. Si ha elegido el acentuar el color, luego especifique el opacidadPuede especificar el color de acento para cada elemento desde Editar elemento .
Si ha elegido el especificar color luego configure la opción Superposición de color y opacidad.
Elija Animar las imágenes de elementos de la lista. al pasar el mouse haciendo clic en Sí. Verifique esta característica en una página en vivo.
Elija una Estilo de animación para imágenes cuando el cursor pasa sobre ellas.
Elija si desea permitir el transición de imágenes al pasar el mouse o no.
Seleccione un Estilo de transición para la transición al pasar el mouse. Las opciones disponibles son Desvanecer y Voltear.

borde de la imagen

Activar/Desactivar borde alrededor de las imágenes cambiando el interruptor.
Elige tener un frontera común en todos los lados de las imágenes o puede especificar el fronteras por separado para cada lado.
Especifica el ancho de la frontera. Si se establece en 0, el borde no aparecerá. También tiene la opción de establecer el ancho del borde individualmente para cada lado de la imagen.
Seleccione el elemento Color del borde del selector de color.
Seleccione un preferido Estilo de Borde desde el desplegable.
Determina el ancho de borde para movil dispositivos, alineándolo con el ancho elegido para escritorio.

Tarjetas

Descubre cómo para gestionar tarjetas.

Sombra:

Mostrar – Elija mostrar la sombra detrás de los elementos de la lista siempre o solo al pasar el mouse por encima.
DE ESTILO RESORT – Elija entre los ajustes preestablecidos existentes o cree una sombra personalizada.
En caso de que haya elegido la opción Personalizada, visite este Generador de sombras de caja para crear una sombra personalizada. Finalmente, copie y pegue el caja sombra CSS.
En caso de que haya elegido la opción de preajustes, entonces Elija estilos de sombra desde el desplegable.

Botones y enlaces

Descubre cómo para gestionar el estilo de Botones y enlaces.

¿No encuentras lo que buscas?

Póngase en contacto con un Experto Pixpa.

Contáctenos