Creación de la navegación lateral de la columna personalizada para un e-pagadores con div Div

Cuando decide crear un solo buscapersonas, la experiencia del usuario de la navegación se vuelve completamente diferente. Aunque las personas no están destinadas a abandonar la página, desea que su estadía sea fácil de usar. Por lo tanto, la mayoría de los paginos únicos usan los enlaces de anclaje en la página. Puede colocar estos enlaces de anclaje en un menú tradicional desde arriba o puede elegir la navegación lateral. En este tutorial, le mostraremos cómo crear un hermoso diseño de navegación lateral para su página utilizando las nuevas opciones de las columnas de la Divica. Se ajustaremos a todos los elementos en una altura de 100 ventanas para crear una experiencia de pantalla completa. ¡Podrá descargar el archivo JSON de forma gratuita!
Vamos a eso. Vista previa antes de arrojar nuestras cabezas en el tutorial, para echar un vistazo rápido al resultado en diferentes tamaños de pantalla. Escritorio

Móvil

Descargue el aspecto de navegación lateral de la columna de forma gratuita para poner su mano en el aspecto de navegación lateral gratuito, 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!
¡Comencemos a recrear! Suscríbase a nuestro canal de YouTube Crear una nueva página desnuda Lo primero que tendrá que hacer es crear una nueva página vacía. Después de hacer esto, cambie a Visual Builder.
Agregue una nueva sección de color de fondo, ajustaremos todo el contenido de la página en una sola sección, una fila y dos columnas. Agregue una nueva sección habitual a su página con un color de fondo blanco.

Color de fondo: #ffffff
El espacio elimina todos los deflagments predeterminados e inferiores de la sección.

SUS Lingo: 0 PX
Finamiento inferior: 0 PX
Agregue una nueva estructura de columna de fila Continuar agregando una nueva línea utilizando la siguiente estructura de columnas:

Dimensión sin agregar módulos, abra la configuración de la fila y cambie la configuración de tamaño en consecuencia:

Igualar las alturas de la columna: sí
Ancho: 100%
Ancho máximo: 100%
Altura: 100 VH
Cambio de espaciado a la configuración de espaciado y elimine todos los rellenos predeterminados e inferiores.

SUS Lingo: 0 PX
Finamiento inferior: 0 PX
Configuración Columna 1 Después de haber completado la configuración de la fila general, abra la configuración de la columna 1. El color de fondo agregue un fondo blanco.

Color de fondo: #ffffff

Sombra de caja con un tono de caja sutil.
Posición horizontal de la sombra de la caja: 80 px

Poder de poco claro de la sombra de la caja: 75 px
Color de la sombra: RGBA (0.0,0,07)
Escala de transformación también, reducimos el tamaño de la columna vertebral en el escritorio.
La parte inferior: 75% (escritorio), 100% (tableta y teléfono)

Derecha: 75% (escritorio), 100% (tableta y teléfono)
Transformar la traducción Cambiar la posición de la columna utilizando algunas configuraciones de traducción personalizadas para la transformación.
La parte inferior: -5VW (escritorio), 0 px (tableta y teléfono)

Derecha: 0 PX
Configuración de la columna 2 Continuar abriendo la configuración de la columna 2.
Pase de espacio a la pestaña de diseño y agregue los siguientes valores de llenado izquierdo y derecho en diferentes tamaños de pantalla:

ENLIZACIÓN IZQUIERDA: 2VW (escritorio), 4VW (tableta), 5VW (teléfono)

Revestimiento derecho: 2VW (escritorio), 4VW (tableta), 5VW (teléfono)
Clase CSS Más adelante en la publicación, agregaremos una carrera suave y ocultaremos la barra de desplazamiento. Para hacer esto, necesitaremos agregar una clase CSS personalizada a la columna.
Clase CSS: columna de desplazamiento

Visibilidad Los módulos que agregamos a la segunda columna representarán el contenido de nuestra página. Para permitir el desarrollo, cambiaremos la configuración del derrame.
Desbordamiento horizontal: oculto

Desbordamiento vertical: desplazamiento
Agregue el módulo de texto del elemento del menú a la columna 1 ¡Agregue una copia para comenzar a agregar módulos! Agregue un módulo de texto del primer elemento de menú en la columna 1 con un contenido de su elección.
Agregue un enlace Agregar un enlace de anclaje al elemento del menú.

Configuración de texto Vaya a la pestaña Diseño y cambie la configuración de texto en consecuencia:

Texto de fuente: Montserrat
Alineación de texto: Centro

Color de texto: # 383838
Tamaño del texto: 3VW
Espacio de letras de texto: -3px (escritorio), -2px (tableta), -1px (teléfono)
El espacio agregue algunos valores personalizados de los bordes superiores e inferiores.
Margen superior: 23VW (escritorio), 3VW (tableta y teléfono)
Margen inferior: 3VW (escritorio), 2VW (tableta), 1VW (teléfono)

Clonar el menú dos veces después de haber completado el primer elemento de menú, clon dos veces.
Cambie el contenido de ambos duplicados, cambie el contenido del elemento del menú de ambos duplicados.
Cambie los enlaces de ambos duplicados junto con enlaces de anclaje.

Duplicado 1: / # sobre

Servicios duplicados de 2: / #

Cambie el duplicado Ambos espacio Complete los duplicados cambiando los valores de espacio en consecuencia:
Margen superior: 3VW (escritorio), 2VW (tableta), 1VW (teléfono)
Margen inferior: 3VW (escritorio), 2VW (tableta), 1VW (teléfono)

Agregue un módulo divisor a la visibilidad de la columna 1 Agregue un módulo divisor directamente entre el primer y segundo módulo de texto en la columna 1. Asegúrese de que la opción “Pantalla” esté activada.
Divisor del espectáculo: si
La línea cambia el color de la línea aún más.

Color de línea: # FFEBC9
Dimensión con configuración de dimensionamiento.


Peso del divisor: 1VW
Altura: 0px

Módulo de clon Divider Clon el módulo divisor y coloque el duplicado debajo del segundo módulo de texto.
Agregue el módulo de seguimiento de las redes sociales a la columna 1 Agregue las próximas redes sociales y el último módulo que necesitamos en la columna 1 es un módulo de seguimiento social. Agregue las redes sociales a su elección. Alineación luego, acceda a la pestaña de diseño y cambie la alineación del módulo.
Alineación del módulo: centro

Difundir el cambio de los valores de los bordes continúa.

Margen superior: 12VW (escritorio), 5VW (tableta y teléfono)

Margen inferior: 3VW (tableta y teléfono)
Borde y agregue “50VW” a cada esquina para crear una forma circular.

Agregue el módulo de imagen a la columna 2 ¡Cargue la imagen que nos movemos a la segunda columna! Agregue todos los módulos que desee, pero no olvide agregar un CSS de ID a cada módulo que desea consultar un enlace de anclaje. Si desea recrear el diseño exacto que se ha mostrado en la vista previa de esta publicación, comience agregando un módulo de imagen y cargando una imagen de su elección.
Alineación Vaya a la pestaña Diseño y elija la alineación de la imagen a la izquierda.
Alineación de imágenes: izquierda

La dimensión cambia la configuración de dimensionamiento adicional.

Fuerza el ancho completo: si

Espacio y agregue un relleno adecuado.
Junta derecha: 20 VW

ID CSS Eventualmente accede a la pestaña avanzada y agregue la primera ID de CSS. Asegúrese de que coincida con el enlace de anclaje del primer elemento de menú.
ID CSS: Inicio

Agregue el módulo de texto de título en la columna 2 Agregue el interruptor H2 de contenido al siguiente módulo, que es un módulo de texto. Ingrese un contenido H2 de su elección.
Configuración de texto H2 Cambiar a la pestaña de diseño y cambiar la configuración de texto H2 en consecuencia:

2 Sección de fuentes: Montserrat
Título 2 Alineación del texto: Izquierda

2 Color de texto: # 383838Titlul 2 Dimensión de texto: 2VW (escritorio), 4VW (tableta), 5VW (teléfono)

Rúbrica 2 Espaciación de litros: -1 PX
Espaciado Agregue algunos valores de margen personalizados.
Margen superior: 6VW (escritorio), 10VW (tableta), 12VW (teléfono)
Margen inferior: 2 VW (escritorio), 4VW (tableta), 6VW (teléfono)
Agregue el módulo divisor a la visibilidad de la columna 2 La siguiente forma en que necesitamos es un módulo divisor. Asegúrese de que se active la opción “Muestra el divisor”.
Divisor del espectáculo: si

Línea cambia el color de la línea.
Color de línea: # FFEBC9
Dimensión y modifique la configuración de tamaño en consecuencia:

Peso del divisor: 15 PX
Ancho: 16%

Alineación del módulo: izquierda
Agregue el módulo de texto del cuerpo a la columna 2 Agregar contenido Agregue otro módulo de texto a la segunda columna con un contenido de párrafo.

Configuración de texto Vaya a la pestaña Diseño y cambie la configuración de texto en consecuencia:
Texto de fuente: Roboto
Alineación de texto: justificar
Color de texto: # A8A8A8

Tamaño de texto: 1VW (escritorio), 2VW (tableta), 3VW (teléfono)

Texto de la carta de espacio: 1 PX
Altura de la línea de texto: 2VW (escritorio), 3.5VW (tableta), 4.5VW (teléfono)
El espacio agregue algunos valores de espaciado personalizados.
Margen superior: 3VW (escritorio), 5VW (tableta), 7VW (teléfono)
Margen inferior: 3VW (escritorio), 5VW (tableta), 7VW (teléfono)
Margen derecho: 20VW (escritorio y tableta), 5VW (teléfono)
Agregue un módulo de botón a la columna 2 Agregar contenido Continuar agregando un botón con una copia de su elección.

Alineación Seleccione la alineación del botón izquierdo en la pestaña de diseño.
Alineación de botones: izquierda
Botón Cambiar la configuración del botón según:
Use estilos personalizados para el botón: Botón de texto de Dadimension: 1VW (escritorio), 2VW (tableta), 3VW (teléfono)

El color del texto del botón: #ffffff

El color de fondo del botón: # 0072ff
El ancho del nudo del botón: 0 PX

El rasgo de botón de botón: 0 px
Botón de fuente: Montserrat
Peso de fuente de fuente: semi audac.
Espacio y jugar con los valores de espaciado.
Margen superior: 4VW (escritorio), 6VW (tableta), 8VW (teléfono)
Margen inferior: 4VW (escritorio), 6VW (tableta), 8VW (teléfono)
Revelaje superior: 1.5VW (escritorio), 3VW (tableta), 4VW (teléfono)
Bajo forro: 1.5VW (escritorio), 3VW (tableta), 4VW (teléfono)
ENLIZACIÓN IZQUIERDA: 3VW (escritorio), 6VW (tableta), 8VW (teléfono)


Revestimiento derecho: 3VW (escritorio), 6VW (tableta), 8VW (teléfono)
Clon todos los módulos en la columna 2 dos veces y coloque en el mismo orden después de haber completado todos los módulos en la columna 2, puede clonar dos veces y colocarlos en el orden correcto.
Cambie la ID CSS del módulo de imagen duplicada # 1 Cambie la ID CSS del primer módulo de imagen duplicada.
ID CSS: aproximadamente
Cambie la ID CSS del módulo de imagen duplicada # 2 Haga lo mismo para el segundo módulo de imagen duplicada.
ID de CSS: servicios
Oculte la barra de desplazamiento y agregue un suave en ejecución de la configuración de la página ahora, para crear un efecto de desplazamiento suave y ocultar la barra de desplazamiento de la columna 2, agregaremos algunas líneas de código CSS. Abra la configuración de la página.

Agregue CSS personalizado luego, acceda a la pestaña avanzada y agregue un código CSS. Después de haber recorrido este paso, ¡ha terminado! .scroll-column ::-Webkit-scrollbar {

Pantalla: ninguno;
}

.scroll-column {
Behavior de desplazamiento: suave;

}

Vista previa ahora que hemos dado todos los pasos, para echar un vistazo final al resultado en diferentes tamaños de pantalla.Escritorio
Pensamientos finales En esta publicación, le mostré cómo crear una hermosa navegación en la columna para una sola página, con las nuevas opciones de la columna de la Divic.Esta es una excelente manera de agregar enlaces de anclaje a su página, lo que lo ayudará a mejorar la experiencia de usuario de su usuario.Si tiene alguna pregunta o sugerencia, asegúrese de dejar un comentario en la sección de comentarios a continuación.Si está ansioso por obtener más información sobre Divi y obtener más regalos de la Divicidad, asegúrese de suscribirse a nuestro boletín de correo electrónico y al canal de YouTube para que siempre sea una de las primeras personas en conocer y obtener beneficios de este contenido gratuito.