Cómo crear una barra de menú deslizante para su sitio web con Divi

Cada semana, le proporcionamos paquetes de diseño Divi nuevos y gratuitos que puede usar para su próximo proyecto. Para uno de los paquetes de diseño, también compartimos un caso de uso que lo ayudará a llevar su sitio web al siguiente nivel.

Esta semana, como parte de nuestra iniciativa de diseño Divi en curso, le mostraremos cómo crear una barra de menú deslizante para su sitio web utilizando el paquete de diseño de agente hipotecario . Esta es una excelente manera de agregar interacción a su sitio web. Tendrá la misma experiencia de usuario en todos los tamaños de pantalla y puede usar esta técnica para cualquier tipo de sitio web que esté creando.

¡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

Deshabilitar la navegación fija en las opciones del tema Divi

Ir a Opciones de tema Divi

¡Empecemos! Lo primero que deberá hacer es ir a las opciones del tema Divi en su sitio web de WordPress.

Deshabilitar navegación fija

Aquí, vamos a deshabilitar la barra de navegación fija. Necesitamos deshabilitar esta opción para deshacernos por completo de la barra de menú principal en nuestra página más adelante en este tutorial.

  • Barra de navegación fija: deshabilitada

Ocultar barra de menú principal en la página

Habilite Visual Builder en la página de inicio del paquete de diseño de agente hipotecario

Continúe yendo a la página que ha creado utilizando la página de destino del paquete de diseño de agente hipotecario y habilite Visual Builder.

Configuración de la página abierta

Vamos a ocultar la barra de menú principal en nuestra página agregando un código CSS. Para agregar este código, abra la configuración de la página.

Agregar código CSS personalizado para ocultar la barra de menú principal

Luego, vaya a la pestaña avanzada y coloque las siguientes líneas de código CSS en el cuadro CSS personalizado:

01
02
03
#main-header {
display: none;
}

Agregar este código ayudará a evitar que la barra de menú principal aparezca en la página.

Crea un diseño de menú personalizado con Divi

Asegúrese de que haya suficiente relleno superior en la sección principal en todos los tamaños de pantalla

Ahora que nos hemos deshecho de la barra de menú principal en nuestra página, ¡podemos comenzar a agregar la barra de menú deslizante en su lugar! Lo primero que deberá hacer es asegurarse de que haya suficiente relleno en la parte superior de su página para que la barra de menú deslizante no se superponga con ningún contenido existente. En particular, para la página de inicio del paquete de diseño de agente hipotecario, eso significa asegurarse de que el relleno personalizado de la columna 1 permanezca en ‘180 px’ en todos los tamaños de pantalla.

  • Relleno superior: 180px

Agregar nueva sección regular al final de la página

¡Es hora de comenzar a crear la barra de menú deslizable personalizada! Agregue una sección regular al final de su página.

Espaciado

Abra la configuración de la sección y elimine todo el relleno superior e inferior predeterminado.

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

Añadir fila

Estructura de la columna

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

Color de fondo

Abra la configuración de la fila y cambie el color de fondo de la fila a blanco.

  • Color de fondo: #ffffff

Dimensionamiento

Luego, abra la configuración de la fila y cambie la configuración de tamaño para permitir que la fila ocupe todo el ancho de la pantalla:

  • Usar ancho de canalón personalizado: Sí
  • Ancho del canalón: 1
  • Ancho: 100%
  • Ancho máximo: 100%

Espaciado

Retire todo el relleno superior e inferior a continuación.

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

Sombra de la caja

Y para asegurarnos de que haya suficiente profundidad entre la barra de menú deslizante y la página en sí, vamos a agregar una sombra de cuadro.

  • Fuerza de desenfoque de sombra de cuadro: 80px
  • Color de sombra: rgba (0,0,0,0,55)

Agregar módulo de imagen

Cargar el logotipo de la empresa

Es hora de comenzar a agregar todos los módulos que queremos que aparezcan en la barra de menú deslizante, comenzando con un módulo de imagen. Sube tu logo usando un archivo de imagen con 226px de ancho y 100px de alto.

Alineación

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

  • Alineación de imagen: Centro

Dimensionamiento

Cambie la configuración de tamaño de la imagen a continuación.

  • Ancho máximo: 75 % (escritorio), 100 % (tableta y teléfono)

Espaciado

Y agregue un poco de relleno superior e inferior personalizado a la imagen también.

  • Relleno superior: 15 px (tableta), 25 px (teléfono)
  • Relleno inferior: 15 px (tableta), 25 px (teléfono)

Agregar módulo de botones

Agregar copia

El segundo módulo que necesitamos es un módulo de botones. Agregue alguna copia de su elección.

Alineación

Luego, ve a la pestaña de diseño y cambia la alineación de los botones.

  • Alineación de botones: Centro

Configuración de botones

Modifique la apariencia del botón siguiente.

  • Usar estilos personalizados para el botón: Sí
  • Tamaño del texto del botón: 0.8vw (escritorio), 1.4vw (tableta), 2.1vw (teléfono)
  • Color del texto del botón: #ffffff
  • Color de fondo del botón: #40eccc
  • Ancho del borde del botón: 0px
  • Radio del borde del botón: 50px
  • Espaciado entre letras de botones: 2px
  • Fuente del botón: Lato
  • Peso de fuente: Pesado
  • Estilo de fuente: Mayúsculas

Espaciado

Y cree la forma que desee utilizando márgenes personalizados y valores de relleno.

  • Margen superior: 15px
  • Margen inferior: 15px
  • Relleno superior: 15px
  • Relleno inferior: 15px
  • Relleno izquierdo: 40px
  • Relleno derecho: 40px

Añadir Módulo de Texto #1

Agregar elemento de menú al cuadro de contenido

El siguiente módulo que necesitamos en nuestra barra de menú deslizante es un módulo de texto. Aquí, vamos a agregar el título de la página al cuadro de contenido.

Añadir enlace

Pase a la configuración del enlace y agregue el enlace correcto al módulo de texto.

Color de fondo

Modifique el color de fondo a continuación.

  • Color de fondo: #f2f2f2

Configuración de texto

Luego, cambie la configuración de texto.

  • Fuente del texto: Lato
  • Peso de fuente de texto: Negrita
  • Color del texto: #000000
  • Tamaño del texto: 0.9vw (escritorio), 1.9vw (tableta), 2.4vw (teléfono)
  • Orientación del texto: Centro

Espaciado

Y agregue un poco de relleno superior e inferior personalizado al módulo también.

  • Relleno superior: 30px
  • Relleno inferior: 30px

Clonar módulo de texto x5 veces

Una vez que haya terminado de modificar el módulo de texto, puede continuar y clonarlo 5 veces.

Cambiar copia

Asegúrate de cambiar el título de la página en cada uno de estos duplicados.

Cambiar enlaces

Junto con los enlaces.

Cambiar colores de fondo

Modifique los colores de fondo del segundo, cuarto y sexto elemento del menú a continuación.

  • Color de fondo: #ffffff

Agregar CSS personalizado a la fila

Elemento principal

Ahora, para asegurarnos de que la barra de menú deslizante se adhiera a la parte superior de la página, necesitaremos agregar algunas líneas de código CSS al elemento principal de la fila.

01
02
03
position:fixed;
top: 0px;
z-index: 99;

Elemento principal de columna

También estamos convirtiendo la columna en una cuadrícula que nos permite desplazarnos. Los porcentajes que puedes ver en el código CSS a continuación indican cuánto espacio ocupa cada uno de los módulos en la grilla. Puede modificar estos valores si desea que su cuadrícula se vea diferente.

01
02
03
overflow-x: scroll;
display: grid;
grid-template-columns: 15% 45% 25% 25% 25% 25% 25% 25%;

Columna Clase CSS

Y para deshacernos de la barra de desplazamiento, también agregaremos una clase CSS a la fila.

 

Eliminar barra de desplazamiento

En la pagina

Puede eliminar la barra de desplazamiento en la página misma abriendo la configuración de la página y agregando las siguientes líneas de código CSS al cuadro CSS personalizado:

01
02
03
.swipe-menu::-webkit-scrollbar {
display: none;
}

En todo el sitio web

Si no desea repetir el mismo paso de ocultar la barra de desplazamiento en cada página individualmente, también puede ir a las opciones del tema Divi y hacer que el código CSS se aplique a todo el sitio web desplazándose hacia abajo en la pestaña general y agregando las siguientes líneas del código CSS al cuadro CSS personalizado:

01
.swipe-menu::-webkit-scrollbar { display: none; }

Guardar como sección como elemento global

Una vez que su barra de menú deslizante funcione correctamente, puede guardarla en su biblioteca Divi como un elemento global y usarla también en otras páginas.

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 barra de menú deslizante para cualquier sitio web que cree con Divi . Esta es una gran técnica para agregar otra dimensión a su sitio web. Este tutorial es parte de nuestra iniciativa de diseño Divi en curso, donde tratamos de poner algo extra en su caja de herramientas de diseño cada semana. Si tiene alguna pregunta o sugerencia, ¡asegúrese de dejar un comentario en la sección de comentarios a continuación!