Как создать вертикальные вкладки прокрутки в WordPress с элементом

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

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

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

Примеры использования вертикальных вкладок прокрутки

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

а Детали продукта или услуги

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

беременный Часто задаваемые вопросы (часто задаваемые вопросы)

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

в Пошаговые руководства или учебные пособия

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

дюймовый Члены команды или профили персонала

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

эн. Портфолио или демонстрация проекта

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

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

Теоретическая часть закончилась. Надеюсь, теперь у вас есть четкое представление о том, что такое вертикальная вкладка прокрутки и каковы ее варианты использования. Сейчас мы рассмотрим учебную часть. Мы объясним, как создать вертикальные вкладки прокрутки с элементом на WordPress в этом разделе. Продолжайте читать!

Предварительные условия для начала учебника

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

• Элементар бесплатно
• HappyAddons бесплатно
• HappyAddons Pro

Примечание: вам нужна HappyAddons Pro, потому что Ementoror не имеет встроенной опции для создания вкладок прокрутки. HappyAddons Pro предлагает виджет под названием Scroll Tabs , который позволяет легко создавать вертикальные вкладки прокрутки.

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

Шаг 01: Откройте страницу с элементом

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

Шаг 02: перетаскивайте виджет вкладок Scroll на холсте.

Найдите виджет вкладок Scroll на панели Elementor. Перетащите его на холст Elementor.

Виджет вкладок Scroll поставляется с некоторым контентом по умолчанию. Как только виджет будет добавлен на холст, вы увидите этот контент по умолчанию.

Шаг 03: Начните добавлять контент на вкладки

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

# Добавить заголовок в виджет вкладок Scroll

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

Перейдите в контент> Содержание вкладок> заголовок . Вы получите место, чтобы написать заголовок. Вы можете видеть, что мы написали заголовок «Стильные смотры.

# Напишите описание для виджета

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

# Добавить контент в вкладки

Возьмите курсор на вкладку и нажмите на нее. Это расширит вкладку и позволит вам добавить контент.

# Напишите заголовок для вкладки

Вы должны написать заголовок для каждой вкладки . После расширения вкладки вы получите поле под текстом NAV. Здесь вы можете написать заголовок для вкладки.

# Измените значок вкладки

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

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

Вы можете видеть, что значок была изменена.

# Добавить контент в вкладку через редактор

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

Давайте сначала выберите опцию редактора .

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

# Измените цвет фона контента с вкладками

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

# Добавить контент в вкладку через шаблон

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

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

Нажмите на выпадающий значок рядом с шаблоном . Затем выберите шаблон, который вы хотите отобразить на вкладке.

Вы можете видеть, что наш желаемый шаблон уже добавлен на вкладку.

Точно так же добавьте контент во все вкладки виджета вкладок Scroll.

Шаг 04: Настройка настройки виджета вкладок Scroll

После того, как часть контента будет выполнена, разверните раздел «Настройки» .

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

# Регулируйте ширину панели NAV

Виджет вкладок Scroll имеет две части - панель Navigator (панель NAV) и панель содержимого .

Вы можете изменить ширину панели Navigator, перетаскивая шкалу под этой опцией. Кроме того, вы можете настроить его положение и выравнивание. Процесс показан в видеоклипе, прикрепленном ниже.

# Регулировать высоту панели управления

Точно так же отрегулируйте высоту панели управления. Кроме того, подтвердите, что содержание вертикально выровнено правильно.

Шаг 05: Стилизовать виджет вкладок Scroll

Приходите на вкладку «Стиль» . Давайте сначала установим цвет фона для панели Navigator .

# Настроить типографику контента NAV Panel

Обновите типографику, один за другим, для каждого контента, который вы добавили на панель Navigator. Вы можете изменить семейство шрифтов, размер, вес, высота линии и т. Д. По мере необходимости.

# Стилизовать вкладки

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

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

Шаг 06: Оптимизируйте виджет вкладок Scroll для мобильного телефона

Чтобы оптимизировать виджет для размера экрана мобильного телефона, перейдите в мобильный портретный режим на верхней панели.

Вы увидите, что вкладки Navigator появляются сверху по умолчанию.

# Отрегулируйте высоту панели контента для мобильных устройств

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

Шаг 07: Оптимизируйте виджет вкладок Scroll для планшетов

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

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

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

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

Таким образом, вы можете создать вертикальные вкладки прокрутки в WordPress с элементом.

Финальные выводы!

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

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

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

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