homefinance blog
A veces es más conveniente navegar en el contenido de la página haciendo clic en los botones, en lugar de ejecutar. Esto es especialmente cierto para un solo pagadoras o si tiene ciertas secciones secuenciales en una página que garantiza una accesibilidad óptima para los usuarios. La adición de páginas adhesivas de navegación en la parte inferior de las secciones puede ser una alternativa única para que los usuarios ejecuten constantemente o incluyan enlaces de anclaje en el encabezado principal. En este tutorial, le mostraremos cómo agregar la falta de enlaces de navegación de página (el siguiente, primero, el último, el último) a una página en el Div. Esto le permitirá navegar fácilmente a secciones específicas a lo largo de una página.
¡Vamos a empezar! Él saca la vista con un vistazo rápido al diseño que construiremos en este tutorial. Observe cómo cambian los enlaces de navegación pegajosa al desplazar la página. Observe lo fácil que es navegar por cada sección haciendo clic en los enlaces de navegación. Esto es lo que parece mi diseño en dispositivos móviles. Aquí hay un CODEPEN que demuestra la funcionalidad básica. 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.
Agregar enlaces a las páginas de navegación desprovistas de secciones dividió la sección superior de forma predeterminada, habrá una sección ordinaria lista para usar en Divi Builder. Usando la sección predeterminada habitual, abra la configuración de la sección y elimine el relleno inferior de la siguiente manera:
Forro: 0px hacia abajo
Configuración de fila Agregue una fila con una columna a la sección.
Luego actualice la configuración de diseño para una fila de la siguiente manera: Ancho: 100%
Ancho máximo: 80VW (escritorio, tableta), 95VW (teléfono)
El título de la sección para crear el título de la sección, primero, agregue un nuevo módulo de texto en una fila / columna.
Luego actualice el texto del cuerpo con el siguiente título H2:
TOP
En la pestaña Diseño, actualice la configuración de texto para el Título H2 de la siguiente manera:
Seleccione la pestaña H2
2 Sección de fuentes: Montserrat
2 Peso 2 Sección de peso: duro
2 encabezado de estilo de fuente: TT
Título 2 Alineación de texto: Centro
2 Tamaño de texto: 8VW (escritorio, tableta), 61.36 PX (teléfono)
Creando la Sección 1, crearemos nuestra primera sección que contendrá desprovisto de enlaces de navegación. Para crear la Sección 1, copie la sección superior y etiquete la sección duplicada correctamente en las capas.
Sección 1 Color del sótano Abra la configuración de la Sección 1 y actualice el color de fondo:
Color de fondo: # FEC0F4
Sección 1 ID CSS Para anclar la navegación de navegación Para conectarse a esta sección utilizando nuestros enlaces de anclaje, necesitamos agregar una ID de CSS. En la pestaña avanzada, agregue el siguiente ID CSS:
ID CSS: uno
Actualice el texto del título y luego actualice el texto del título en el módulo de texto para leer “Sección 1”.
Creando la fila adhesiva para la sección 1 Una vez que se actualicen la sección y el título, crearemos una fila pegajosa que eventualmente sostendrá nuestras conexiones de navegación. Para hacer esto, agregue una nueva fila con una columna debajo de la fila existente en la Sección 1.
Debido a que nuestra sección no tiene un relleno a continuación, el giro debe ser hermoso en la parte inferior de la sección. Configuración de línea pegajosa Para hacer la fila Rush, debemos actualizar la configuración de la fila. Opciones adhesivas en la pestaña avanzada, actualice las opciones de posición adhesiva de la siguiente manera: Posición pegajosa: Pegue a la parte inferior
Límite superior de aterrizaje: sección
Compensación a los elementos circundantes adhesivos: no
Esto asegurará que la fila pegajosa se incluirá en la sección. Configuración de diseño En la pestaña Diseño, actualice lo siguiente:
Use el ancho personalizado de la canaleta: sí
El ancho de la canaleta: 1
Ancho: 100%
Ancho máximo: 25VW (escritorio, tableta), 50% de teléfono
Alineación de filas: derecha (escritorio, tableta), izquierda (teléfono)
Forro: 0 px arriba, 0 px abajo
Para ocultar el giro (junto con los botones que contendrá), moveremos el giro detrás de la sección debajo utilizando la configuración de traducción de transformación. Luego moveremos la fila a la vista cuando esté en estado pegajoso. Esto le asegurará que los botones solo son visibles cuando están pegajosos. Para hacer esto, haga clic en el icono pegajoso (miniatura) cuando pase con el mouse sobre el título de transformación para activar la pestaña Sticky. Luego actualice las opciones de transformación de la siguiente manera:
Gire el eje y (escritorio): 100%
Gire el eje y (pegajoso): 0%
La posición de compensación eventualmente, tendremos otra fila de palo para el primer y último botón que se adhirirá a la parte inferior derecha de la ventana. Así que tenemos que mover esta fila de la izquierda a la izquierda. Para mover la fila adhesiva, vaya a la pestaña avanzada y actualice las opciones de compensación de posición de la siguiente manera: el origen del desplazamiento:
Compensación horizontal: 25VW (escritorio, tableta), 0 px (teléfono)
Nota: La brecha del teléfono se establece en 0 PX, porque la alineación de la línea se establecerá a la izquierda y el ancho será del 50%.
Columna CSS Sticky Row para garantizar que nuestros botones estén perfectamente adyacentes entre sí y alineados verticalmente, agregaremos un pequeño fragmento CSS personalizado para poner los botones en la apariencia de la cuadrícula CSS. En la pestaña avanzada, agregue los siguientes CSS al elemento principal: Display: Grid;
Columnas de plantilla de cuadrícula: 50% 50%;
Agregar el divisor y el botón siguiente en la fila adhesiva (sección 1) ahora es hora de comenzar a agregar nuestros botones a la columna. Para esta primera sección, solo necesitamos un botón siguiente. Por lo tanto, necesitamos un divisor para servir como sustituto del botón izquierdo. Divitor Agregue un nuevo separador a la columna.
Luego establezca la opción Show Divider en “No”.
El siguiente botón debajo del módulo divisor, agregue un módulo de botón.
Luego actualice la configuración del contenido del botón:
Botón de texto: lo siguiente
La URL del botón: #TWO
La URL “#TWO” se trasladará a la siguiente sección que crearemos con la ID de CSS “Two”.
En la pestaña Diseño, actualice lo siguiente:
Alineación de botones: centro
Use estilos personalizados para el botón: Sí
Tamaño de texto de texto: 2.1VW (escritorio, tableta), 16.1px (teléfono)
El color de texto del texto del botón: # 000000 Fundal del botón: #EEEEEE
El ancho del nudo del botón: 0 PX
Icono del botón: flecha hacia abajo (ver captura de pantalla)
Muestre el icono solo en el flotador para el botón: no
Marja: 2% correcto
Para asegurarse de que el botón se estire sobre todo el ancho de la columna de cuadrícula CSS, agregue los siguientes CSS personalizados al elemento principal: Display: Bloque! Importante; Ancho: 100%;
Creación de la Sección 2 Ahora que he terminado la Sección 1, copie la Sección 1 para crear la Sección 2 y actualice la etiqueta en las capas de capas en consecuencia.
Actualice la sección 2 Color de fondo y texto de título y luego actualice la sección de la sección:
Color de fondo: # 8DC6C1
Luego actualice el texto del título para leer “Sección 2” en el módulo de texto de la fila superior.
Actualizar CSS de ID de la Sección 2 En la pestaña Avanzada, actualice la sección con una nueva ID de CSS:
ID CSS: Dos
Agregue los botones siguientes y anteriores en la fila adhesiva (sección 2) dentro de la fila pegajosa de la Sección 2, elimine el módulo divisor y copie el botón siguiente, para que tenga dos botones.
Actualice la URL del siguiente botón Abra la configuración para el primer botón / izquierda y actualice el botón de la siguiente manera:
La URL del botón: #three
La URL “#Three” se trasladará a la siguiente sección que crearemos con la ID de CSS “tres”.
Agregue el texto del botón anterior y la URL del enlace para hacer el botón anterior, abra la configuración para el segundo botón / derecha y actualice lo siguiente:
El texto del botón: anterior
La URL del botón: #One
La URL “#One” volverá a la sección con la ID de CSS “One”.
Agregue el icono del botón anterior y luego actualice el icono: icono del botón: Arrow Up (consulte la captura de pantalla)
Creación de la Sección 3 Ahora que he terminado la Sección 2, copie la Sección 2 para crear la Sección 3 y actualice la etiqueta en las capas de capas en consecuencia. Actualizar el color de fondo de la sección 3 y el texto del título Agregue un nuevo color de fondo a la sección:
Color de fondo: # 9FA5F4
Luego actualice el texto del título para leer “Sección 3” en el módulo de texto de la fila superior.
Actualizar CSS de ID de la Sección 3 En la pestaña Avanzada, actualice la sección con una nueva ID de CSS:
ID CSS: tres
Agregue el divisor y el botón anterior en la fila pegajosa (Sección 3) Agregue el divisor y elimine el botón siguiente que podríamos continuar y crear cuántas secciones se necesitan para incluir los botones siguientes y anteriores. Pero para este ejemplo, haremos de la Sección 3 la última sección con enlaces de navegación. Entonces, debido a que no necesitaremos un botón siguiente, borre el botón siguiente y reemplácelo con un divisor, como lo hemos hecho en la Sección 1.
Actualice la URL del botón anterior y luego abra la configuración del botón anterior y actualice la URL del enlace:
La URL del botón: #TWO
La URL “#TWO” volverá a la sección con la ID de CSS “Two”.
Creando la sección inferior ahora, que hay 3 secciones complementadas por su funcionalidad en las funciones de vinculación de navegación y ancla, crearemos una sección inferior que servirá como una página que no incluye el no -x / previo. Esto es para demostrar si hay secciones adicionales en la página que pueden no requerir navegación pegajosa. Para crear la sección inferior, simplemente copie la sección superior y tírela debajo de la Sección 3. Para pegarse a la parte inferior de la página y contener nuestro primer y último enlace de navegación (ancla). Esta sección debe estar en la parte inferior de la página, si desea que los enlaces de navegación aparezcan en todas las secciones de la página al ejecutar. En la sección inferior, cree una nueva sección habitual.
Luego, actualice la sección disponible en la visualización del diseño (es decir, la “sección LIPE inferior”). Creando la fila para la primera y última conexión de navegación para agregar más funciones de navegación a nuestra página de sección, crearemos dos botones adicionales (o enlaces de ancla la página. Duplicar la fila adhesiva en la sección 2 y tírelo en la sección inferior pegajosa para crear la fila para el primer y último enlace de navegación, podemos duplicar la fila pegajosa (fila 2) en la sección 2 y tirarla en la nueva sección inferior adhesiva.
Actualice la configuración de la fila para esta última sección, haremos que toda la sección sea pegajosa, para que podamos eliminar la configuración pegajosa heredada de nuestra configuración duplicada y ofrecer una posición absoluta. Abra la configuración de la fila y ejecute lo siguiente: luego actualice las opciones de posición de la siguiente manera:
Posición: Absoluto
Ubicación: abajo a la derecha
Brecha horizontal: 0 px
Posición pegajosa: no pegue
En la pestaña Diseño, reinicie las opciones de giro.
Agregue el primer y último botón para la sección inferior inferior para crear el primer botón, abra la configuración para el botón izquierdo y actualice lo siguiente:
Botón de texto: primero
La URL del botón: #One
Luego actualice el icono del botón a otra flecha hacia arriba.
Para crear el último botón, abra la configuración del botón correcto y actualice lo siguiente:
Botón de texto: último
La URL del botón: #three
Luego actualice el icono del botón a otra flecha hacia abajo.
Actualice la configuración de la sección para la sección inferior pegajosa y luego abra la configuración de la sección y actualice lo siguiente:
Ancho: 100%;
Altura: 0px;
Forro: 0 px arriba, 0 px correcto
Esto prácticamente asegura que la sección no ocupa espacio real en la página. Pero debido a que el giro tiene una posición absoluta, continuará mostrándose sobre la sección.
Finalmente, en la pestaña Avanzada, actualice lo siguiente:
Desbordamiento vertical: visible
Desbordamiento horizontal: visible
Posición pegajosa: adhiérase al fondo
El límite superior pegajoso: el área del cuerpo
Compensación de elementos circundantes adhesivos: no
