Cómo crear barras de pie de página móviles fijas con Divi

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 pie de página móviles fijas con Divi en esta publicación paso a paso.

Este tutorial es parte de nuestra iniciativa de diseño Divi en curso, en la que intentamos poner algo extra en su caja de herramientas de diseño cada semana. En esta ocasión, usaremos el paquete de diseño de la clínica de salud y haremos que las barras de pie de página móviles fijas coincidan con el estilo del paquete de diseño. Sin embargo, podrá utilizar este enfoque para cualquier tipo de diseño en el que esté trabajando y crear sus propias alternativas de barra de pie de página móvil fija.

¡Hagámoslo!

Avance

Antes de sumergirnos en el tutorial, echemos un vistazo rápido a los tres ejemplos que recrearemos paso a paso. Estos ejemplos solo se mostrarán en dispositivos móviles (y tabletas si lo prefiere).

Recrear el ejemplo n. ° 1

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

¡Comencemos a recrear la primera barra de pie de página móvil fija! Recomendamos crear una página para tres de los diseños que se incluyen en el paquete de diseño de la clínica de salud. Uno para cada ejemplo. Abra la página a la que desee agregar la primera barra de pie de página. Desplácese hacia abajo hasta el final de la página y agregue una nueva sección justo después de la última.

Espaciado

Abra la configuración de filas y elimine todo el relleno superior e inferior personalizado en la configuración de espaciado.

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

Visibilidad

También estamos ocultando esta sección en el escritorio. Si desea que la barra de pie de página móvil aparezca solo en el dispositivo móvil, siga adelante y oculte la sección en la tableta también.

Agregar nueva fila

Estructura de la columna

Continúe agregando una nueva fila a la sección usando la siguiente estructura de columnas:

Dimensionamiento

Sin agregar ningún módulo todavía, abra la configuración de fila y modifique la configuración de tamaño.

• Hacer esta fila de ancho completo: Sí
• Usar ancho de canalón personalizado: Sí
• Ancho de la canaleta: 1
• Ecualizar alturas de columna: Sí

Espaciado

Elimine todo el relleno superior e inferior predeterminado de la siguiente fila.

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

CSS personalizado

Por último, estamos agregando algunas líneas CSS personalizadas a la fila. Estas líneas ayudarán a convertir la fila en una barra de pie de página fija.

display: flex;
position:fixed;
bottom: 0px;
z-index: 99;

Agregar 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 algún contenido de su elección.

Color de fondo

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

• Color de fondo: # 5e89fb

Configuración de texto

Modifique también la configuración del texto.

• Fuente de texto: Work Sans
• Peso de la fuente del texto: Ligero
• Color del texto: #ffffff
• Tamaño del texto: 16px
• Espaciado de letras de texto: -1px

Espaciado

A continuación, agregue algunos valores de relleno personalizados.

• Acolchado superior: 16px
• Acolchado inferior: 16px
• Relleno izquierdo: 15px
• Relleno derecho: 15px

Frontera

Y también algunas esquinas redondeadas.

• Arriba a la izquierda: 10px
• Arriba a la derecha: 10px

Sombra de la caja

Complete la configuración del módulo agregando una sombra de cuadro sutil.

• Fuerza de desenfoque de sombra de caja: 80px

Agregar módulo Blurb a la columna 2

Agregar contenido

Agregue un módulo Blurb a la segunda columna y agregue un título de su elección.

Seleccionar icono

Continúe seleccionando un icono para el módulo Blurb.

Color de fondo

Agrega también un color de fondo al módulo.

• Color de fondo: # 62de9d

Configuración de iconos

Vaya a la pestaña de diseño y cambie la configuración del icono.

• Color del icono: #ffffff
• Colocación del icono: izquierda
• Usar tamaño de fuente del icono: Sí
• Tamaño de fuente del icono: 19px

Configuración del texto del título

Continúe modificando la configuración del texto del título.

• Fuente del título: Work Sans
• Color del texto del título: #ffffff
• Tamaño del texto del título: 16px
• Espaciado de letras de título: -1px

Espaciado

Agregue también algo de relleno personalizado al módulo.

• Acolchado superior: 20px
• Acolchado inferior: 10px
• Relleno izquierdo: 30px
• Relleno derecho: 30px

Frontera

Y agregue '10px' a las esquinas superior izquierda y superior derecha.

• Arriba a la izquierda: 10px
• Arriba a la derecha: 10px

Sombra de la caja

Por último, pero no menos importante, agregue una sombra de cuadro sutil al módulo.

• Fuerza de desenfoque de sombra de caja: 80px

Recrear el ejemplo n. ° 2

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

¡Pasemos 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.

Espaciado

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

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

Visibilidad

Oculte la sección en el escritorio (y la tableta si lo prefiere).

Agregar nueva fila

Estructura de la columna

Continúe agregando una nueva fila a la sección usando la siguiente estructura de columnas:

Dimensionamiento

Sin agregar ningún módulo, abra la configuración de fila y cambie la configuración de tamaño.

• Hacer esta fila de ancho completo: Sí
• Usar ancho de canalón personalizado: Sí
• Ancho de la canaleta: 1

Espaciado

Elimine también el relleno superior e inferior predeterminado de la fila.

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

CSS personalizado

Agregue algunas líneas CSS personalizadas a la fila siguiente. Estas líneas de código CSS ayudarán a crear la barra de pie de página móvil fija.

display: flex;
position:fixed;
bottom: 0px;
z-index: 99;

Agregar módulo Blurb a la columna 1

Agregar contenido

Continúe agregando un módulo Blurb a la primera columna. Agregue un título de su elección.

Seleccionar icono

Luego, seleccione un icono.

Color de fondo

Agregue un color de fondo al módulo a continuación.

• Color de fondo: # 62de9d

Configuración de iconos

Vaya a la pestaña de diseño y cambie la configuración del icono del módulo.

• Color del icono: #ffffff
• Ubicación del icono: Arriba
• Usar tamaño de fuente del icono: Sí
• Tamaño de fuente del icono: 25px

Configuración del texto del título

Cambie también la configuración del texto del título.

• Fuente del título: Work Sans
• Alineación del texto del título: centro
• Color del texto del título: #ffffff
• Espaciado de letras de título: -1px

Espaciado

Y agregue un poco de acolchado superior e inferior para darle al módulo algo de espacio para respirar.

• Acolchado superior: 30px
• Acolchado inferior: 30px

Frontera

También estamos agregando '15px' al borde superior izquierdo del módulo.

• Arriba a la izquierda: 15px

Sombra de la caja

Y completaremos el módulo con una sutil sombra de caja.

• Fuerza de desenfoque de sombra de caja: 80px

Clone el módulo de Blurb dos veces y coloque los duplicados en las columnas restantes

Una vez que haya terminado de modificar el primer módulo de Blurb, puede seguir adelante y clonar el módulo dos veces y colocar los duplicados en las dos columnas restantes.

Cambiar el color de fondo del duplicado n. ° 1

Cambia el color de fondo del primer duplicado.

• Color de fondo: # 3d3d3d

Cambiar la configuración de espaciado del duplicado n. ° 1

Junto con la configuración de espaciado.

• Margen superior: -20px
• Relleno superior: 50px
• Acolchado inferior: 30px

Cambiar borde del duplicado n. ° 1

Y las esquinas redondeadas también.

Cambiar el color de fondo del duplicado n. ° 2

Cambie también el color de fondo del segundo duplicado en la tercera columna.

• Color de fondo: # 000000

Cambiar borde del duplicado n. ° 2

Junto con las esquinas redondeadas.

• Arriba a la derecha: 15px

Recrear el ejemplo n. ° 3

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

¡Pasemos al siguiente y último ejemplo! Abra una de las páginas, desplácese hacia abajo y agregue una nueva sección.

Divisor superior

Abra la configuración de la sección y agregue un divisor superior.

• Color del divisor: # 62de9d
• Altura del divisor: 110 px

Espaciado

Elimine también todo el acolchado superior e inferior predeterminado de la sección.

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

Sombra de la caja

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

• Fuerza de desenfoque de sombra de caja: 80px

CSS personalizado

E incluya algunas líneas CSS personalizadas en la pestaña avanzada. Esto ayudará a convertir la sección en una barra de pie de página móvil fija.

position:fixed;
bottom:0px;
width: 100%;
z-index: 99;

Visibilidad

Por último, desactive la sección en el escritorio (y la tableta si lo prefiere).

Agregar nueva fila

Estructura de la columna

Continúe agregando una nueva fila a la sección usando la siguiente estructura de columnas:

Dimensionamiento

Sin agregar ningún módulo todavía, abra la configuración de fila y cambie la configuración de tamaño.

• Hacer esta fila de ancho completo: Sí
• Usar ancho de canalón personalizado: Sí
• Ancho de la canaleta: 1

Espaciado

A continuación, agregue un poco de relleno personalizado en la parte superior e inferior.

• Acolchado superior: 30px
• Acolchado inferior: 20px

CSS personalizado

Para asegurarnos de que las tres columnas permanezcan a la misma altura, también agregaremos una línea de código CSS a la pestaña avanzada de la fila.

display: flex;

Agregar módulo Blurb a la columna 1

Agregar contenido

¡Ahora podemos comenzar a agregar módulos! Agregue un módulo Blurb a la primera columna y asígnele un título.

Seleccionar icono

Seleccione un icono a continuación.

Configuración de iconos

Vaya a la pestaña de diseño y cambie la configuración del icono.

• Color del icono: #ffffff
• Ubicación del icono: Arriba
• Usar tamaño de fuente del icono: Sí
• Tamaño de fuente del icono: 25px

Configuración del texto del título

Modifique también la configuración del texto del título.

• Fuente del título: Work Sans
• Orientación del texto del título: Centro
• Espaciado de letras de título: -1px

Clonar módulo Blurb dos veces y colocarlo

Una vez que haya terminado de modificar el módulo Blurb en la columna 1, puede continuar y clonar el módulo dos veces. Coloque los duplicados en las dos columnas restantes.

Cambiar el color del icono del duplicado n. ° 1

No olvide cambiar el color del icono del duplicado ubicado en la segunda columna.

• Color del icono: # 000000

Avance

Ahora que hemos pasado por todos los diferentes pasos, echemos un vistazo final al resultado de los tres ejemplos que hemos manejado anteriormente.

Pensamientos finales

En esta publicación, hemos manejado tres diseños diferentes de barras de pie de página móviles fijas que puede recrear paso a paso siguiendo el tutorial. Las barras de pie de página para dispositivos móviles seguirán a los visitantes a lo largo de su experiencia de desplazamiento en la página. Este tutorial es parte de la iniciativa de diseño de Divi en curso, donde tratamos de poner algo extra en su caja 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!