homefinance blog
Los cajones del sótano son complementos útiles para cualquier sitio web, porque almacenan contenido adicional fácilmente por los usuarios. Los cajones del sótano son contenedores de contenido web (como una sección de la división) que se pueden abrir y cerrar presionando un botón o mientras viajan. Es como tener un pequeño escondite de contenido premium. En este tutorial, diseñaremos un cajón de sótano flotante en el Div. Agregaremos el cajón del sótano al área del sótano global de la plantilla del sitio web, para que el cajón del sótano sea accesible a nivel del sitio, junto con el contenido del sótano ordinario.
Con el proceso que utilizaremos, cualquier sección (y su contenido) se puede convertir en un cajón del sótano en unos minutos. ¡Vamos a empezar! Tire de la vista con un vistazo rápido al cajón de sótano fijo que construiremos en este tutorial. Descargue el aspecto gratuito para poner su mano en los dibujos en este tutorial, primero deberá descargarlo usando el botón a continuación. Para tener acceso a la descarga, deberá suscribirse a nuestra lista diaria de correo electrónico utilizando el formulario a continuación. ¡Como nuevo suscriptor, recibirá más buenas divisiones y un paquete Divaut gratuito todos los lunes! Si ya está en la lista, simplemente ingrese la dirección de correo electrónico a continuación y haga clic en Descargar. No será “reubicado” y no recibirá correos electrónicos adicionales.
Descargar archivos
Descargue el registro gratuito para el Boletín Informativo Divic y le enviaremos una copia de la página de la página de la página final, además de muchos otros recursos, consejos y consejos para Div gratis. Sigue a ti mismo y serás una división maestra en el menor tiempo. Si ya está suscrito, simplemente ingrese el correo electrónico a continuación y haga clic en Descargar para acceder al paquete de apariencia. Se ha suscrito correctamente. ¡Consulte su correo electrónico para confirmar su suscripción y obtener acceso a paquetes de diseño semanales gratuitos!
¡Cómo agregar la plantilla de cajón del sótano a la advertencia de divs de su sitio web!: Agregar esta plantilla reemplazará la plantilla de sitio web predeterminada (si tiene una) en su DIV. Le sugerimos que agregue esto a un sitio de prueba para que no moleste nada en un sitio en vivo.
Para importar la plantilla del cajón de sótano fijo a su propio sitio web, no le guste el archivo ZIP de descarga para acceder al archivo JSON. Luego vaya al tablero de WordPress y navegue en Divin> Temor Builder. Luego haga clic en el icono de portabilidad en la parte superior derecha de la página. En la ventana de portabilidad emergente, elija el archivo JSON que acaba de desactivar y seleccione la opción “Descargue la copia de seguridad antes de importar”, solo si anteriormente ha tenido algo en la plantilla del sitio web predeterminado sobre quién no quería anularla.
Luego haga clic en el botón Importar.
Finalmente, guarde los cambios de constructor de temas y vea una página en vivo para ver la barra de sótano fija.
Ahora, pasemos al tutorial, ¿no? Parte 1: Agregar un sótano global de constructor de temas de divin ‘le permite reemplazar el sótano predeterminado con uno nuevo actualizando la plantilla de sitio predeterminada. Para crear un sótano global, vaya al tablero de WordPress y navegue en Div> temas Builder. Luego haga clic en el espacio “Agregar pie global” en la plantilla de sitio predeterminada. Luego seleccione la opción “Build Global Footer” en el menú Drop -down.
Agregue el diseño prefabricado al diseño global de diseño Esto implementará el editor similar a la plantilla, donde se le preguntará de inmediato las tres opciones sobre cómo desea comenzar a construir. Seleccione la opción “Elija un aspecto prefabricado”.
Desde la ventana emergente que se carga en la biblioteca, busque la apariencia de la página de destino de la tienda de papelería. Luego haga clic en “Use este aspecto”.
Elimine el contenido no deseado del aspecto prefabricado Una vez que el aspecto esté cargado en el editor, implementa el cuadro de capa emergente haciendo clic en el icono de capas en el menú Configuración. Luego elimine todas las secciones en la apariencia, excepto las dos últimas.
Mueva y etiquete las dos secciones una vez que limpien las secciones, debe tener dos secciones, una etiquetada como “sótano” y la otra etiquetada “Cómo funciona”. Mueva la sección del “sótano” a la parte superior de la apariencia.
Cambie la etiqueta de sección inferior a “cajón de pie de página”. Esta será la sección que utilizaremos como contenido del cajón del sótano.
Parte 2: Creando el cajón del sótano ahora que hemos designado una de las secciones como sótano y el otro como cajón del sótano, estamos listos para comenzar a crear nuestro cajón de sótano fijo. Comencemos con la creación del icono de la propaganda que usaremos para cambiar el cajón del sótano. Creando el botón de cajón del sótano Agregue una nueva línea a la sección inferior “Cajón de pie de página”, agregue una nueva fila con una sola columna.
Etiquete la nueva fila de “botón de cajón”, porque esta es la fila que contendrá el botón utilizado para cambiar el cajón y cerrado. Luego mueva la fila a la parte superior de la sección.
El revestimiento de las filas antes de agregar un módulo, abra la configuración de la fila y actualice el relleno de la siguiente manera:
Forro: 0 px arriba, 0 px abajo
La sección de revestimiento luego abra la configuración de 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 puede hacer clic, que cambia el cajón del sótano, usaremos un módulo de blurb con un icono. Y, les daremos una forma única de caída de agua combinando la forma cuadrada del contenedor del módulo de propaganda con el ícono del círculo. Aquí le mostramos cómo hacerlo. Agregue el modo de propaganda Agregue un módulo de propaganda a la fila del “botón de cajón” en la parte superior de la sección.
Contenido / ícono de la transmisión y luego elimine el contenido predeterminado y el contenido del cuerpo y seleccione el icono de flecha que se ve hacia la esquina superior izquierda (vea la captura de pantalla). Usamos el icono parcialmente rotado porque lo rotaremos más tarde.
El diseño de la propaganda, dale a la propaganda un fondo de la siguiente manera:
Color de fondo: # 081540
Luego actualice la configuración de diseño de la siguiente manera:
Icono de color: #EEEEEE
Icono del círculo: si
Color círculo: # 081540
Use el tamaño de la fuente de icono: dapicograma de fuente Dimensión: 17 PX
El tamaño de la propaganda ahora le da al módulo una altura y un ancho de la siguiente manera:
Ancho: 30 PX
Altura: 30 PX
Esto hará que el ícono del círculo exceda el contenedor para crear la forma de la gota de agua.
La posición de la propaganda, dale a la propaganda una posición absoluta en la parte superior del centro de la sección.
Posición: Absoluto
Ubicación: el centro superior
La configuración de transformación de la propaganda ahora puede usar las opciones de transformación para rotar la propaganda / icono en la posición vertical y colocarlo justo por encima del contenedor de sección. Ahora, cuando ocultamos la sección debajo de la ventana del navegador, el icono permanecerá visible / haciendo clic. Actualizar lo siguiente:
Transformar el eje x traducido: -50%
Transformar el eje Y traducido: -250%
Rotar el eje de transformación Z: -45 grados
Luego elimine la animación predeterminada del icono:
Animación de imagen / icono: sin animación
Usaremos jQuey para cambiar el cajón, por lo que tenemos que apuntar a la propaganda / icono como un elemento 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 objetivo
SECTAR DE CONFIGURACIÓN SECTAR SEGUNDO AHORA PRESENTARÁS la sección “Cajón de pie de página” utilizando la opción de traducción traducida. Abra la configuración de la sección y actualice lo siguiente:
Transforma el eje Y traducido: 100%
La belleza de usar la traducción de la traducción aquí es que los valores porcentuales se basan en la dimensión real del elemento. Entonces, el 100% en el eje Y será directamente relativo a la altura de la sección (nomatter que es en cualquier momento). En otras palabras, el elemento se moverá hacia abajo en la distancia exacta como su propia altura.
Para recuperar el “cajón del sótano”, necesitaremos revertir la traducción de la traducción que acabamos de agregar en la sección. Para hacer esto, necesitaremos apuntar al elemento con una clase CSS y detener la transformación cuando hagamos clic en el icono (devuelva la sección completa a su posición original). Agregue la clase CSS a la sección del cajón del sótano en la pestaña avanzada, agregue la siguiente clase CSS: clase CSS: ARSFORMA
Sección de la posición fija subsol subsol para el último paso, debemos arreglar el cajón del sótano 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:
Positivo: fijo
Ubicación: en el lado inferior izquierdo
IND ÍNDICE: 13
Deshabilitar el contenido para dispositivos móviles porque tendrá una cantidad limitada de contenido del cajón del sótano que se ajustará a la tableta y al teléfono (debido a la altura limitada de las pantallas), deberá deshabilitar / ocultar los elementos no esenciales que se mostrarán . En este ejemplo, ocultaremos la línea media de la apariencia de la sección.
Abra la configuración para 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 el encendido del teléfono y la tableta.
Agregando el código personalizado para agregar la función de clic y conmutación al cajón del sótano, necesitamos agregar algunas páginas personalizadas de CSS y JQuey. Para hacer esto, cree un nuevo módulo de código en el módulo de propaganda utilizado para el botón.
Luego pegue el siguiente código en el cuadro de código:
.Has-Transform, .Drawer-Tartarg {
Transición: todos los 400 ms de facilidad;
}
.Togle-Drawer-Animation {Transform: Ninguno! IMPORTANTE;
}
.Togle-icon-animation {
Transformación: Rotado (-135deg)!
}
.Drawer-Target {
Cursor: puntero;
}
(función ($) {
$ (documento) .Ready (function () {
$ (‘.
$ (this) .ToglecLass (‘togle-icon-animation’);
$ (‘. HA-TRANSFORM’). TOGGLECASS (‘TOGLE-ROUWER-ANIMATION’);
});
});
}) (JQuery);
Guarde los cambios, no olvide guardar el aspecto antes de dejar el editor.
Guarde los cambios y el generador de temas.
Resultado final Ahora podemos acceder a cualquiera de las páginas en su sitio web para ver el resultado final. Y aquí está el móvil. Observe cómo el pie de página global también está en el lugar correcto en la parte inferior de la página, así como en el cajón fijo del sótano.
Los pensamientos finales esperan que el pie de página flotante lo ayude a promover el contenido de una manera accesible y divertida. Como cualquier cajón, puedes llenarlo con casi cualquier cosa que puedas pensar. Espero tener noticias suyas en los comentarios. ¡Suerte!
