homefinance blog
Las nuevas opciones de posición adhesiva de la Divic abren la puerta para muchas posibilidades de diseño nuevas e interesantes. En este tutorial, le mostraremos cómo combinar las opciones de posición pegajosa de Divi con enlaces de ejecución suaves para crear una manera de acordeón para indexar y navegar por la página. La construcción es muy fácil con las opciones de división construidas, por lo que no se necesita CSS adicional u otro código. Una vez que haya terminado, tendrá una forma única de organizar su página y aumentar su experiencia de usuario en escritorio y móvil. ¡Vamos a empezar!
Él saca la vista con un vistazo rápido al diseño que construiremos en este tutorial. Aquí puede ver los títulos de las páginas pegajosas pegadas a la parte superior e inferior de la ventana del navegador y apilados uno encima del otro como acordeón. Aquí puede ver eso haciendo clic en uno de los títulos adhesivos, saltará (usando enlaces de anclaje suave) en esa sección de la página, como un acordeón. Aquí está la funcionalidad en el móvil. Descargue el aspecto gratuito para poner su mano en los dibujos en este tutorial, primero deberá 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. Se ha suscrito correctamente. ¡Consulte su correo electrónico para confirmar su suscripción y obtener acceso a paquetes de diseño semanales gratuitos!
Para importar la aparición de la sección en la Biblioteca de la Divica, navegue en la Biblioteca de la Divica.
Haga clic en el botón Importar. En la ventana de portabilidad emergente, seleccione la pestaña Importar y elija el archivo de descarga en su computadora. Luego haga clic en el botón Importar.
Después de haber terminado, la aparición de la sección estará disponible en Divi Builder. Pasemos al tutorial, ¿no? Qué necesitas para empezar
Para comenzar, deberá 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”.
Después de eso, tendrá un lienzo vacío para comenzar a diseñar en el Div.
Creando la fila pegajosa para comenzar, para crear nuestro giro pegajoso. Para hacer esto, agregue una fila con una columna a la sección predeterminada.
Abra la configuración de la fila. En la pestaña avanzada, actualice la posición adhesiva de la siguiente manera:
Posición pegajosa: Pegue desde la parte superior e inferior
Esto hará que la fila permanezca en la parte superior de la ventana del navegador mientras el usuario se ejecuta y luego permanece en la parte inferior de la ventana del navegador mientras el usuario se ejecuta. Stylling Row Sticky ahora, la posición pegajosa está en posición, podemos comenzar a Cubra el giro con la opción de estilo pegajoso construido, que le permite darle al elemento un estilo específico cada vez que la posición pegajosa esté en vigor (o bloqueada). Para una fila, queremos que el fondo cambie en un color oscuro cuando esté en la posición bloqueada. Para esto, abra la configuración de la fila y actualice lo siguiente:
Color de fondo (escritorio): #ffffff
Color de fondo (Sticky): # 051923
En la pestaña Diseño, actualice lo siguiente:
Use el ancho personalizado de la canaleta: sí
El ancho de la canaleta: 1
Ancho (tableta y teléfono): 100%
Forro: 0 px arriba, 0 px abajo
Luego queremos dar un borde inferior a la fila para servir como una línea de separación entre el título y el contenido a continuación. Y, una vez que la fila está en una posición pegajosa, queremos mostrar un borde izquierdo. En el borde de la opción Edge, actualice lo siguiente:
Color del borde: # 6EEB83
Ancho de borde inferior (escritorio): 8 PX
Ancho del borde inferior (pegajoso): 0 px
Ancho del borde izquierdo (escritorio): 0 PX
Ancho de borde izquierdo (pegajoso): 8 PX
Creando el texto del encabezado STAKA Para crear el texto del encabezado de texto, agregue un nuevo módulo de texto en una fila.
Luego pegue el siguiente HTML en contenido del cuerpo.
Paso 2: s ed do eiusmod tempor incidente
y actualice el color de fondo al salir …
El color del fondo (desplazamiento): RGBA (255.255.255.0.2) esto hará que sea más obvio que los títulos se puedan hacer clic para el usuario.
Estilo del texto del encabezado pegado en la pestaña Diseño, actualice lo siguiente:
2 Sección de fuentes: Montserrat
Título 2 Alineación del texto: Izquierda
2 color de texto (escritorio): predeterminado (o negro)
Título 2 Color de texto (Sticky): #ffffff
Título 2 Dimensión de texto: 80 PX (escritorio), 22 PX (Sticky), 28 PX (teléfono)
Altura de línea 2 Sección: 1.3em (escritorio), 1em (pegajosa)
Luego actualice el relleno de la siguiente manera:
Revestimiento (escritorio): 15 px arriba, 15 px abajo
Forro (pegajoso): 10 px arriba, 0 px abajo, 20 px izquierda
Revestimiento (tableta y teléfono): 15 px arriba, 15 px abajo, 15 px izquierda, 15 px a la derecha
Creando el contenido de la página simulada Una vez que la fila Sticky está en su lugar, podemos agregar otra fila que contenga un contenido de página falso bajo el título. Para hacer esto, cree una nueva fila con una sola columna debajo de la fila pegajosa.
Luego agregue un nuevo módulo de texto en una fila y pegue un cierto contenido falso.
La duplicación de la sección según sea necesario para los valores y el contenido de la página más pegajoso en este momento, tiene el diseño básico para crear secciones de página adicionales con títulos adhesivos, simplemente duplicando la sección.
Sección duplicada Para crear otra sección, copie la sección existente que contiene el giro / encabezado pegajoso y el giro del contenido simulado. Esto acelerará el proceso de desarrollo de la sección de la página siguiente.
Actualice el contenido del texto y el color del marco de fila en la sección duplicada, actualice el texto dentro del módulo de texto y luego actualice el color del cuadro en la configuración de la fila. Repita según sea necesario para copiar la sección y actualizar el contenido del texto y el color de la fila, según sea necesario. Para este ejemplo, reproduciremos la sección dos veces, para darnos un total de cuatro páginas pegajosas que componerán el acordeón.
La adición de enlaces de anclaje a páginas adhesivas en este momento, la funcionalidad permitirá al usuario desplazarse hacia abajo y tener valores atascados en la parte superior e inferior, como acordeón. Ahora queremos hacer los valores, por lo que cuando el usuario haga clic en uno de los títulos adhesivos, el usuario será llevado a esa sección de la página. Esto se realiza con enlaces de anclaje. Para agregar un enlace de anclaje, primero debemos agregar una ID de CSS a la sección a la que queremos cruzar el enlace. Agregue la sección 1 ID CSS Abra la configuración de la sección y agregue la siguiente ID de CSS:
ID CSS: uno
Luego abra la configuración para la fila pegajosa y agregue la siguiente URL de URL:
URL del enlace: #One
Ahora, cuando el usuario hace clic en una fila / encabezado, la página pasará a esta primera sección.
Agregue la sección 2 ID CSS Luego, debemos agregar el enlace de anclaje para la segunda sección. Abra la configuración de la segunda sección y agregue el siguiente ID CSS:
ID CSS: Dos
Agregue la Sección 1 URL de la fila pegajosa y luego abra la configuración para la fila pegajosa desde la segunda sección y agregue la URL del enlace de la fila: URL del enlace de la fila: #TWO
Agregue la sección 3 ID CSS Luego, debemos agregar el enlace de anclaje para la tercera sección. Abra la configuración de la tercera sección y agregue el siguiente ID CSS:
ID CSS: tres
Agregue la Sección 1 URL del enlace de fila pegajosa y luego abra la configuración para la fila pegajosa dentro de la tercera sección y agregue la URL del enlace:
URL del enlace de la fila: #three
Agregue la sección 4 ID CSS Finalmente, debemos agregar el enlace de anclaje a la cuarta sección. Abra la configuración de la cuarta sección y agregue el siguiente ID CSS:
ID CSS: cuatro
Agregue la Sección 1 URL del enlace de fila pegajosa y luego abra la configuración para la fila pegajosa desde la cuarta sección y agregue la URL del enlace:
La URL del enlace de la fila: # cuatro
