Cada semana te brindamos nuevas ideas de diseño que puedes usar en tus diferentes proyectos. Divi. Estos tutoriales generalmente incluyen casos de uso que lo ayudarán a tomar su Sitio web en el nivel superior.

Esta semana, como parte de nuestra iniciativa de diseño Divi En progreso, le mostraremos cómo crear un hermoso menú de diseño flotante que se expande una vez que pasa el mouse sobre él o hace clic en él. Comencemos con algunos pasos generales. Continuaremos agregando elementos de menú usando módulos de Blurb y terminaremos permitiéndole elegir entre un efecto de desplazamiento o clic.

¡Vamos!

vista

Antes de sumergirse en el tutorial, echemos un vistazo rápido al resultado que podemos obtener. Pero esto puede ser diferente porque probablemente desee personalizar lo que aprende.

1. Cree una página en blanco y use la Plantilla de página de turismo

Agregue una nueva página en blanco y active Divi Builder

Lo primero que debe hacer es crear una nueva página en blanco. Dale un título a tu página y continúa con Divi Constructor.

Descargar una página de destino turístico

Una vez que haya habilitado Divi Builder, descargue el diseño de la página de destino de Sightseeing Layout Pack.

2. Agregue una nueva sección regular al final de la página

Una vez que la barra de menú principal está oculta, podemos comenzar a agregar el menú de descripción general. Para hacer esto, agregaremos una nueva sección regular en la parte inferior de nuestra página.

Color de fondo

Abra la configuración de la sección y agregue un color de fondo blanco ligeramente transparente.

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

espaciamiento

Cambie a la pestaña Diseño y elimine todo el relleno superior e inferior predeterminado de la sección.

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

Sombra predeterminada

Agregue una sombra de cuadro a la siguiente sección.

• Box Shadow Blur Force: 18px
• Color de Sombra: #383838

Hover Box Shadow

Y cambia la fuerza de desenfoque de la sombra del cuadro flotante.

• Box Shadow Blur Force: 1000px

Ocultar los desbordamientos de secciones y aumentar el índice Z

Vamos a utilizar la configuración de tamaño de la sección para que esta técnica funcione, pero para asegurarnos de que nada vaya más allá del contenedor de la sección, necesitaremos ocultar los desbordamientos. También estamos aumentando el índice Z para asegurarnos de que la sección permanezca en la parte superior del resto de la página.

• Desbordamiento horizontal: oculto
• Desbordamiento vertical: oculto
• Índice Z: 9999

3. Configure el tamaño del menú para que coincida con todos los tamaños de pantalla.

Agregar fila 1

Estructura de la columna

Una vez que tengas configurados los parámetros básicos de la sección, es hora de agregar todos los contenido que desea mostrar en el menú. Puede crear cualquier diseño que desee utilizando los elementos de diseño y las opciones integradas de Divi, pero debe asegurarse de que se ajuste perfectamente a una altura de "100 px" para todos los tamaños de pantalla. Para hacer esto, usaremos la unidad de ancho de la ventana gráfica durante todo el proceso de construcción y ajustaremos los valores en diferentes tamaños de pantalla. Comience agregando una nueva fila a su sección usando la siguiente estructura de columnas:

apresto

Sin agregar ningún módulo todavía, abra la configuración de fila y asegúrese de que llenen todo el ancho de la sección.

• Use un ancho de canal personalizado: Sí
• Ancho de canal: 1
• Ancho: 100%
• Ancho máximo: 100%

espaciamiento

Vaya a la configuración de espaciado y elimine todo el relleno superior e inferior predeterminado.

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

Agregar un módulo de texto a una columna

Agregar un símbolo

Continúe agregando un módulo de texto a la columna de la fila. Agregue el símbolo '=" al cuadro contenido o siéntete libre de utilizar cualquier otro símbolo de tu elección.

Color de fondo

Cambie el color de fondo del módulo después.

• Color de fondo: #000000

Configuraciones de texto

Cambie a la pestaña Diseño y cambie también la configuración del texto.

• Fuente de texto: Open Sans
• Alineación del texto: centro.
• Color del texto: #ffffff
• Tamaño del texto: 3vw (escritorio), 5vw (tableta), 7vw (teléfono)
• Altura de la línea de texto: 1em

espaciamiento

También agregamos espacio en la parte superior e inferior del módulo utilizando los siguientes valores de relleno personalizados:

• Acolchado superior: 2.5vw (escritorio), 3.5vw (tableta), 5vw (teléfono)
• Tapicería en la parte inferior: 2.5vw (escritorio), 3.5vw (tableta), 5vw (teléfono)

Añade la línea 2

Estructura de la columna

Continúe agregando una segunda línea usando la siguiente estructura de columnas:

apresto

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

• Use un ancho de canal personalizado: Sí
• Ancho de canal: 1
• Ancho: 100%
• Ancho máximo: 100%

espaciamiento

Vaya a la configuración de espaciado y luego agregue un relleno personalizado en la parte superior e inferior.

• Acolchado superior: 2vw (escritorio), 4vw (tableta), 6vw (teléfono)
• Tapicería en la parte inferior: 2vw (escritorio), 4vw (tableta), 6vw (teléfono)

Visualización

Para asegurarnos de que las dos columnas permanezcan una al lado de la otra en tamaños de pantalla más pequeños, agregaremos una sola línea de código CSS al elemento de la fila principal.

pantalla: flexión;

Agregue el módulo Blurb a la columna 1

Agregar contenido

¡Es hora de comenzar a agregar los elementos del menú! Agregue un nuevo módulo de Blurb a la primera columna de la fila e ingrese el contenido De tu elección

Seleccione el icono

Elija un icono a continuación.

Ajouter un gravamen

E ingrese un enlace de página correspondiente al elemento del menú.

• URL del título del enlace: #

Configuración de iconos

Cambie a la pestaña Diseño y cambie la configuración del icono en consecuencia:

• Color del icono: # ff3314
• Colocación del icono: superior
• Usar tamaño de fuente del icono: Sí
• Tamaño de fuente del icono: 2vw (escritorio), 3vw (tableta), 4vw (teléfono)

Configuración del texto del título

También cambie la configuración de texto del título.

• Título de la policía: PT Serif
• Estilo de fuente del título: subrayado
• Color de subrayado del título: # ff3314
• Título del texto: alineación central
• Tamaño del título del texto: 1.8vw (escritorio), 2.3vw (tableta), 3.3vw (teléfono)

Configuración del texto del cuerpo

Luego cambie la configuración del texto del cuerpo.

• Fuente del cuerpo: Lato
• Alineación del cuerpo del texto: centro
• Color del texto del cuerpo: # c6c6c6
• Tamaño del texto del cuerpo: 0.9vw (escritorio), 1.7vw (tableta), 2.1vw (teléfono)
• Altura del cuerpo: 1.8em

apresto

Y cambie el ancho del módulo en diferentes tamaños de pantalla usando los siguientes valores:

• Ancho: 60% (escritorio), 65% (tableta), 80% (teléfono)

Animación

También eliminamos la animación del icono en la configuración de la animación.

• Animación de iconos: sin animación

Clone el módulo y coloque la copia en la columna 2

Una vez que haya completado el módulo Blurb, puede clonarlo y colocar el duplicado en la segunda columna de la línea.

Cambiar copia

Asegúrese de cambiar la copia. No olvide cambiar el icono y el enlace.

Clonar la línea dos veces

Una vez que haya completado ambos módulos de Blurb en la fila, puede duplicar la línea completa dos veces.

Cambie la copia, el icono y el enlace de cada duplicado de propaganda individualmente

Asegúrese de cambiar la copia, el ícono y el enlace para cada uno de los elementos del menú de propaganda individualmente.

4. Hacer la sección pegajosa

défaut

Una vez que haya agregado todos los elementos que desea mostrar a su sección, puede mantener la sección en la parte superior izquierda de su página agregando las siguientes dos líneas de código CSS al elemento de la sección principal. :

posición: fija; arriba: 0;

Desplazar (¡Importante!)

Habilite la opción de desplazamiento sobre el elemento principal de la sección y asegúrese de que la sección también permanezca fija en ese estado.

posición: fija;

5. Elija un método: A) Menú de sobrevuelo o B) Haga clic en el menú

A) Menú flotante

Tamaño de sección predeterminado

En la siguiente parte del tutorial, deberá elegir un método preferido. un menú flotante o haga clic en. El menú flotante se comportará como un menú de clic en dispositivos más pequeños. Si decide elegir la opción de desplazamiento, abra la configuración de la sección nuevamente, vaya a la configuración de tamaño y cambie el ancho y la altura del menú en consecuencia:

• Ancho: 8vw (escritorio), 12vw (tableta), 20vw (teléfono)
• Altura: 7.4vw (escritorio), 12vw (tableta), 16vw (teléfono)

Sección flotante

Cambie los valores de rollover para crear un menú desplegable.

• Ancho: 80%
• Altura: 100vh

B) Menú al hacer clic

Agregar una clase CSS a una sección

Si desea un menú que solo se abre haciendo clic, debe abrir el módulo de texto que contiene el símbolo del menú. Vaya a la pestaña Avanzado y agregue una clase CSS personalizada.

• Clase CSS: fullwidth-open

Agregar una clase CSS al módulo de texto

Luego abra los parámetros de la sección y agregue otra clase CSS.

• Clase CSS: transformación suave

Dimensionamiento de sección

Luego modificamos el ancho y la altura de nuestra sección.

• Ancho: 8vw (escritorio), 12vw (tableta), 20vw (teléfono)
• Altura: 7.4vw (escritorio), 12vw (tableta), 16vw (teléfono)

Agregar un código a la página

Agregue una nueva línea en la parte inferior de la sección.

Ahora, para crear el efecto de inversión, necesitaremos algo de código JQuery y CSS. Comience agregando un módulo de código a una nueva línea en la parte inferior de su sección.

Agregue un módulo de código a la sección e inserte un código de alternancia JQuery

Copie las siguientes líneas del código JQuery y péguelas en el cuadro de código:

jQuery(function($){
$("#fullwidth-open").click(function() {
 $('.smooth-transform').toggleClass('smooth-transform-active');
});
});

Agregue código CSS personalizado a la configuración de la página

Por último, pero no menos importante, abra la siguiente configuración de página y agregue las siguientes líneas de código CSS:

.smooth-transform-active {altura: 100vh; ancho: 80%; } .smooth-transform {-webkit-transition: todos los 0.5 facilitan; -moz-transition: todos los 0.5s facilitan; -o-transición: facilidad de todos los 0.5; -ms-transition: todos los 0.5s facilitan; transición: facilidad de todos los 0.5; }

Consideraciones finales

En este tutorial, le mostramos cómo crear un hermoso módulo de presentación que se expande al hacer clic / desplazarse (según sus preferencias). Es una excelente manera de agregar interactividad adicional a su menú mientras mantiene un resultado receptivo para todos los tamaños de pantalla. Si tiene alguna pregunta o sugerencia, deje un comentario en la sección reservada a continuación.