Виджет Off-Canvas

Уроки WordPress > Ultimate Addons для Elementor

Виджет Off-Canvas позволяет создать потрясающую панель вне холста, которую можно перемещать по странице. Панель вне холста можно вызвать с помощью кнопки, текста, изображения, значка или любого другого виджета. На этой панели может отображаться контент, меню, сохраненные разделы/страницы/виджеты.

Ключевая особенность:

На панели вне холста может отображаться: Содержимое/Меню/Сохраненный раздел/Сохраненная страница/Сохраненный виджет.
Запуск содержимого за пределами холста с помощью кнопки / значка / пользовательского класса / пользовательского идентификатора.
Ширина и положение окна Off Canvas (слева/справа)
Эффект появления окна Off Canvas (Slide/Push)
Окно предварительного просмотра вне холста в серверной части
Стиль кнопки «Закрыть» (значок, выравнивание, размер, цвет)
Цвет фона окна Off Canvas и расстояние между содержимым

Ниже приведены настройки, доступные для виджета Off-canvas.

Тип содержимого

На вкладке «Содержимое» вы увидите два варианта:

Предварительный просмотр: включение этой опции даст вам предварительный просмотр вне холста, чтобы вы могли увидеть, как он будет выглядеть в реальном времени.

Тип контента: выберите тип контента, который вы хотите отображать в окне вне холста. доступные варианты: Содержимое (текст, HTML) / Меню / Сохраненный раздел / Сохраненная страница / Сохраненный виджет.

ВЫКЛ-ХОЛСТ

На вкладке Off Canvas вы увидите два варианта:

Ширина: позволяет контролировать ширину холста. Вы можете указать ширину в пикселях и адаптивные устройства с помощью переключателя.
Позиция (слева/справа): выберите направление, в котором должен отображаться контент за пределами холста.
Эффект появления: выберите эффект входа для окна за пределами холста.
Цвет наложения: он будет применяться к остальной части окна, а не за пределами холста. Это поможет выделить окно за пределами холста.

Цветом фона и отступами холста можно управлять на вкладке «Стиль» > «Выкл. холст».

Настройки отображения

Настройки дисплея позволят вам выбрать триггер для холста. Вы можете отобразить его одним щелчком мыши по тексту, значку, кнопке или любому другому элементу (с классом/идентификатором CSS).

Настройки отображения кнопок/значков предлагают плавающую опцию. Это позволит установить плавающую кнопку/значок вдоль правого или левого края браузера. Ниже приведен пример того, как это работает :