Creación de navegación lateral de columna personalizada para una página con Divi

Cuando decide crear un paginador, la experiencia del usuario de navegación se vuelve completamente diferente. Aunque las personas no deben abandonar la página, sí desea que su estadía sea fácil de usar. Es por eso que la mayoría de los usuarios de una página utilizan enlaces de anclaje en la página. Puede colocar estos enlaces de anclaje en un menú superior tradicional o elegir navegación lateral en su lugar. En este tutorial, le mostraremos cómo crear un hermoso diseño de navegación lateral de columna para su página utilizando las nuevas opciones de columnas de Divi. Colocaremos todos los elementos en una altura de ventana de 100 para crear una experiencia de pantalla completa. ¡También podrá descargar el archivo JSON de forma gratuita!

Hagámoslo.

Avance

Antes de sumergirnos en el tutorial, echemos un vistazo rápido al resultado en diferentes tamaños de pantalla.

Escritorio

Móvil

Descargue el diseño de navegación lateral de la columna GRATIS

Para poner sus manos en el diseño de navegación lateral de la columna libre, primero deberá descargarlo usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestra lista de correo electrónico Divi Daily mediante el formulario a continuación. ¡Como nuevo suscriptor, recibirás aún más bondad Divi y un paquete Divi Layout gratis todos los lunes! Si ya está en la lista, simplemente ingrese su dirección de correo electrónico a continuación y haga clic en descargar. No se le “volverá a suscribir” ni recibirá correos electrónicos adicionales.

Descarga los archivos

Descárgalo gratis

Únase al boletín de Divi y le enviaremos por correo electrónico una copia del último paquete de diseño de página de destino de Divi, además de toneladas de otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguelo y serás un maestro de Divi en poco tiempo. Si ya está suscrito, simplemente escriba su dirección de correo electrónico a continuación y haga clic en descargar para acceder al paquete de diseño.

DESCARGAR

Te has suscripto satisfactoriamente. ¡Verifique su dirección de correo electrónico para confirmar su suscripción y obtenga acceso a paquetes de diseño Divi semanales gratuitos!

¡Empecemos a recrear!

Suscríbete a nuestro canal de Youtube

Crear nueva página en blanco

Lo primero que debe hacer es crear una nueva página en blanco. Una vez que lo haga, cambie a Visual Builder.

Agregar nueva sección

Color de fondo

Vamos a encajar todo el contenido de nuestra página en una sección, una fila y dos columnas. Agregue una nueva sección regular a su página con un color de fondo blanco.

• Color de fondo: #FFFFFF

Espaciado

Elimine todo el acolchado superior e inferior predeterminado de la sección.

• Relleno superior: 0px
• Acolchado inferior: 0px

Agregar nueva fila

Estructura de la columna

Continúe agregando una nueva fila usando la siguiente estructura de columnas:

Dimensionamiento

Sin agregar ningún módulo todavía, abra la configuración de fila y cambie la configuración de tamaño en consecuencia:

• Ecualizar alturas de columna: Sí
• Ancho: 100%
• Ancho máximo: 100%
• Altura: 100vh

Espaciado

Continúe con la configuración de espaciado y elimine todo el relleno superior e inferior predeterminado.

• Relleno superior: 0px
• Acolchado inferior: 0px

Configuración de la columna 1

Una vez que haya completado la configuración general de la fila, abra la configuración de la columna 1.

Color de fondo

Agrega un color de fondo blanco.

• Color de fondo: #FFFFFF

Sombra de la caja

Junto con una sutil sombra de caja.

• Posición horizontal de la sombra del cuadro: 80px
• Fuerza de desenfoque de sombra de caja: 75px
• Color de sombra: rgba (0,0,0,0.07)

Transformar escala

También estamos reduciendo el tamaño de la columna en el escritorio.

• Abajo: 75% (escritorio), 100% (tableta y teléfono)
• Derecha: 75% (escritorio), 100% (tableta y teléfono)

Transformar Traducir

Cambie la posición de la columna usando algunas configuraciones de traducción de transformación personalizadas a continuación.

• Abajo: -5vw (escritorio), 0px (tableta y teléfono)
• Derecha: 0px

Configuración de la columna 2

Continúe abriendo la configuración de la columna 2.

Espaciado

Vaya a la pestaña de diseño y agregue los siguientes valores de relleno izquierdo y derecho en diferentes tamaños de pantalla:

• Acolchado izquierdo: 2vw (escritorio), 4vw (tableta), 5vw (teléfono)
• Relleno derecho: 2vw (escritorio), 4vw (tableta), 5vw (teléfono)

Clase CSS

Más adelante en la publicación, agregaremos un desplazamiento suave y ocultaremos la barra de desplazamiento. Para hacer eso, necesitaremos agregar una clase CSS personalizada a la columna.

• Clase CSS: columna de desplazamiento

Visibilidad

Los módulos que agreguemos en la segunda columna representarán el contenido de nuestra página. Para permitir el desplazamiento, cambiaremos la configuración de desbordamiento.

• Desbordamiento horizontal: oculto
• Desbordamiento vertical: desplazamiento

Agregar módulo de texto de elemento de menú a la columna 1

Agregar copia

¡Comencemos a agregar módulos! Agregue un primer elemento de menú Módulo de texto a la columna 1 con algún contenido de su elección.

Añadir enlace

Agregue un enlace de anclaje al elemento del menú.

• URL del enlace del módulo: www.yourwebsite.com/yourpage/#home

Configuración de texto

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

• Fuente de texto: Montserrat
• Alineación de texto: centro
• Color del texto: # 383838
• Tamaño del texto: 3vw
• Espaciado de letras de texto: -3px (escritorio), -2px (tableta), -1px (teléfono)

Espaciado

A continuación, agregue algunos valores de margen superior e inferior personalizados.

• Margen superior: 23vw (escritorio), 3vw (tableta y teléfono)
• Margen inferior: 3vw (escritorio), 2vw (tableta), 1vw (teléfono)

Clonar elemento de menú dos veces

Una vez que haya completado el primer elemento del menú, clónelo dos veces.

Cambiar el contenido de ambos duplicados

Cambie el contenido del elemento de menú de ambos duplicados.

Cambiar enlaces de ambos duplicados

Junto con los enlaces de anclaje.

• Duplicar 1: / # acerca de
• Duplicado 2: / # servicios

Cambiar el espaciado de ambos duplicados

Complete los duplicados cambiando los valores de espaciado en consecuencia:

• Margen superior: 3vw (escritorio), 2vw (tableta), 1vw (teléfono)
• Margen inferior: 3vw (escritorio), 2vw (tableta), 1vw (teléfono)

Agregar módulo divisor a la columna 1

Visibilidad

Agregue un módulo divisor justo entre el primer y el segundo módulo de texto en la columna 1. Asegúrese de que la opción 'Mostrar divisor' esté habilitada.

• Mostrar divisor: Sí

Línea

A continuación, cambie el color de la línea.

• Color de línea: # ffebc9

Dimensionamiento

Junto con la configuración de tamaño.

• Peso del divisor: 1vw
• Alto: 0px

Módulo divisor de clonación

Clone el módulo divisor y coloque el duplicado debajo del segundo módulo de texto.

Agregue el módulo de seguimiento de redes sociales a la columna 1

Agregar redes sociales

El siguiente y último módulo que necesitamos en la columna 1 es un módulo de seguimiento de redes sociales. Agrega las redes sociales que prefieras.

Alineación

Luego, vaya a la pestaña de diseño y cambie la alineación del módulo.

• Alineación del módulo: centro

Espaciado

A continuación, modifique los valores de los márgenes.

• Margen superior: 12vw (escritorio), 5vw (tableta y teléfono)
• Margen inferior: 3vw (tableta y teléfono)

Frontera

Y agregue '50vw' a cada una de las esquinas para crear una forma circular.

Agregar módulo de imagen a la columna 2

Cargar imagen

¡A la segunda columna! Agregue todos los módulos que desee, pero no olvide agregar una ID de CSS a cada módulo al que desee que se refiera un enlace de anclaje. Si desea recrear el diseño exacto que se mostró en la vista previa de esta publicación, comience agregando un Módulo de imagen y cargue una imagen de su elección.

Alineación

Vaya a la pestaña de diseño y elija la alineación de la imagen a la izquierda.

• Alineación de imagen: izquierda

Dimensionamiento

A continuación, cambie la configuración de tamaño.

• Forzar ancho completo: Sí

Espaciado

Y agregue un poco de relleno correcto.

• Acolchado derecho: 20vw

ID de CSS

Por último, vaya a la pestaña avanzada y agregue la primera ID de CSS. Asegúrese de que esto coincida con el enlace de anclaje del primer elemento del menú.

• ID de CSS: Inicio

Agregar módulo de texto de título a la columna 2

Agregar contenido H2

Pasemos al siguiente módulo, que es un módulo de texto. Ingrese algún contenido H2 de su elección.

Configuración de texto H2

Vaya a la pestaña de diseño y cambie la configuración del texto H2 en consecuencia:

• Fuente del encabezado 2: Montserrat
• Alineación del texto del encabezado 2: izquierda
• Encabezado 2 Color del texto: # 383838
• Encabezado 2 Tamaño del texto: 2vw (escritorio), 4vw (tableta), 5vw (teléfono)
• Espacio entre letras del encabezado 2: -1px

Espaciado

A continuación, agregue algunos valores de margen personalizados.

• Margen superior: 6vw (escritorio), 10vw (tableta), 12vw (teléfono)
• Margen inferior: 2vw (escritorio), 4vw (tableta), 6vw (teléfono)

Agregar módulo divisor a la columna 2

Visibilidad

El siguiente módulo que necesitamos es un módulo divisor. Asegúrese de que la opción 'Mostrar divisor' esté habilitada.

• Mostrar divisor: Sí

Línea

Modifica el color de la línea.

• Color de línea: # ffebc9

Dimensionamiento

Y cambie la configuración de tamaño en consecuencia:

• Peso del divisor: 15px
• Ancho: 16%
• Alineación del módulo: izquierda

Agregar módulo de texto del cuerpo a la columna 2

Agregar contenido

Agregue otro módulo de texto a la segunda columna con algún contenido de párrafo de su elección.

Configuración de texto

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

• Fuente de texto: Roboto
• Alineación del texto: justificar
• Color del texto: # a8a8a8
• Tamaño del texto: 1vw (escritorio), 2vw (tableta), 3vw (teléfono)
• Espaciado de letras de texto: 1px
• Altura de la línea de texto: 2vw (escritorio), 3.5vw (tableta), 4.5vw (teléfono)

Espaciado

A continuación, 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)

Agregar módulo de botones a la columna 2

Agregar contenido

Continúe agregando un módulo de botones 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

Cambie la configuración de los botones en consecuencia:

• Usar estilos personalizados para el botón: Sí
• Tamaño del texto del botón: 1vw (escritorio), 2vw (tableta), 3vw (teléfono)
• Color del texto del botón: #ffffff
• Color de fondo del botón: # 0072ff
• Ancho del borde del botón: 0px
• Radio del borde del botón: 0px
• Fuente del botón: Montserrat
• Peso de la fuente del botón: Semi negrita

Espaciado

Y juega también con los valores de espaciado.

• Margen superior: 4vw (escritorio), 6vw (tableta), 8vw (teléfono)
• Margen inferior: 4vw (escritorio), 6vw (tableta), 8vw (teléfono)
• Acolchado superior: 1.5vw (escritorio), 3vw (tableta), 4vw (teléfono)
• Acolchado inferior: 1.5vw (escritorio), 3vw (tableta), 4vw (teléfono)
• Acolchado izquierdo: 3vw (escritorio), 6vw (tableta), 8vw (teléfono)
• Relleno derecho: 3vw (escritorio), 6vw (tableta), 8vw (teléfono)

Clonar todos los módulos en la columna 2 dos veces y colocarlos en el mismo orden

Una vez que haya completado todos los módulos en la columna 2, puede clonarlos dos veces y colocarlos en el orden correcto.

Cambiar la ID de CSS del módulo de imagen duplicada n. ° 1

Cambie el ID de CSS del primer módulo de imagen duplicado.

• ID de CSS: acerca de

Cambiar la ID de CSS del módulo de imagen duplicada n. ° 2

Haga lo mismo con el segundo módulo de imagen duplicado.

• ID de CSS: servicios

Ocultar barra de desplazamiento y agregar desplazamiento suave

Abrir configuración de 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.

Agregar CSS personalizado

Luego, vaya a la pestaña avanzada y agregue algún código CSS. Una vez que haya completado este paso, ¡habrá terminado!

.scroll-column::-webkit-scrollbar {
display: none;
}

.scroll-column {
scroll-behavior: smooth;
}

Avance

Ahora que hemos seguido todos los pasos, echemos un vistazo final al resultado en diferentes tamaños de pantalla.

Escritorio

Móvil

Pensamientos finales

En esta publicación, le mostramos cómo crear una hermosa navegación lateral de columna para su página con las nuevas opciones de columna de Divi. Esta es una excelente manera de agregar enlaces de anclaje a su página que ayudarán a mejorar la experiencia del usuario de su sitio web. 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 aprender más sobre Divi y obtener más obsequios de Divi, asegúrese de suscribirse a nuestro boletín por 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.