Виджет Elementor Off-Canvas для выдвижных панелей и меню (Pro)
Контент Off-Canvas - это виджет Master Addons Pro, который размещает кнопку на странице и открывает панель, когда посетитель нажимает на нее. На панели отображается сохраненный шаблон Elementor, поэтому вы можете поместить в него меню, контактную форму, фильтры или промо-акцию и повторно использовать тот же шаблон на других страницах. выберите, где появится панель, как она оживляет и как выглядит кнопка. Посетители закрывают ее значком закрытия, нажав наложение или нажав Esc.
Как добавить панель вне холста в Elementor
Вам нужен Элементор и активный Мастер Аддоны Про лицензия.
- Перейти к Шаблоны, Сохраненные Шаблоны, создать шаблон, построить содержимое панели и опубликовать его.
- Редактировать страницу, искать Внехолстовый контент и перетащите его туда, где должна появиться кнопка.
- В Выберите Шаблон, выберите шаблон, который вы сохранили.
- Выберите Должность и установите ширину или высоту.
- Выберите входную анимацию и продолжительность.
- Установите кнопку "Заголовок" или значок, затем нанесите кнопку, заголовок и контейнер на вкладку "Стиль".
Смотрите Настройки контента Off-Canvas руководство для каждого варианта.
Положение панели, размер и анимация
Должность предлагает Правую, Левую, Верхнюю, Нижнюю, Среднюю и Относительную. Левую, Правую и Среднюю панели получают Ширина в px, % или vw, а Верхняя, Нижняя и Средняя панели получают Высота в px, % или vh, каждая регулируемая на устройство. Входная анимация is Fade, Slide или Grow, и только Fade работает с Relative. На левой, правой и верхней панелях также есть Тип входа крышки или толчка. Установите Продолжительность анимации за считанные секунды и включи Открыто по умолчанию если панель должна начать открываться.
- Левая или правая панель с меню сайта для экранов меньшего размера.
- Верхняя панель для короткого объявления или формы поиска.
- Средняя панель как простой модал для формы регистрации.
Кнопка запуска, заголовок и стиль контейнера
Кнопка запуска может показывать Заголовок, значок или и то, и другое, с настройками Расстояние и выравнивание значка. стилизовать его цвет, цвет фона и цвет границы для нормального и наведения, плюс тень коробки, типографика, размер SVG, набивка, тип границы и радиус границы. внутри панели, the Заголовок раздел стилизует значок закрытия и необязательный заголовок заголовка, а обратный заголовок меняет местами. The Контейнер раздел устанавливает фон панели, границу, набивку, цвет наложения, цвет и ширину полосы прокрутки.
- Кнопка гамбургера только для значков в заголовке.
- Текстовая кнопка “Contact us”, открывающая форму.
- Фирменный цвет наложения, который затемняет страницу за панелью.
Внехолстовый контент Elementor Pro против главных дополнений
Меню вне холста является наиболее распространенным использованием. этот виджет не строит меню сам, поэтому вы сначала помещаете виджет меню в шаблон. если вам нужно только меню, Главные Аддоны Меню навигации виджет также имеет макет Гамбургера с не холщовым типом в Pro, который пропускает шаг шаблона. Используйте не холщовый контент, когда панель должна содержать больше, чем меню, например логотип, контактные данные и социальные ссылки.
| Особенность | Элементор Про Вне холста | Мастер-аддоны внехолстового контента |
|---|---|---|
| Цена | Нужен Элементор Про | Нужны главные дополнения Pro |
| Содержание панели | Встроено внутри виджета в режиме редактирования | Сохраненный шаблон Elementor можно использовать повторно |
| Как открывается | Любая кнопка или ссылка с помощью действия Off-Canvas | Собственная кнопка запуска виджета |
| Должность | Горизонтальный и вертикальный старт, центр или конец | Вправо, влево, вверху, внизу, в середине или относительно |
| Анимация | Анимация входа и выхода | Выцветайте, скользите или расти, с крышкой или толкайте |
| Закрытие | Наложение и Esc, каждый из которых можно выключить; можно заблокировать прокрутку страницы | Закройте значок, нажмите наложение или Esc |
| Встроенный заголовок | Нет | Заголовок заголовка и значок закрытия |
| Открыть по умолчанию | Не настройка виджета | Да |
Elementor Pro выигрывает, когда любая ссылка на странице должна открыть панель или когда вам нужна анимация выхода. Мастер-аддоны подходят, когда один шаблон должен появиться за готовой кнопкой на многих страницах. панель поиска также см Поиск виджет.
Как создать внехолстовое меню в Elementor
Меню вне холста - наиболее распространенное применение Виджет не сам строит меню, поэтому вы сначала помещаете виджет меню в шаблон.
- Создайте сохраненный шаблон и добавьте виджет меню, например бесплатные главные надстройки Меню навигации установить вертикальную компоновку.
- Опубликовать шаблон.
- В заголовке добавьте не холщовый контент и выберите этот шаблон.
- Установите положение слева или справа, ширину примерно до 320px и входную анимацию для слайда.
- Выключите название шоу, включите значок шоу и выберите значок в виде столбцов, чтобы кнопка выглядела как гамбургер.
- Используйте отзывчивую видимость Elementor, чтобы показывать эту кнопку только на планшете и мобильном телефоне, если заголовок рабочего стола сохраняет нормальное меню.
Часто задаваемые вопросы по контенту, не связанному с холстом
Бесплатен ли виджет Off-Canvas Content?
Нет. Внехолстовый контент является частью Мастер Аддоны Про. Бесплатный плагин не включает его.
Как добавить контент на панель вне холста?
Сначала создайте контент как сохраненный шаблон Elementor, например меню, форму или промо. Затем выберите этот шаблон в раскрывающемся списке "Выбрать шаблон" виджета. Вы можете повторно использовать один шаблон на нескольких панелях.
Могу ли я составить с его помощью меню, не связанное с холстом?
Да. Поставьте виджет меню, такой как главные аддоны Меню навигации в сохраненном шаблоне выберите его в Off-Canvas Content, установите положение влево или вправо и используйте значок панели для кнопки. только для меню макет Nav Menu Hamburger в 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)
Дубликатор сообщений/страниц
