Widget Elementor Off-Canvas para paneles y menús deslizables (Pro)
El contenido fuera del lienzo es un widget Master Addons Pro que coloca un botón en la página y abre un panel cuando un visitante hace clic en él. El panel muestra una plantilla de Elementor guardada, por lo que puedes colocar un menú, un formulario de contacto, filtros o una promoción dentro de él y reutilizar la misma plantilla en otras páginas. Elija dónde aparece el panel, cómo se anima y cómo se ve el botón. Los visitantes lo cierran con el icono de cerrar, haciendo clic en la superposición o presionando Esc.
Elementor gratuito no tiene widget fuera del lienzo. Elementor Pro agregó uno en la versión 3.22 y necesita las funciones Contenedores Flexbox y Elementos anidados activadas. Este widget es la opción Master Addons Pro: abre cualquier plantilla guardada, desde cualquier lado, detrás de un botón que peinas una vez.
Cómo agregar un panel fuera del lienzo en Elementor
Necesitas Elementor y un activo Complementos maestros Pro licencia.
- Ir a Plantillas, Plantillas guardadas, cree una plantilla, cree el contenido del panel y publíquelo.
- Edita la página, busca Contenido fuera del lienzo y arrástralo donde debería aparecer el botón.
- En Seleccione Plantilla, elige la plantilla que guardaste.
- Elige un Posición y establezca el ancho o el alto.
- Elija una animación de entrada y una duración.
- Establezca el título o icono del botón, luego escriba el botón, el encabezado y el contenedor en la pestaña Estilo.
Ver el Configuración de contenido fuera del lienzo guía para cada opción.
Contenido fuera del lienzo de un vistazo
| Configuración | Lo que hace |
|---|---|
| Fuente de contenido | Una plantilla de Elementor guardada: página, sección o contenedor (el menú desplegable enumera todos los elementos de la biblioteca excepto los kits) |
| Posiciones | Derecha, izquierda, arriba, abajo, medio, relativo (un menú desplegable debajo del botón) |
| Animación de entrada | Desvanecerse, deslizarse o crecer; Relative solo admite desvanecimiento |
| Tipo de entrada | La cubierta desliza el panel sobre la página; Push mueve la página. Se ofrece push para arriba, izquierda y derecha |
| Tamaño | Ancho en px, % o vw para izquierda, derecha, media y relativa; Altura en px, % o vh para superior, inferior, media y relativa; ambos por dispositivo |
| Cierra con | El icono de cierre, un clic en la superposición o la tecla Esc; Ingresar o Espaciar en el ícono de cierre enfocado también funciona |
| cosas | Abrir por defecto, duración de la animación en segundos, título del encabezado con encabezado inverso, bloqueo de desplazamiento de página mientras está abierto, un botón de activación con estilo con texto, ícono o ambos |
| Abre desde | Solo el botón propio del widget (sin selector CSS ni disparador externo) |
| Necesidades | Elementor (gratis o Pro) más Master Addons Pro |
Posición, tamaño y animación del panel
Posición ofrece derecha, izquierda, superior, inferior, media y relativa. Los paneles izquierdo, derecho y medio obtienen un ancho en px, % o vw, y los paneles superior, inferior y medio obtienen una altura en px, % o vh, cada uno ajustable por dispositivo. Animación de entrada es Fade, Slide o Grow, y solo Fade funciona con Relative. Los paneles izquierdo, derecho y superior también tienen un Tipo de entrada de Cobertura o Empuje. Establecer el Duración de la animación en segundos, y enciende Abierto por defecto si el panel comenzara a abrirse.
Cover y Push son los dos tipos de entrada. Con Cover, el panel se desliza sobre la página y la superposición atenúa lo que hay detrás. Con Push, toda la página se mueve a lo ancho del panel, por lo que el contenido permanece visible al lado del menú. Push está disponible para los paneles superior, izquierdo y derecho; La parte inferior, media y relativa siempre cubren.
- Un panel izquierdo o derecho con el menú de su sitio para pantallas más pequeñas.
- Un panel superior para un breve anuncio o formulario de búsqueda.
- Un panel central como modal simple para un formulario de registro.
Botón de activación, encabezado y diseño de contenedores
El botón de activación puede mostrar un título, un ícono o ambos, con la configuración de distancia y alineación del ícono. Estilee su color, color de fondo y color de borde para normal y flotante, además de sombra de caja, tipografía, tamaño SVG, relleno, tipo de borde y radio de borde. Dentro del panel, el Encabezado la sección diseña el icono de cierre y el título del encabezado opcional, y el encabezado inverso intercambia sus lugares. El Contenedor la sección establece el fondo del panel, el borde, el acolchado, el color de la superposición y el color y ancho de la barra de desplazamiento.
- Un botón de hamburguesa solo con iconos en un encabezado.
- Un botón de texto “Contáctenos” que abre un formulario.
- Un color de superposición de marca que atenúa la página detrás del panel.
Elementor Pro fuera del lienzo frente a complementos maestros Contenido fuera del lienzo
Un menú fuera del lienzo es el uso más común. Este widget no crea el menú en sí, por lo que primero coloca un widget de menú en una plantilla. Si solo necesita el menú, los complementos maestros Menú de navegación widget también tiene un diseño de hamburguesa con un tipo fuera de lienzo en Pro, que omite el paso de plantilla. Utilice contenido fuera de lienzo cuando el panel contenga más de un menú, como un logotipo, datos de contacto y enlaces sociales.
| Característica | Elementor Pro fuera del lienzo | Addons maestros Contenido fuera del lienzo |
|---|---|---|
| Precio | Necesita Elementor Pro | Necesita complementos maestros Pro |
| Contenido del panel | Construido dentro del widget en modo de edición | Una plantilla de Elementor guardada que puedes reutilizar |
| Cómo se abre | Cualquier botón o enlace que utilice la acción Off-Canvas | El propio botón de activación del widget |
| Posición | Inicio, Centro o Fin Horizontal y vertical | Derecha, Izquierda, Arriba, Abajo, Medio o Relativo |
| Animación | Animaciones de entrada y salida | Desvanecerse, deslizarse o crecer, con cubierta o empujar |
| Clausura | Superposición y Esc, cada uno se puede desactivar; puede bloquear el desplazamiento de la página | Cierre el icono, haga clic en superposición o Esc |
| Cabecera incorporada | prohibido | Título del encabezado e icono de cierre |
| Abierto de forma predeterminada | No es una configuración de widget | Sí |
Elementor Pro gana cuando cualquier enlace de la página debe abrir el panel o cuando desea salir de las animaciones. Los complementos maestros se ajustan cuando una plantilla debe aparecer detrás de un botón listo para usar en muchas páginas. Para ver un panel de búsqueda, consulte también Buscar Widget.
Cómo crear un menú fuera del lienzo en Elementor
Un menú fuera del lienzo es el uso más común. El widget no crea el menú en sí, por lo que primero coloca un widget de menú en una plantilla.
- Cree una plantilla guardada y agregue un widget de menú, como los complementos maestros gratuitos Menú de navegación establecido en un diseño vertical.
- Publica la plantilla.
- En su encabezado, agregue contenido fuera del lienzo y seleccione esa plantilla.
- Establezca la posición a izquierda o derecha, el ancho a alrededor de 320 px y la animación de entrada para deslizar.
- Desactiva Mostrar título, activa Mostrar icono y elige un icono de barras para que el botón parezca una hamburguesa.
- Utilice la visibilidad responsiva de Elementor para mostrar este botón solo en tabletas y dispositivos móviles si el encabezado del escritorio mantiene su menú normal.
Widgets relacionados: Menú de navegación para el menú dentro del panel, el Megamenú extensión para menús de encabezado grandes, Creador de ventanas emergentes para capas cronometradas o con intención de salida, Pestañas para cambiar contenido en su lugar, y Condiciones de visualización para mostrar el disparador solo en las páginas elegidas.
Menú de pantalla completa en Elementor
Un menú de pantalla completa es la posición Media con el Ancho establecido en 100vw y la Altura en 100vh. Coloque una plantilla con un menú vertical grande en su interior, elija la entrada Fade para que la capa aparezca en su lugar y le dé al contenedor un fondo sólido para que no se vea nada. El icono de cierre se encuentra en el encabezado del panel y la tecla Esc también cierra la capa.
Un detalle de la hoja de estilo: los paneles están limitados al 90% de la ventana gráfica, por lo que un panel de 100vw por 100vh deja un margen en todas partes. Agregue esta regla en el CSS personalizado de la página para quitar la tapa:
.jltma-offcanvas-wrap .jltma-offcanvas-content { max-width: 100% !important; max-height: 100% !important; }
El paso a paso con capturas de pantalla está en marcha cómo crear un menú de pantalla completa en Elementor.
Menú lateral deslizable (navegación por barra lateral)
Para un menú lateral, establezca la posición a izquierda o derecha y el ancho en px, alrededor de 320 px para un menú y 400 px para un panel con datos de contacto. Elija Empujar cuando la página se haga a un lado y siga siendo legible, o Cubrir cuando el panel se asiente encima. La plantilla puede contener el Menú de navegación widget en su disposición vertical, logo, algunas líneas de contacto y un botón.
Una barra lateral que permanece visible todo el tiempo es un trabajo diferente. Construya eso con un diseño de contenedor de dos columnas y guarde este widget para el panel que se desliza a pedido. El Guía de menú lateral de Elementor cubre ambos.
Ejemplos de paneles fuera de lienzo
Abra cada demostración a continuación para ver cómo se mueve el panel: un panel de contacto derecho, un menú izquierdo que empuja la página, un panel desplegable que usa la posición Relativa, una barra de anuncios desde el borde superior, una hoja inferior con apertura horarios y un menú de pantalla completa creado desde la posición Media.
Preguntas frecuentes sobre contenido fuera del lienzo
¿el widget de contenido fuera del lienzo es gratuito?
No. El contenido fuera del lienzo es parte de Complementos maestros Pro. El complemento gratuito no lo incluye.
¿cómo agrego contenido al panel fuera del lienzo?
Primero cree el contenido como una plantilla de Elementor guardada, como un menú, formulario o promoción. Luego elija esa plantilla en el menú desplegable Seleccionar plantilla del widget. Puede reutilizar una plantilla en varios paneles.
¿debo usar un panel fuera del lienzo o una ventana emergente?
Utilice un panel fuera del lienzo para la navegación y el contenido que un visitante solicita haciendo clic, como un menú, filtros o datos de contacto. Utilice una ventana emergente para mensajes cronometrados o con intención de salida y para formularios que deberían interrumpir. Ambos bloquean el desplazamiento de la página mientras están abiertos.
¿Cómo cambio la velocidad de animación?
Establezca la duración de la animación en la pestaña Contenido. El valor es en segundos, con 0,6 como valor predeterminado y un rango de 0 a 15. Los valores más bajos abren el panel más rápido. La configuración se aplica a todas las animaciones de entrada y tanto a Cover como a Push.
¿por qué mi panel fuera del lienzo no se abre?
Comprueba tres cosas. Seleccionar plantilla debe apuntar a una plantilla publicada; de lo contrario, el panel imprime un aviso en lugar de contenido. El disparador debe ser el botón del widget, porque ningún otro elemento puede abrirlo. Y Abrir por defecto debería estar desactivado a menos que lo desee abrir durante la carga.
¿puedo crear un menú fuera del lienzo con él?
Sí. Coloque un widget de menú como los complementos maestros Menú de navegación en una plantilla guardada, selecciónela en Contenido fuera del lienzo, establezca la Posición en Izquierda o Derecha y use un ícono de barras para el botón. Solo para un menú, el diseño de la hamburguesa del menú de navegación en Pro tiene su propio tipo fuera del lienzo.
¿El contenido del panel ralentiza mi página?
La plantilla se representa en la página cuando se carga y luego se oculta hasta que se hace clic en el botón. Un panel con algunos widgets agrega poco peso, pero los controles deslizantes o videos pesados dentro de él se cargan con la página, así que mantenga las plantillas del panel livianas.
¿Puedo abrir el panel desde mi propio icono de encabezado?
No. El panel se abre solo desde el botón que representa el widget, por lo que un ícono existente o un enlace de menú no puede activarlo. Para un menú de encabezado que se abre desde un ícono de hamburguesa, use el diseño Hamburger del widget Nav Menu con el tipo Offcanvas.
¿existe un widget gratuito fuera del lienzo para Elementor?
El complemento gratuito de Elementor no tiene ninguno. Elementor Pro incluye un widget Off-Canvas de la versión 3.22 cuando los contenedores Flexbox y los elementos anidados están activados. El contenido Off-Canvas es parte de Master Addons Pro y abre cualquier plantilla guardada, lo que el widget Pro no hace.
Widgets y extensiones de Elementor de tendencia
Cree sitios web sofisticados en menos tiempo.
Vidriomorfismo
Extras de contenedores
Patrones
![Extensión de duplicador de páginas/publicaciones de complementos maestros para Elementor: enlace de fila de duplicador MA en la lista de páginas de WordPress que crea una página de inicio - borrador [duplicado #128]](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/15102930/post-page-duplicator-768x403.webp)
Duplicador de publicaciones/páginas
