Cree una superposición del contenido de caída en el encabezado de la apariencia de Beaver Themer

Esta es una guía de inicio para ponerlo en funcionamiento con un rasguño superpuesto en el contenido oculto en Beaver Builder, no hay nada específico para Beaver Builder, además del hecho de que es fácil construir el contenido superpuesto en Builder en sí mismo, Display – Normalmente en la pantalla de edición de BB, pero muestro/oculto la visualización pública del contenido superpuesto. Esto se puede aplicar fácilmente a cualquier marco. Hay factores de diseño en la forma en que cada encabezado se comporta en el tamaño de la tableta y los dispositivos móviles, por lo que la guía funcionará bien en el escritorio, pero dependiendo de su contenido, deberá agregar más consultas de medios CSS … para operar en dimensiones más pequeñas.
La guía ofrece algunos códigos JS y CSS que puede agregar a las pestañas JS y CSS con el aspecto de Bever Themer y se mostrarán donde sea que muestre el encabezado Themer. Hay algunos módulos en el ecosistema BB que ya tienen elementos de caída y superposición, pero tienden a ser solo para menús; esto permite que el contenido se incluya en cualquier módulo BB. Al final, se adjunta el archivo de plantilla que puede importar directamente con todo el código.
Cree una apariencia del encabezado Beaver Themer, hágalo pegajoso y cree 2 filas, una es el encabezado real y el segundo es el flyout, le dé a la segunda fila una clase CSS. cubierta
Complete ambas filas con su contenido. Abra/cierre el botón de interruptor de contenido en el encabezado en sí, debe crear un disparador de botón/enlace que cambie el botón de caída: se utiliza este ejemplo de bloque HTML.
!
En el ejemplo animado, el botón es un módulo HTML en la tercera columna en el encabezado principal, aquí es posible que no desee un botón, por otro lado, un icono, cambie la marca apropiada.
Agregar a JavaScript (function ($) {
$ (function () {
OpenOverlay ();
Counsroverlay ();
});
Function OpenOverlay () {
$ (‘.
$ (‘Body’). AddClass (‘superpuesto-actual’);
$ (‘. Overlay’). CSS (“Altura”, “100vh”); // Establezca la altura que desea superponer para hacerse cargo de la ventana de vista, puede usar PX, % etc.
devuelve falso;
});
}
Función closeverlay () {
$ (‘. Overlay-close’). on (‘hacer clic’, function () {
$ (‘Body’). RemoveClass (‘superpuesto-actual’);
$ (‘. Overlay’). CSS (“Altura”, “0%”); // Cuando se cerra no hay altura
devuelve falso;
});
}
}) (JQuery);
Las cosas a cambiar en JS son la altura de la ventana de visualización de superposición: el clic inicial creará la altura de 100 VH y el segundo clic eliminará la altura 0% Agregar en CSS /* superpuesto (fondo) a medida que aparece al cambiar* /
.Coping {
/ * La altura y el ancho dependen de cómo desee revelar superposición (ver JS) */
Altura: 0; / * Altura de superposición controlada en JS */
Ancho: 100%;
Posición: fijo;
IND ÍNDICE: 1; / * Permanecer en la cima */
Derecha: 0;
Arriba: 128px; / * Qué tan lejos de la parte superior de la página aparecer: aquí el encabezado se fija en 128px */
Color de fondo: RGBA (255,255,255, .9); / * Superpuesto BG */
Desbordamiento: oculto; / * Desactiva la ejecución horizontal */ transición: 0.5s; / * 0.5 segundos Efecto de transición para deslizar o superponer la superposición (altura o ancho, dependiendo de la divulgación) */
}
. Overlay .fl-hilera fijada {
Ancho máximo: ninguno;
}
.Open-CLOSE-FLYOUT {
Pantalla: Flex;
Flex-Flow: Row Nowrap;
Controlado en justificación: centro;
}
. Overlay-Close {
Tamaño de fuente: 30px;
Altura de la línea: 1;
Pantalla: ninguno;
}
. Overlay-Active. Overlay-Bar {
Pantalla: ninguno;
Altura de la línea: 1;
}
. Overlay-Active .Overlay-Close {
Pantalla: bloque en línea;
Posición: relativo;
}
Cada aspecto es diferente, por lo que las cosas clave para cambiar, primero es la altura del encabezado: el encabezado debe permanecer bloqueado, de modo que la superposición aparece debajo de él, 128 PX en este ejemplo, si el encabezado cambia su altura a mediana y pequeña. Dimensiones, luego se requerirán algunas consultas de medios.
Además, para los encabezados adhesivos, BB solo hace el puerto de visualización alto de forma predeterminada: puede resolver esto haciendo encabezados pegajosos en la tableta y móvil 0R para no tenerlos en dimensiones más pequeñas. Archivo de plantilla. Se superpone en toda la pantalla para una superposición en toda la pantalla y no una compensación de encabezado, solo necesita unos pocos cambios, cambie el CSS a la posición superior en 2 declaraciones …
Arriba: 32px; / * Barra de administración – 32px */

}
.Coping {
Arriba: 0;
}
Luego, el interruptor de apertura/cierre debe dividirse en la apertura en la carga inicial y el cierre de la superposición.
Fila …
>
Menú
Fila de contenido superpuesto …
& times;
se requerirá ajustes de CSS adicionales para alinearlos como sea necesario. Controlando la animación de deslizamiento Hasta ahora, la animación se desliza hacia abajo, puede hacer que se deslice de izquierda a derecha con algunos ajustes, ajuste el CSS.
Altura: 100%;
Ancho: 0;
Posición: fijo;
IND ÍNDICE: 1;
Izquierda: 0;
Arriba: 0;
Color de fondo: RGBA (0.0.0, .5);
Desbordamiento: oculto;
Transición: 0.5s;
}
Cambie el ancho a 0, ya que ahora se controlará en JavaScript, cambie la altura a 100% – Establezca a la izquierda: 0 o a la derecha: 0 para controlar la diapositiva inicial en el costado.
Cambiar javascript … (función ($) {
$ (function () {
OpenOverlay ();
Counsroverlay ();
});
Function OpenOverlay () {
$ (‘.
$ (‘Body’). AddClass (‘superpuesto-actual’);
$ (‘. Overlay’). CSS (“Ancho”, “100%”);
devuelve falso;
});
}
Función closeverlay () {
$ (‘. Overlay-close’). on (‘hacer clic’, function () {
$ (‘Body’). RemoveClass (‘superpuesto-actual’);
$ (‘. Overlay’). CSS (“Ancho”, “0%”);
devuelve falso;
});
}
}) (JQuery);
Eso es todo, ahora se deslizará, para cambiar la velocidad de regular la propiedad de transición en CSS.
Si no usa una superposición en la pantalla, también puede animar la transición de conmutación, más información aquí.