homefinance blog
Un aspecto de la cronología puede ser útil para muchas aplicaciones diferentes en un sitio web, especialmente si se ven muy bien en el móvil. Puede usarlo para presentar una secuencia de puntos de referencia en una página sobre, presentando los pasos de un proceso y más. Y con los efectos de desplazamiento de Div, ¡puedes hacer que un diseño de cronología cobre vida! En este tutorial, le mostraremos cómo diseñar un aspecto completo de la cronología de la división con los efectos. La aparición de la cronología es versátil, elegante y receptiva. Y el efecto de desarrollo tiene una banda de rodadura que lleva al usuario a la cronología, destacando cada evento a medida que se ejecuta el usuario.
¡Échale un vistazo! Tire con el ojo Descargue el esquema de división de la línea de tiempo de forma gratuita para poner su mano en los dibujos en este tutorial, primero tendrá que descargarlo usando el botón a continuación. Para tener acceso a la descarga, deberá suscribirse a nuestra lista diaria de correo electrónico utilizando el formulario a continuación. ¡Como nuevo suscriptor, recibirá más buenas divisiones y un paquete Divaut gratuito todos los lunes! Si ya está en la lista, simplemente ingrese la dirección de correo electrónico a continuación y haga clic en Descargar. No será “reubicado” y no recibirá correos electrónicos adicionales.
Descargar archivos
Descargue el registro gratuito para el Boletín Informativo Divic y le enviaremos una copia de la página de la página de la página final, además de muchos otros recursos, consejos y consejos para Div gratis. Sigue a ti mismo y serás una división maestra en el menor tiempo. Si ya está suscrito, simplemente ingrese el correo electrónico a continuación y haga clic en Descargar para acceder al paquete de apariencia.
Te has suscripto satisfactoriamente. ¡Consulte su correo electrónico para confirmar su suscripción y obtener acceso a paquetes de diseño semanales gratuitos! Para importar el aspecto en su página, simplemente extraiga el archivo zip y extraiga el archivo JSON en Divi Builder. Pasemos al tutorial, ¿no? ¿Qué tienes que comenzar a comenzar? Deberás hacer lo siguiente:
Si aún no lo ha hecho, instale y active el tema de Div.
Cree una nueva página en WordPress y use Divi Builder para editar la página principal (Visual Builder).
Elija la opción “Construir desde cero”.
Luego busque y seleccione el paquete de la fábrica de cerveza en la pestaña Diseño prefabricado. Luego seleccione la cervecería sobre la página Look y haga clic en el botón “Use este diseño”.
Después de eso, estás listo para comenzar el diseño en la división.
La creación de un aspecto cronológico con los efectos de desarrollo en la división de este diseño de cronología incluye dos partes principales: la sección del encabezado y la sección de cronología. Utilizamos el aspecto prefabricado de la cervecería sobre la página, por lo que podemos incorporar elementos de diseño de aspecto especial, mientras nos enfocamos en diseñar la apariencia y los efectos del desplazamiento. Las características clave de este aspecto incluyen el posicionamiento creativo de las borrosas como elementos del evento en la cronología. La línea centrada es en realidad el borde izquierdo de una fila que se coloca en la mitad derecha de la ventana. Los efectos del desplazamiento se agregan a varios módulos divisores que se han convertido en círculos de colores que se colocan y se mueven con compensaciones precisas a medida que el usuario ejecuta la página hacia abajo.
Vamos a eso. Parte 1: Creación de la sección de encabezado que elimina primero las secciones no deseadas, asegúrese de haber cargado con éxito la cervecería sobre la página en la página usando Divi Builder. Para este diseño, solo usaremos la sección que presenta una cronología en la parte inferior de la página. Elimine todas las secciones arriba y debajo de esa sección para que solo permanezca. Debe tener esta sección a continuación a la izquierda. Agregue una nueva sección Ahora agregue una nueva sección debajo de la sección prefabricada y tire de la parte superior de la página.
Agregue la fila Agregue una fila con una columna a la sección.
Copie y pegue el módulo de texto de la sección prefabricada de extracción (o copie) el módulo de texto en la columna izquierda de la sección prefabricada que tiene el encabezado. Luego coloque (o pegue) el módulo en la nueva columna anterior.
El fondo de la sección Una vez que el texto está en su lugar, abra la configuración de la sección superior y agregue un fondo de la siguiente manera:
Fondo degradado izquierdo: #fffff
Color derecho del fondo de gradiente: RGBA (255,255,255.0)
Dirección de gradiente: 90 grados
Posición inicial: 50%
Posición final: 0%
Coloque el gradiente sobre la imagen de fondo: sí
Diseño de la sección En la pestaña Diseño, actualice lo siguiente:
Dispensador
El estilo del divisor superior: ver la captura de pantalla
Color divisor: RGBA (238,238.238.0.7)
Altura del divisor: 50 VH
Tamaño y espacio
Altura: 50 VH
Junta: 20 VH
Parte 2: Creación de la sección de cronología Una vez que la sección del encabezado está en su lugar, podemos comenzar la sección principal de nuestra apariencia: la cronología. Agregue la sección y la fila para comenzar, agregue una nueva sección habitual en la sección del encabezado que acabo de crear.
Luego agregue una fila con una columna a la nueva sección. La sección de la sección antes de comenzar a agregar módulos, abra la configuración para la nueva sección y actualice el diseño de fondo y el revestimiento de la siguiente manera:
Color de fondo degradado: RGBA (255,255,255.0)
Color derecho de fondo degradado: #EEEEEE
Dirección de gradiente: 90 grados
Posición inicial: 50%
Posición final: 0%
Coloque el gradiente sobre la imagen de fondo: sí
Forro: 0 px arriba, 0 px abajo
Configuración de fila Después de completar la sección, abra la configuración para una fila y actualice lo siguiente:
El ancho de la canaleta: 1
Ancho: 100%
Ancho: 100%
Ancho máximo: 50% (escritorio), 90% (teléfono)
Alineación de filas: correcto
Forro: top 300 px
Frontera
Ancho del borde izquierdo: 2 PX
Color del borde izquierdo: # 333333
Sombra de la caja
Shadow of the Box: ver captura de pantalla
Posición horizontal de la sombra de la caja: 0 px
Poder de extender la sombra de la caja: 0 px
Shadow Color: # 333333
La combinación del borde y la caja de sombras crea una línea centrada en la línea, que se utilizará para la cronología. Presentación del Edificio 1 Ahora que nuestra línea está en su lugar, podemos comenzar a agregar nuestros borrones. Copie y pegue los módulos de propaganda prefabricados para crear la primera propaganda, para extraer la primera propaganda de la sección prefabricada a continuación en la nueva fila.
Actualice el contenido de la propaganda Abra la configuración de la propaganda y pegue el siguiente contenido en el cuerpo: fundado
Tu contenido va aquí. Editar o eliminar este texto en línea o en la configuración del contenido del módulo.
Diseñe la lista de propaganda y luego actualice el diseño para la lista de los siguientes:
Fuente de la lista inordinada: Open Sans
Fuente de la lista desordenada Peso: semi audaz del texto de la lista desordenada: # 888888
Tamaño del texto de la lista no ordinaria: 16 PX
Lista de altura Línea desordenada: 1.5em
Tipo de estilo de lista desordenado: ninguno
La posición del estilo de la lista no ordinaria: dentro
Alemento de la lista desordenada: 1 PX
Diseño de iconos de propaganda
Icono de color: #ffffff
Color círculo: # 333333
Color Edge Circle: # 333333
Colocación de la imagen / icono: izquierda
Icono de tamaño de fuente: 30 PX
El tamaño de la fuente de icono combinado con el círculo y el borde debe ser exactamente 50 PX con 50 px. Esto se volverá útil para enfocar el icono sobre la línea realizado por el borde de la fila y el cuadro de sombra.
El margen de las propagaciones para centrar el ícono sobre la línea, debemos mover el ícono a la izquierda con 27 píxeles. Los 27 píxeles representan exactamente la mitad del ancho del icono (25 px) más la mitad de la línea (2 px).
Dimensionamiento para este diseño, es importante darle a nuestra altura un conjunto de altura con una unidad de longitud de píxeles. Esto nos permitirá agregar valores de compensación predecibles del efecto de desarrollo que se basa en una unidad de longitud de píxeles. A medida que moveremos un círculo en el módulo de propaganda de 300 px, necesitamos un valor de altura establecido para hacerlo.
Sin animación antes de olvidar, para eliminar la animación predeterminada que se agrega a todos los íconos de la propaganda.
El índice de blurb Z luego establece el índice z en 1. Esto asegurará que los círculos que agregamos más tarde estarán detrás de los iconos de la propaganda.
Creación del divisor rodante El siguiente paso es crear un divisor que se moldee como un círculo, absolutamente posicionado y luego se moverá a lo largo de la línea de un icono de propaganda al siguiente (300px) en el pergamino. Agregue el divisor Agregar un nuevo módulo divisor en la propaganda 1. Divisor Fundal y luego seleccione no bajo el Divisor del espectáculo y le dé al divisor un color de fondo:
Color de fondo: # E94558
Haga el divisor circular para hacer la división circular, coloque el ancho y la altura al mismo valor (50 px) y establezca el rayo del borde / esquinas redondeadas al 50%.
Ancho: 50 PX
Altura: 50 PX
Esquinas redondeadas: 50%
La posición del divisor luego coloca al divisor detrás del icono de la propaganda, actualizando lo siguiente:
Posición: Absoluto
Brecha horizontal: -27px
Efectos del divisor 1 Una vez que el divisor del círculo está en su lugar, podemos agregar los efectos de desarrollo que crearán el movimiento del “círculo rodante”. Bajo la pestaña de movimiento vertical …
Habilitar el movimiento vertical: sí
Comenzando el desplazamiento: 0 (al 0% de vista)
GAPACIÓN PROMEDIA: 0 (Vista al 50%)
Compensación final: 3 (al 75% de vista)
Nota: El espacio final es 3, que representa 300 PX, de modo que el divisor viaja desde la punta de la propaganda hasta la parte inferior de la propaganda, que es la altura exacta de la propaganda. Debajo de la pestaña de escala hacia arriba y hacia abajo …
Active la escala hacia arriba y hacia abajo: sí
Escala de inicio: 50% (al 50% de vista)
Escala promedio: 50% (a 55% -70% de vista)
Compensación final: 90% (con una vista del 75%)
Asegúrese de establecer el activador del efecto de movimiento en la parte superior del elemento.
Crear el divisor de “Pulse resaltando” El siguiente separador que tenemos que crear agregará un efecto de resaltar de pulso al icono de la propaganda a medida que el círculo rodante lo alcanza o cuando el icono alcanza el 50% (centro) en la ventana de la vista. Para crear el nuevo divisor de impulso, abra el cuadro de visualización de la capa y copie el divisor que acabo de crear. Pulse y resaltar el efecto de desarrollo, luego abra la configuración duplicada y actualice los siguientes efectos: debajo de la pestaña de movimiento vertical.
Activar el movimiento vertical: no
Debajo de la pestaña de escala hacia arriba y hacia abajo …
Escala de inicio: 100% (al 50% de vista)
Escala promedio: 160% (a 51% -54% de vista)
Compensación final: 130% (a 55% de vista)
Esto hará que el divisor del círculo cambie el tamaño del 160% por un corto tiempo antes de sentarse a un tamaño ligeramente más grande que el ícono de la propaganda. Esto causará el efecto de pulso y luego el efecto de resaltar.
Etiquete los primeros tres módulos para una mejor organización, etiquete el primer grupo de tres módulos de la siguiente manera:
Propaganda
Corredor1
PULS1
Duplicar los primeros tres módulos Ahora debemos continuar este proceso para crear más elementos de eventos en cronología con efectos de desarrollo. Para hacer esto, copie los primeros tres módulos y péguelos a continuación, asegurándose de que mantengan el pedido original (Blurb 1, Runner 1, Pulse1).
Luego cambie el nombre de los módulos duplicados de la siguiente manera:
blurb2
corredor2
PULS2
Actualice la posición del Circle Circle 2 Luego, actualice el círculo de la banda de rodadura (Runner 2) con un nuevo desplazamiento vertical que comienza desde el segundo módulo de propaganda, exactamente 300px en la página.
Ejecutando los efectos de desplazamiento del divisor Circle 2 y luego actualice el efecto de desplazamiento de la siguiente manera: debajo de la pestaña de escala hacia arriba y hacia abajo …
Escala de inicio: 100%
Actualizar Posición de Pulse Divider 2 Después de que se haya actualizado “Runner 2”, abra la configuración para el segundo divisor de impulso (Pulse 2) y actualice el desplazamiento vertical.
Brecha vertical: 300 px
Que cuida a nuestro segundo grupo. Hagamos uno más. Duplique el segundo grupo de tres módulos para crear el tercer grupo de módulos, copiar el segundo grupo (blurb2, rUnner2, PULSE2) y pegarlos a continuación, asegurándose de mantener el mismo orden.
Actualice la posición de división del Círculo Rolling 3 actualiza el divisor de los círculos de la banda de rodadura 3 (Runner3) con un nuevo desplazamiento vertical que comienza desde el siguiente icono de la propaganda.
Brecha vertical: 600 px
Actualice la posición del divisor de impulso 3 y luego abra la configuración para el divisor del impulso (Pulse 3) y dale el mismo desplazamiento.
600px de compensación vertical
En este momento, puede continuar agregando más elementos a la cronología siguiendo estos tres pasos:
Duplicar el grupo anterior de tres módulos
Actualizar el divisor de corredores con 300 PX desplazamiento vertical elevado
Actualice el divisor de impulso con desplazamiento vertical elevado por 300 PX
Flipping Blurb 2 En este momento, todos los eventos se encuentran en el lado derecho de la línea dentro de la fila. Para crear un diseño más equilibrado, podemos revocar la segunda propaganda, de modo que esté en el lado derecho. Para esto, abra la configuración de la propaganda y actualice lo siguiente: Alineación de texto: Derecha (escritorio), izquierda (teléfono)
Transformar el eje x x: -250 px (escritorio), 0 px (teléfono)
CSS personalizado entonces, agregue los siguientes CSS personalizados al elemento principal: Dirección: RTL; Y luego en la pestaña del teléfono, agregue lo siguiente: Dirección: RTL; Luego agregue los siguientes CSS personalizados en la imagen de la propaganda: Pading-Left: 15px debajo de la pestaña del teléfono, agregue lo siguiente: Pading-Left: 0px
Ampliando el comienzo del divisor Circle 1 como un toque final, para regular el primer divisor del círculo de carrera (corredor 1), de modo que comience por encima del primer icono de la propaganda. Para esto, abra la configuración del corredor 1 y actualice lo siguiente:
Comenzando el desplazamiento: -4
Resultado final Verifique el resultado final en el escritorio y el móvil. Pensamientos finales La aparición de la cronología Div tiene un diseño elegante, con efectos de desarrollo que son útiles para el usuario. Además, el diseño parece tener interminables variaciones posibles para explorar nuevos efectos. Esperamos que esto sea útil para su próximo proyecto. Espero tener noticias suyas en los comentarios. ¡Suerte!
