Cómo crear un menú fijo que se expande al pasar el mouse 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 un menú fijo en expansión al desplazar el mouse usando Paquete de diseño mecánico de Divi. Manejaremos dos ejemplos de diseño diferentes que puede recrear desde cero y aplicar a cualquier tipo de sitio web que esté creando. El menú se mostrará al pasar el mouse en los tamaños de pantalla del escritorio y se activará al hacer clic en los dispositivos móviles.

¡Hagámoslo!

Avance

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

Ejemplo 1

Escritorio

Ampliación del menú fijo

Móvil

Ampliación del menú fijo

Ejemplo # 2

Escritorio

Ampliación del menú fijo

Móvil

Ampliación del menú fijo

Pasos generales

Deshabilitar la navegación fija

Ir a Opciones de tema Divi

Comenzaremos con algunos pasos generales. Estos pasos son los mismos para ambos ejemplos y son necesarios para lograr el resultado deseado.

Si está pensando en utilizar un menú fijo en expansión en la parte inferior de su página, es posible que desee omitir la barra de menú principal en la parte superior. Para hacer eso, deberá ir a las opciones de tema de Divi.

expandiendo el menú fijo

Deshabilitar la navegación fija

Allí, querrá deshabilitar la opción de la barra de navegación fija para asegurarse de que no quede ningún espacio en la parte superior de su página.

  • Barra de navegación fija: deshabilitada

expandiendo el menú fijo

Ocultar barra de menú principal en la página

Abrir configuración de página

Vaya a la página a la que desea agregar el menú adhesivo expandible y abra la configuración de la página.

expandiendo el menú fijo

Agregar CSS personalizado

Oculte el menú principal agregando las siguientes líneas de código CSS a su página.

#main-header {
display: none;
}

expandiendo el menú fijo

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

Cualquiera que sea el ejemplo que desee recrear, algunos de los pasos básicos siguen siendo los mismos. El primer paso es agregar una sección regular al final de la página.

expandiendo el menú fijo

Espaciado

Abra la configuración de la sección y elimine todo el acolchado superior e inferior personalizado.

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

expandiendo el menú fijo

Agregar nueva fila

Estructura de columna

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

expandiendo el menú fijo

Dimensionamiento

Sin agregar ningún módulo todavía, abra la configuración de la fila y permita que la fila ocupe todo el ancho de la pantalla.

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

expandiendo el menú fijo

Espaciado

A continuación, elimine todo el acolchado superior e inferior predeterminado.

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

expandiendo el menú fijo

Elemento principal

Permitimos que toda la fila se quede en la parte inferior de nuestra página agregando dos líneas simples de código CSS al elemento principal de la fila.

bottom: 0px;
position: fixed;

expandiendo el menú fijo

Índice Z

Y nos aseguraremos de que la fila (y el módulo de texto que agreguemos en los próximos pasos) permanezca en la parte superior de todo el contenido de la página aumentando el índice Z en la configuración de visibilidad de la fila.

  • Índice Z: 99

expandiendo el menú fijo

Agregar módulo de código a la columna

Agregar código CSS entre etiquetas de estilo

La última parte de los pasos generales es agregar un módulo de código a la nueva fila. El código CSS que agregamos dentro de este módulo de código nos ayudará a lograr el efecto revelador al pasar el mouse. Pegue las siguientes líneas de código CSS dentro del módulo:

expandiendo el menú fijo

Recrear el ejemplo n. ° 1

Ampliación del menú fijo

Agregar módulo de texto a la columna

Agregar contenido

Ahora que hemos seguido todos los pasos, podemos empezar a centrarnos en los dos ejemplos de diseño diferentes, ¡empezando por el primero! Agregue un módulo de texto a la columna de su fila. En el cuadro de contenido, usamos el estilo de párrafo para mostrar la copia "≡ Menú". Entonces, colocamos todos los elementos del menú en una lista desordenada. También agregaremos un vínculo a cada uno de los títulos de las páginas individualmente.

expandiendo el menú fijo "width =" 880 "height =" 738 "srcset =" https://www.elegantthemes.com/blog/wp-content/uploads/2019/05/bfx1.jpg 880w, https: // www. elegantthemes.com/blog/wp-content/uploads/2019/05/bfx1-300x252.jpg 300w, https://www.elegantthemes.com/blog/wp-content/uploads/2019/05/bfx1-768x644.jpg 768w, https://www.elegantthemes.com/blog/wp-content/uploads/2019/05/bfx1-610x512.jpg 610w "tamaños =" (ancho máximo: 880 px) 100vw, 880 px

Color de fondo predeterminado

Pase a la configuración de fondo del módulo y cambie el color de fondo.

  • Color de fondo: #ffffff

expandiendo el menú fijo "width =" 880 "height =" 731 "srcset =" https://www.elegantthemes.com/blog/wp-content/uploads/2019/05/bfx2.jpg 880w, https: // www. elegantthemes.com/blog/wp-content/uploads/2019/05/bfx2-300x249.jpg 300w, https://www.elegantthemes.com/blog/wp-content/uploads/2019/05/bfx2-768x638.jpg 768w, https://www.elegantthemes.com/blog/wp-content/uploads/2019/05/bfx2-610x507.jpg 610w "tamaños =" (ancho máximo: 880 px) 100vw, 880 px

Colocar el cursor sobre el color de fondo

Modifica este color de fondo al pasar el mouse.

  • Color de fondo: rgba (255,255,255,0.83)

expandiendo el menú fijo "width =" 880 "height =" 709 "srcset =" https://www.elegantthemes.com/blog/wp-content/uploads/2019/05/bfx3.jpg 880w, https: // www. elegantthemes.com/blog/wp-content/uploads/2019/05/bfx3-300x242.jpg 300w, https://www.elegantthemes.com/blog/wp-content/uploads/2019/05/bfx3-768x619.jpg 768w, https://www.elegantthemes.com/blog/wp-content/uploads/2019/05/bfx3-610x491.jpg 610w "tamaños =" (ancho máximo: 880 px) 100vw, 880 px

Fondo degradado

Y agregue un fondo degradado predeterminado también.

  • Color 1: rgba (255,255,255,0)
  • Color 2: #ffffff
  • Posición final: 60%

expandiendo el menú fijo "width =" 880 "height =" 872 "srcset =" https://www.elegantthemes.com/blog/wp-content/uploads/2019/05/bfx4.jpg 880w, https: // www. elegantthemes.com/blog/wp-content/uploads/2019/05/bfx4-150x150.jpg 150w, https://www.elegantthemes.com/blog/wp-content/uploads/2019/05/bfx4-300x297.jpg 300w, https://www.elegantthemes.com/blog/wp-content/uploads/2019/05/bfx4-768x761.jpg 768w, https://www.elegantthemes.com/blog/wp-content/uploads/2019 /05/bfx4-610x604.jpg 610w "tamaños =" (ancho máximo: 880px) 100vw, 880px

Configuración de texto predeterminada

Continúe yendo a la pestaña de diseño y modificando la configuración del texto.

  • Fuente de texto: Khand
  • Peso de la fuente del texto: negrita
  • Color del texto: # 021827
  • Tamaño del texto: 3vh
  • Orientación del texto: centro

expandiendo el menú fijo "width =" 880 "height =" 849 "srcset =" https://www.elegantthemes.com/blog/wp-content/uploads/2019/05/bfx5.jpg 880w, https: // www. elegantthemes.com/blog/wp-content/uploads/2019/05/bfx5-300x289.jpg 300w, https://www.elegantthemes.com/blog/wp-content/uploads/2019/05/bfx5-768x741.jpg 768w, https://www.elegantthemes.com/blog/wp-content/uploads/2019/05/bfx5-610x589.jpg 610w "tamaños =" (ancho máximo: 880 px) 100vw, 880 px

Configuración de texto flotante

Modifique algunas de las configuraciones de texto al pasar el mouse.

  • Color del texto: rgba (255,255,255,0)
  • Tamaño del texto: 0vh

expandiendo el menú fijo "width =" 880 "height =" 787 "srcset =" https://www.elegantthemes.com/blog/wp-content/uploads/2019/05/bfx6.jpg 880w, https: // www. elegantthemes.com/blog/wp-content/uploads/2019/05/bfx6-300x268.jpg 300w, https://www.elegantthemes.com/blog/wp-content/uploads/2019/05/bfx6-768x687.jpg 768w, https://www.elegantthemes.com/blog/wp-content/uploads/2019/05/bfx6-610x546.jpg 610w "tamaños =" (ancho máximo: 880 px) 100vw, 880 px

Configuración del texto del enlace

Luego, vaya a la configuración del texto del enlace y cambie el color del texto del enlace.

  • Color del texto del enlace: # 000000

expandiendo el menú fijo "width =" 880 "height =" 732 "srcset =" https://www.elegantthemes.com/blog/wp-content/uploads/2019/05/bfx7.jpg 880w, https: // www. elegantthemes.com/blog/wp-content/uploads/2019/05/bfx7-300x250.jpg 300w, https://www.elegantthemes.com/blog/wp-content/uploads/2019/05/bfx7-768x639.jpg 768w, https://www.elegantthemes.com/blog/wp-content/uploads/2019/05/bfx7-610x507.jpg 610w "tamaños =" (ancho máximo: 880 px) 100vw, 880 px

Configuración predeterminada de texto de lista

Vaya a la configuración de texto de la lista predeterminada y modifíquela como desee. Asegúrate de usar "0px" para el tamaño del texto en su estado predeterminado.

  • Fuente de lista desordenada: Khand
  • Estilo de fuente de lista desordenada: mayúsculas
  • Alineación de texto de lista desordenada: Centro
  • Color de texto de lista desordenada: rgba (255,255,255,0)
  • Tamaño del texto de la lista desordenada: 0px
  • Altura de línea de lista desordenada: 0em
  • Posición de estilo de lista desordenada: Interior

expandiendo el menú fijo "width =" 880 "height =" 795 "srcset =" https://www.elegantthemes.com/blog/wp-content/uploads/2019/05/bfx8.jpg 880w, https: // www. elegantthemes.com/blog/wp-content/uploads/2019/05/bfx8-300x271.jpg 300w, https://www.elegantthemes.com/blog/wp-content/uploads/2019/05/bfx8-768x694.jpg 768w, https://www.elegantthemes.com/blog/wp-content/uploads/2019/05/bfx8-610x551.jpg 610w "tamaños =" (ancho máximo: 880 px) 100vw, 880 px

expandiendo el menú fijo "width =" 880 "height =" 773 "srcset =" https://www.elegantthemes.com/blog/wp-content/uploads/2019/05/bfx9.jpg 880w, https: // www. elegantthemes.com/blog/wp-content/uploads/2019/05/bfx9-300x264.jpg 300w, https://www.elegantthemes.com/blog/wp-content/uploads/2019/05/bfx9-768x675.jpg 768w, https://www.elegantthemes.com/blog/wp-content/uploads/2019/05/bfx9-610x536.jpg 610w "tamaños =" (ancho máximo: 880 px) 100vw, 880 px

Configuración de texto de lista flotante

Luego, modifique algunos de los valores al pasar el mouse para permitir que aparezcan los elementos del menú.

  • Color de texto de lista desordenada: # 000000
  • Tamaño de texto de lista desordenado: 2vh
  • Altura de línea desordenada: 2.1em

expandiendo el menú fijo "width =" 880 "height =" 826 "srcset =" https://www.elegantthemes.com/blog/wp-content/uploads/2019/05/bfx10.jpg 880w, https: // www. elegantthemes.com/blog/wp-content/uploads/2019/05/bfx10-300x282.jpg 300w, https://www.elegantthemes.com/blog/wp-content/uploads/2019/05/bfx10-768x721.jpg 768w, https://www.elegantthemes.com/blog/wp-content/uploads/2019/05/bfx10-610x573.jpg 610w "tamaños =" (ancho máximo: 880 px) 100vw, 880 px

Espaciado predeterminado

Ve a la configuración de espaciado a continuación y dale una forma al Módulo de texto.

  • Margen izquierdo: 45vw (escritorio), 39vw (tableta), 33vw (teléfono)
  • Margen derecho: 45vw (escritorio), 39vw (tableta), 33vw (teléfono)
  • Acolchado superior: 2vw (escritorio), 4vw (tableta), 6vw (teléfono)
  • Acolchado inferior: 2vw (escritorio), 4vw (tableta), 6vw (teléfono)

expandiendo el menú fijo "width =" 880 "height =" 650 "srcset =" https://www.elegantthemes.com/blog/wp-content/uploads/2019/05/bfx11.jpg 880w, https: // www. elegantthemes.com/blog/wp-content/uploads/2019/05/bfx11-300x222.jpg 300w, https://www.elegantthemes.com/blog/wp-content/uploads/2019/05/bfx11-768x567.jpg 768w, https://www.elegantthemes.com/blog/wp-content/uploads/2019/05/bfx11-610x451.jpg 610w "tamaños =" (ancho máximo: 880 px) 100vw, 880 px

Espaciado de desplazamiento

Modifique estos mismos valores al pasar el mouse.

  • Margen izquierdo: 14vw
  • Margen derecho: 14vw
  • Acolchado superior: 8vw
  • Acolchado inferior: 8vw

expandiendo el menú fijo "width =" 880 "height =" 650 "srcset =" https://www.elegantthemes.com/blog/wp-content/uploads/2019/05/bfx12.jpg 880w, https: // www. elegantthemes.com/blog/wp-content/uploads/2019/05/bfx12-300x222.jpg 300w, https://www.elegantthemes.com/blog/wp-content/uploads/2019/05/bfx12-768x567.jpg 768w, https://www.elegantthemes.com/blog/wp-content/uploads/2019/05/bfx12-610x451.jpg 610w "tamaños =" (ancho máximo: 880 px) 100vw, 880 px

Borde predeterminado

Continúe con la configuración del borde y asegúrese de que cada una de las esquinas redondeadas tenga un valor de "0px".

expandiendo el menú fijo "width =" 880 "height =" 582 "srcset =" https://www.elegantthemes.com/blog/wp-content/uploads/2019/05/bfx13.jpg 880w, https: // www. elegantthemes.com/blog/wp-content/uploads/2019/05/bfx13-300x198.jpg 300w, https://www.elegantthemes.com/blog/wp-content/uploads/2019/05/bfx13-768x508.jpg 768w, https://www.elegantthemes.com/blog/wp-content/uploads/2019/05/bfx13-610x403.jpg 610w "tamaños =" (ancho máximo: 880 px) 100vw, 880 px

Borde flotante

Habilite las opciones de desplazamiento en las esquinas redondeadas y cambie los valores superior izquierdo y superior derecho.

  • Arriba a la izquierda: 50vw
  • Arriba a la derecha: 50vw

expandiendo el menú fijo "width =" 880 "height =" 555 "srcset =" https://www.elegantthemes.com/blog/wp-content/uploads/2019/05/bfx14.jpg 880w, https: // www. elegantthemes.com/blog/wp-content/uploads/2019/05/bfx14-300x189.jpg 300w, https://www.elegantthemes.com/blog/wp-content/uploads/2019/05/bfx14-768x484.jpg 768w, https://www.elegantthemes.com/blog/wp-content/uploads/2019/05/bfx14-610x385.jpg 610w "tamaños =" (ancho máximo: 880 px) 100vw, 880 px

Sombra de la caja

Continúe dando al módulo algo de profundidad usando una sombra de cuadro. Esto asegurará que el menú no pase desapercibido en la página.

  • Fuerza de desenfoque de sombra de caja: 1000 ms
  • Color de sombra: rgba (0,0,0,0.68)

expandiendo el menú fijo "width =" 880 "height =" 776 "srcset =" https://www.elegantthemes.com/blog/wp-content/uploads/2019/05/bfx15.jpg 880w, https: // www. elegantthemes.com/blog/wp-content/uploads/2019/05/bfx15-300x265.jpg 300w, https://www.elegantthemes.com/blog/wp-content/uploads/2019/05/bfx15-768x677.jpg 768w, https://www.elegantthemes.com/blog/wp-content/uploads/2019/05/bfx15-610x538.jpg 610w "tamaños =" (ancho máximo: 880 px) 100vw, 880 px

Clase CSS

También estamos agregando una clase CSS al módulo.

  • Clase CSS: dt-menu

expandiendo el menú fijo

Transiciones

Por último, pero no menos importante, disminuya la duración de la transición en la configuración de las transiciones.

  • Duración de la transición: 100 ms

expandiendo el menú fijo "width =" 880 "height =" 662 "srcset =" https://www.elegantthemes.com/blog/wp-content/uploads/2019/05/bfx16.jpg 880w, https: // www. elegantthemes.com/blog/wp-content/uploads/2019/05/bfx16-300x226.jpg 300w, https://www.elegantthemes.com/blog/wp-content/uploads/2019/05/bfx16-768x578.jpg 768w, https://www.elegantthemes.com/blog/wp-content/uploads/2019/05/bfx16-610x459.jpg 610w "tamaños =" (ancho máximo: 880 px) 100vw, 880 px

Recrear el ejemplo 2

Ampliación del menú fijo

Agregar módulo de texto a la columna

Agregar contenido

¡Pasemos al segundo ejemplo! Aquí, nuevamente vamos a agregar "≡ Menú" usando el estilo de texto de párrafo y los elementos del menú usando una lista desordenada. También agregaremos un vínculo a cada uno de los elementos del menú individualmente.

expandiendo el menú fijo "width =" 880 "height =" 852 "srcset =" https://www.elegantthemes.com/blog/wp-content/uploads/2019/05/cfx1.jpg 880w, https: // www. elegantthemes.com/blog/wp-content/uploads/2019/05/cfx1-300x290.jpg 300w, https://www.elegantthemes.com/blog/wp-content/uploads/2019/05/cfx1-768x744.jpg 768w, https://www.elegantthemes.com/blog/wp-content/uploads/2019/05/cfx1-610x591.jpg 610w "tamaños =" (ancho máximo: 880 px) 100vw, 880 px

Color de fondo predeterminado

Pase a la configuración de fondo y cambie el color de fondo.

  • Color de fondo: #ffffff

expandiendo el menú fijo "width =" 880 "height =" 845 "srcset =" https://www.elegantthemes.com/blog/wp-content/uploads/2019/05/cfx2.jpg 880w, https: // www. elegantthemes.com/blog/wp-content/uploads/2019/05/cfx2-300x288.jpg 300w, https://www.elegantthemes.com/blog/wp-content/uploads/2019/05/cfx2-768x737.jpg 768w, https://www.elegantthemes.com/blog/wp-content/uploads/2019/05/cfx2-610x586.jpg 610w "tamaños =" (ancho máximo: 880 px) 100vw, 880 px

Colocar el cursor sobre el color de fondo

Modifica el color de fondo al pasar el mouse.

  • Color de fondo: # f71535

expandiendo el menú fijo "width =" 880 "height =" 822 "srcset =" https://www.elegantthemes.com/blog/wp-content/uploads/2019/05/cfx3.jpg 880w, https: // www. elegantthemes.com/blog/wp-content/uploads/2019/05/cfx3-300x280.jpg 300w, https://www.elegantthemes.com/blog/wp-content/uploads/2019/05/cfx3-768x717.jpg 768w, https://www.elegantthemes.com/blog/wp-content/uploads/2019/05/cfx3-610x570.jpg 610w "tamaños =" (ancho máximo: 880 px) 100vw, 880 px

Configuración de texto predeterminada

Luego, vaya a la pestaña de diseño y realice algunos cambios en la apariencia de la copia del párrafo.

  • Fuente de texto: Khand
  • Color del texto: # 021827
  • Tamaño del texto: 3vh

expandiendo el menú fijo "width =" 880 "height =" 865 "srcset =" https://www.elegantthemes.com/blog/wp-content/uploads/2019/05/cfx4.jpg 880w, https: // www. elegantthemes.com/blog/wp-content/uploads/2019/05/cfx4-300x295.jpg 300w, https://www.elegantthemes.com/blog/wp-content/uploads/2019/05/cfx4-768x755.jpg 768w, https://www.elegantthemes.com/blog/wp-content/uploads/2019/05/cfx4-610x600.jpg 610w "tamaños =" (ancho máximo: 880 px) 100vw, 880 px

Configuración de texto flotante

Modifique esta configuración al pasar el mouse.

  • Color del texto: rgba (255,255,255,0)
  • Tamaño del texto: 0vh

expandiendo el menú fijo "width =" 880 "height =" 911 "srcset =" https://www.elegantthemes.com/blog/wp-content/uploads/2019/05/cfx5.jpg 880w, https: // www. elegantthemes.com/blog/wp-content/uploads/2019/05/cfx5-290x300.jpg 290w, https://www.elegantthemes.com/blog/wp-content/uploads/2019/05/cfx5-768x795.jpg 768w, https://www.elegantthemes.com/blog/wp-content/uploads/2019/05/cfx5-610x631.jpg 610w "tamaños =" (ancho máximo: 880 px) 100vw, 880 px

Configuración del texto del enlace

Continúe con la configuración de texto y cambie el color del texto del enlace.

  • Color del texto del enlace: #ffffff

expandiendo el menú fijo "width =" 880 "height =" 973 "srcset =" https://www.elegantthemes.com/blog/wp-content/uploads/2019/05/cfx6.jpg 880w, https: // www. elegantthemes.com/blog/wp-content/uploads/2019/05/cfx6-271x300.jpg 271w, https://www.elegantthemes.com/blog/wp-content/uploads/2019/05/cfx6-768x849.jpg 768w, https://www.elegantthemes.com/blog/wp-content/uploads/2019/05/cfx6-610x674.jpg 610w "tamaños =" (ancho máximo: 880 px) 100vw, 880 px

Configuración predeterminada de texto de lista

Cambie también la configuración de diseño de los elementos de la lista desordenada.

  • Fuente de lista desordenada: Khand
  • Estilo de fuente de lista desordenada: mayúsculas
  • Alineación de texto de lista desordenada: Centro
  • Color de texto de lista desordenada: rgba (255,255,255,0)
  • Tamaño del texto de la lista desordenada: 0px
  • Altura de línea de lista desordenada: 0em
  • Posición de estilo de lista desordenada: Interior

expandiendo el menú fijo "width =" 880 "height =" 739 "srcset =" https://www.elegantthemes.com/blog/wp-content/uploads/2019/05/cfx7.jpg 880w, https: // www. elegantthemes.com/blog/wp-content/uploads/2019/05/cfx7-300x252.jpg 300w, https://www.elegantthemes.com/blog/wp-content/uploads/2019/05/cfx7-768x645.jpg 768w, https://www.elegantthemes.com/blog/wp-content/uploads/2019/05/cfx7-610x512.jpg 610w "tamaños =" (ancho máximo: 880 px) 100vw, 880 px

expandiendo el menú fijo "width =" 880 "height =" 735 "srcset =" https://www.elegantthemes.com/blog/wp-content/uploads/2019/05/cfx14.jpg 880w, https: // www. elegantthemes.com/blog/wp-content/uploads/2019/05/cfx14-300x251.jpg 300w, https://www.elegantthemes.com/blog/wp-content/uploads/2019/05/cfx14-768x641.jpg 768w, https://www.elegantthemes.com/blog/wp-content/uploads/2019/05/cfx14-610x509.jpg 610w "tamaños =" (ancho máximo: 880 px) 100vw, 880 px

Configuración de texto de lista flotante

Y modifique algunos de estos valores al pasar el mouse.

  • Color de texto de lista desordenado: #ffffff
  • Tamaño de texto de lista desordenado: 2vh
  • Altura de línea de lista desordenada: 2.1em

expandiendo el menú fijo "width =" 880 "height =" 776 "srcset =" https://www.elegantthemes.com/blog/wp-content/uploads/2019/05/cfx8.jpg 880w, https: // www. elegantthemes.com/blog/wp-content/uploads/2019/05/cfx8-300x265.jpg 300w, https://www.elegantthemes.com/blog/wp-content/uploads/2019/05/cfx8-768x677.jpg 768w, https://www.elegantthemes.com/blog/wp-content/uploads/2019/05/cfx8-610x538.jpg 610w "tamaños =" (ancho máximo: 880 px) 100vw, 880 px

Espaciado predeterminado

Luego, vaya a la configuración de espaciado y déle algo de espacio al módulo.

  • Margen derecho: 88vw (escritorio y tableta), 71vw (teléfono)
  • Acolchado superior: 6vw (escritorio), 10vw (tableta), 18vw (teléfono)
  • Acolchado inferior: 4vw (escritorio), 10vw (tableta), 12vw (teléfono)
  • Acolchado izquierdo: 1vw

expandiendo el menú fijo "width =" 880 "height =" 606 "srcset =" https://www.elegantthemes.com/blog/wp-content/uploads/2019/05/cfx9.jpg 880w, https: // www. elegantthemes.com/blog/wp-content/uploads/2019/05/cfx9-300x207.jpg 300w, https://www.elegantthemes.com/blog/wp-content/uploads/2019/05/cfx9-768x529.jpg 768w, https://www.elegantthemes.com/blog/wp-content/uploads/2019/05/cfx9-610x420.jpg 610w "tamaños =" (ancho máximo: 880 px) 100vw, 880 px

Espaciado de desplazamiento

Modifique los valores al pasar el mouse.

  • Margen derecho: 59vw
  • Acolchado superior: 13vw
  • Acolchado inferior: 8vw
  • Acolchado izquierdo: 1vw
  • Acolchado derecho: 13vw

expandiendo el menú fijo "width =" 880 "height =" 565 "srcset =" https://www.elegantthemes.com/blog/wp-content/uploads/2019/05/cfx10.jpg 880w, https: // www. elegantthemes.com/blog/wp-content/uploads/2019/05/cfx10-300x193.jpg 300w, https://www.elegantthemes.com/blog/wp-content/uploads/2019/05/cfx10-768x493.jpg 768w, https://www.elegantthemes.com/blog/wp-content/uploads/2019/05/cfx10-610x392.jpg 610w "tamaños =" (ancho máximo: 880 px) 100vw, 880 px

Frontera

Y para crear este diseño de cuarto de círculo, vamos a cambiar el borde superior derecho en la configuración del borde.

  • Arriba a la derecha: 50vw

expandiendo el menú fijo "width =" 880 "height =" 689 "srcset =" https://www.elegantthemes.com/blog/wp-content/uploads/2019/05/cfx11.jpg 880w, https: // www. elegantthemes.com/blog/wp-content/uploads/2019/05/cfx11-300x235.jpg 300w, https://www.elegantthemes.com/blog/wp-content/uploads/2019/05/cfx11-768x601.jpg 768w, https://www.elegantthemes.com/blog/wp-content/uploads/2019/05/cfx11-610x478.jpg 610w "tamaños =" (ancho máximo: 880 px) 100vw, 880 px

Sombra de la caja

También agregaremos una sombra de cuadro para crear profundidad en la página.

  • Fuerza de desenfoque de sombra de caja: 1000px
  • Color de sombra: rgba (0,0,0,0.68)

expandiendo el menú fijo "width =" 880 "height =" 686 "srcset =" https://www.elegantthemes.com/blog/wp-content/uploads/2019/05/cfx12.jpg 880w, https: // www. elegantthemes.com/blog/wp-content/uploads/2019/05/cfx12-300x234.jpg 300w, https://www.elegantthemes.com/blog/wp-content/uploads/2019/05/cfx12-768x599.jpg 768w, https://www.elegantthemes.com/blog/wp-content/uploads/2019/05/cfx12-610x476.jpg 610w "tamaños =" (ancho máximo: 880 px) 100vw, 880 px

Clase CSS

Luego, agregaremos una clase CSS en la pestaña avanzada.

  • Clase CSS: dt-menu

expandiendo el menú fijo

Transiciones

Y disminuya la duración de la transición en la pestaña avanzada para crear una transición rápida.

  • Duración de la transición: 100 ms

expandiendo el menú fijo "width =" 880 "height =" 683 "srcset =" https://www.elegantthemes.com/blog/wp-content/uploads/2019/05/cfx13.jpg 880w, https: // www. elegantthemes.com/blog/wp-content/uploads/2019/05/cfx13-300x233.jpg 300w, https://www.elegantthemes.com/blog/wp-content/uploads/2019/05/cfx13-768x596.jpg 768w, https://www.elegantthemes.com/blog/wp-content/uploads/2019/05/cfx13-610x473.jpg 610w "tamaños =" (ancho máximo: 880 px) 100vw, 880 px

Avance

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

Ejemplo 1

Escritorio

Ampliación del menú fijo

Móvil

Ampliación del menú fijo

Ejemplo # 2

Escritorio

Ampliación del menú fijo

Móvil

Ampliación del menú fijo

Pensamientos finales

En esta publicación, le mostramos cómo crear un menú fijo expandible usando Paquete de diseño mecánico de Divi. Hemos manejado dos ejemplos de diseño diferentes que puede recrear y utilizar en cualquier tipo de sitio web que esté creando. Esperamos que esté disfrutando de esta iniciativa de diseño de Divi en curso, en la que intentamos poner algo adicional en su caja de herramientas de diseño todas las semanas. 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 Suscríbete a nuestro boletín de correo electrónico y Canal de Youtube por lo que siempre será una de las primeras personas en conocer y obtener beneficios de este contenido gratuito.