Как создать контент из холста в Elementor: руководство

Представление большого количества контента в небольшом веб -пространстве без запутанных пользователей является проблемой для веб -дизайнеров. Содержание Canvas - это модное, новое и умное решение, которое может помочь вам в этом контексте.

Благодаря плагину Builder Page Ementor, вы можете легко создать меню вне канва, рекламные баннеры, боковой панели и многое другое на вашем сайте. Это не только может помочь вам в презентации контента, но и упростить навигацию, улучшить читаемость и конвертировать пользователей.

Если ваш сайт построен с элементом, вам потребуется всего несколько минут, чтобы создать контент Canvas для вашего сайта. В этом сообщении мы будем наведем вам, как добавить контент Canvas в Elementor с пошаговым руководством. Начнем!

Что уходит в Canvas Content?

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

Как сказано выше, виджет контента вне канваса охватывает такой контент, как меню, рекламные баннеры, боковые панели, логин и панели регистрации, корзины для покупок, фильтры контента и параметры быстрого обзора. Это помогает поддерживать чистую и организованную компоновку, к которой легко получить доступ при необходимости.

Как создать контент из холста в элементоре

Теперь, в этом разделе, мы обсудим, как создать контент Canvas в Elementor с пошаговым руководством. Но прежде чем прыгнуть в учебное пособие, убедитесь, что у вас установлены следующие плагины и активированы на вашем сайте.

• Элементар
• HappyAddons
• HappyAddons Pro

Когда они будут готовы на вашем сайте, начните следовать учебному пособию, объясненному ниже.

Шаг 01: Добавьте виджет содержимого Canvas в Canvas Elementor

Откройте сообщение или страницу с помощью Canvas Elementor. Найдите виджет, введя его имя в поле поиска панели Elementor. Как только вы увидите виджет, перетащите его в холст.

Вы увидите кнопку или значок, добавленную на холст. Нажав на него, вы можете открыть раздел с холстом. Вы можете посмотреть в видеоклипе, прикрепленном ниже.

Шаг 02: Добавьте виджет на холст на свою веб -страницу

Выше мы разместили виджет на чистое холст. Но вы можете добавить его в любую конкретную часть вашей веб -страницы. Чтобы объяснить это, мы открыли украшенную веб -страницу. Затем поместили виджет на раздел героя

Вы можете увидеть, что виджет был добавлен в раздел заголовка веб -страницы.

Проверьте, как улучшить локальный SEO в WordPress с элементом.

Шаг 03: Выберите «Пользовательский тип контента» для виджета на выкл.

Перейдите к контенту> Содержание OffCanvas . Нажмите на раскрывающий список рядом с опцией типа контента.

Вы должны выбрать подходящий тип контента из раскрывающегося списка для виджета на основе типа контента, который вы хотите отобразить.

Для этого урока мы выбрали пользовательский тип контента.

Исследуйте это руководство о том, как разработать базу знаний в WordPress.

Шаг 04: Добавьте информацию в виджет

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

Вы можете видеть, что мы добавили контент в коробку, расширив его. Вы можете добавить текстовые и медиа -файлы, нажав соответствующие параметры.

Узнайте, как создать потрясающие инфографические веб -страницы в Elementor.

Шаг 05: Выберите источник переключения

В разделе переключения вы можете изменить тип, позиция, анимация и метка переключения .

Откройте раскрывающий список рядом с опцией источника переключения. Выберите нужный тип переключения. Мы выбрали кнопку в качестве типа переключения для этого урока.

Затем измените копию кнопки из опции текста кнопки . Вы даже можете добавить значок кнопки . Проверьте все изменения в кнопке на холсте.

Шаг 06: Настройте значок закрытого бара

Секция на холсте поставляется с поперечным значком (x) в правом верхнем углу. Чтобы настроить его, разверните раздел закрытия на панели Elementor.

Используя соответствующие параметры оттуда, вы можете отключить значок, изменить выравнивание, изменить тип значка, заголовок значка и многое другое. Надеюсь, вы сможете сделать это самостоятельно.

Вот учебник о том, как создать календарь событий в WordPress.

Шаг 07: Изменить настройки для виджета

Разверните раздел настроек . Из параметра направления вы можете изменить положение виджета на холст. Вы можете позиционировать его слева, вправо, вверх или снизу.

Далее вы можете выбрать эффект перехода контента . Он добавит эффект анимации на веб -страницу и покажет его, когда нажата кнопка.

Например, мы выбрали «Раскрытие как тип перехода контента». Теперь смотрите видеоклип, прикрепленный ниже. Как только кнопка нажата, страница также перемещается вместе с разделом «Выход».

Точно так же настройте другие параметры.

Шаг 08: Стилизуйте виджет с выключенным холстом

Приходите на вкладку «Стиль» и разверните контент OffCanvas .

Отсюда вы можете изменить размер выключения , добавить тип границы , увеличить ширину границы , изменить цвет границы и установить радиус границы . Надеюсь, вы сможете сделать их самостоятельно, как мы это сделали.

Расширить раздел контента . Вы получите варианты для настройки выравнивания контента, цвета фона, типа границы, ширины границы, цвета границы и радиуса границы для содержания с виджетом с холстом.

Точно так же вы можете изменить типографику, размер шрифта и цвет текста.

Вот простое руководство о том, как отображать 360 вращающихся продуктов фотографии в WordPress.

Шаг 09: стилизовать кнопку переключения

Точно так же расширяйте раздел переключения . Это позволит вам настроить выравнивание кнопки, типографику, цвет текста, радиус границы, фон кнопки и т. Д.

Шаг 10: Настройте значок Blose Bar

Расширяя раздел Close Bar , вы можете настроить цвет, размер и все больше вещей закрывающей значки.

Шаг 11: Сделайте отдачу от Off Canvas Widget Mobile

Каждый из ваших веб -элементов должен быть оптимизирован для мобильных устройств, поэтому они хорошо отображаются на всех типах устройств. В противном случае вы можете упустить огромный трафик, так как около 50% всего трафика на большинстве веб -сайтов поступают от мобильных пользователей.

Для мобильной оптимизации щелкните значок «Адаптивного режима» в нижней части панели Elementor. Topbar появится с параметрами, чтобы позволить вам переключаться между разными размерами экрана.

Теперь переключитесь между разными размерами экрана и проверьте, можно ли в соответствии с соответствующими устройствами. Если есть какие -либо проблемы, вы можете изменить размер шрифта, размер кнопки, ширину холста, высоту и другие варианты по мере необходимости.

Изменения будут сохранены только для этого конкретного размера экрана, не влияя на другие. Таким образом, вы можете сделать мобильный вид на холст.

Шаг 12: Предварительный просмотр виджета контента с Canvas

Теперь перейдите к опции предварительного просмотра веб -страницы и проверьте, работает ли виджет нормально или нет. Вы можете видеть, что это хорошо работает с нашей стороны.

Вещи, которые следует учитывать при использовании виджета контента на холсте

Чтобы лучше использовать виджет, есть несколько моментов, которые вы должны тщательно рассмотреть при использовании виджета Canvas Content. Взгляните на них ниже.

• Плавное пользовательское опыт

Контент вне канваса должен поддерживать пользователей в навигации по сайту вместо того, чтобы беспокоить их опыт. Убедитесь, что виджет работает плавно с хорошо скоординированной анимацией. Тем не менее, минимизируют сильные эффекты движения, которые могут снизить производительность, особенно на мобильных телефонах.

• Оптимизировать для мобильного телефона

Как уже сказано выше, сегодня значительное количество веб -посетителей обычно поступает от пользователей мобильных устройств, вы должны хорошо оптимизировать свои веб -сайты для всех типов устройств. В противном случае пользователи, ориентированные на мобильные устройства, будут иметь очень негативный опыт.

• Легкое закрытие

Виджет контента с Canvas должен включать простой вариант закрытия. Если это трудно найти, пользователи обязательно будут чувствовать себя разочарованными. Так что не забывайте, что значок закрытия таким образом, что становится легко навигация.

• Содержание актуальности

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

Последние слова!

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

Итак, помимо этого урока, если вы хотите иметь больше идей о том, что вы можете сделать с виджетом, вы можете посетить нашу страницу Demo Content Content Content Content. Вы получите хорошую коллекцию дизайнов вне канва, которые вы можете напрямую скопировать и вставить на своем сайте.

Если у вас есть больше без ответа запросов, дайте нам знать через поле для комментариев ниже. Мы вернемся к вам очень скоро с полезными ответами.