Cómo crear barras móviles fijas con div Div

Sabemos lo importante que es asegurarnos de que todo esté personalizado para adaptarse a la experiencia móvil. Para ayudarlo a llevar la experiencia móvil a otro nivel, le mostraremos cómo crear barras de sótano fijas con DIV en este paso a paso. Este tutorial es parte de nuestra iniciativa continua de diseño de la Divic, en la que intentamos poner algo adicional en las herramientas de diseño. Esta vez, utilizaremos el paquete de apariencia para la clínica de salud y haremos que las barras base móvil fijas coincidan con el estilo del paquete de estilo. Sin embargo, podrá utilizar este enfoque para cualquier tipo de diseño para el que trabaje y puede crear sus propias alternativas fijas para la barra de sótano móvil.
¡Vamos a eso! Vista previa antes de arrojar nuestras cabezas en el tutorial, para echar un vistazo rápido a los tres ejemplos que recrearemos paso a paso. Estos ejemplos solo aparecerán en dispositivos móviles (y tableta, si lo prefiere).

Recrear el ejemplo no. 1

Agregue una nueva sección a la parte inferior de la página, ¡comencemos a recrear la primera barra móvil fija! Le recomendamos que cree una página para tres de los aspectos que se incluyen en el paquete de apariencia de la Clínica de Salud. Uno para cada ejemplo. Abra cualquier página que desee agregar la primera barra del sótano. Desplácese hacia abajo hasta el final de la página y agregue una nueva sección inmediatamente después de la última.

Espacio Abra la configuración de la fila y elimine todos los rellenos personalizados e inferiores de la configuración de espaciado.
SUS Lingo: 0 PX
Finamiento inferior: 0 PX

Visibilidad ocultamos esta sección en el escritorio. Si desea que la barra del sótano móvil aparezca solo en el móvil, continúe y esconde la sección en la tableta.

Dimensión sin agregar módulos, abra la configuración de la fila y modifique la configuración de tamaño.

Haga esta fila ancho completo: sí
Use el ancho personalizado de la canaleta: sí
El ancho de la canaleta: 1
Igualar las alturas de la columna: sí
El espacio elimina todos los deflagments predeterminados e inferiores de la siguiente fila.

SUS Lingo: 0 PX
Finamiento inferior: 0 PX
CSS finalmente está personalizado, agregamos algunas filas CSS personalizadas seguidas. Estas líneas ayudarán a convertir la línea en una barra de sótano fija. Pantalla: Flex;

Posición: fijo;
Abajo: 0px;
Índice Z: 99;
Agregue un módulo de texto a la columna 1 Agregar contenido es hora de comenzar a agregar módulos. El primer módulo que necesitamos es un módulo de texto en la columna 1. Agregue un contenido de su elección.

Acceso al color del papel tapiz La configuración de fondo del módulo y cambia el color de fondo.

Color de fondo: # 5E89FB
Configuración de texto Cambio y configuración de texto.

Texto de fuentes: trabajo sin
El peso de la fuente de texto: luz
Color de texto: #ffffff
Tamaño de texto: 16 PX
Texto de la carta de espacio: -1 PX
Espacio agregue algunos valores de llenado personalizados.

Revestimiento superior: 16 px
Revestimiento inferior: 16 PX
Junta izquierda: 15 PX
Revestimiento derecho: 15 PX
Borde y algunas esquinas redondeadas.

A la parte superior izquierda: 10 PX
A la esquina superior derecha: 10 px
Box Sombra Completa la configuración del módulo agregando una sombra de caja sutil. Poniendo el desenfoque de la caja de la caja: 80 PX

Agregue los módulos de la propaganda a la columna 2 Agregar contenido Agregue un módulo de propaganda a la segunda columna y agregue un título a su elección.
Seleccione el icono Continuar seleccionando un icono del módulo de propaganda.

El color de fondo también agrega un color de fondo al modo.

Color de fondo: # 62de9d

La configuración del icono va a la pestaña de diseño y cambia la configuración del icono.
Icono de color: #ffffff

Colocación de íconos: izquierda
Use el icono del tamaño de la fuente: sí
Icono de tamaño de fuente: 19 PX
Configuración del texto del título Continúe cambiando la configuración del texto del título.
Título de la fuente: Work Sans

Color de texto del título: #ffffff
Título Tamaño del texto: 16 PX
Cartas de título de espacio: -1 PX
Espacio agregue un relleno personalizado al modo.
Revestimiento superior: 20 px

Finamiento inferior: 10 PX
Revelaje izquierdo: 30 PX
Revestimiento derecho: 30 PX
Borde y agregue “10 px” a las esquinas superior izquierda y derecha izquierda.
A la parte superior izquierda: 10 PX

A la esquina superior derecha: 10 px
Box Shadow por último, pero no menos importante, agregue un tono de caja sutil a la forma.
Poder de poco claro de la sombra de la caja: 80 px

Recrear el ejemplo no. 2
¡Agregue una nueva sección al final de la página, vamos al segundo ejemplo! Nuevamente, abra una página de su elección, desplácese hacia abajo hasta el final de la página y agregue una nueva sección.

Espacio Abra la configuración de la sección y elimine el relleno predeterminado e inferior.

SUS Lingo: 0 PX

Finamiento inferior: 0 PX
Visibilidad ocultar la sección en el escritorio (y la tableta, si lo prefiere).
Agregue una nueva fila La estructura de la columna Continúe agregando una nueva línea a la sección utilizando la siguiente estructura de columnas: dimensionamiento sin agregar módulos, abrir la configuración de línea y modificar la configuración de tamaño.

Haga esta fila ancho completo: sí

Use el ancho personalizado de la canaleta: sí

El ancho de la canaleta: 1
Espacio eliminar y el llenado predeterminado e inferior de la fila.
SUS Lingo: 0 PX
Finamiento inferior: 0 PX

CSS personalizado agregue algunas líneas CSS personalizadas a la siguiente fila. Estas líneas de código CSS lo ayudarán a crear la barra de sótano móvil fija.
Pantalla: Flex;
Posición: fijo;

Abajo: 0px;
Índice Z: 99;
Agregue los módulos de la propaganda a la columna 1 Agregar contenido Continuar agregando un módulo de propaganda a la primera columna. Agregue un título a su elección.
Seleccione el icono y luego, seleccione un icono.
Color del sótano Agregue un color de fondo al siguiente módulo.


Color de fondo: # 62de9d

Icono de configuración Vaya a la pestaña Design y modifique la configuración del icono del módulo.

Icono de color: #ffffff
Colocando iconos: arriba

Use el icono del tamaño de la fuente: sí
Icono de tamaño de fuente: 25 PX
Configuración de texto de título Modificar y configuración de texto de título.
Título de la fuente: Work Sans
Alineación del texto del título: Centro

Color de texto del título: #ffffff
Cartas de título de espacio: -1 PX
Espacio y agregue un poco de revestimiento superior e inferior para dar el módulo espacial para respirar.
Revestimiento superior: 30 px
Finamiento inferior: 30 px

El borde también agregue “15px” al borde superior izquierdo del módulo.
A la parte superior izquierda: 15 PX
Box Shadow y completaremos el módulo con un tono de caja sutil.

Potencia de la falta de claro de la sombra de la caja: 80 pxClone El módulo de la transmisión dos veces y coloque los duplicados en las columnas restantes después de haber terminado de cambiar el primer módulo de blurbs, puede continuar el módulo dos veces y colocar los duplicados en las dos columnas restantes .
Cambie el color de fondo del duplicado no. 1 Cambie el color de fondo del primer duplicado.

Color de fondo: # 3D3D3D
Cambie la configuración de espacio para duplicar no. 1 junto con la configuración de espaciado.

Margen superior: -20 PX

Revestimiento superior: 50 px
Finamiento inferior: 30 px

Cambie el borde del duplicado no. 1 y esquinas redondeadas también.
Cambie el color de fondo del duplicado no. 2 Cambie el color de fondo del segundo duplicado en la tercera columna.
Color de fondo: # 000000
Cambie el borde del duplicado # 2 junto con las esquinas redondeadas.

A la esquina superior derecha: 15 px

Recrear el ejemplo no. 3
¡Agregue una nueva sección al final de la página, vamos al siguiente y último ejemplo! Abra una de las páginas, desplácese hacia abajo y agregue una nueva sección.

Supere divisor, abra la configuración de la sección y agregue un separador superior.
Color divisor: # 62de9d

Altura del divisor: 110 PX

El espacio también elimina todos los valores predeterminados hacia arriba e inferior de la sección.

SUS Lingo: 0 PX
Finamiento inferior: 0 PX
Box Shadow Agregue una sombra de caja sutil a la siguiente sección.

Poder de poco claro de la sombra de la caja: 80 px
CSS personalizado e incluye algunas líneas CSS personalizadas en la pestaña Avanzada. Esto ayudará a convertir la sección en una barra de sótano móvil fija. Posición: fijo;
Abajo: 0px;

Ancho: 100%;
Índice Z: 99;

Finalmente, la visibilidad, apague la sección en el escritorio (y la tableta, si lo prefiere). Acuerde una nueva fila La estructura de la columna continúa agregando una nueva línea a la sección utilizando las siguientes columnas:
Dimensión sin agregar módulos, abra la configuración de la fila y modifique la configuración de tamaño.
Haga esta fila ancho completo: sí
Use el ancho personalizado de la canaleta: sí

El ancho de la canaleta: 1

Espacio agregue algunos forros personalizados en la parte superior e inferior.

Revestimiento superior: 30 px
Finamiento inferior: 20 PX
CSS personalizado Para garantizar que las tres columnas permanezcan a la misma altura, también agregaremos una línea de código CSS a la pestaña de fila avanzada. Pantalla: Flex;
Agregue los módulos de blurb a la columna 1 Agregar contenido ¡Ahora podemos comenzar a agregar módulos! Agregue un módulo de propaganda a la primera columna y dale un título.

Seleccione el icono Seleccione un icono adicional.
La configuración del icono va a la pestaña de diseño y cambia la configuración del icono.
Icono de color: #ffffff

Colocando iconos: arriba

Use el icono del tamaño de la fuente: sí

Icono de tamaño de fuente: 25 PX

Configuración de texto de título Modificar y configuración para el texto del título.
Título de la fuente: Work Sans
Orientación del texto del título: Centro
Cartas de título de espacio: -1 PX
Módulos de propaganda clon dos veces y colocar después de haber terminado de cambiar el módulo de la propaganda en la columna 1, puede continuar el módulo dos veces. Coloque los duplicados en las dos columnas restantes.

Cambie el color del icono duplicado no. 1 No olvide cambiar el color del icono duplicado ubicado en la segunda columna.
Icono de color: # 000000
Vista previa Ahora que hemos pasado por todos los pasos diferentes, para echar un vistazo final al resultado de los tres ejemplos que tratamos anteriormente. Buinds finales En esta publicación, he tratado tres modelos diferentes de barras móviles fijas por los que puede recurrir paso después del tutorial.Los bares móviles del sótano seguirán a los visitantes durante la experiencia en la página.Este tutorial es parte de la Iniciativa de Diseño Divic, en la que intentamos introducir algo adicional en el conjunto de herramientas de diseño cada semana.Si tiene alguna pregunta o sugerencia, asegúrese de dejar un comentario en la sección de comentarios a continuación.