¡Tu licencia Divi con un -20% de DescuentoOferta aquí

Crear un menú lateral (barra lateral) personalizado con Divi

Sep 3, 2020 | Tutoriales para Divi

El menú lateral o barra lateral pueden ser útiles para ciertos sitios web que necesitan más elementos de menú a la vanguardia. Los menús laterales pueden ser difíciles de ajustar a todos los enlaces de menú necesarios, especialmente en navegadores de menor ancho. En este tutorial, le mostraremos cómo crear un menú de navegación vertical personalizado usando Divi Theme Builder. Esto le permitirá más espacio para mostrar los elementos del menú de WordPress. Y tendrá plena capacidad para agregar módulos Divi adicionales al encabezado vertical y diseñarlos con el constructor Divi.

Descargar el tutorial GRATIS

Para descargar el fichero JSON de este tutorial, será necesario descargarlo usando el botón de descarga, suscribiendose a nuestra lista de correo electrónico mediante el siguiente formulario. 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 «volverá a suscribir» ni recibirá correos electrónicos adicionales.

Vistazo

Aquí hay un vistazo rápido al diseño que crearemos en este tutorial.

menú de navegación vertical divi y encabezado

menú de navegación vertical divi y encabezado

menú de navegación vertical divi y encabezado

Cargar plantilla de sitio web predeterminada global

Luego, en la esquina superior derecha, verá un ícono con dos flechas. Haga clic en el icono.

plantilla de encabezado y pie de página para el paquete de diseño de dietista de Divi

Vaya a la pestaña de importación, cargue el archivo JSON que pudo descargar en esta publicación y haga clic en ‘Importar plantillas de Divi Theme Builder’.

plantilla de encabezado y pie de página para el paquete de diseño de dietista de Divi

Guardar cambios en Divi Theme Builder

Una vez que haya cargado el archivo, notará un nuevo encabezado y pie de página global en la plantilla de su sitio web predeterminada. Guarde los cambios de Divi Theme Builder tan pronto como desee que se active la plantilla.

plantilla de encabezado y pie de página para el paquete de diseño de dietista de Divi

Vayamos al tutorial, ¿de acuerdo?

Parte 1: Creación de un nuevo encabezado global

Para este tutorial, vamos a construir el menú de navegación vertical en un encabezado global usando Divi Theme Builder. Sin embargo, le mostraremos cómo agregar el mismo menú al cuerpo de una plantilla de página al final de la publicación, en caso de que quiera usarlo además del menú principal de su sitio.

Para comenzar, vaya al Panel de WordPress y navegue a Divi> Theme Builder.

Luego, haga clic en el área «Agregar encabezado global» de la plantilla de sitio web predeterminada y seleccione «Crear encabezado global» en el menú desplegable.

menú de navegación vertical divi y encabezado

Luego seleccione la opción «Construir desde cero».

menú de navegación vertical divi y encabezado

Parte 2: Diseño del diseño de la sección vertical

Dentro del Editor de diseño de encabezado global, abra la configuración de la sección regular que ya está allí y actualice lo siguiente.

  • Ancho (escritorio): 300px
  • Ancho (tableta y teléfono): 100%
  • Altura (escritorio): 100vh
  • Altura (tableta y teléfono): automático
  • Acolchado (escritorio): 4vh arriba, 0px abajo
  • Relleno (tableta y teléfono): 0px arriba, 0px abajo

menú de navegación vertical divi y encabezado

Continúe el diseño agregando una sombra de caja de la siguiente manera:

  • Box Shadow: ver captura de pantalla
  • Posición vertical de la sombra del cuadro: 0px
  • Fuerza de desenfoque de sombra de caja: 20px
  • Fuerza de propagación de la sombra de caja: -10px
  • Color de sombra: rgba (0,0,0,0.3)

menú de navegación vertical divi y encabezado

Para asegurarse de que el menú de navegación vertical permanezca visible a la izquierda mientras el usuario se desplaza, actualice la posición a fija y actualice el índice z de la siguiente manera:

  • Posición: fija
  • Índice Z: 9999

menú de navegación vertical divi y encabezado

Para asegurarnos de que podremos ver la navegación del submenú que se extenderá fuera de la sección, agregue el siguiente CSS personalizado al elemento principal:

01
overflow: visible !important;

menú de navegación vertical divi y encabezado

Ahora su sección está en un diseño vertical en el lado izquierdo de la plantilla.

menú de navegación vertical divi y encabezado

Parte 3: Diseño del menú vertical

Con la sección en su lugar, estamos listos para diseñar el menú vertical. Para hacer esto, usaremos un módulo de menú con CSS personalizado para diseñar la navegación que se mostrará verticalmente.

También usaremos la unidad de longitud vh para que el menú se adapte bien a las diferentes alturas del navegador.

Agregar la fila

Para comenzar, agregue una fila de una columna a la sección.

menú de navegación vertical divi y encabezado

Luego actualice la configuración de la fila de la siguiente manera:

Tamaño y acolchado

  • Ancho del canal: 1
  • Ancho: 100%
  • Ancho máximo: 80%
  • Acolchado (escritorio): 3vh arriba, 3vh abajo
  • Relleno (tableta y teléfono): 0px arriba, 0px abajo

menú de navegación vertical divi y encabezado

Frontera

  • Ancho del borde: 1 px
  • Color del borde: #eeeeee

menú de navegación vertical divi y encabezado

Agregar el módulo de menú

Dentro de la fila de una columna, agregue un nuevo módulo de menú.

menú de navegación vertical divi y encabezado

Seleccione un menú que se mostrará debajo de la palanca de contenido.

menú de navegación vertical divi y encabezado

Luego, agregue el logotipo de su sitio como contenido dinámico debajo de la palanca de logotipo.

menú de navegación vertical divi y encabezado

En la pestaña de diseño, actualice lo siguiente:

  • Estilo: centrado
  • Fuente del menú: Nunito Sans
  • Color del texto del menú: # 535b7c
  • Tamaño del texto del menú: 18px (escritorio), 14px (tableta y teléfono)
  • Altura de la línea del menú: 2em
  • Color de la línea del menú desplegable: # 535b7c
  • Color del enlace activo del menú desplegable: # 535b7c

menú de navegación vertical divi y encabezado

  • Color del icono del carrito de compras: # 535b7c
  • Color del icono de búsqueda: # 535b7c
  • Color del icono del menú de hamburguesas: # 535b7c

menú de navegación vertical divi y encabezado

  • Acolchado (escritorio): 2vh arriba, 2vh abajo
  • Relleno (escritorio): 10px superior, 10px inferior

menú de navegación vertical divi y encabezado

Parte 4: Agregar CSS personalizado para el menú

El menú necesita CSS personalizado para obtener la navegación vertical que buscamos. Para comenzar, vaya a la pestaña avanzada y agregue el siguiente CSS personalizado al enlace del menú y al logotipo del menú.

Enlace de menú CSS (escritorio):

01
02
03
04
05
width: 100%;
padding: 1vh 15px;
background: #f8f8f8;
border-radius: 3px;
border: 1px solid #eeeeee;

Enlace de menú CSS (tableta):

01
02
width: auto;
border:none;

Logotipo de menú CSS:

01
margin-bottom: 20px;

menú de navegación vertical divi y encabezado

A continuación, agregue una clase CSS personalizada al módulo de menú de la siguiente manera:

Clase CSS: et-vert-menu

menú de navegación vertical divi y encabezado

Se usará para apuntar a este menú en particular en nuestro CSS personalizado externo que agregaremos usando un módulo de código.

Agregar CSS personalizado con el módulo de código

En el módulo de menú, agregue un nuevo módulo de código.

menú de navegación vertical divi y encabezado

Luego pegue el siguiente código en el cuadro de código (asegúrese de colocarlo entre las etiquetas de estilo):

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
/*Style Vertical Navigation Menu*/ 
.et-vert-menu .et_pb_menu__menu>nav>ul {
  flex-direction: column;
  margin-left: 0px !important;
  margin-right: 0px !important;
  width: 100%;
  }
.et-vert-menu .et_pb_menu__menu>nav>ul>li {
  margin: 10px 0 !important;
  }
.et-vert-menu .et_pb_menu__menu>nav>ul>li>ul li {
  display:block !important;
  padding: 0px !important;
  }
  .et-vert-menu .et_pb_menu__menu>nav>ul ul {
    padding: 0px !important;
    top: 0px !important;
  }
.et-vert-menu .et_pb_menu__menu>nav>ul>li>ul {
  left:calc(100% - 1px) !important;
  top:0px !important;
  }
.et-vert-menu .et-menu .menu-item-has-children>a:first-child:after {
  content: "5" !important; /*change arrow icon for submenu*/
  right: 20px !important;
  }
.et-vert-menu .nav li ul {
    left: calc(100% - 1px) !important; /*align submenu to the right of menu link*/
  }
@media all and (min-width: 981px) {
.et-vert-menu .et_pb_menu__menu, .et-vert-menu .et_pb_menu__menu>nav {
    width: 100%; /*width of the vertical navigation menu*/
  }
/*Adjust the width of the main content and footer area to make room for the fixed vertical header*/ 
#et-main-area {
  width: calc(100% - 300px);
  margin-left: 300px;
}
}

menú de navegación vertical divi y encabezado

Parte 5: Diseño de los iconos de seguimiento de botones y redes sociales

Ahora que el menú está completo, podemos agregar un botón y algunas redes sociales siguen enlaces para completar el encabezado vertical.

Agregar la fila

Agregue una nueva fila de una columna debajo de la fila actual.

menú de navegación vertical divi y encabezado

Agregar el botón

Luego agregue un nuevo módulo de botones a la fila.

menú de navegación vertical divi y encabezado

Actualice la configuración de los botones de la siguiente manera:

  • Alineación de botones: centro
  • Tamaño del texto del botón: 18px (escritorio), 14px (tableta y teléfono)
  • Color del texto del botón: #ffffff
  • Color de fondo del botón: # 535b7c
  • Ancho del borde del botón: 0px

menú de navegación vertical divi y encabezado

Luego, vaya a la pestaña avanzada y pegue el siguiente CSS personalizado en el elemento principal:

Elemento principal CSS (escritorio)

01
02
display:block;
width: 100%;

Elemento principal CSS (tableta)

01
display:inherit;

menú de navegación vertical divi y encabezado

Adición de los iconos de seguimiento de redes sociales

Debajo del botón, agregue un módulo de seguimiento de redes sociales.

menú de navegación vertical divi y encabezado

Agregue las redes sociales que desee en la pestaña de contenido.

menú de navegación vertical divi y encabezado

En la pestaña Diseño, actualice lo siguiente:

  • Alineación del módulo: centro
  • Color del icono: # 535b7c

menú de navegación vertical divi y encabezadoLuego abra la configuración de cada una de las redes y elimine el color de fondo.

menú de navegación vertical divi y encabezado

Luego agregue un pequeño margen superior de la siguiente manera:

  • Margen: 3vh superior

menú de navegación vertical divi y encabezado

Actualizar configuración de fila

Una vez que los iconos de seguimiento de las redes sociales estén completos, abra la configuración de la fila y ajuste lo siguiente:

  • Ancho del canal: 1
  • Acolchado (escritorio): 3vh arriba, 0px abajo
  • Acolchado (tableta y teléfono): 10px superior

menú de navegación vertical divi y encabezado

Guardar diseño y plantilla

Una vez hecho esto, guarde el diseño y la plantilla.

menú de navegación vertical divi y encabezado

Resultado final

Aquí está el resultado final en una página en vivo.

menú de navegación vertical divi y encabezado

menú de navegación vertical divi y encabezado

menú de navegación vertical divi y encabezado

Cómo agregar el menú de navegación vertical al área del cuerpo de una plantilla de página

Si desea agregar el menú de navegación vertical a un diseño de página (en lugar de su encabezado global), primero debe guardar el diseño de la sección en la Biblioteca Divi.

Para hacer esto, abra el Editor de diseño de encabezado global y guarde la sección vertical (que contiene el menú) en su Biblioteca Divi.

menú de navegación vertical divi y encabezado

Luego salga del editor de diseño y cree una nueva plantilla y asígnela a la (s) página (s) que desee. El clic para crear un cuerpo personalizado para la plantilla de página.

menú de navegación vertical divi y encabezado

Seleccione para construirlo desde cero.

menú de navegación vertical divi y encabezado

Agregue una nueva sección de ancho completo al diseño.

menú de navegación vertical divi y encabezado

Luego agregue un módulo de contenido de publicación de ancho completo a la sección.

menú de navegación vertical divi y encabezado

Elimine la sección regular predeterminada en la parte superior de la página y luego abra la configuración para la sección de ancho completo y agregue el siguiente CSS personalizado al elemento principal:

Elemento principal CSS (escritorio)

01
02
width: calc(100% - 300px);
margin-left:300px !important;

Elemento principal CSS (tableta)

01
width: 100%;

En la sección normal, haga clic para agregar una nueva sección y, en la pestaña Agregar desde biblioteca, seleccione la sección del menú vertical que ha guardado previamente en la biblioteca.

menú de navegación vertical divi y encabezado

Debido a que no queremos que la sección se muestre en el móvil, abra la configuración de la sección y desactive la visibilidad de la sección en la tableta y el teléfono.

menú de navegación vertical divi y encabezado

Luego, abra el módulo de código dentro del diseño de la sección y reemplace este fragmento de código …

01
02
03
04
#et-main-area {
width: calc(100% - 300px);
margin-left: 300px;
}

Con este…

01
02
03
04
#main-header, #main-footer {
width: calc(100% - 300px);
margin-left: 300px;
}

menú de navegación vertical divi y encabezado

Esto moverá el encabezado y pie de página principales para que se ajusten al menú vertical fijo a la izquierda de la plantilla de página. Así es como se ve en una página en vivo usando el encabezado y pie de página predeterminados de Divi.

menú de navegación vertical divi y encabezado

Por Prunaestudio

Por Prunaestudio

Prunaestudio es un estudio de diseño web ubicado en Valencia (España). Estamos especializados en el diseño web basado en WordPress con la plantilla premium de Elegantthemes, Divi.

* Todos el contenido pertenece y se ha traducido del blog de Elegantthemes (Divi Resources)

Nuestras últimas entradas

¡20% de Descuento en Divi!

Sitios web y usuarios ilimitados

Únete a más de 700.000 clientes y obten acceso a Divi, Extra, Bloom, Monarch y mucho más. Impulsa a todo tu equipo y crea sitios web ilimitados con una licencia.

¡Ir al descuento!



You have Successfully Subscribed!

Pin It on Pinterest

Share This