Algo de contenido gana un lugar en la página. El resto, un menú, una lista de preguntas frecuentes, un formulario de contacto, funciona mejor guardado hasta que alguien lo solicite. El Widget de contenido fuera del lienzo en Complementos maestros Pro oculta cualquier plantilla de Elementor detrás de un botón y la desliza desde el costado, la parte superior o la parte inferior de la pantalla cuando los visitantes hacen clic.
Elige una plantilla guardada, coloca el botón de activación y elige cómo ingresa el panel. Esta guía sigue el widget desde el panel Elementos hasta un panel de preguntas frecuentes que funciona en la página en vivo.
Qué hace el widget de contenido fuera del lienzo #
El widget coloca un botón de activación en su página y lo vincula a un panel oculto. El contenido del panel es cualquier plantilla de su biblioteca Elementor, por lo que un menú móvil, una mega pregunta frecuente, un resumen del carrito o un formulario de registro funcionan de la misma manera. Cuando un visitante hace clic en el botón, el panel se desliza o se desvanece sobre la página con una superposición atenuada detrás y un icono de cierre en su encabezado.
Todo sucede en un widget: el disparador, el panel, la animación y el estilo. Sin complemento emergente separado, sin códigos cortos de plantilla.
Antes de empezar #
- WordPress con Elementor instalado y activo.
- Complementos maestros Pro instalado con una licencia activa, ya que el contenido fuera del lienzo es un widget profesional. ¿Nuevo en el complemento? Ver el guía de instalación.
- Una plantilla de Elementor guardada para mostrar dentro del panel. Primero cree una en Plantillas en su panel; La demostración aquí utiliza una sección de preguntas frecuentes ya preparada.
Cómo agregar el widget de contenido fuera del lienzo #
En el editor Elementor, busque el Elementos panel para Contenido fuera del lienzo, o desplácese hasta la sección Addones maestros y arrástrela a la página. En el lienzo aparece un botón de activación azul con la etiqueta Haga clic aquí. El panel en sí permanece oculto hasta que elige una plantilla y la abre.
Elija la plantilla y configure el panel #
El Contenido la sección contiene la configuración principal del panel.
- Selectați plantilla: la plantilla Elementor que muestra el panel. Cualquier plantilla de página o sección guardada aparece en este menú desplegable.
- Título del encabezado y título: encienda el encabezado del panel y escriba su etiqueta, como “Explorar preguntas frecuentes”. El icono de cierre se encuentra en el mismo encabezado.
- Posición: de qué borde proviene el panel. Más sobre esto a continuación.
- Ancho: qué ancho tiene el panel en px, % o vw, 300px de forma predeterminada. Los paneles desde arriba o desde abajo utilizan a Altura en su lugar, controle en px, % o vh.
- Animación de entrada y tipo de entrada: cómo llega el panel. Desvanecerse, deslizarse o crecer para la animación, cubrir o empujar para el tipo. La cubierta coloca el panel sobre la página; Push empuja la página a un lado para hacer espacio.
- Duración de la animación: la velocidad de entrada en segundos, 0,6 por defecto.
- Abierto por defecto: inicie la página con el panel ya abierto. Práctico durante el diseño, ya que puedes diseñar el panel sin hacer clic en el disparador después de cada cambio.
Configure el botón de activación #
El Botón el grupo en la misma pestaña controla el disparador. Mostrar título y Título establecer la etiqueta; la demostración le cambia el nombre de Haga clic aquí a Pregunta frecuente. Alinear coloca el botón a la izquierda, centro o derecha en su columna.
Mostrar icono agrega un ícono al lado de la etiqueta y Seleccione Icono abre la biblioteca de iconos de Elementor para que pueda elegir entre Font Awesome o cualquier conjunto de iconos que haya instalado. Distancia del icono establece el espacio entre el icono y el texto.
Elija de dónde se desliza el panel #
El Posición dropdown ofrece seis opciones: Derecha, izquierda, arriba, abajo, media y relativa.
A derecha e izquierda están los paneles de cajones clásicos. Elija uno y el editor lo verá inmediatamente: el panel se desliza con su plantilla adentro, el encabezado arriba, el ícono de cierre listo.
Arriba y Abajo intercambian el control de ancho por a Altura control deslizante medido en altura de la ventana gráfica. Una barra superior de 30vh funciona como un cajón de anuncios delgado.
El centro centra el panel como un modal. Relative ancla el panel al propio botón del gatillo, con a Distancia control para el espacio, que convierte el widget en una revelación de estilo desplegable. Una nota del propio panel: solo la animación Fade funciona con la posición Relativa.
Establece el ancho y la animación de entrada #
De nuevo en una posición lateral, la demostración amplía el panel a 500 píxeles y cambia el Animación de entrada para deslizarse con el Tipo de entrada en empujar. Con Push, el contenido de la página cambia a medida que entra el panel en lugar de estar cubierto. Mantenga la duración alrededor de medio segundo; Más lento empieza a sentir como esperar.
Estila el panel #
El Estilo la pestaña tiene tres secciones: Botón, Encabezado, y Contenedor.
Botón #
Estila el disparador: fondo, color de texto, tipografía, borde y relleno, con estados Normal y Hover. La demostración convierte el azul predeterminado en un azul marino oscuro que coincide con la página.
Encabezado #
Estila la tira en la parte superior del panel abierto.
- Encabezado inverso: cambia el título y cierra los lados del ícono, por lo que la X se mueve de derecha a izquierda.
- Relleno: espacio alrededor del contenido del encabezado.
- Icono de cierre: color, fondo, color del borde, tamaño de fuente, tamaño de cuadro y borde para el botón X. Mantenga el tamaño del cuadro en 24 o más si su audiencia está principalmente en teléfonos; Es fácil pasar por alto un objetivo de toque de 12 píxeles.
Contenedor #
Estila el cuerpo del panel y lo que lo rodea.
- Color de fondo, color de borde, sombra de caja, tipo de borde, radio de borde, relleno: la propia superficie del panel.
- Color de fondo superpuesto: el tinte sobre el resto de la página mientras el panel está abierto. Una superposición oscura enfoca el panel.
- Barra de desplazamiento: color y ancho de la barra de desplazamiento para paneles más altos que la pantalla.
El resultado en la página #
En la página en vivo, el botón se encuentra donde lo colocó. Un clic desliza el panel desde el borde elegido, atenúa la página detrás y muestra su plantilla con el encabezado y el ícono de cierre en la parte superior. Los visitantes lo cierran con la X, haciendo clic en la superposición o presionando Esc.
Casos de uso comunes #
- Menús móviles y secundarios que se desliza hacia adentro desde un lado sin abarrotar el encabezado.
- Preguntas frecuentes y paneles de ayuda al igual que la demostración, mantener las respuestas a un clic de distancia en las páginas de destino.
- Formularios de contacto o cotización eso se abre sobre la página en lugar de vivir en una separada.
- Cajones para carritos y cuentas en las páginas de la tienda, utilizando un carrito o un widget de cuenta de WooCommerce u otro complemento.
- Barras de anuncios desde el borde superior usando la posición superior con una altura pequeña.
Consejos para un mejor panel fuera del lienzo #
- Primero cree la plantilla. El widget solo enumera las plantillas guardadas, así que diseñe el contenido del panel en Plantillas antes de arrastrar el widget hacia adentro.
- Haga coincidir el ancho con el contenido. 300 píxeles se adaptan a un menú; Los formularios y las listas de preguntas frecuentes respiran mejor entre 450 y 500.
- Utilice Push con moderación. Parece sorprendente, pero cambiar toda la página puede resultar nervioso en contenido largo. La cubierta con una superposición oscura es el valor predeterminado más tranquilo.
- Recuerde la regla relativa. Solo funciona la animación Fade cuando la Posición está configurada en Relativa.
- Consulta el panel en el móvil. Un panel de 500 píxeles es más ancho que muchos teléfonos; establezca un ancho menor para el punto de interrupción móvil con el control responsivo.
Preguntas frecuentes #
¿qué es el widget de contenido fuera del lienzo en los complementos maestros?
Es un widget Elementor que oculta una plantilla guardada detrás de un botón de activación y la desliza como un panel cuando se hace clic. Maneja el botón, la posición del panel, la animación de entrada, la superposición y el icono de cierre en un widget.
¿puedo mostrar alguna plantilla de Elementor en el panel?
Sí. El menú desplegable Seleccionar plantilla enumera todas las plantillas guardadas en su biblioteca Elementor. Menús, secciones de preguntas frecuentes, formularios y diseños personalizados completos, todos se cargan dentro del panel exactamente como se diseñaron.
¿Desde qué direcciones se puede abrir el panel?
Hay seis posiciones disponibles: derecha, izquierda, superior, inferior, media y relativa. Los paneles laterales utilizan un ancho, los paneles superior e inferior utilizan una ventana gráfica y Relative ancla el panel al botón del gatillo con un control de distancia.
¿cuál es la diferencia entre Cover y Push?
La portada desliza el panel sobre la página mientras una superposición atenúa el fondo. Push mueve el contenido de la página a un lado para dejar espacio para el panel. La portada es el valor predeterminado más seguro; Push es más dramático pero cambia todo el diseño.
¿se puede abrir automáticamente el panel fuera del lienzo?
Sí. Active Abrir por defecto en la configuración de Contenido y el panel comenzará a abrirse cuando se cargue la página. Los visitantes pueden cerrarlo con el icono de cierre haciendo clic en la superposición o con la tecla Esc y volver a abrirlo con el botón de activación.
Envolviendo #
El widget de contenido fuera del lienzo convierte cualquier plantilla guardada en un panel deslizable: elija la plantilla, coloque el botón de activación, elija el borde y la animación, y diseñe todo, desde el botón hasta la barra de desplazamiento. Se empareja naturalmente con el Menú de navegación widget para navegación móvil y con widgets de formulario para paneles de clic para contactar. Explore el conjunto completo de Widgets y extensiones de complementos maestros para ver qué más se envía en la caja, consulte el Página de widgets de contenido fuera del lienzo para obtener demostraciones y una comparación con el widget Elementor Pro Off-Canvas, consulte el archivo página de precios para planes Pro.
