Аккордеон Divi. Как сделать первый элемент свёрнутым по умолчанию

[et_pb_section fb_built=»1″ admin_label=»Раздел» _builder_version=»4.9.2″ _module_preset=»default» custom_padding=»0px||0px|||» da_disable_devices=»off|off|off» da_is_popup=»off» da_exit_intent=»off» da_has_close=»on» da_alt_close=»off» da_dark_close=»off» da_not_modal=»on» da_is_singular=»off» da_with_loader=»off» da_has_shadow=»on»][et_pb_row _builder_version=»4.9.4″ _module_preset=»default» custom_margin=»-40px|auto|0px|auto|false|false» custom_padding=»0px||0px|||»][et_pb_column type=»4_4″ _builder_version=»4.9.2″ _module_preset=»default»][et_pb_divider color=»#eeeeee» divider_position=»center» divider_weight=»3px» _builder_version=»4.9.4″ _module_preset=»default» width=»25%» custom_padding=»10px||10px||false|false»][/et_pb_divider][et_pb_blurb title=»Оглавление» use_icon=»on» font_icon=»%%71%%» icon_color=»#eeeeee» icon_placement=»left» content_max_width=»100%» use_icon_font_size=»on» icon_font_size=»100px» _builder_version=»4.9.3″ _module_preset=»default» header_level=»h2″ header_font=»||||||||» custom_margin=»||14px|||»][/et_pb_blurb][et_pb_blurb title=»Аккордеон Divi» url=»#intro» use_icon=»on» font_icon=»%%3%%» icon_color=»#b856c7″ use_circle=»on» circle_color=»#ffffff» use_circle_border=»on» circle_border_color=»#b856c7″ icon_placement=»left» content_max_width=»100%» use_icon_font_size=»on» icon_font_size=»16px» font_icon_tablet=»» font_icon_phone=»» font_icon_last_edited=»on|desktop» _builder_version=»4.9.3″ _module_preset=»default» header_font_size=»16px» header_line_height=»2em» custom_margin=»-71px||-2px|118px|false|false» custom_padding=»10px|||0px|false|false» font_icon__hover_enabled=»on|hover» font_icon__hover=»%%1%%» custom_padding__hover_enabled=»on|hover» custom_padding__hover=»|||15px|false|false»][/et_pb_blurb][et_pb_blurb title=»Как сделать» url=»#jquery» use_icon=»on» font_icon=»%%3%%» icon_color=»#b856c7″ use_circle=»on» circle_color=»#ffffff» use_circle_border=»on» circle_border_color=»#b856c7″ icon_placement=»left» content_max_width=»100%» use_icon_font_size=»on» icon_font_size=»16px» font_icon_tablet=»» font_icon_phone=»» font_icon_last_edited=»on|desktop» _builder_version=»4.9.3″ _module_preset=»default» header_font_size=»16px» header_line_height=»2em» custom_margin=»||0px|118px|false|false» custom_padding=»10px|||0px|false|false» font_icon__hover_enabled=»on|hover» font_icon__hover=»%%1%%» custom_padding__hover_enabled=»on|hover» custom_padding__hover=»|||15px|false|false»][/et_pb_blurb][et_pb_blurb title=»Куда вставлять код» url=»#place» use_icon=»on» font_icon=»%%3%%» icon_color=»#b856c7″ use_circle=»on» circle_color=»#ffffff» use_circle_border=»on» circle_border_color=»#b856c7″ icon_placement=»left» content_max_width=»100%» use_icon_font_size=»on» icon_font_size=»16px» font_icon_tablet=»» font_icon_phone=»» font_icon_last_edited=»on|desktop» _builder_version=»4.9.3″ _module_preset=»default» header_font_size=»16px» header_line_height=»2em» custom_margin=»||0px|118px|false|false» custom_padding=»10px|||0px|false|false» font_icon__hover_enabled=»on|hover» font_icon__hover=»%%1%%» custom_padding__hover_enabled=»on|hover» custom_padding__hover=»|||15px|false|false»][/et_pb_blurb][et_pb_blurb title=»Кодим» url=»#code» use_icon=»on» font_icon=»%%3%%» icon_color=»#b856c7″ use_circle=»on» circle_color=»#ffffff» use_circle_border=»on» circle_border_color=»#b856c7″ icon_placement=»left» content_max_width=»100%» use_icon_font_size=»on» icon_font_size=»16px» font_icon_tablet=»» font_icon_phone=»» font_icon_last_edited=»on|desktop» _builder_version=»4.9.3″ _module_preset=»default» header_font_size=»16px» header_line_height=»2em» custom_margin=»||0px|118px|false|false» custom_padding=»10px|||0px|false|false» font_icon__hover_enabled=»on|hover» font_icon__hover=»%%1%%» custom_padding__hover_enabled=»on|hover» custom_padding__hover=»|||15px|false|false»][/et_pb_blurb][et_pb_blurb title=»Bonus» url=»#bonus» use_icon=»on» font_icon=»%%3%%» icon_color=»#b856c7″ use_circle=»on» circle_color=»#ffffff» use_circle_border=»on» circle_border_color=»#b856c7″ icon_placement=»left» content_max_width=»100%» use_icon_font_size=»on» icon_font_size=»16px» font_icon_tablet=»» font_icon_phone=»» font_icon_last_edited=»on|desktop» _builder_version=»4.9.3″ _module_preset=»default» header_font_size=»16px» header_line_height=»2em» custom_margin=»||0px|118px|false|false» custom_padding=»10px|||0px|false|false» font_icon__hover_enabled=»on|hover» font_icon__hover=»%%1%%» custom_padding__hover_enabled=»on|hover» custom_padding__hover=»|||15px|false|false»][/et_pb_blurb][et_pb_divider color=»#eeeeee» divider_position=»center» divider_weight=»3px» _builder_version=»4.9.4″ _module_preset=»default» width=»25%» custom_padding=»10px||10px||false|false»][/et_pb_divider][/et_pb_column][/et_pb_row][/et_pb_section][et_pb_section fb_built=»1″ admin_label=»Раздел» module_id=»intro» _builder_version=»4.9.3″ _module_preset=»default» custom_padding=»||0px|||» da_popup_slug=»intro» da_disable_devices=»off|off|off» da_is_popup=»off» da_exit_intent=»off» da_has_close=»on» da_alt_close=»off» da_dark_close=»off» da_not_modal=»on» da_is_singular=»off» da_with_loader=»off» da_has_shadow=»on»][et_pb_row column_structure=»1_2,1_2″ _builder_version=»4.9.2″ _module_preset=»default»][et_pb_column type=»1_2″ _builder_version=»4.9.2″ _module_preset=»default»][et_pb_text _builder_version=»4.9.2″ _module_preset=»default»]

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

[/et_pb_text][/et_pb_column][et_pb_column type=»1_2″ _builder_version=»4.9.2″ _module_preset=»default»][et_pb_blurb title=»Divi в нашем каталоге» url=»https://wespe.club/product/divi-premialnaya-tema-wordpress/» url_new_window=»on» use_icon=»on» font_icon=»%%233%%» icon_placement=»left» use_icon_font_size=»on» icon_font_size=»67px» _builder_version=»4.9.4″ _module_preset=»default» header_font_size=»22px» body_font=»|300|||||||» background_enable_color=»off» custom_padding=»15px|20px|15px|20px|false|false» hover_enabled=»0″ border_radii=»on|20px|20px|20px|20px» box_shadow_style=»preset3″ global_module=»230121″ sticky_enabled=»0″]

Лицензионная тема Divi в нашем каталоге ресурсов.

[/et_pb_blurb][/et_pb_column][/et_pb_row][/et_pb_section][et_pb_section fb_built=»1″ admin_label=»Раздел» _builder_version=»4.9.2″ _module_preset=»default» custom_padding=»0px||0px|||» da_disable_devices=»off|off|off» da_is_popup=»off» da_exit_intent=»off» da_has_close=»on» da_alt_close=»off» da_dark_close=»off» da_not_modal=»on» da_is_singular=»off» da_with_loader=»off» da_has_shadow=»on»][et_pb_row _builder_version=»4.9.3″ _module_preset=»default» custom_padding=»||0px|||»][et_pb_column type=»4_4″ _builder_version=»4.9.2″ _module_preset=»default»][et_pb_text _builder_version=»4.9.3″ _module_preset=»default»]

Аккордеон Divi

[/et_pb_text][et_pb_text _builder_version=»4.9.3″ _module_preset=»default» custom_padding=»||16px|||»]

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

[/et_pb_text][/et_pb_column][/et_pb_row][/et_pb_section][et_pb_section fb_built=»1″ admin_label=»Раздел» _builder_version=»4.9.2″ _module_preset=»default» custom_padding=»0px||0px|||» da_disable_devices=»off|off|off» da_is_popup=»off» da_exit_intent=»off» da_has_close=»on» da_alt_close=»off» da_dark_close=»off» da_not_modal=»on» da_is_singular=»off» da_with_loader=»off» da_has_shadow=»on»][et_pb_row _builder_version=»4.9.3″ _module_preset=»default» custom_padding=»||0px|||»][et_pb_column type=»4_4″ _builder_version=»4.9.2″ _module_preset=»default»][et_pb_text _builder_version=»4.9.4″ _module_preset=»default»]

Что мы получим в результате

[/et_pb_text][et_pb_text _builder_version=»4.9.2″ _module_preset=»default» custom_padding=»||16px|||»]

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

[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row column_structure=»1_2,1_2″ _builder_version=»4.9.2″ _module_preset=»default»][et_pb_column type=»1_2″ _builder_version=»4.9.2″ _module_preset=»default»][et_pb_text _builder_version=»4.9.2″ _module_preset=»default» border_width_bottom=»2px» border_color_bottom=»#878787″]

До

[/et_pb_text][et_pb_image src=»https://wespe.club/wp-content/uploads/2021/04/01.png» title_text=»01″ show_in_lightbox=»on» _builder_version=»4.9.2″ _module_preset=»default»][/et_pb_image][/et_pb_column][et_pb_column type=»1_2″ _builder_version=»4.9.2″ _module_preset=»default»][et_pb_text _builder_version=»4.9.2″ _module_preset=»default» border_width_bottom=»2px» border_color_bottom=»#878787″]

После

[/et_pb_text][et_pb_image src=»https://wespe.club/wp-content/uploads/2021/04/02.png» alt=»иногда требуется, чтобы | WESPE.CLUB» title_text=»иногда требуется, чтобы | WESPE.CLUB» show_in_lightbox=»on» _builder_version=»4.9.2″ _module_preset=»default»][/et_pb_image][/et_pb_column][/et_pb_row][/et_pb_section][et_pb_section fb_built=»1″ admin_label=»Раздел» _builder_version=»4.9.2″ _module_preset=»default» da_disable_devices=»off|off|off» da_is_popup=»off» da_exit_intent=»off» da_has_close=»on» da_alt_close=»off» da_dark_close=»off» da_not_modal=»on» da_is_singular=»off» da_with_loader=»off» da_has_shadow=»on»][et_pb_row module_id=»jquery» _builder_version=»4.9.3″ _module_preset=»default»][et_pb_column type=»4_4″ _builder_version=»4.9.2″ _module_preset=»default»][et_pb_text _builder_version=»4.9.2″ _module_preset=»default» custom_margin=»||||false|false» custom_margin_tablet=»||||false|false» custom_margin_phone=»» custom_margin_last_edited=»on|desktop»]

Как это сделать

[/et_pb_text][et_pb_text _builder_version=»4.9.2″ _module_preset=»default»]

Делается это при помощи jQuery. Если вы не знакомы с jQuery, или даже вообще не знаете что это такое, без паники! Всё просто, следуйте за нами по шагам.

[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row column_structure=»1_2,1_2″ _builder_version=»4.9.2″ _module_preset=»default» custom_margin=»53px|auto|-40px|auto||» custom_padding=»0px|||||»][et_pb_column type=»1_2″ _builder_version=»4.9.2″ _module_preset=»default»][et_pb_text _builder_version=»4.9.4″ _module_preset=»default» text_font=»|700|||||||» text_text_color=»#f7f7f7″ text_font_size=»200px» text_line_height=»1em» custom_margin=»50px||||false|false» custom_padding=»21px||0px|||» text_text_shadow_style=»preset3″ text_text_shadow_blur_strength=»0.93em»]

01

[/et_pb_text][/et_pb_column][et_pb_column type=»1_2″ _builder_version=»4.9.2″ _module_preset=»default»][/et_pb_column][/et_pb_row][et_pb_row _builder_version=»4.9.2″ _module_preset=»default» custom_margin=»-1px|auto||auto||» custom_padding=»0px|||||»][et_pb_column type=»4_4″ _builder_version=»4.9.2″ _module_preset=»default»][et_pb_text module_id=»place» _builder_version=»4.9.3″ _module_preset=»default» custom_margin=»-100px||18px|||» custom_margin_tablet=»-95px||18px||false|false» custom_margin_phone=»» custom_margin_last_edited=»on|tablet»]

Находим место для добавления кода jQuery

[/et_pb_text][et_pb_text _builder_version=»4.9.2″ _module_preset=»default» custom_margin=»||||false|false»]

Для начала определим, куда вставлять код. В шаблоне Divi это место найти не трудно. Отправляемся по следующему пути Панель администратора WordPress -> Divi -> Настройки темы -> Интеграция (вкладка в верхней части). Далее в левой части открышегося окна ищем название «Добавить код в < head > вашего блога». Сюда будем вставлять код.

[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row _builder_version=»4.9.2″ _module_preset=»default»][et_pb_column type=»4_4″ _builder_version=»4.9.2″ _module_preset=»default»][et_pb_image src=»https://wespe.club/wp-content/uploads/2021/04/03.png» alt=»иногда требуется, чтобы | WESPE.CLUB» title_text=»иногда требуется, чтобы | WESPE.CLUB» show_in_lightbox=»on» _builder_version=»4.9.2″ _module_preset=»default»][/et_pb_image][/et_pb_column][/et_pb_row][et_pb_row column_structure=»1_2,1_2″ _builder_version=»4.9.2″ _module_preset=»default» custom_margin=»53px|auto|-40px|auto||» custom_padding=»0px|||||»][et_pb_column type=»1_2″ _builder_version=»4.9.2″ _module_preset=»default»][et_pb_text _builder_version=»4.9.4″ _module_preset=»default» text_font=»|700|||||||» text_text_color=»#f7f7f7″ text_font_size=»200px» text_line_height=»1em» custom_margin=»50px||||false|false» custom_padding=»21px||0px|||» text_text_shadow_style=»preset3″ text_text_shadow_blur_strength=»0.93em»]

02

[/et_pb_text][/et_pb_column][et_pb_column type=»1_2″ _builder_version=»4.9.2″ _module_preset=»default»][/et_pb_column][/et_pb_row][et_pb_row _builder_version=»4.9.2″ _module_preset=»default» custom_margin=»-1px|auto||auto||» custom_padding=»0px||1px|||»][et_pb_column type=»4_4″ _builder_version=»4.9.2″ _module_preset=»default»][et_pb_text module_id=»code» _builder_version=»4.9.4″ _module_preset=»default» custom_margin=»-100px||18px||false|false» custom_margin_tablet=»-95px||||false|false» custom_margin_phone=»» custom_margin_last_edited=»on|tablet»]

Добавляем код jQuery на страницы сайта

[/et_pb_text][et_pb_text _builder_version=»4.9.2″ _module_preset=»default» custom_margin=»||||false|false»]

Теперь берём код и вставляем в нужное окошко (см. 1 шаг).  

[/et_pb_text][et_pb_text _builder_version=»4.9.2″ _module_preset=»default» background_color=»#f4f4f4″ custom_padding=»20px|20px|20px|20px|false|false»]

[/et_pb_text][et_pb_text _builder_version=»4.9.2″ _module_preset=»default» custom_margin=»||||false|false»]

Well done!

Какая-то короткая статья получилась. Неожиданно. Зато работает как надо. Однако, внимательный читатель скажет: «Зачем же нам какой-то код на весь сайт, если нужен он может быть только на одной странице!» И будет прав. Для тех кто дочитал до конца подсказываем более изящный способ размещения кода только на той странице, где у нас размещается Аккордеон.

[/et_pb_text][et_pb_code _builder_version=»4.9.2″ _module_preset=»default»][/et_pb_code][/et_pb_column][/et_pb_row][et_pb_row _builder_version=»4.9.2″ _module_preset=»default» custom_margin=»53px|auto|-40px|auto||» custom_padding=»0px|||||»][et_pb_column type=»4_4″ _builder_version=»4.9.2″ _module_preset=»default»][et_pb_text _builder_version=»4.9.4″ _module_preset=»default» text_font=»|700|||||||» text_text_color=»#f7f7f7″ text_font_size=»200px» text_line_height=»1em» custom_margin=»50px||||false|false» custom_padding=»21px||0px|||» text_text_shadow_style=»preset3″ text_text_shadow_blur_strength=»0.93em»]

BONUS

[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row _builder_version=»4.9.2″ _module_preset=»default» custom_margin=»-1px|auto||auto||» custom_padding=»0px|||||»][et_pb_column type=»4_4″ _builder_version=»4.9.2″ _module_preset=»default»][et_pb_text module_id=»bonus» _builder_version=»4.9.4″ _module_preset=»default» custom_margin=»-100px||18px||false|false»]

Вставляем код jQuery на одну страницу

[/et_pb_text][et_pb_text _builder_version=»4.9.2″ _module_preset=»default» custom_margin=»||||false|false»]

Вот тут разработчики заслужили похвалу на все 100%. Добавить код на страницу в Divi builder проще простого. Easy peasy, как мы любим говорить. Добавляем новый блок, который называется, как бы вы думали? «</> Код», как это ни странно 🙂

[/et_pb_text][et_pb_image src=»https://wespe.club/wp-content/uploads/2021/04/04.png» alt=»Как сделать первый элемент аккордеона Divi свёрнутым по умолчанию | WESPE.CLUB» title_text=»Как сделать первый элемент аккордеона Divi свёрнутым по умолчанию | WESPE.CLUB» show_in_lightbox=»on» _builder_version=»4.9.2″ _module_preset=»default»][/et_pb_image][et_pb_text _builder_version=»4.9.2″ _module_preset=»default»]

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

[/et_pb_text][et_pb_code _builder_version=»4.9.2″ _module_preset=»default»][/et_pb_code][/et_pb_column][/et_pb_row][/et_pb_section]