Виджет Elementor Off-Canvas для выдвижных панелей и меню (Pro)
Контент Off-Canvas - это виджет Master Addons Pro, который размещает кнопку на странице и открывает панель, когда посетитель нажимает на нее. На панели отображается сохраненный шаблон Elementor, поэтому вы можете поместить в него меню, контактную форму, фильтры или промо-акцию и повторно использовать тот же шаблон на других страницах. выберите, где появится панель, как она оживляет и как выглядит кнопка. Посетители закрывают ее значком закрытия, нажав наложение или нажав Esc.
Свободный Элементор не имеет вне холста виджет.Элементор Про добавил один в версии 3.22, и ему нужны Flexbox Контейнеры и Вложенные элементы функции включены.Этот виджет является опцией Мастер Аддоны Про: он открывает любой сохраненный шаблон, с любой стороны, за кнопкой, которую вы стилизуете один раз.
Как добавить панель вне холста в Elementor
Вам нужен Элементор и активный Мастер Аддоны Про лицензия.
- Перейти к Шаблоны, Сохраненные Шаблоны, создать шаблон, построить содержимое панели и опубликовать его.
- Редактировать страницу, искать Внехолстовый контент и перетащите его туда, где должна появиться кнопка.
- В Выберите Шаблон, выберите шаблон, который вы сохранили.
- Выберите Должность и установите ширину или высоту.
- Выберите входную анимацию и продолжительность.
- Установите кнопку "Заголовок" или значок, затем нанесите кнопку, заголовок и контейнер на вкладку "Стиль".
Смотрите Настройки контента Off-Canvas руководство для каждого варианта.
Внехолстовый контент с первого взгляда
| Настройка | Что делает |
|---|---|
| Источник контента | Сохраненный шаблон Elementor: страница, раздел или контейнер (в раскрывающемся списке перечислены все элементы библиотеки, кроме наборов) |
| Позиции | Вправо, влево, вверху, внизу, посередине, относительно (выпадающий пункт под кнопкой) |
| Входная анимация | Затухание, скольжение или рост; Относительные поддерживает только затухание |
| Тип входа | Обложка скользит панель по странице; Push перемещает страницу поперек. Push предлагается для Верх, Левый и Правый |
| Размер | Ширина в px, % или vw для левого, правого, среднего и относительного; Высота в px, % или vh для верхнего, нижнего, среднего и относительного; оба на устройство |
| Закрывается с | Значок закрытия, щелчок по наложению или клавиша Esc; Enter или Space на значке сфокусированного закрытия также работает |
| Дополнительно | Открыто по умолчанию, Продолжительность анимации в секундах, заголовок заголовка с обратным заголовком, блокировка прокрутки страницы при открытии, стилизуемая кнопка запуска с текстом, значком или тем и другим |
| Открывается от | Только собственная кнопка виджета (без селектора CSS и внешнего триггера) |
| Потребности | Элементор (бесплатно или Pro) плюс Master Addons Pro |
Положение панели, размер и анимация
Должность предлагает Правую, Левую, Верхнюю, Нижнюю, Среднюю и Относительную. Левую, Правую и Среднюю панели получают Ширина в px, % или vw, а Верхняя, Нижняя и Средняя панели получают Высота в px, % или vh, каждая регулируемая на устройство. Входная анимация is Fade, Slide или Grow, и только Fade работает с Relative. На левой, правой и верхней панелях также есть Тип входа крышки или толчка. Установите Продолжительность анимации за считанные секунды и включи Открыто по умолчанию если панель должна начать открываться.
Обложка и Push - два типа входа. с Обложкой панель скользит по странице, и наложение затемняет то, что находится за ней. с Push вся страница перемещается по ширине панели, поэтому содержимое остается видимым рядом с меню. Push доступен для верхней, левой и правой панелей; Нижняя, средняя и относительная всегда покрывают.
- Левая или правая панель с меню сайта для экранов меньшего размера.
- Верхняя панель для короткого объявления или формы поиска.
- Средняя панель как простой модал для формы регистрации.
Кнопка запуска, заголовок и стиль контейнера
Кнопка запуска может показывать Заголовок, значок или и то, и другое, с настройками Расстояние и выравнивание значка. стилизовать его цвет, цвет фона и цвет границы для нормального и наведения, плюс тень коробки, типографика, размер SVG, набивка, тип границы и радиус границы. внутри панели, the Заголовок раздел стилизует значок закрытия и необязательный заголовок заголовка, а обратный заголовок меняет местами. The Контейнер раздел устанавливает фон панели, границу, набивку, цвет наложения, цвет и ширину полосы прокрутки.
- Кнопка гамбургера только для значков в заголовке.
- Текстовая кнопка “Contact us”, открывающая форму.
- Фирменный цвет наложения, который затемняет страницу за панелью.
Внехолстовый контент Elementor Pro против главных дополнений
Меню вне холста является наиболее распространенным использованием. этот виджет не строит меню сам, поэтому вы сначала помещаете виджет меню в шаблон. если вам нужно только меню, Главные Аддоны Меню навигации виджет также имеет макет Гамбургера с не холщовым типом в Pro, который пропускает шаг шаблона. Используйте не холщовый контент, когда панель должна содержать больше, чем меню, например логотип, контактные данные и социальные ссылки.
| Особенность | Элементор Про Вне холста | Мастер-аддоны внехолстового контента |
|---|---|---|
| Цена | Нужен Элементор Про | Нужны главные дополнения Pro |
| Содержание панели | Встроено внутри виджета в режиме редактирования | Сохраненный шаблон Elementor можно использовать повторно |
| Как открывается | Любая кнопка или ссылка с помощью действия Off-Canvas | Собственная кнопка запуска виджета |
| Должность | Горизонтальный и вертикальный старт, центр или конец | Вправо, влево, вверху, внизу, в середине или относительно |
| Анимация | Анимация входа и выхода | Выцветайте, скользите или расти, с крышкой или толкайте |
| Закрытие | Наложение и Esc, каждый из которых можно выключить; можно заблокировать прокрутку страницы | Закройте значок, нажмите наложение или Esc |
| Встроенный заголовок | Нет | Заголовок заголовка и значок закрытия |
| Открыть по умолчанию | Не настройка виджета | Да |
Elementor Pro выигрывает, когда любая ссылка на странице должна открыть панель или когда вам нужна анимация выхода. Мастер-аддоны подходят, когда один шаблон должен появиться за готовой кнопкой на многих страницах. панель поиска также см Поиск виджет.
Как создать внехолстовое меню в Elementor
Меню вне холста - наиболее распространенное применение Виджет не сам строит меню, поэтому вы сначала помещаете виджет меню в шаблон.
- Создайте сохраненный шаблон и добавьте виджет меню, например бесплатные главные надстройки Меню навигации установить вертикальную компоновку.
- Опубликовать шаблон.
- В заголовке добавьте не холщовый контент и выберите этот шаблон.
- Установите положение слева или справа, ширину примерно до 320px и входную анимацию для слайда.
- Выключите название шоу, включите значок шоу и выберите значок в виде столбцов, чтобы кнопка выглядела как гамбургер.
- Используйте отзывчивую видимость Elementor, чтобы показывать эту кнопку только на планшете и мобильном телефоне, если заголовок рабочего стола сохраняет нормальное меню.
Связанные виджеты: Меню навигации для меню внутри панели Мега Меню расширение для больших меню заголовков, Попап Строитель для временных или выходных слоев, Вкладки для переключения контента на месте и Условия отображения чтобы показать триггер только на выбранных страницах.
Полноэкранное меню в Элементоре
Полноэкранное меню - это позиция "Средняя" с шириной, установленной на 100 Ввт, а высотой - на 100 Вч. Поместите шаблон с большим вертикальным меню внутрь, выберите вход "Затухание", чтобы слой появился на месте, и дайте контейнеру сплошной фон, чтобы ничего не было видно. Значок закрытия находится в заголовке панели, а клавиша Esc также закрывает слой.
Одна деталь из таблицы стилей: панели ограничены 90% окна просмотра, поэтому панель 100vw на 100vh оставляет поле по всему периметру Добавьте это правило в пользовательский CSS страницы, чтобы снять колпачок:
.jltma-offcanvas-wrap .jltma-offcanvas-content { max-width: 100% !important; max-height: 100% !important; }
Пошаговое со скриншотами включено как построить полноэкранное меню в Элементоре.
Боковое меню слайд-аута (навигация по боковой панели)
Для бокового меню установите Положение влево или вправо и Ширина в px, около 320 px для меню и 400 px для панели с контактными данными.Выберите Push, когда страница должна отойти в сторону и оставаться читаемой, или Cover, когда панель должна сидеть сверху. Шаблон может удерживать Меню навигации виджет в вертикальной компоновке, логотип, несколько контактных линий и кнопка.
Боковая панель, которая остается видимой все время, - это другая работа. создайте это с двухколоночным расположением контейнера и сохраните этот виджет для панели, которая вставляется по запросу. The Руководство по меню на стороне элементара охватывает оба.
Примеры панелей вне холста
Откройте каждую демонстрацию ниже, чтобы увидеть движение панели: правую контактную панель, левое меню, которое перемещает страницу, раскрывающуюся панель, использующую относительную позицию, панель объявлений с верхнего края, нижний лист с открытием. часы работы и полноэкранное меню, построенное из средней позиции.
Часто задаваемые вопросы по контенту, не связанному с холстом
Бесплатен ли виджет Off-Canvas Content?
Нет. Внехолстовый контент является частью Мастер Аддоны Про. Бесплатный плагин не включает его.
Как добавить контент на панель вне холста?
Сначала создайте контент как сохраненный шаблон Elementor, например меню, форму или промо. Затем выберите этот шаблон в раскрывающемся списке "Выбрать шаблон" виджета. Вы можете повторно использовать один шаблон на нескольких панелях.
Должен ли я использовать панель, не связанную с холстом, или всплывающее окно?
Используйте не холст панель для навигации и для контента, который посетитель запрашивает, нажав, например меню, фильтры или контактные данные. используйте всплывающее окно для сообщений с указанием времени или вывода, а также для форм, которые должны прерываться. Оба заблокируйте прокрутку страницы, пока они открыты.
Как изменить скорость анимации?
Установите продолжительность анимации на вкладке Содержимое. значение в секундах, с 0.6 по умолчанию и диапазоном от 0 до 15. более низкие значения открывают панель быстрее. настройка применяется к каждой входной анимации и как к Cover, так и к Push.
Почему моя панель, не покрытая холстом, не открывается?
Проверьте три вещи. выберите Шаблон должен указать на опубликованный шаблон, иначе панель печатает уведомление вместо содержимого. триггером должна быть собственная кнопка виджета, потому что ни один другой элемент не может открыть его. и Открыть по умолчанию должно быть выключено, если вы не хотите, чтобы он открылся при загрузке.
Могу ли я составить с его помощью меню, не связанное с холстом?
Да. Поставьте виджет меню, такой как главные аддоны Меню навигации в сохраненном шаблоне выберите его в Off-Canvas Content, установите положение влево или вправо и используйте значок панели для кнопки. только для меню макет Nav Menu Hamburger в Pro имеет свой собственный внехолстовый тип.
Замедляет ли содержимое панели мою страницу?
Шаблон отображается на странице при загрузке, затем скрывается до нажатия кнопки Панель с несколькими виджетами добавляет небольшой вес, но тяжелые ползунки или видео внутри загружаются вместе со страницей, поэтому сохраните шаблоны панелей легкими.
Могу ли я открыть панель со своего значка заголовка?
Нет. панель открывается только с кнопки, которую отображает виджет, поэтому существующая ссылка на значок или меню не может ее запустить. для меню заголовка, которое открывается со значка гамбургера, используйте вместо этого макет Hamburger виджета Nav Menu с типом Offcanvas.
Существует ли бесплатный внехолстовый виджет для Elementor?
У бесплатного плагина Elementor его нет Elementor Pro включает виджет Off-Canvas из версии 3.22 при включенном Flexbox Containers и Nested Elements. Off-Canvas Content является частью Master Addons Pro и открывает любой сохраненный шаблон, чего виджет Pro не делает.
Виджеты и расширения трендовых элементов
Создавайте сложные веб-сайты за меньшее время.
Стекломорфизм
Дополнительные контейнеры
Шаблоны
![Расширение Master Addons Post/Page Duplicator для Elementor: ссылка на строку MA Duplicator в списке WordPress Pages, создающая целевую страницу - [Дублированный № 128] черновик](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/15102930/post-page-duplicator-768x403.webp)
Дубликатор сообщений/страниц
