Как создать переключатели и аккордеоны в WordPress
Аккордеоны и переключатели — это удобные элементы, которые добавляют больше функциональности вашей странице, позволяют лучше структурировать контент и помогают с общей организацией веб-сайта. Их добавление не особенно сложно, но может быть особенно легко с помощью подходящего инструмента.
Вот почему мы выбрали удобный Qi Addons для Elementor, который включает в себя широкий спектр параметров настройки и невероятно прост в использовании. Этот плагин в настоящее время является самой большой коллекцией из 60 бесплатных виджетов, которые вы можете использовать для добавления дополнительных функций на свой веб-сайт. Кроме того, есть потрясающая коллекция из 40+ премиальных виджетов Qi. И, что также очень важно, он совместим со всеми темами WordPress.
Добавление аккордеонов и виджета Toggle Free с надстройками Qi для Elementor
Qi Addons позволяет вам полностью настроить стиль аккордеонов и переключателей в соответствии с используемой вами темой WordPress, от шрифтов до цветов и границ и всего, что между ними.
Чтобы вдохновиться, мы рекомендуем посетить страницу виджетов. Мы покажем вам, как мы это применяли.
Основное представление о том, как работает Elementor, — это все, что вам нужно понять в этом разделе. На самом деле это строка, содержащая два столбца с изображением в левом столбце и аккордеонами в правом. Конечно, аккордеон может занимать весь ряд или любую его часть, в зависимости от ваших потребностей.
Прежде чем мы продолжим, давайте проверим некоторые основные характеристики стиля, которыми обладает этот аддон. Итак, начнем с Поведения. Возможны два типа поведения: Аккордеоны, когда в один момент времени может быть открыт только один элемент, и Переключатели, позволяющие одновременно открывать более одного элемента.
Стиль можно дополнительно определить с помощью границ, и доступно несколько вариантов:
- Стандарт – без границ
- Коробка – с бордюрами,
- Граница сверху — имеет только границу сверху над заголовком
- Граница между – имеет только границу между заголовком и описанием
Как добавить аккоридоны и переключатели с помощью Qi Addons
Для начала мы разобьем строку на два столбца и добавим изображение в левый столбец, просто чтобы сделать раздел более привлекательным.
После добавления изображения мы найдем виджет «Аккордеоны и переключатели», введя его в строку поиска или прокрутив меню вниз. Когда виджет будет найден, просто нажмите на него, удерживайте и переместите туда, где вы хотите разместить новый элемент.
Мы добавили виджет «Аккордеоны и переключатели» в правую часть строки, а слева вы можете увидеть все связанные с ним настройки. Настройки виджета по умолчанию установлены таким образом, что текст и стиль автоматически соответствуют используемой вами теме, поэтому, если вы не видите необходимости в ее изменении, вы можете просто завершить процесс здесь, виджет будет выглядеть так, как он изначально принадлежал к теме.
Следующее, что вам нужно установить, это Behavior и Style. Мы уже упоминали параметры поведения и стиля, поэтому вы можете установить здесь все, что вам подходит. Для целей этой статьи мы выбрали опцию «Гармошки» в меню «Поведение» и стиль «Стандартный».
Что нужно сделать сейчас, так это добавить элементы. Прокрутите вниз, чтобы найти параметры элемента. Вы заметите два маленьких значка в правом верхнем углу вкладки «Элементы». Первый предназначен для копирования существующего элемента, а маленький крестик рядом с ним — для удаления элемента. Ниже вкладки «Элемент» находится кнопка «Добавить новый », которая служит для добавления новых элементов. Когда вы нажимаете, чтобы ввести новый элемент, вам нужно сначала установить заголовок, а затем ввести текст в указанное поле ниже.. Вы заметите множество опций, аналогичных тем, которые предлагаются в различных текстовых редакторах для стилизации и форматирования текста. Мы рекомендуем расположить текст и заголовок на этом этапе, так как вы сразу увидите, как это будет выглядеть в итоге.
После того, как вы введете текст, вы можете установить Content Height. Этот параметр относится к размеру переключаемого поля. Если вы установите для него значение «Высота самого высокого предмета », то каждый предмет будет того же размера, что и самый большой. Если вы выберете опцию «Индивидуальная высота элемента», размер каждого элемента будет соответствовать размеру содержимого в нем.
Если вы хотите изменить значки по умолчанию, которые отображаются при открытии и закрытии элемента, просто щелкните поле «Открыть значок» или «Закрыть значок», и отобразятся две новые опции. Один предназначен для добавления новых значков из библиотеки значков, а другой — для добавления SVG.
Теперь мы можем перейти к настройкам стиля. Здесь вы выполняете точную настройку стиля аккордеона и виджета переключения.
Вы можете выбрать стиль заголовка и установить типографику заголовка. Как мы уже упоминали, параметры по умолчанию установлены таким образом, чтобы стиль виджета соответствовал используемой вами теме. Но вы всегда можете опробовать все остальные варианты, просто выбрав их, и изменения сразу же будут видны в виджете в правой части экрана. Изучите варианты и посмотрите, что лучше всего подходит для вас.
Следующие настройки относятся к изменениям стиля, которые происходят с элементом, когда он закрывается или открывается. Например, вы можете настроить цвет текста при его открытии или цвет фона. Также есть возможность установить другое заполнение, когда элемент активен, т.е. открыт.
Если вы предпочитаете видеоуроки, взгляните на это, созданное авторами Qi:
В заключение
По мере того, как вы будете лучше знакомиться с плагином, вы изучите еще более совершенные параметры для точной настройки стиля вашего виджета «Аккордеон и переключатели». Этот интуитивно понятный инструмент идеально подходит для начинающих, поскольку он невероятно прост в использовании, а опытные пользователи также получат удовольствие от его использования, поскольку он предлагает множество вариантов настройки.