Cómo diseñar un cajón de pie de página flotante en Divi

Abr 22, 2020 | Tutoriales para Divi

Los cajones de pie de página son adiciones útiles a cualquier sitio web porque almacenan contenido adicional al que los usuarios pueden acceder fácilmente. Los cajones de pie de página son contenedores de contenido web (como una sección Divi) que se pueden abrir y cerrar con solo presionar un botón o al pasar el mouse. Es como tener un pequeño escondite para contenido premium.

En este tutorial, vamos a diseñar un cajón de pie de página flotante en Divi. Agregaremos el cajón de pie de página al Área global de pie de página de la plantilla del sitio web para que el cajón de pie de página sea accesible en todo el sitio junto con el contenido normal del pie de página.

Con el proceso que vamos a utilizar, cualquier sección Divi (y su contenido) se puede convertir en un cajón de pie de página en minutos.

Descargar el tutorial GRATIS

Para descargar el fichero JSON de este tutorial, será necesario descargarlo usando el botón de descarga, suscribiendose a nuestra lista de correo electrónico mediante el siguiente formulario. Si ya está en la lista, simplemente ingrese su dirección de correo electrónico a continuación y haga clic en descargar. No se «volverá a suscribir» ni recibirá correos electrónicos adicionales.

Cómo agregar la plantilla de cajón de pie de página a su sitio Divi

¡ADVERTENCIA !: Agregar esta plantilla anulará la plantilla predeterminada del sitio web (si tiene una) en su sitio Divi. Sugerimos agregar esto a un sitio de prueba para que no arruine nada en un sitio en vivo.

Para importar la plantilla de cajón de pie de página fijo a su propio sitio web, descomprima el archivo zip de descarga para acceder al archivo JSON.

Luego vaya al Panel de WordPress y navegue hasta Divi> Generador de temas.

Luego haga clic en el icono de portabilidad en la parte superior derecha de la página.

Dentro de la ventana emergente de portabilidad, elija el archivo JSON que acaba de descomprimir y seleccione la opción «Descargar copia de seguridad antes de importar», en caso de que haya tenido algo en la plantilla predeterminada del sitio web que no desea anular.

Luego haga clic en el botón Importar.

cajón de pie de página fijo

Por último, guarde los cambios del generador de temas y vea una página en vivo para ver la barra de pie de página fija.

cajón de pie de página fijo

Ahora, vamos al tutorial, ¿de acuerdo?

Parte 1: Agregar un pie de página global

Theme Builder de Divi le permite reemplazar el pie de página predeterminado por uno nuevo actualizando la Plantilla de sitio web predeterminada.

Para crear un pie de página global, vaya al Panel de WordPress y vaya a Divi> Generador de temas. Luego haga clic en el espacio «Agregar pie de página global» dentro de la Plantilla de sitio web predeterminada.

barra de pie de página fija divi

Luego seleccione la opción «Crear pie de página global» en el menú desplegable.

barra de pie de página fija divi

Agregar diseño prefabricado al diseño de pie de página global

Esto desplegará el Editor de diseño de plantilla donde se le preguntará de inmediato con las tres opciones sobre cómo desea comenzar a construir. Seleccione la opción para «Elegir un diseño prefabricado».

cajón de pie de página fijo

En la ventana emergente Cargar desde biblioteca, busque el diseño de la página de destino de la tienda de papelería. Luego haga clic en «Usar este diseño».

cajón de pie de página fijo

Eliminar contenido no deseado del diseño prefabricado

Una vez que el diseño se carga en el editor, despliegue el cuadro emergente Capas haciendo clic en el icono de capas en el menú de configuración. Luego, elimine todas las secciones del diseño, excepto las dos últimas.

cajón de pie de página fijo

Mover y etiquetar las dos secciones

Una vez que se eliminan las secciones, debe tener dos secciones, una etiquetada «Pie de página» y la otra etiquetada «Cómo funciona». Mueva la sección «Pie de página» a la parte superior del diseño.

cajón de pie de página fijo

Cambie la etiqueta de la sección inferior a «Cajón de pie de página». Esta será la sección que utilizaremos como contenido del cajón de pie de página.

cajón de pie de página fijo

Parte 2: crear el cajón de pie de página fijo

Ahora que hemos designado una de las secciones como nuestro pie de página y la otra como el cajón de pie de página, estamos listos para comenzar a crear nuestro cajón de pie de página fijo. Comencemos por crear el ícono de propaganda que usaremos para alternar el cajón de pie de página.

Crear el botón del cajón de pie de página

Agregar nueva fila

Dentro de la sección inferior del «Cajón de pie de página», agregue una nueva fila de una columna.

cajón de pie de página fijo

Etiquete la nueva fila «Botón del cajón» porque esta es la fila que contendrá el botón utilizado para alternar el cajón abierto y cerrado. Luego mueva la fila a la parte superior de la sección.

cajón de pie de página fijo

Relleno de fila

Antes de agregar un módulo, abra la configuración de la fila y actualice el relleno de la siguiente manera:

  • Relleno: 0px arriba, 0px abajo

cajón de pie de página fijo

Acolchado de sección

Luego abra la configuración de la sección «Cajón de pie de página» y actualice el relleno de la siguiente manera:

cajón de pie de página fijo

Para crear el botón en el que se puede hacer clic que alterna el cajón de pie de página, vamos a utilizar un módulo de propaganda con un icono. Y vamos a darle una forma única de gota de agua combinando la forma cuadrada del contenedor del módulo de publicidad con el ícono circular.

Aquí te explicamos cómo hacerlo.

Añadir módulo de publicidad

Agregue un módulo de propaganda a la fila «Botón del cajón» en la parte superior de la sección.

cajón de pie de página fijo

Contenido de Blurb / Ícono

Luego, elimine el contenido predeterminado de Título y Cuerpo y seleccione el icono de flecha que apunta a la esquina superior izquierda (vea la captura de pantalla). Estamos usando el ícono parcialmente girado porque lo vamos a rotar más adelante.

cajón de pie de página fijo

Diseño publicitario

A continuación, proporcione a la propaganda un fondo de la siguiente manera:

  • Color de fondo: # 081540

cajón de pie de página fijo

Luego actualice la configuración de diseño de la siguiente manera:

  • Color del icono: #eeeeee
  • Icono de círculo: SÍ
  • Color del círculo: # 081540
  • Usar tamaño de fuente de icono: SÍ
  • Tamaño de fuente del icono: 17 px

cajón de pie de página fijo

Tamaño de Blurb

Ahora dele al módulo una altura y un ancho de la siguiente manera:

  • Ancho: 30px
  • Altura: 30 px

Esto hará que el ícono del círculo desborde el contenedor de publicidad para crear la forma de gota de agua.

cajón de pie de página fijo

Posición de Blurb

A continuación, asigne a la propaganda una posición absoluta en el centro superior de la sección.

  • Posición: absoluta
  • Ubicación: Centro superior

cajón de pie de página fijo

Configuración de transformación de Blurb

Ahora podemos usar las opciones de transformación para rotar la propaganda / ícono en posición vertical y colocarlo justo encima del contenedor de la sección. Ahora, cuando ocultemos la sección debajo de la ventana del navegador, el icono permanecerá visible / se podrá hacer clic en él.

Actualice lo siguiente:

  • Transformar Traducir Eje X: -50%
  • Transformar Traducir Y Eje: -250%
  • Transformar girar eje Z: -45deg

Luego saca la animación de icono predeterminada:

  • Animación de imagen / icono: sin animación

cajón de pie de página fijo

Vamos a usar JQuery para alternar el cajón, por lo que debemos apuntar a la propaganda / icono como el elemento en el que se puede hacer clic con una clase CSS que luego usaremos en el código. Agregue la siguiente clase CSS:

  • Clase CSS: objetivo del cajón

cajón de pie de página fijo

Configuración de la sección del cajón de pie de página

Ahora vamos a ocultar la sección «Cajón de pie de página» utilizando la opción de transformación de traducción. Abra la configuración de la sección y actualice lo siguiente:

  • Transformar Traducir Y Eje: 100%

La belleza de usar la traducción de transformación aquí es que los valores porcentuales se basan en el tamaño real del elemento. Por lo tanto, el 100% en el eje Y será directamente relativo a la altura de la sección (indique lo que es en cualquier momento dado). En otras palabras, el elemento se moverá hacia abajo la distancia exacta como su propia altura.

cajón de pie de página fijo

Para volver a ver el «Cajón de pie de página», vamos a necesitar invertir el traductor de transformación que acabamos de agregar a la sección. Para hacer esto, necesitaremos apuntar al elemento con una clase CSS y desactivar la traducción de transformación al hacer clic en el icono (devolver la sección completa a su posición original).

Agregar clase CSS a la sección del cajón de pie de página

En la pestaña avanzada, agregue la siguiente clase CSS:

  • Clase CSS: has-transform

cajón de pie de página fijo

Pie de página Sección del cajón Posición fija

Para el último paso, debemos arreglar el cajón del pie de página para que (junto con el icono) flote en la parte inferior de la ventana del navegador.

Actualice la posición de la sección «Cajón de pie de página» de la siguiente manera:

  • Positon: Fijo
  • Ubicación: abajo a la izquierda
  • Índice Z: 13

cajón de pie de página fijo

Deshabilitar contenido para móviles

Debido a que tendrá una cantidad limitada de contenido del cajón de pie de página que cabe en la tableta y el teléfono (debido a la altura limitada de las pantallas), deberá desactivar / ocultar los elementos no esenciales para que no se muestren. En este ejemplo, vamos a ocultar la fila central del diseño de la sección.

cajón de pie de página fijo

Abra la configuración de la penúltima fila en la sección «Cajón de pie de página». En la pestaña avanzada, actualice la opción de visibilidad para deshabilitar la fila en el teléfono y la tableta.

cajón de pie de página fijo

Agregar el código personalizado

Para agregar la funcionalidad de clic y alternar al cajón de pie de página, necesitamos agregar algunos CSS y JQuery personalizados a la página. Para hacer esto, cree un nuevo módulo de código debajo del módulo de propagación utilizado para el botón.

cajón de pie de página fijo

Luego pegue el siguiente código en el cuadro de código:

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
18 años
19
20
21
22
23
24
<style>
  .has-transform, .drawer-target {
    transition: all 400ms ease-in-out;
  }
  .toggle-drawer-animation {
    transform: none !important;
  }
  .toggle-icon-animation {
    transform: rotate(-135deg) !important;
  
  .drawer-target {
    cursor: pointer;
  }
</style>
<script>
(function($) {
  $(document).ready(function(){
    $('.drawer-target').click(function(){
      $(this).toggleClass('toggle-icon-animation');     
      $('.has-transform').toggleClass('toggle-drawer-animation');  
    });   
  });
})( jQuery );  
</script>

cajón de pie de página fijo

Guardar cambios

No olvide guardar el diseño antes de salir del editor.

cajón de pie de página fijo

Guarde los cambios en el generador de temas también.

cajón de pie de página fijo

 

Por Prunaestudio

Por Prunaestudio

Prunaestudio es un estudio de diseño web ubicado en Valencia (España). Estamos especializados en el diseño web basado en WordPress con la plantilla premium de Elegantthemes, Divi.

* Todos el contenido pertenece y se ha traducido del blog de Elegantthemes (Divi Resources)

Nuestras últimas entradas

Pin It on Pinterest

Share This