Аккордеон 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]