Cómo agregar un encabezado lipic personalizado para móvil usando div

Por lo general, agregar un encabezado pegajoso (o fijo) a su sitio es un juego seguro para pantallas más grandes (escritorios) porque hay más espacio.Agregar un encabezado pegajoso en dispositivos móviles con vistas más pequeñas (especialmente teléfonos) requiere un poco más de delicadeza.No quieres que ese encabezado pegajoso ocupe demasiado de la ventana de vista.Es decir, no tiene sentido aumentar la experiencia de navegación con un encabezado pegajoso si no puede ver las páginas que visita.Por esta razón, a veces es más fácil agregar un encabezado pegajoso especialmente diseñado para dispositivos móviles.
En este tutorial, le mostraremos cómo agregar un encabezado Lipic personalizado para el móvil usando Div. Usando las opciones integradas del DIV (incluidas las opciones de posición adhesiva), le mostraremos cómo mostrar un encabezado lipídico totalmente personalizado que incluye esos elementos esenciales (como un logotipo, un botón y un icono de menú) sin ocupar demasiado espacio. . ¡Vamos a empezar! Mirar los Sneaks es un vistazo rápido al encabezado pegajoso para el móvil que construiremos en este tutorial. Encabezado pegajoso en el encabezado pegajoso de escritorio en la tableta encabezado pegajoso en su teléfono Descargue el encabezado pegajoso gratuito para poner su mano en los modelos en este tutorial, primero tendrá que descargarlo con el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestra lista de correo electrónico diaria utilizando el formulario a continuación. ¡Como nuevo suscriptor, recibirá aún más división de amabilidad y un paquete Divaut gratuito todos los lunes! Si ya está en la lista, simplemente ingrese el correo electrónico a continuación y haga clic en Descargar. No será “read” y no recibirá correos electrónicos adicionales. Determine los archivos
Descargue gratis únase al boletín de Divin y le enviaremos una copia del paquete de diseño de la página de buceo, además de muchos otros recursos, consejos y consejos de forma gratuita. Sigue a ti mismo y te convertirás en una división maestra en el menor tiempo. Si ya está suscrito, ingrese su correo electrónico a continuación y haga clic en Descargar para acceder al paquete de diseño.

Te has suscripto satisfactoriamente. Por favor, consulte su correo electrónico para confirmar su suscripción y obtener acceso a paquetes semanales gratuitos por diseño Div! Suscríbase a nuestro canal de YouTube Importar en el constructor de temas para importar el encabezado, deberá navegar a Divin> temas Builder. Luego use el icono de portabilidad en la parte superior derecha de la página para importar el archivo JSON.
Pasemos al tutorial, ¿sí? Agregar un encabezado Lipic personalizado para dispositivos móviles con Divi 1: Agregue una plantilla de encabezado prefabricada en la división de constructor de temas para este tutorial, agregaremos un encabezado Lipic personalizado a una de nuestras plantillas de encabezado gratuitas utilizando la Divic de Builder Builder. Primero, descargue el archivo de importación de la publicación de blog que contiene el encabezado y el sótano del mantenimiento del paisaje.
Una vez descargado, siga estos pasos:

Navegue al creador de temas Divin en el fondo del sitio web de WordPress.
Luego, en la esquina superior derecha, verá un icono de dos fluidos. Haga clic en el icono.
En la ventana de portabilidad emergente, navegue por la pestaña Importar.
Seleccione el archivo JSON que pueda descargar.
Descargar opciones para reemplazar las plantillas existentes.
Luego haga clic en “Importar el Builder Div Div Theme Builder”.
Una vez que haya cargado el archivo, notará una nueva plantilla de encabezado y sótano. Para cambiar los elementos de la plantilla de encabezado, comience abriendo el encabezado personalizado de la plantilla.
Dentro del encabezado del constructor de diseño, abra la visualización de la capa para un acceso más fácil a los elementos.
Parte 2: Optimización del elemento de encabezado superior en el móvil Este encabezado especial tiene dos secciones. La sección superior contiene un logotipo, un CTA y un botón. La sección inferior ya tiene una posición pegajosa y contiene el menú. Debido a que agregaremos un logotipo a un nuevo menú adhesivo en el móvil, debemos ocultar el logotipo en la sección superior en la tableta y el teléfono. Para hacer esto, abra la configuración de la columna 1 entre la sección superior y, en la pestaña avanzada, seleccione Desactivation en el teléfono y la tableta. Esto ocultará toda la columna y el logotipo que contiene en el móvil. Luego abra la configuración de la columna 2 en la misma fila y asegúrese de que ningún dispositivo esté deshabilitado. Debido a que nuestro logotipo se deshabilitará en dispositivos móviles, tenemos espacio para este impulso.

Por razones estéticas, actualice la alineación de texto para los dos módulos de texto que componen la acción en la columna 2, de la siguiente manera:

Alineación de texto (tableta y teléfono): izquierda

Parte 3: Construyendo una nueva sección de encabezado pegajoso para dispositivos móviles, es importante reducir la altura del encabezado Lipic tanto como sea posible, para que no ocupe gran parte de la ventana de observación. Por esta razón, no haremos la sección superior del encabezado pegajoso. En cambio, crearemos una nueva sección adhesiva que solo se mostrará en el móvil. Por lo tanto, podemos incluir elementos que sean específicos de los dispositivos móviles y que no ocuparán demasiado espacio vertical en el estado pegajoso.

Para crear la nueva sección de encabezado pegajoso, duplique la sección inferior existente que contiene el menú. También puede etiquetar la nueva sección “Sección móvil pegajosa” para referencia más adelante.
Oculte la sección adhesiva existente en el móvil porque incluiremos un menú en nuestra sección móvil pegajosa, abriremos la configuración de la sección adhesiva existente y seleccione desactivado en el teléfono y la tableta.

Luego abra la configuración de la nueva sección móvil adhesiva y seleccione Deshabilitar en el escritorio.

Asegúrese de otorgar a la nueva sección pegajosa móvil una posición pegajosa, de la siguiente manera:

Posición pegajosa: pegue la parte superior

Actualice el tamaño de la fila en este momento, es una buena idea comenzar a editar en la vista de tableta para comprender mejor cómo se verá el diseño móvil. Para hacer esto, haga clic en el icono de la tableta en el conjunto de configuraciones en la parte inferior del fabricante. Luego abra la configuración de la fila y actualice las siguientes opciones de tamaño:

El ancho de la canaleta: 1
Ancho: 94%

Esto nos dará más espacio en los dispositivos móviles.
Actualice el logotipo y la apariencia del menú y luego abra la configuración del menú y agregue un logotipo al menú.
En la pestaña Diseño, actualice el estilo de estilo:
Estilo: alineado a la izquierda

Parte 4: Agregar estilo de estado pegajoso a elementos adhesivos ahora que los elementos están en su lugar para el encabezado móvil pegajoso, podemos comenzar a optimizar el estilo de los elementos en el estado pegajoso. Debido a que la sección tiene una posición pegajosa, podrá cambiar las opciones de posición adhesiva al diseñar la sección o cualquier elemento infantil en la sección. Puede cambiar el estilo de la posición pegajosa haciendo clic en el icono quintado cuando pasa con el mouse sobre una opción de estilo.

Esto nos permitirá darle al encabezado pegajoso un diseño diferente una vez que el usuario ejecute y activa la condición pegajosa de la sección.
Color de papel tapiz de la sección pegajosa Para comenzar, actualice el color de fondo de la sección pegajosa para dispositivos móviles, de la siguiente manera: color de fondo (escritorio): #244435

Color de fondo (Sticky): #fff

Sombra de cuadro de sección pegajosa debajo de la pestaña de diseño, dale a la sección una sombra de la caja en el estado pegajoso, de la siguiente manera:
Box Shadow: Ver captura de pantalla
Color de la sombra (escritorio): transparente
Shadow Color (Sticky): RGBA (0.0,0,0.1)

El logotipo y los iconos del menú pegajoso luego actualizan la imagen del logotipo con un filtro que invierte el logotipo oscuro en una imagen del logotipo predeterminada y luego la invierte a un logotipo oscuro en la condición pegajosa. En las opciones de logotipo, actualice lo siguiente:
Imagen de inversión (escritorio): 0%
Reversión (pegajosa): 100%
También debemos cambiar el color de los iconos de la siguiente manera:

Icono de canasta de compras en color (escritorio): #fff
Color Compre Micon Icon (Sticky): #244435
Icono de búsqueda de color (escritorio): #fff

Icono de búsqueda de color (Sticky): #244435
Icono de menú de hamburguesas de color (escritorio): #fff
Icono de menú de hamburguesas de color (Sticky): #244435
El botón de encabezado lipídico Actualmente, el botón en la sección superior del encabezado no se mostrará en el encabezado pegajoso en el móvil. Podemos agregar el mismo botón a la nueva sección móvil adhesiva y luego hacer que aparezca en la condición pegajosa. Para agregar el botón, copie el botón existente en la columna 3 de la fila en la sección superior. Luego pegue el módulo de botón debajo del menú en la sección móvil pegajosa.
Para que el botón se sienta en la parte superior del menú, abra la configuración del botón y, en la pestaña avanzada, actualice las opciones de posición de la siguiente manera: Posición: Absoluto
Ubicación: Centro
En la pestaña Diseño, actualice la opción de filtro para cambiar la opacidad del botón del 0% al 100% en el estado adhesivo.

Opacidad (escritorio): 0%

Opacidad (pegajosa): 100%
Esto ocultará el botón Ver hasta que el usuario ejecute la página.
Resultado final Para ver el resultado, guarde el aspecto, asigne la plantilla de una página en su sitio web y luego guarde los cambios en el generador de temas. Luego abra la página a la que se asignó la plantilla. Aquí está el resultado. Encabezado pegajoso en el encabezado pegajoso de escritorio en las bañeras de la tableta En los pensamientos finales del teléfono con la división, primero tienes el lujo de pensar cuando se trata de esos encabezados pegajosos. Acabo de mostrarle lo fácil que es agregar un encabezado pegajoso para el móvil usando las opciones incorporadas. Una vez que desbloquee el poder de las opciones pegajosas de la división, puede ser bastante creativo con la forma en que cruza los elementos pegajosos de encabezado. Puede revertir el logotipo de Abrir a Dark con un filtro, hacer que aparezca un botón o cambiar todo el color de fondo. Y esto es solo el comienzo. ¡Siéntase libre de experimentar más personalizaciones que se ajusten a las necesidades de su próximo proyecto! Espero con ansias las noticias tuyas en los comentarios. ¡Suerte!