Divi с новым Global Presets! Скидка 10%!

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

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

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

 

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

  1. После создания модуля Blurb нужно из консоли WordPress перейти в настройки темы Divi, конкретно во вкладку Интеграции.«Divi» >«Параметры темы Divi» (Divi Theme Options) > «Интеграции» (Integration).
Вкладка Интеграция настройки темы DIVI
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 будет расположен над изображением.

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

 

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

 

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

Вкладка Расширенные настройки модуля Blurb

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

Установка CSS Class для модуля Blurb

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>
Добавление кода для отдельных модулей Blurb
Вот и все. Надеюсь, статья была полезной)