Как разместить заголовок Blurb над изображением

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

Посмотреть Демо

У нас есть возможность изменить или все модули Divi blurb на сайте или только определенные модули.

Давайте, сначала я покажу вам как изменить расположение заголовка на всех модулях Blurb.

Изменяем все Blurb модули на сайте

После создания модуля Blurb нужно из консоли WordPress перейти в настройки темы Divi, конкретно во вкладку Интеграции.«Divi» >«Параметры темы Divi» (Divi Theme Options) > «Интеграции» (Integration).

2. В раздел « Добавьте код в вашего блога» (Add code to the < head > of your blog) вставьте следующий фрагмент кода (автор Geno Quiroz) :

<script type="text/javascript">
//изменяет все модули Blurbs
  jQuery( function($){
   $('.et_pb_blurb').each( function() {
    blurbHeader = $(this).find('h4.et_pb_module_header');
    blurbContent = $(this).find('.et_pb_blurb_content');
    $(blurbHeader).detach().prependTo(blurbContent);
   });
  });
</script>

Теперь заголовок на всех модулях Blurb будет расположен над изображением.

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

Изменение отдельных Blurb модулей

1. Создайте модуль blurb и перейдите на вкладку Дополнительные настройки (Advanced).

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

3. После сохранения настроек для всех выбранных модулей Blurb зайдите в раздел «Divi» >«Параметры темы Divi» (Divi Theme Options) > «Интеграции» (Integration).

4. В окне раздела «Добавьте код в <head> вашего блога» (Add code to the < head > of your blog) вставьте следующий код:

<script type="text/javascript">
 // используем пользовательский класс модуля Blurb
  jQuery( function($){
   $('.mp_m_blurb_header_switch').each( function() {
    blurbHeader = $(this).find('h4.et_pb_module_header');
    blurbContent = $(this).find('.et_pb_blurb_content');
    $(blurbHeader).detach().prependTo(blurbContent);
   });
  });
</script>

Вот и все. Надеюсь, статья была полезной)

DiviRus