homefinance blog
Los encabezados grandes, con muchos lazos de navegación, pueden ocupar muchos bienes inmuebles valiosos en su sitio (especialmente por encima de los folletos). Por lo tanto, los menús que parecen emergentes y deslizantes se vuelven cada vez más populares. La mayoría de las veces, los menús que se deslizan para ver permanecen por encima del contenido de la página, ocultando ciertos elementos. Sin embargo, un menú de empuje deslizante funciona de manera un poco diferente. El efecto de empuje deslizante es único por el hecho de que el menú se desliza desde la parte superior de la página mientras presiona el contenido de la página simultáneamente, para que nada esté oculto de la visualización.
En este tutorial, le mostraremos cómo crear un menú de empuje deslizante desde cero usando el creador de temas. Una vez que se construye el menú, se convierte en una herramienta versátil para todo tipo de aplicaciones, porque podrá completar la sección con cualquier contenido que desee usar Divi Builder. ¡Vamos a eso! Tire de la vista con un vistazo rápido al menú deslizante de empuje que construiremos en este tutorial. Descargue el aspecto gratuito para poner su mano en los dibujos en este tutorial, primero deberá descargarlo usando el botón a continuación. Para tener acceso a la descarga, deberá suscribirse a nuestra lista diaria de correo electrónico utilizando el formulario a continuación. ¡Como nuevo suscriptor, recibirá más buenas divisiones y un paquete Divaut gratuito todos los lunes! Si ya está en la lista, simplemente ingrese la dirección de correo electrónico a continuación y haga clic en Descargar. No será “reubicado” y no recibirá correos electrónicos adicionales.
Descargar archivos
Descargue el registro gratuito para el Boletín Informativo Divic y le enviaremos una copia de la página de la página de la página final, además de muchos otros recursos, consejos y consejos para Div gratis. Sigue a ti mismo y serás una división maestra en el menor tiempo. Si ya está suscrito, simplemente ingrese el correo electrónico a continuación y haga clic en Descargar para acceder al paquete de apariencia. Se ha suscrito correctamente. ¡Consulte su correo electrónico para confirmar su suscripción y obtener acceso a paquetes de diseño semanales gratuitos!
Para importar la aparición de la sección en Temo Builder Divic, navegue en el Temo Builder Div.
Haga clic en el icono de portabilidad. En la ventana de portabilidad emergente, seleccione la pestaña Importar y elija el archivo de descarga en su computadora. Luego haga clic en el botón Importar. Después de haber terminado, la plantilla de sección aparecerá en el temas Builder Div.
Pasemos al tutorial, ¿no? Construyendo el menú de deslizamiento push con la división del constructor de temas creando un menú global para crear el menú, construiremos un nuevo encabezado global en temas constructor. Navegue a Divin> Temor Builder. Luego haga clic en el área “Agregar encabezado global” en la plantilla de sitio predeterminada. En el menú Drop -down, seleccione “Construir encabezado global”.
Esto lo llevará al encabezado global del encabezado. Una vez que esté en el editor de diseño de encabezado global, elija “Construir desde cero”.
Creación del menú Push El primer elemento que construiremos juntos es la sección Menú Push. Esta sección contendrá los elementos del menú que cambiarán hacia abajo y hacia arriba al hacer clic en el botón de conmutación del menú. Configuración de la sección Abra la configuración de la sección predeterminada y actualice la configuración de la siguiente manera: Antecedentes: # 1A1E36
Recubrimiento
Forro: 0 px arriba, 0 px abajo
La clase CSS en la pestaña Avanzada, agregue la siguiente clase CSS, que se utilizará más adelante en nuestro código JS.
Clase CSS: Et-Push-Menu
CSS personalizado (tableta) Luego, debemos ajustar la altura de la sección en el dispositivo móvil utilizando una altura calculada para que coincida con la barra de encabezado principal que agregaremos. Esto esencialmente hará la sección para extenderse sobre toda la altura de la ventana cuando el usuario cambie el menú abierto. Agregue los siguientes CSS personalizados solo al elemento principal en la tableta: Altura: Calc (100VH – 70px);
Desbordamiento: ¡desplazamiento! Importante;
Sobre-scroll-behavior: contener;
Agregue la fila 1 Una vez que se complete la configuración de la sección, cree una fila con una columna dentro de la sección.
Configuración de la fila 1 y luego actualice la configuración de la fila de la siguiente manera: Diseño
El ancho de la canaleta: 1
Ancho: 100%
Ancho máximo: 1280 PX
Junta: 3VH arriba, 3VH abajo
Ancho de borde inferior: 1 PX
Color de borde inferior: RGBA (255,255,255,0,2)
CSS personalizado en la pestaña Avanzada, agregue los siguientes CSS personalizados al elemento principal: debajo del escritorio … Display: Flex;
Justify-Concursing: Centro;
Alinine-Ritams: Centro; Debajo de la tableta … Pantalla: Flex;
Dirección flexible: columna;
Alinine-Ritams: Centro;
Configuración de la columna Después de completar la configuración promedio, abra la configuración de la columna y agregue un fragmento CSS personalizado al elemento principal: Display: Flex;
Alinine-Ritams: Centro;
Justify-Concursing: Centro; Esto centrará el contenido de la columna tanto vertical como horizontalmente.
Agregue el botón Ahora estamos listos para comenzar a agregar elementos del menú usando botones. Comience agregando un nuevo botón a la columna.
Botón de configuración y luego actualice la configuración del botón de la siguiente manera: Contenido
Botón de texto: diseño
URL del enlace del botón: # (reemplácelo con su propia URL personalizada más tarde)
Diseño
El color del texto del botón: #ffffff
El ancho del nudo del botón: 0 PX
Botón de fuente: Montserrat
Peso de fuente de fuente: duro
Icono del botón: [tu elección]
Icono de botón de colocación: izquierda
Duplicación de la columna ahora, para crear los botones adicionales para el menú, podemos duplicar la columna. Para este diseño, dupliquemos la columna 4 veces para darnos un total de 5 elementos / botones de menú. En una fila de cinco columnas.
Agregue la fila 2 Una vez que se complete la primera fila, estamos listos para agregar otra fila de botones que se pueden usar para un conjunto diferente de elementos de menú. Para crear la siguiente fila, copie la fila 1.
Elimine todas las columnas, excepto una y luego borre todas las columnas, excepto una de la fila duplicada.
Configuración de fila 2 Configuración de actualización para la fila 2 de la siguiente manera:
Ancho máximo: 1080px
Ancho del borde inferior: 0 PX
Configuración de la columna luego agregue un borde a la columna de la siguiente manera:
El ancho del borde recto: 1 PX
Color del borde derecho: RGBA (255.255.255.0.2)
Actualice la configuración del botón Después de que la columna tenga el borde derecho, abra la configuración del botón y actualice lo siguiente: Botón de texto: 14 PX
Distancia entre letras y botones: 2 PX
Peso de fuente de fuente: semi audac.
Botón de estilo de fuente: TT
Muestra el icono del botón: No
Duplique la columna tal como lo hicimos antes, duplique la columna para crear botones y columnas adicionales. Para este diseño, dupliquemos la columna 3 veces para darnos un total de 4 botones en una fila con 4 columnas.
Eliminar el borde de la última columna porque no queremos que la última columna tenga el borde derecho, abra la configuración para la columna 4 y actualice el ancho del borde:
El ancho del borde recto: 0 px
Creando la barra de encabezado principal, crearemos la sección para la barra de encabezado principal. Esta barra de encabezado siempre permanecerá visible y será la que contiene el logotipo de nuestro sitio, un CTA y nuestro botón de conmutación de menú. Agregue la sección antes de agregar la nueva sección, es una buena idea actualizar la etiqueta de la sección anterior para leer “Sección de menú Push”. Luego cree una nueva sección en la primera sección.
Configuración de la sección Ahora actualice la etiqueta en la nueva sección para leer la “sección del encabezado”. Luego abra la configuración de la sección y actualice lo siguiente: alineación
Forro: 0 px arriba, 0 px abajo
Agregue la fila Después del llenado de la sección, agregue una fila con tres columnas a la sección.
Configuración de fila Abra la configuración de la fila y actualice lo siguiente: Dimensión
El ancho de la canaleta: 1
Ancho: 90%
Altura: 70 PX
Recubrimiento
Junta: Junta: 0 PX hacia arriba, 0 PX abajo
CSS personalizado en la pestaña Avanzada, agregue los siguientes CSS personalizados al elemento principal: Display: Flex; Align-Ritms: Center; Esto centrará verticalmente las columnas en la fila.
Agregue el botón para crear el CTA principal en la sección del encabezado, podemos usar un segundo botón en la sección superior. Copie el botón en la columna 1 de la fila 2 de la sección superior y péguelo en la columna 1 de la fila en la sección del encabezado.
Actualice la configuración del botón y luego abra la configuración del botón para obtener el botón Duplicado y actualice lo siguiente:
Botón de texto: Regístrese
Tamaño de texto de texto: 14 PX
El color del texto del botón: # 1A1E36
Muestra el icono del botón: Sí
Icono del botón: flecha derecha (ver captura de pantalla)
Agregue el logotipo a la columna central, agregue un módulo de imagen. Así será como agregamos dinámicamente el logotipo del sitio.
Coloque el cursor sobre el cuadro de imagen y haga clic en el icono “Usar contenido dinámico”. En el menú desplegable, seleccione el “Logotipo del sitio”.
Configuración de la imagen Entonces, en la pestaña de diseño, actualice lo siguiente:
Alineación de imágenes: centro
Altura máxima: 55 PX
Agregue el icono de hamburguesa personalizado, podríamos usar un icono ordinario a través de un módulo de propaganda como un cambio de nuestro menú, pero para este tutorial, pensé que agregaríamos un menú personalizado que cambia con un efecto de transición en frío. Agregue un módulo de texto para crear el icono del menú, utilizaremos un módulo de texto con un cierto HTML personalizado que se estilizará con CSS externo. Continúe y agregue un módulo de texto a la columna 3.
Agregue el texto HTML y luego agregue el siguiente html al contenido del módulo de texto:
<<
fondo Déle al módulo de texto un color de fondo:
Color de fondo: # 1A1E36
Diseño de texto luego actualice la configuración de diseño de la siguiente manera:
Ancho: 70 PX
Alineación del módulo: correcto
Altura: 70 PX
Forro: 20 px arriba, 20 px abajo, 16 px izquierda, 16 px derecho
Clase CSS En la pestaña Avanzada, agregue la siguiente clase CSS:
Clase CSS: ET-Push-Mu-Toggle
Agregue el código para llevar a casa la funcionalidad que necesitamos para que funcione este menú deslizante, agregaremos CSS y JQUEY personalizados a un módulo de código. Continúe y agregue un módulo de código en la columna 3 en el módulo de texto.
Luego pegue el siguiente código (importante: envuelva este código en etiquetas de estilo para funcionar correctamente): .line {
Bloqueo de pantalla;
Posición: Absoluto;
Altura: 2px;
Ancho: 100%;
fondo: #ffffff;
Opacidad: 1;
-Webkit-transition: .1s Fase-Out;
-Moz-Transition: .1s Fase-in;
-O-transición: .1s Facilifique;
Transición: .1s Facilización;
}
.línea 2 {
Arriba: 10px;
}
.línea 3 {
Arriba: 20px;
}
.et-push-meu-toogle.open .line-1 {
Arriba: 10px;
-Webkit-transform: rotado (135deg);
-Moz-transform: rotado (135deg);
-O-transform: rotado (135deg);
Transformación: rotado (135deg);
}
.et-push-me-toogle.open .line-2 {
Pantalla: ninguno;
}
.et-push-neu-toogle.open .line-3 {
Arriba: 10px;
-Webkit-transform: rotado (-135deg);
-Moz-transform: rotado (-135deg);
-o-transform: rotado (-135deg);
Transformación: rotado (-135deg);
}
.et-Push-Menu {Display: None;
}
.et-fb .et-Push-Menu {
Bloqueo de pantalla;
}
.et-push-me-toogle {
Cursor: puntero;
}
Luego copie y pegue este código directamente debajo (importante: envuelva este código en las etiquetas de script para funcionar correctamente): (función ($) {
$ (documento) .Ready (function () {
$ (‘. Et-Push-me-toggle’). Click (function () {
$ (this) .togglecass (‘abierto’);
$ (‘. Et-Push-Menu’). SlidETogle (“300”). TogglecLass (‘et-Push-meu-active’);
});
});
}) (JQuery);
Actualice el texto del botón y finalmente los enlaces, podemos actualizar todos los botones con el botón requerido y la URL de los enlaces.
¡Eso es todo! Guardar la configuración No olvide guardar la apariencia y la configuración para el generador de tareas.
Resultado final Para ver el resultado final, vea una página en vivo en su sitio haciéndolo pegajoso si desea una versión “pegajosa” del menú, todo lo que tiene que hacer es agregar el siguiente fragmento CSS al módulo de código (entre etiquetas de estilo ): encabezado {
Posición: pegajoso;
Arriba: 0;
Index Z: 9999;
}
#Contenedor de página {
Overflow-y: ¡Visible! Importante;
}
Y aquí está el resultado. Pensamientos finales Espero que les guste este menú deslizante. El efecto es único y abre la puerta para más encabezados creativos en el camino. Espero tener noticias suyas en los comentarios. ¡Suerte!