Когато оптимизирате начина, по който създавате публикации в блога си на уебсайта си, вероятно ще искате да включите ангажираща призив към действие (CTA) някъде в публикацията си. Сега, с новата интеграция на Divi с Gutenberg Layout Block, можете лесно да добавите нов блок, изграден от Divi, навсякъде в публикацията си в Gutenberg. Това ви позволява да запазите цялостното съдържание на публикацията в средата на Gutenberg, като същевременно създавате персонализиран Divi CTA, използвайки вградените опции на Divi. Най-доброто от двата свята! В този урок ще ви покажем как да добавите вграден, анимиран Divi CTA Layout Block към публикацията си в Gutenberg. Ще споделим и JSON файла на Divi CTA Layout Block безплатно!
Да вървим.
Възможен резултат
Преди да се потопим в урока, нека да разгледаме резултата при различни размери на екрана.
Импортиране на JSON блока за оформление
Изтеглете оформлението в библиотеката Divi
За да импортирате JSON файла, който успяхте да изтеглите по-горе, отидете във вашата библиотека Divi в бекенда на таблото за управление на WordPress и кликнете върху „Импортиране и експортиране“.
След това изберете JSON файла в папката си за изтегляне и кликнете върху "Импортиране на оформления на Divi Builder".
Добавете нов блок Divi вътре в Gutenberg
След като оформлението ви е импортирано, можете да получите достъп до съобщението си от Гутенберг и да добавите нов блок за оформление на Divi.
Импортирайте JSON файл от запазени презентации
След това кликнете върху „Зареждане от библиотека“, отидете на „Вашите запазени оформления“ и изберете оформлението, за да импортирате блока за оформление Divi CTA в публикацията си в блога. Това е!
Нека започнем да пресъздаваме!
Използвайте шаблона за публикуване за третия пакет теми
Използвайте Третия пакет за създаване на теми
Време е да започнете да създавате от нулата! На първо място, дизайнът, който пресъздаваме, съответства на третия пакет за създаване на теми, публикуван в блога на Divi. Отидете на статията и изтеглете JSON файловете за този пакет за създаване на тема.
Отидете при Divi Theme Builder
След като изтеглите третия пакет за създаване на теми, можете да получите достъп до Divi Theme Builder.
Изтеглете шаблона за публикуване
Изтеглете шаблона за публикация на Theme Building Pack, като щракнете върху иконата в горния десен ъгъл.
След това изберете шаблона за публикация и кликнете върху „Импортиране на шаблони за конструктор на теми Divi“. Не забравяйте да запазите и промените в конструктора на теми. Към този момент сме присвоили шаблона за публикация в блога от Theme Building Pack за всички наши публикации.
Отворете съществуваща публикация в Гутенберг или създайте нова
Следващата стъпка е да добавите блока за оформление на Divi CTA към нашия пост в Гутенберг. За да направите това, отворете съществуваща статия или създайте нова.
Добавете нов блок Divi онлайн
След като влезете в съобщението, можете да добавите нов блок за оформление на Divi.
Създайте ново оформление в блока Divi
Тогава ще имате две възможности. Изберете опцията "Създаване на ново оформление".
Настройки на секцията
разстояние
След като влезете в редактора на блокове за оформление Divi, ще забележите раздел. Отворете тази секция и добавете персонализирани стойности на полета, за да създадете пространство около контейнера на секцията.
- Горна граница: 50px
- Долен марж: 50px
- Ляв марж: -10%
- Десен марж: -10%
Добавете ред №1
Структура на колоната
Продължете да добавяте нов ред, като използвате следната структура на колоните:
оразмеряване
Без да добавяте повече модули, отворете параметрите на линията и увеличете ширината и максималната ширина.
- Ширина: 100%
- Максимална ширина: 100%
Добавете сепаратор №1 в колоната
видимост
Време е да добавите модули, като започнете с модул за разделяне. Уверете се, че опцията „Показване на разделител“ е активирана.
- Показване на разделител: Да
Ligne
Преминете към раздела за проектиране на модула и променете настройките на реда, както следва:
- Цвят на линията: # fc526e
- Линия стил: плътна
- Позиция на линията: висока
оразмеряване
Също така променете параметрите на оразмеряване.
- Тегло на делителя: 3px
- Ширина: 30%
- Подравняване на модула: вдясно
- Височина: 3px
Анимация
И променете съответно настройките за анимация:
- Анимационен стил: Слайд
- Посока на анимация: вляво
- Продължителност на анимацията: 2000ms
- Забавяне на анимацията: 500 ms
- Интензивност на анимацията: 100%
- Непрозрачност при стартиране на анимация: 0%
Добавете разделител №2 към колоната
видимост
Нека да преминем към следващия модул за разделяне. Отново се уверете, че опцията „Показване на разделител“ е включена.
- Показване на разделител: Да
Ligne
След това отидете в раздела за проектиране на модула и променете настройките на реда, както следва:
- Цвят на линията: # e1e3e8
- Линия стил: плътна
- Позиция на линията: висока
оразмеряване
След това променете параметрите за оразмеряване на модула.
- Тегло на делителя: 3px
- Височина: 3px
разстояние
Също така добавете персонализирани стойности на разстоянието.
- Ляв марж: 10%
- Десен марж: -20%
Анимация
И завършете настройките на модула, като промените настройките за анимация, както следва:
- Анимационен стил: Слайд
- Посока на анимация: вляво
- Продължителност на анимацията: 2000ms
- Забавяне на анимацията: 500 ms
- Интензивност на анимацията: 100%
- Непрозрачност при стартиране на анимация: 100%
Можете да добавите толкова разделители, колкото искате да ощипнете анимацията си.
Добавете ред №2
Структура на колоната
Добавете още един ред към секцията, като използвате следната структура на колоните:
оразмеряване
Без да добавяте повече модули, отворете параметрите на реда и променете параметрите на оразмеряване, както следва:
- Използвайте персонализирана ширина на улука: Да
- Ширина на улука: 1
- Ширина: 70%
- Подравняване на линията: в центъра
Добавете текстов модул №1 в колоната
Добавете H2 съдържание
След това добавете първи текстов модул към колоната на реда със съдържание на H2 по ваш избор.
Настройки за текст на H2
Преминете към раздела Дизайн и променете съответно настройките на текста H2:
- Цвят на текста на елемент 2: # fc526e
- Заглавка 2 Размер на текста: 28px
разстояние
След това добавете персонализирани стойности за запълване.
- Горна подложка: 50px
- Подложка отдолу: 50px
- Лявата подложка: 50px
граница
Използваме и лява граница.
- Ширина на лявата граница: 2px
- Цвят на лявата граница: # fc526e
Анимация
И допълнете параметрите на модула, като добавите персонализирана анимация.
- Анимационен стил: Обръщане
- Посока на анимация: Център
- Забавяне на анимацията: 1500 ms
Добавете текстов модул # 2 в колоната
Добавете съдържание
Добавете друг текстов модул точно под предишния със съдържание по ваш избор.
разстояние
Преминете към раздела за проектиране на модула и променете съответно стойностите на подплънките:
- Горна подложка: 50px
- Подложка отдолу: 50px
- Дясно подплънки: 50px
граница
След това добавете горна и дясна граница.
- Горна и дясна граница: 2 пиксела
- Цвят на горната и дясната граница: # fc526e
Анимация
И завършете настройките на модула, като промените настройките за анимация, както следва:
- Анимационен стил: Обръщане
- Посока на анимация: Център
- Забавяне на анимацията: 1700 ms
Добавете модул с бутони към колоната
Добавете копие
Следващият и последен модул, от който се нуждаем в този ред, е модул с бутони. Добавете копие по ваш избор.
Настройки на бутона
Преминете към раздела за проектиране на модула и променете настройките на бутона, както следва:
- Използвайте персонализирани стилове за бутона: Да
- Размер на текста на бутона: 13px
- Цвят на бутона на бутона: #ffffff
- Цветен градиент 1: # ff5b84
- Цветен градиент 2: # f94857
- Тип градиент: линеен
- Посока на градиента: 165deg
- Ширина на рамката на бутона: 0px
- Радиус на рамката на бутона: 0px
- Разстояние между буквите на бутон: 1px
- Шрифт на бутона: Montserrat
- Тегло на шрифта на бутона: Полу-удебелен
- Стил на шрифта на бутон: малки букви
разстояние
След това добавете персонализирани горна и долна подплънка.
- Горна подложка: 16px
- Подложка отдолу: 16px
Анимация
И попълнете параметрите на модула, като добавите следната анимация:
- Анимационен стил: Обръщане
- Забавяне на анимацията: 1900 ms
Клонирайте линия №1 и я поставете в долната част на секцията
След като приключите с първия и втория ред, можете да клонирате първия ред и да поставите дубликата в долната част на секцията.
Променете реда на разделителите
Смяна на местата за първия и последния модул за разделяне.
Заключителни мисли
В тази статия ви показахме как да се възползвате от новата интеграция на Divi с Gutenberg и да добавите вграден, анимиран блок за презентация на Divi с призив към действие към вашата публикация в блога в Gutenberg. Това е чудесен начин да подчертаете предпочитания от вас призив за действие, докато посетителите четат съдържанието на вашата публикация в блога.
