Некоторый контент зарабатывает место на странице Остальное, меню, список часто задаваемых вопросов, контактная форма, работает лучше спрятанный, пока кто-то не попросит об этом.The Виджет контента Off-Canvas в Мастер Аддоны Про скрывает любой шаблон Elementor за кнопкой и вставляет его сбоку, сверху или снизу экрана при нажатии посетителя.
Вы выбираете сохраненный шаблон, помещаете кнопку запуска и выбираете, как входит панель. это руководство следует за виджетом с панели Элементы на рабочую выдвижную панель часто задаваемых вопросов на живой странице.
Что делает виджет Off-Canvas Content #
Виджет размещает кнопку запуска на вашей странице и связывает ее со скрытой панелью Содержимое панели - это любой шаблон из вашей библиотеки Elementor, поэтому мобильное меню, мега FAQ, сводка корзины или форма регистрации - все это работает одинаково. когда посетитель нажимает кнопку, панель скользит или затухает над страницей с затемненным наложением за ней и значком закрытия в ее заголовке.
Все происходит в одном виджете: триггер, панель, анимация и стиль. Нет отдельного всплывающего плагина, нет шорткодов шаблонов.
Прежде чем начать #
- WordPress с Элементор установлен и активен.
- Мастер Аддоны Про установлен с активной лицензией, так как Off-Canvas Content является виджетом Pro. Новинка плагина? Смотрите руководство установки.
- Сохраненный шаблон Elementor для показа внутри панели Сначала создайте один в разделе "Шаблоны" на панели управления; в демо-версии здесь используется готовый раздел часто задаваемых вопросов.
Как добавить виджет Off-Canvas Content #
В редакторе Elementor выполните поиск Элементы панель для Внехолстовый контент, или прокрутите в раздел Главные дополнения, и перетащите его на страницу. на холсте появляется синяя кнопка запуска с надписью Нажмите Здесь. сама панель остается скрытой, пока вы не выберете шаблон и не откроете его.
Выберите шаблон и настройте панель #
The Содержание в разделе хранятся основные настройки панели.
- Выберите шаблон: шаблон Элементор, который показывает панель Любой сохраненный раздел или шаблон страницы появляется в этом раскрывающемся списке.
- Название и название заголовка: включите заголовок панели и введите его метку, например “Explore FAQ” Значок закрытия живет в том же заголовке.
- Должность: от какого края панель. подробнее об этом ниже.
- Ширина: насколько ширина панели в px, % или vw, 300px по умолчанию Панели сверху или снизу используют a Высота вместо этого управление в px, % или vh.
- Входная анимация и тип входа: как приходит панель.Fade, Slide или Grow для анимации, Обложка или Нажмите для типа. Обложка кладет панель на страницу; Нажмите отталкивает страницу в сторону, чтобы освободить место.
- Продолжительность анимации: скорость входа в секундах, по умолчанию 0,6.
- Открыто по умолчанию: начните страницу с уже открытой панелью. Удобно при проектировании, так как вы можете стилизовать панель, не нажимая на триггер после каждого изменения.
Настройте кнопку запуска #
The Кнопка группа на той же вкладке управляет триггером. Показать название и Название установите метку; демо-версия переименовывает его из "Нажмите здесь" в "Часто задаваемый вопрос". Выровнять помещает кнопку слева, в центре или справа в столбце.
Показать значок добавляет значок рядом с этикеткой, и Выбрать значок открывает библиотеку значков Elementor, чтобы вы могли выбрать шрифт Awesome или любой установленный вами набор значков. Иконка Расстояние устанавливает разрыв между значком и текстом.
Выберите, откуда сползает панель #
The Должность dropdown предлагает шесть вариантов: Вправо, влево, вверху, внизу, в середине и относительно.
Правая и левая - классические панели ящика. выберите один, и редактор сразу же просматривает его: панель вставляется с вашим шаблоном внутри, заголовок сверху, закройте значок готовым.
Верх и низ поменяйте контроль ширины на a Высота ползунок, измеренный в высоте видопорта Верхняя планка на 30вх работает как тонкий ящик объявлений.
Середина центрирует панель, как модал. Относительно прикрепляет панель к самой кнопке запуска с помощью a Расстояние управление зазором, который превращает виджет в раскрытие в стиле раскрывающегося списка. Одна нота с самой панели: только анимация затухания работает с позицией Относительный.
Установите ширину и входную анимацию #
Вернувшись в боковое положение, демонстрация расширяет панель до 500 пикселей и переключает ее Входная анимация чтобы скользить с помощью Тип входа на Push. With Push содержимое страницы меняется по мере входа панели, а не покрывается. Сохраняйте продолжительность около полусекунды; медленнее начинает ощущаться как ожидание.
Стиль панели #
The Стиль вкладка состоит из трех разделов: Кнопка, Заголовоки Контейнер.
Кнопка #
Стилизует триггер: фон, цвет текста, типографику, границу и заполнение, с нормальными и ховер-состояниями. демо-версия превращает синий цвет по умолчанию в темный темно-синий, соответствующий странице.
Заголовок #
Стилизирует полосу в верхней части открытой панели.
- Обратный заголовок: меняет местами заголовок и закрывает стороны значка, поэтому X перемещается справа налево.
- Набивка: пространство вокруг содержимого заголовка.
- Закрыть значок: цвет, фон, цвет границы, размер шрифта, размер коробки и граница для кнопки X. Держите размер коробки на уровне 24 или более, если ваша аудитория в основном работает на телефонах; цель касания 12 пикселей легко не заметить.
Контейнер #
Стилизирует корпус панели и то, что его окружает.
- Цвет фона, цвет границы, тень коробки, тип границы, радиус границы, набивка: сама поверхность панели.
- Цвет фона наложения: оттенок на остальной части страницы, пока панель открыта Темная накладка притягивает фокус к панели.
- Панель прокрутки: цвет и ширина полосы прокрутки для панелей выше экрана.
Результат на странице #
На живой странице кнопка сидит там, где вы его поместили. щелчок сдвигает панель с выбранного края, затемняет страницу за ней и показывает ваш шаблон с заголовком и значком закрытия сверху. Посетители закрывают его на X, щелкнув наложение или нажав Esc.
Обычные случаи использования #
- Мобильные и вторичные меню это скользит сбоку, не толкая заголовок.
- Часто задаваемые вопросы и панели справки как и демо-версия, ответы остаются в одном клике на целевых страницах.
- Контактные или котировочные формы это открывается на странице, а не живет на отдельной.
- Корзина и ящики для счетов на страницах магазинов, используя виджет корзины или учетной записи от WooCommerce или другого плагина.
- Анонсирующие бары от верхнего края с помощью положения Верх с небольшой высотой.
Советы по созданию лучшей панели, не связанной с холстом #
- Сначала создайте шаблон. Виджет перечисляет только сохраненные шаблоны, поэтому создайте содержимое панели в разделе "Шаблоны", прежде чем перетаскивать виджет.
- Совместите ширину с содержимым. 300 пикселей подходят для меню; формы и списки часто задаваемых вопросов дышат лучше примерно от 450 до 500.
- Используйте Push экономно. Это выглядит поразительно, но переключение всей страницы может показаться неловким при длительном содержании. Обложка с темной накладкой - более спокойный вариант по умолчанию.
- Помните правило Относительного. Только анимация Fade работает, когда позиция установлена на относительную.
- Проверьте панель на мобильном телефоне. Панель на 500 пикселей шире, чем многие телефоны; установите меньшую ширину для точки останова мобильного телефона с помощью адаптивного управления.
Часто задаваемые вопросы #
Что такое виджет Off-Canvas Content в Master Addons?
Это виджет Elementor, который скрывает сохраненный шаблон за кнопкой запуска и при нажатии вставляет его в виде панели. Он обрабатывает кнопку, положение панели, анимацию входа, наложение и значок закрытия в одном виджете.
Могу ли я показать какой-либо шаблон Elementor на панели?
Да. в раскрывающемся списке "Выбрать шаблон" перечислены все сохраненные шаблоны в вашей библиотеке Elementor. меню, разделы часто задаваемых вопросов, формы и полные пользовательские макеты загружаются внутри панели точно так, как задумано.
С каких направлений может открываться панель?
Доступны шесть позиций: правая, левая, верхняя, нижняя, средняя и относительная. На боковых панелях используется ширина, на верхней и нижней панелях используется высота видового окна, а относительная привязывает панель к кнопке запуска с помощью управления расстоянием.
В чем разница между Cover и Push?
Обложка скользит панелью по странице, в то время как наложение затемняет фон. Push отодвигает содержимое страницы в сторону, чтобы освободить место для панели. Обложка - более безопасный вариант по умолчанию; Push более драматичен, но меняет весь макет.
Может ли панель, не относящаяся к холсту, открываться автоматически?
Да. включите "Открыть по умолчанию" в настройках "Содержимое", и панель начнет открываться при загрузке страницы. Посетители могут закрыть его значком закрытия, щелкнув наложение или клавишу Esc, и снова открыть его кнопкой запуска.
Завершая #
Виджет Off-Canvas Content превращает любой сохраненный шаблон в выдвижную панель: выберите шаблон, поместите кнопку запуска, выберите край и анимацию, и стилизовать все, от кнопки до панели прокрутки. Он естественным образом сочетается с Меню навигации виджет для мобильной навигации и с виджетами форм для панелей "нажми и свяжись".Просмотреть полный набор Виджеты и расширения Master Addgets чтобы увидеть, что еще поставляется в коробке, см. Страница виджета Off-Canvas Content для демо-версий и сравнения с виджетом Elementor Pro Off-Canvas проверьте страница ценообразования для планов Pro.
