ElegantThemes

Cómo usar Divi para hacer que el pie de página sea pegajoso

Los pies de página fijos son una excelente manera de mostrar contenido importante a los visitantes. El pie de página permanece en la parte inferior de la pantalla cuando se desplaza, por lo que siempre tienen fácil acceso al contenido. Esto es ideal para información de contacto, enlaces especiales, etc. Afortunadamente, es fácil crear pies de página adhesivos con Divi. En este tutorial, veremos cómo hacer que una parte del pie de página de Divi sea pegajosa, y lo ajustaremos de manera diferente para dispositivos móviles y de escritorio.

Avance

Antes de comenzar, echemos un vistazo a lo que crearemos en este tutorial.

Pie de página de escritorio Sticky Divi

Así es como se ve nuestro pie de página adhesivo Divi en el escritorio.

Teléfono Sticky Divi Footer

Así es como se ve nuestro pegajoso pie de página Divi en el teléfono.

¿Por qué utilizar un pie de página adhesivo?

Hay varias ventajas de usar pies de página adhesivos …

Primero, las páginas que no tienen suficiente contenido para llenar la altura de la pantalla tendrán un pie de página flotante por defecto. El pie de página adhesivo bloquea el pie de página en la parte inferior de la pantalla para evitar que flote. Esto hace que la página se vea mejor y no distraiga al lector.

Otra ventaja es que es un gran lugar para llamar a la acción o información que el usuario puede usar. La información de contacto, los anuncios de ventas, los anuncios publicitarios, etc. se pueden colocar en el pie de página adhesivo. Los números de teléfono son especialmente útiles para los teléfonos porque puede hacer que se pueda hacer clic en ellos.

Descargar Divi footer

Primero, necesita una plantilla de pie de página para usar con Divi Theme Builder. Puede crear sus propias plantillas u obtener plantillas gratuitas en el blog Elegant Themes. Elegant Themes proporciona plantillas de encabezado y pie de página gratuitas para combinar con muchos paquetes de diseño gratuitos disponibles en Divi. Puede encontrar plantillas de pie de página buscando «pie de página libre» o «plantilla de pie de página» en su blog. Descarga tu plantilla y descomprime el archivo.

Para mi ejemplo, estoy usando las plantillas gratuitas de encabezado y pie de página del paquete de diseño de planificación patrimonial de Divi. También utilizo la página de inicio de sesión en el paquete de diseño de planificación patrimonial como contenido de la página.

Sube tu pie de página Divi

Sube tu pie de página Divi

Para cargar su plantilla de pie de página, vaya a dos > Generador de temas En el panel de WordPress.Haga clic en portabilidad Icono en la esquina superior derecha y seleccione importar En el modo abierto.A continuación, haga clic en Seleccionar el archivo Y navegue hasta el archivo JSON en su computadora y selecciónelo.Finalmente, haga clic en el botón Importar plantilla de generador de temas Divi En la parte inferior del modal. Espere a que se cargue la plantilla y guarde su configuración.

Puede editar la plantilla desde Theme Builder en el backend o Visual Builder en el frontend.

Haz que tu pie de página Divi sea pegajoso

Haz que tu pie de página Divi sea pegajoso

Trabajo en la interfaz, por lo que puedo ver los resultados en tiempo real para asegurarme de que funciona con el cuerpo del sitio web.En la parte frontal, seleccione Habilitar el generador de visualización Y desplácese hacia abajo hasta el pie de página, luego seleccione Editar plantilla de pie de página.

Configuración de pie de página adhesivo Divi

Configuración de pie de página adhesivo Divi

Haremos que parte del pie de página sea pegajosa. Esta sección incluye información sobre la dirección, el teléfono y el correo electrónico. Cuando esté en un estado pegajoso, lo haremos más pequeño y haremos diferentes ajustes al escritorio y al pie de página.Coloca el cursor sobre la parte que queremos pegar y selecciona Icono de configuración.

Configuración de pie de página adhesivo Divi

escoger avanzado Tab y desplácese hacia abajo para Efecto de desplazamiento. El primer ajuste es Posición pegajosa. Haga clic en el cuadro desplegable y seleccione Apégate a elloEsto habilitará la opción de adherencia para toda la sección.

Configuración de pie de página adhesivo Divi

A continuación, vaya a diseño Tab y desplácese hacia abajo para espaciadoYa debería tener relleno superior e inferior, pero si no existe, agregue 30px para cada uno.

  • Relleno: 30px, arriba y abajo

Pase el mouse sobre el campo para mostrar múltiples opciones.Haga clic en Icono de chinchetaEsto activará el ajuste de viscosidad para esta configuración.

Configuración de pie de página adhesivo Divi

Verá un icono de escritorio y un icono de chincheta. El icono del escritorio estará activo.Haga clic en Icono de chincheta Ajuste el relleno de parte del estado pegajoso. Agregue 0px para la parte superior e inferior.

  • Relleno adhesivo: 0px, arriba y abajo.

Ya puedes ver que esta parte es más corta que antes. Esto hará que la sección parezca más pequeña cuando esté fuera de su sección y luego crecerá a su tamaño normal cuando esté bloqueada en el pie de página. Esto es todo lo que necesitamos hacer para la configuración del escritorio. La tableta seguirá automáticamente esta configuración.

Configuración de la columna de pie de página de Sticky Divi

Configuración de la columna de pie de página de Sticky Divi

Realizaremos algunos cambios en el diseño del pie de página del teléfono.Coloca el cursor sobre la fila y haz clic Icono de configuración.

Configuración de la columna de pie de página de Sticky Divi

A continuación, ajustaremos dos de las columnas.Haga clic en Icono de configuración Para la primera columna.

Configuración de la columna de pie de página de Sticky Divi

escoger avanzado Tab y desplácese hacia abajo para visibilidad. bajo Desactivar abierto, Cheque teléfonoLo habilitaremos en una tableta porque funciona de la misma manera que una computadora de escritorio.Haga clic en Flecha hacia atrás En la esquina superior izquierda del modal.

  • Discapacitado: teléfono

Configuración de la columna de pie de página de Sticky Divi

A continuación, haga clic en Icono de configuración Para la tercera columna.

Configuración de la columna de pie de página de Sticky Divi

Ir avanzado Etiqueta, desplácese hasta visibilidadY deshabilitarlo teléfonoHaga clic en la marca de verificación verde en la parte inferior o haga clic en la flecha hacia atrás en la parte superior.

  • Discapacitado: teléfono

Cierre el modal y guarde sus cambios.

Número de teléfono en el que se puede hacer clic

Número de teléfono en el que se puede hacer clic

Dado que la versión móvil de este pie de página adhesivo solo mostrará el número de teléfono, quiero que se pueda hacer clic en él. Esto aprovecha el número de teléfono que queda en la pantalla y crea una llamada a la acción.Haga clic en configurar Para módulos de texto con números de teléfono.

Número de teléfono en el que se puede hacer clic

Haremos que este número solo esté disponible para teléfonos móviles. Las computadoras de escritorio y tabletas no podrán hacer clic. Si desea que se pueda hacer clic en él en el escritorio, omita hacer clic en el icono.

escoger Icono de teléfono. escoger texto En la pestaña Cuerpo Editor de contenido y pegue este HTML para obtener un número de teléfono en el que se puede hacer clic:

(255) 252-6258

Para mi ejemplo, utilicé el número que venía con la plantilla. Simplemente cambie su propio número. Dado que los enlaces en los que se puede hacer clic se cambian automáticamente al color de enlace predeterminado, también agregué algo de CSS en línea para cambiar el color de los enlaces en los que se puede hacer clic a negro. Cambie el color agregando un nombre o código hexadecimal.

También puede cambiar el título de «Teléfono» a «Hacer clic para llamar» o similar.

Finalmente, cierre su configuración y guarde su diseño.

resultado

Así es como se ve nuestro pie de página adhesivo Divi en teléfonos móviles y de escritorio.

Pie de página de escritorio Sticky Divi

Así es como se ve nuestro pie de página adhesivo Divi en el escritorio.

Pie de página adhesivo del departamento telefónico

Así es como se ve nuestro pegajoso pie de página Divi en el teléfono. Se puede hacer clic en el número de teléfono en este pie de página.

Poniendo fin a los pensamientos

Así es como usamos las opciones adhesivas de Divi Builder para hacer que los pies de página de Divi sean adhesivos. Se puede hacer clic en todo el pie de página o en cualquier elemento del pie de página para establecer la adherencia. La opción de estado del pie de página permite que los elementos se vean diferentes cuando están pegajosos. Esto abre muchas opciones de diseño para pies de página adhesivos.

Esperamos saber de usted. ¿Ha utilizado la opción de adherencia de Divi para hacer que su pie de página de Divi sea pegajoso? Háganos saber su experiencia en los comentarios a continuación.

El artículo Cómo usar Divi para hacer que su pie de página sea pegajoso apareció por primera vez en el elegante blog temático.

Artículo Recomendado:  Ecolife v1.0.1 - Tema orgánico de WordPress para WooCommerce

Publicaciones relacionadas

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *