Los cajones inferiores son complementos útiles para cualquier Sitio web, ya que almacenan contenido adicional de fácil acceso para los usuarios. Los cajones de pie de página son contenedores de contenido web (como una sección Divi) que se pueden abrir y cerrar haciendo clic en un botón o pasando el cursor sobre ellos. Es como tener un pequeño alijo de contenido premium.
En este tutorial, diseñaremos un cajón de pie de página flotante en Divi. Agregaremos el cajón de pie de página al área de pie de página global del plantilla de sitio web para que el cajón de pie de página sea accesible en todo el sitio con contenido de pie de página normal.
Con el proceso que vamos a utilizar, cualquier sección de Divi (y su contenido) se puede convertir en un cajón de pie de página en cuestión de minutos.
Cómo agregar la plantilla de cajón de pie de página a su sitio Divi
Agregar este modelo reemplazará el plantilla de sitio web por defecto (si tiene uno) en su sitio Divi. Sugerimos agregarlo a un sitio de prueba para que no arruine nada en un sitio en vivo.
Para importar la plantilla del cajón de pie de página fijo por su cuenta Sitio web, descomprima el archivo zip de descarga para acceder al archivo JSON.
Luego vaya al panel de WordPress y vaya a Divi> Theme Builder.
Luego haga clic en el ícono de portabilidad en la parte superior derecha de la página.
En la ventana 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 previamente en el plantilla de sitio web predeterminado que no quería anular.
Luego haga clic en el botón Importar.
Finalmente, guarde los cambios en el generador de temas y muestre una página en vivo para ver la barra de pie de página fija.
Ahora pasemos al tutorial, ¿de acuerdo?
Parte 1: Agregar un pie de página global
El generador de temas Divi le permite reemplazar el pie de página predeterminado por uno nuevo actualizando la plantilla predeterminada del sitio web.
Para crear un pie de página global, vaya al panel de WordPress y vaya a Divi> Theme Builder. Luego haga clic en el espacio "Agregar pie de página global" dentro de la Plantilla de sitio web predeterminada.
Luego, seleccione la opción "Crear pie de página global" de la lista desplegable.
Agregar un diseño predefinido a un diseño de pie de página global
Esto desplegará el Editor de diseño de modelo, donde se le solicitarán inmediatamente las tres opciones sobre cómo desea comenzar a construir. Seleccione la opción "Elegir un diseño predefinido".
En la ventana emergente Cargar desde biblioteca, busque el diseño de la página de destino del material de escritorio. Luego haga clic en "Usar este diseño".
Eliminar contenido no deseado del diseño prefabricado
Una vez que el diseño está cargado 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.
Mover y etiquetar las dos secciones.
Una vez que se eliminan las secciones, debe tener dos secciones, una titulada "Pie de página" y la otra titulada "Cómo funciona". Mueva la sección "Pie de página" a la parte superior del diseño.
Cambie la redacción de la sección inferior para que diga "Cajón de pie de página". Esta será la sección que usaremos como contenido de nuestro cajón de pie de página.
Parte 2: crear el cajón de pie de página fijo
Ahora que hemos designado una de las secciones como pie de página y la otra como cajón de pie de página, estamos listos para comenzar a construir nuestro cajón de pie de página fijo. Comencemos por crear el ícono de propaganda que usaremos para alternar el cajón del pie de página.
Creación del botón del cajón de pie de página
Añadir una nueva linea
En la sección de pie de página inferior, agregue una nueva fila a una columna.
Etiquete la nueva fila "Botón del cajón" porque esta es la fila que contendrá el botón que se utiliza para abrir y cerrar el cajón. Luego mueva la línea a la parte superior de la sección.
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 alto, 0px bajo
Relleno de sección
Luego abra la configuración en la sección "Cajón de pie de página" y actualice el relleno de la siguiente manera:
Para crear el botón en el que se puede hacer clic que alterna el cajón del pie de página, usaremos un módulo de propaganda con un ícono. Y le daremos una forma de lágrima única combinando la forma cuadrada del contenedor del pod de Blurb con el icono del círculo.
He aquí cómo.
Agregar un módulo Blurb
Agregue un módulo de texto de presentación a la línea "Botón del cajón" en la parte superior de la sección.
Contenido / icono de publicidad
A continuación, elimine el título y el contenido del cuerpo predeterminados y seleccione el icono de flecha que apunta a la esquina superior izquierda (vea la captura de pantalla). Estamos usando el icono parcialmente girado porque lo vamos a rotar más tarde.
Diseño publicitario
Luego dé el texto de presentación de la siguiente manera:
- Color de fondo: # 081540
Luego actualice los parámetros 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 del icono: SÍ
- Tamaño de fuente del icono: 17 píxeles
Tamaño del texto de presentación
Ahora dele al módulo una altura y un ancho de la siguiente manera:
- Ancho: 30px
- Altura: 30px
Esto hará que el ícono circular se desborde en el contenedor de texto para crear la forma de una gota de agua.
Posición de Blurb
Luego, asigne al texto de presentación una posición absoluta en el centro superior de la sección.
- Posición: absoluta
- Ubicación: Centro superior
Configuración de transformación de Blurb
Ahora podemos usar las opciones de transformación para rotar la propaganda / icono hacia arriba y colocarlo justo encima del contenedor de la sección. Ahora, cuando ocultemos la sección debajo de la ventana del navegador, el ícono permanecerá visible / se podrá hacer clic.
Actualice los siguientes elementos:
- Transformar trasladar eje X: -50%
- Transformación del eje Y: -250%
- Transformar la rotación del eje Z: -45 grados
Luego elimine la animación del icono predeterminada:
- Animación de imagen / icono: sin animación
Usaremos JQuery para alternar el cajón, por lo que debemos apuntar al texto / icono como un elemento en el que se puede hacer clic con una clase CSS que usaremos más adelante en el código. Agregue la siguiente clase CSS:
- Clase CSS: cajón de destino
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" usando la opción de transformación de traducción. Abra la configuración de la sección y actualice lo siguiente:
- Transformar trasladar eje Y: 100%
La belleza de usar la 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 (sin importar cuál sea en un momento dado). En otras palabras, el elemento se moverá hacia abajo la distancia exacta como su propia altura.
Para volver a ver el "Cajón de pie de página", necesitaremos revertir la traducción de transformación que acabamos de agregar a la sección. Para hacer esto, necesitaremos apuntar al elemento con una clase CSS y deshabilitar la transformación de traducción haciendo clic en el ícono (traer toda la sección de regreso a su posición original).
Agregue una 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
Sección del cajón de pie de página Posición fija
Para el último paso, necesitamos arreglar el cajón del pie de página para que (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:
- Posición: fija
- Ubicación: abajo a la izquierda
- Índice Z: 13
Desactivar contenido móvil
Debido a que tendrá una cantidad limitada de contenido en el cajón del pie de página que se ajustará tanto a la tableta como al teléfono (debido a la altura limitada de la pantalla), deberá apagar / ocultar los elementos no esenciales de la pantalla. En este ejemplo, vamos a ocultar la fila del medio del diseño de la sección.
Abra la configuración de la segunda a la ú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 apagar la línea en el teléfono y la tableta.
Agregar código personalizado
Para agregar la funcionalidad de hacer clic y alternar en el cajón de pie de página, debemos agregar CSS y JQuery personalizados a la página. Para hacer esto, cree un nuevo módulo de código debajo del módulo Blurb utilizado para el botón.
Luego pegue el siguiente código en el área de código:
.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;}(function($) {$(document).ready(function(){$('.drawer-target').click(function(){$(this).toggleClass('toggle-icon-animation'); $('.has-transform').toggleClass('toggle-drawer-animation'); }); });})( jQuery );
Guardar cambios
Recuerde guardar el diseño antes de salir del editor.
También guarde los cambios en el generador de temas.
Resultado final
Ahora podemos ir a cualquier página de tu Sitio web para ver el resultado final.
Consideraciones finales
Espero que el cajón de pie de página flotante te ayude promover contenidos de una manera divertida y accesible. Como cualquier cajón, puedes llenarlo con casi cualquier cosa que se te ocurra.
Otros recursos
Aquí hay una lista de tutoriales que pueden ayudarlo a lograr más con las características internas de Divi.
- Cómo crear una caja de herramientas de tema en Divi
- Cómo crear una sección promocional animada en Divi
- Cómo personalizar cuadrículas en Divi
Traducido de: Elegante Temas
