Cuando decide crear un one-pager, la experiencia de navegación del usuario se vuelve completamente diferente. Aunque las personas no están destinadas a abandonar la página, sí desea que su estadía sea fácil de usar. Es por eso que la mayoría de los one-pagers usan enlaces de anclaje en la página. Puede colocar estos enlaces de anclaje en un menú superior tradicional o elegir la navegación lateral en su lugar. En este tutorial, le mostraremos cómo crear un hermoso diseño de columna de navegación lateral para su página usando Divi y sus nuevas opciones de columnas. Ajustaremos todos los elementos en una altura de ventana gráfica de 100 para crear una experiencia de pantalla completa. ¡También podrá descargar el archivo JSON de forma gratuita!
Hagámoslo.
Antes de sumergirnos en el tutorial, echemos un vistazo rápido al resultado en diferentes tamaños de pantalla.
Escritorio
Móvil
Para poner sus manos en el diseño de navegación lateral de la columna gratuita, primero deberá descargarlo usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestro boletín utilizando 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 será «resuscrito» ni recibirá correos electrónicos adicionales.
@media only screen and ( max-width: 767px ) {.et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_right .et_bloom_form_content:before { border-top-color: #ffffff !important; border-left-color: transparent !important; }.et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_left .et_bloom_form_content:after { border-bottom-color: #ffffff !important; border-left-color: transparent !important; }
}.et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !important; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_fields i { color: #f92c8b !important; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_custom_field_radio i:before { background: #f92c8b !important; } .et_bloom .et_bloom_optin_1 .et_bloom_border_solid { border-color: #f7f9fb !important } .et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !important; } .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2, .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2 span, .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2 strong { font-family: «Open Sans», Helvetica, Arial, Lucida, sans-serif; }.et_bloom .et_bloom_optin_1 .et_bloom_form_container p, .et_bloom .et_bloom_optin_1 .et_bloom_form_container p span, .et_bloom .et_bloom_optin_1 .et_bloom_form_container p strong, .et_bloom .et_bloom_optin_1 .et_bloom_form_container form input, .et_bloom .et_bloom_optin_1 .et_bloom_form_container form button span { font-family: «Open Sans», Helvetica, Arial, Lucida, sans-serif; } p.et_bloom_popup_input { padding-bottom: 0 !important;}
Descárgalo gratis
Únase al boletín informativo 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 muchos otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguenos y serás un maestro 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.
You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!
¡Empecemos a Recrear!
Suscríbete a nuestro canal de Youtube
Crear nueva página en blanco
Lo primero que deberá 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 relleno superior e inferior predeterminado de la sección.
- Relleno superior: 0px
- Relleno 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 la fila y cambie la configuración de tamaño en consecuencia:
- Igualar alturas de columna: Sí
- Ancho: 100%
- Ancho máximo: 100%
- Altura: 100vh
Espaciado
Pase a la configuración de espaciado y elimine todo el relleno superior e inferior predeterminado.
- Relleno superior: 0px
- Relleno 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
Agregue un color de fondo blanco.
- Color de fondo: #FFFFFF
Sombra de la caja
Junto con una sombra de caja sutil.
- Posición horizontal de la sombra del cuadro: 80px
- Fuerza de desenfoque de sombra de cuadro: 75px
- Color de sombra: rgba(0,0,0,0.07)
Escala de transformación
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
Pase a la pestaña de diseño y agregue los siguientes valores de relleno izquierdo y derecho en diferentes tamaños de pantalla:
- Relleno 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 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
Pase a la pestaña de diseño y cambie la configuración del texto en consecuencia:
- Fuente del texto: Montserrat
- Alineación de texto: Centro
- Color del texto: #383838
- Tamaño del texto: 3vw
- Espaciado entre letras de texto: -3 px (escritorio), -2 px (tableta), -1 px (teléfono)
Espaciado
Agregue algunos valores de margen superior e inferior personalizados a continuación.
- Margen superior: 23vw (escritorio), 3vw (tableta y teléfono)
- Margen inferior: 3vw (escritorio), 2vw (tableta), 1vw (teléfono)
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.
- Duplicado 1: /#sobre
- 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)
Agregue el 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
Cambia el color de la línea a continuación.
- Color de línea: #ffebc9
Dimensionamiento
Junto con la configuración de tamaño.
- Peso del divisor: 1vw
- Altura: 0px
Módulo divisor de clones
Clone el módulo divisor y coloque el duplicado debajo del segundo módulo de texto.
Añadir 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 de tu preferencia.
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
Modifique los valores de margen a continuación.
- Margen superior: 12vw (escritorio), 5vw (tableta y teléfono)
- Margen inferior: 3vw (tableta y teléfono)
Borde
Y agrega ’50vw’ a cada una de las esquinas para crear una forma circular.
Agregar módulo de imagen a la columna 2
Cargar imagen
¡A por 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
Pase a la pestaña de diseño y elija la alineación de la imagen a la izquierda.
- Alineación de imagen: Izquierda
Dimensionamiento
Cambie la configuración de tamaño a continuación.
- Forzar ancho completo: Sí
Espaciado
Y agregue un poco de relleno derecho.
- 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 coincida con el enlace ancla del primer elemento del menú.
- ID de CSS: Inicio
Agregar módulo de texto de título a la columna 2
Agregar contenido H2
En el siguiente módulo, que es un módulo de texto. Ingrese algún contenido de H2 de su elección.
Configuración de texto H2
Pase a la pestaña de diseño y cambie la configuración de texto H2 en consecuencia:
- Título 2 Fuente: Montserrat
- Encabezado 2 Alineación de texto: Izquierda
- Título 2 Color del texto: #383838
- Título 2 Tamaño del texto: 2vw (Escritorio), 4vw (Tableta), 5vw (Teléfono)
- Encabezado 2 Espaciado entre letras: -1px
Espaciado
Agregue algunos valores de margen personalizados a continuación.
- Margen superior: 6vw (escritorio), 10vw (tableta), 12vw (teléfono)
- Margen inferior: 2vw (escritorio), 4vw (tableta), 6vw (teléfono)
Agregue el 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
Modificar 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
Agregue el módulo de cuerpo de texto 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
Pase a la pestaña de diseño y cambie la configuración del texto en consecuencia:
- Fuente del texto: Roboto
- Alineación de texto: Justificar
- Color del texto: #a8a8a8
- Tamaño de texto: 1vw (escritorio), 2vw (tableta), 3vw (teléfono)
- Espaciado entre letras de texto: 1px
- Altura de línea de texto: 2vw (escritorio), 3,5vw (tableta), 4,5vw (teléfono)
Espaciado
Agregue algunos valores de espaciado personalizados a continuación.
- Margen superior: 3vw (escritorio), 5vw (tableta), 7vw (teléfono)
- Margen inferior: 3vw (escritorio), 5vw (tableta), 7vw (teléfono)
- Margen derecho: 20vw (computadora de escritorio y tableta), 5vw (teléfono)
Agregar contenido
Continúe agregando un módulo de botones con alguna 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 del botón 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 con los valores de espaciado también.
- 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)
- Relleno izquierdo: 3vw (escritorio), 6vw (tableta), 8vw (teléfono)
- Relleno derecho: 3vw (escritorio), 6vw (tableta), 8vw (teléfono)
Clone todos los módulos en la columna 2 dos veces y colóquelos 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 ID de CSS del módulo de imagen duplicada n.º 1
Cambie la ID de CSS del primer módulo de imagen duplicado.
- ID de CSS: acerca de
Cambiar ID de CSS del módulo de imagen duplicada n.º 2
Haga lo mismo para el segundo módulo de imagen duplicado.
- ID de CSS: servicios
Ocultar barra de desplazamiento y agregar desplazamiento suave
Configuración de la página abierta
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 un código CSS. Una vez que hayas completado este paso, ¡habrás terminado!
|
01
02
03
04
05
06
07
|
.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 regalos de Divi, 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 los beneficios de este contenido gratuito.