Случатся так, что при выводе элемента-аккордеон в теме Divi нужно, чтобы первый элемент был по умолчанию закрыт. Казалось бы мелочь, но дизайн иногда этого требует. В маленьких блоках это нужный функционал. К сожалению, такой элементарной возможности в настройках не предусмотрено, но это не беда. WESPE CLUB расскажет, как это сделать!
-90% на Divi theme
Лицензионная тема Divi в нашем каталоге со скидкой 90%.
Аккордеон Divi
Аккордеон – очень удобный элемент. В теме Divi, как и прочие, его можно найти во время создания страницы или записи при помощи конструктора. Для этого нужно создать новый модуль и выбрать “Аккордеон”
Что мы получим в результате
Без доработок при загрузке страницы мы видим аккордеон с раскрытым первым элементом. После доработки при загрузке страницы, первый элемент будет закрыт.
До
После
Как это сделать
Делается это при помощи jQuery. Если вы не знакомы с jQuery, или даже вообще не знаете что это такое, без паники! Всё просто, следуйте за нами по шагам.
01
Находим место для добавления кода jQuery
Для начала определим, куда вставлять код. В шаблоне Divi это место найти не трудно. Отправляемся по следующему пути Панель администратора WordPress -> Divi -> Настройки темы -> Интеграция (вкладка в верхней части). Далее в левой части открышегося окна ищем название “Добавить код в < head > вашего блога”. Сюда будем вставлять код.
02
Добавляем код jQuery на страницы сайта
Теперь берём код и вставляем в нужное окошко (см. 1 шаг).
Well done!
Какая-то короткая статья получилась. Неожиданно. Зато работает как надо. Однако, внимательный читатель скажет: “Зачем же нам какой-то код на весь сайт, если нужен он может быть только на одной странице!” И будет прав. Для тех кто дочитал до конца подсказываем более изящный способ размещения кода только на той странице, где у нас размещается Аккордеон.
BONUS
Вставляем код jQuery на одну страницу
Вот тут разработчики заслужили похвалу на все 100%. Добавить код на страницу в Divi builder проще простого. Easy peasy, как мы любим говорить. Добавляем новый блок, который называется, как бы вы думали? “</> Код”, как это ни странно 🙂
Вставляем наш код в единственно возможное окно и сохраняем. Теперь код будет загружаться только на нужной странице. Это хорошо по двум причинам. Во-первых, нам может понадобиться иметь на разных страницах разные варианты аккордеона. Во-вторых, и это на наш взгляд важнее всего, в пору борьбы за скорость загрузки сайта, не самый верный вариант добавлять лишний код на страницы всего сайта.
Спасибо, помогло!
Не понимаю одного, почему это нельзя сделать в качестве опции. Ну, что за бред!
Divi предлагает отличные инструменты. Готовые решения отданы на откуп разработчикам. Большинство приёмов достаточно легко исполнимо даже без особой подготовки, было бы желание. Как в случае с Аккордеоном, например. Хотя, нам тоже кажется, что могли бы такую мелочь вынести в настройки.
А как развернуть обратно?