Създаването на ценни публикации в блога отнема време и усилия. Заедно с намирането на най-добрите теми за писане във вашата ниша, важно е също така да ангажирате читателите и да им позволите бързо да намерят търсената информация. 

Сега чудесен начин да се обърнете към този тип потребителско изживяване е да споделите визуално резюме в края на публикацията си в блога, точно преди последните мисли. 

С новите блокове за оформление на Divi вече можете без усилие да създадете поле за обобщение с вградените опции на Divi. В този урок ще ви преведем през процеса и също така ще можете да изтеглите безплатно JSON файла за оформление!

Нека започнем да пресъздаваме!

Използвайте шаблона за публикуване за шестия тематичен пакет

Изтеглете шести пакет за създаване на теми

Полето за обобщение, което ще пресъздадем в този урок, пасва идеално на шаблона за публикация от шестия безплатен пакет за изграждане на теми. Достъп доблог статия и изтеглете целия пакет.

Отидете при Divi Theme Builder

След това отидете на Divi Builder на теми.

Изтеглете шаблона за публикуване

Щракнете върху иконата в горния десен ъгъл и изтеглете шаблона за публикация от Theme Building Pack. Не забравяйте да редактирате всички промени в конструктора на теми след това.

Отворете съществуваща публикация в Гутенберг или създайте нова

След като добавите съответния шаблон за публикация, е време да създадете резюмето. Отворете или създайте нова публикация с помощта на Гутенберг.

Добавете обобщение на заглавието H2

Към края на публикацията в блога ще добавим ново H2 заглавие.

Добавете нов блок Divi онлайн

След това ще добавим нов блок за оформление на Divi.

Създайте ново оформление в блока Divi

След като добавите блока, ще имате две възможности. Изберете да създадете ново оформление.

Настройки на секцията

Цвят на фона

В редактора на блокове за оформление Divi ще забележите раздел. Отворете този раздел и използвайте бял фон за него.

• Цвят на фона: #FFFFFF

разстояние

Преминете към раздела за проектиране на секции и добавете персонализирани стойности на полета и подплънки.

• Горна граница: 100px
• Ляв марж: -10% (офис), 0% (таблет и телефон)
• Десен марж: -10% (офис), 0% (таблет и телефон)
• Горна подложка: 0px
• Подложка отдолу: 0px

граница

Добавете също радиус на границата.

• Долу отляво: 16px
• Отдолу вдясно: 16px

Кутия за сянка

С фина сянка на кутията.

• Сила на размазване на кутията: 60px
• Сила на разпространение в сянка на кутията: 10px
• Цвят на сенките: rgba (0,0,0,0,08)

Добавете нов ред

Структура на колоната

Продължете да добавяте нов ред в секцията, като използвате следната структура на колоните:

оразмеряване

Без още да добавяте модул, отворете настройките на реда и оставете реда да заема цялата ширина на контейнера на секцията.

• Използвайте персонализирана ширина на улука: Да
• Ширина на улука: 1
• Изравнете височините на колоните: Да
• Ширина: 100%
• Максимална ширина: 100%

разстояние

След това извадете горната и долната подложка по подразбиране от линията.

• Горна подложка: 0px
• Подложка отдолу: 0px

Настройки на колона 1

Цвят на фона

След това отворете настройките в колона 1 и използвайте бял цвят на фона за това.

• Цвят на фона: #FFFFFF

разстояние

Също така добавете персонализирани стойности за запълване

• Горна подложка: 70px
• Подложка отдолу: 70px
• Ляв подплънки: 70 px
• Дясно подплънки: 70px

Кутия за сянка

Продължете, като добавите фина сянка на кутия с различен цвят по подразбиране и задръжте курсора на мишката.

• Сила на размазване на кутията: 50px
• Цвят на сенките по подразбиране: rgba (0,0,0,0)
• Цвят на сенката при задържане: rgba (0,0,0,0,15)

Задръжте мащаба на трансформация

При задържане на курсора също искаме леко да мащабираме колоната.

• Вдясно: 105%
• Ниска: 105%

Задръжте курсора Z

Попълнете параметрите на колоната, като добавите показалец за движение z.

• Задръжте индекс Z: 11

Добавете текстов модул # 1 в колоната

Добавете номер в областта на съдържанието

Време е да добавите модули, като започнете с първия текстов модул. Добавете номер към полето съдържание.

Градиентен фон

След това добавете градиентен фон.

• Цвят 1: # ff5e92
• Цвят 2: # ffd4b6
• Посока на градиента: 165deg

Текстови настройки

Отидете в раздела за дизайн на модула и променете настройките на текста, както следва:

• Шрифт на текста: Poppins
• Цвят на текста: #ffffff
• Размер на текста: 26px
• Подравняване на текста: център

оразмеряване

След това задайте ширина и височина.

• Ширина: 150px
• Височина: 150px

граница

Добавете също радиус на границата.

• Долу отляво, горе вдясно и отдясно: 100 пиксела

Основен елемент на CSS

За да центрираме текста в нашия контейнер, ще трябва да добавим няколко реда CSS код към основния елемент на модула в разширения раздел.

display: flex;align-items: center;justify-content: center;

Позиция

И ще завършим параметрите на модула, като препозиционираме модула.

• Позиция: абсолютна
• Местоположение: горе вляво

Добавете текстов модул # 2 в колоната

Добавете H3 съдържание

Да преминем към следващия текстов модул. Добавете малко съдържание H3 по ваш избор.

Настройки за текст на H3

След това променете размера на H3 текста на модула.

• Заглавие 3 Размер на текста: 23px

разстояние

Променете и настройките на разстоянието.

• Горна граница: 100px
• Долен марж: 20px

Добавете модул за разделяне в колоната

видимост

Следващият модул, от който се нуждаем, е модул за разделяне. Уверете се, че опцията „Показване на разделител“ е активирана.

• Показване на разделител: Да

Настройки на линията

Преминете към раздела за проектиране на модула и променете настройките на реда, както следва:

• Цвят на линията: # ff5e92
• Линия стил: плътна
• Позиция на линията: висока

оразмеряване

Също така променете размера на модула.

• Тегло на делителя: 2px
• Ширина: 20%

Добавете текстов модул # 3 в колоната

Добавете съдържание

Да преминем към следващия и последен текстов модул. Добавете малко съдържание по ваш избор.

Колона за клониране

След като завършите колоната и всички нейни модули, можете да клонирате цялата колона.

Променете цвета на сенките в полето по подразбиране

Отворете настройките в колона 2 и променете цвета на сенките по подразбиране.

• Цвят на сенките: rgba (0,0,0,0,06)

Промяна на градиентния фон на текстовия модул № 1

Отворете първия текстов модул в следващата 2 колона и променете фона на градиента.

• Цвят 1: # 7e5ce6
• Цвят 2: # 25b8ee

Промяна на границата на текстовия модул № 1

Също така променете настройките на границата на модула.

• Горен ляв, долен ляв и долен десен: 100 пиксела

Променете позицията на текстов модул №1

И преместете модула в разширения раздел.

• Местоположение: горе вдясно

Променете цвета на разделителя

Продължете, като отворите настройките за разделителния модул. Променете цвета на линията, за да отговаря на новата цветова схема.

• Цвят на линията: # 7e5ce6

Промяна на цялото съдържание

И накрая, променете цялото съдържание на модула в колона 2.

Клонирайте цялата секция два пъти

След като завършите първия раздел, можете да го клонирате два пъти.

Променете интервала на първата дублирана секция

Отворете настройките в първата дублирана секция и съответно променете стойностите на маржа:

• Ляв марж: -5% (настолен компютър), 0% (таблет и телефон)
• Десен марж: -5% (офис), 0% (таблет и телефон)

Променете интервала на втория дублиран раздел

Отворете и втория дубликат, изтрийте всички стойности на маржа и вместо това добавете по-нисък марж.

• Долен марж: 100px

Промяна на цялото съдържание

И накрая, променете цялото съдържание на модула.

Запишете подредбата в библиотеката Divi за повторна употреба

Ако планирате да използвате това резюме в други публикации в блога, не забравяйте да го запишете във вашата библиотека Divi, за да имате лесен достъп до него! Това е !

изследване

След като преминахме през всички стъпки, нека да разгледаме окончателно как изглежда на различни размери на екрана.

Заключителни мисли

В тази статия ви показахме как да добавите поле за обобщение към публикацията си в Gutenberg с новите блокове за оформление на Divi. Обобщените полета са чудесен визуален начин да помогнете на вашите посетители да намерят информацията, която търсят. 

Също така успяхте да изтеглите безплатно JSON файла за оформление! Ако имате въпроси, не се колебайте да оставите коментар в раздела за коментари по-долу.