Блокът за оформление на Divi продължава да бъде полезно подобрение на темата Divi, което ни позволява да добавяме всяко оформление на Divi към публикация в блога в редактора на Gutenberg. Можем дори да конвертираме блок за оформление на Divi в блок за многократна употреба в Gutenberg, както всеки друг блок на WordPress. Това отваря вратата за рационализиране на някои полезни модели на оформление на Divi в нормалния поток на писане на публикация в Gutenberg.

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

Нека да започнем.

Създаване на блок за оформление на Divi за публикация в блог на Гутенберг

Създайте или редактирайте публикация в блога

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

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

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

За да го добавите, задръжте курсора на мишката върху областта, където искаме да добавим оптимизиращия имейл. След това кликнете върху синята икона плюс, за да добавите нов блок. В списъка с контекстни блокове изберете блока Divi Layout.

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

След като бъде избран блокът за оформление на Divi, ще имаме опцията „Създаване на ново оформление“ или „Зареждане от библиотеката“. Тъй като трябва да изградим нов разделител за нашия пример, изберете опцията „Изграждане на ново оформление“.

Проектирайте оформление с помощта на редактора на блокове за оформление Divi

След като сме избрали бутона Създаване на ново оформление, можем да проектираме нашето оформление Divi в редактора на блокове за оформление.

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

За да създадете дизайн на разделителя на секции, отворете настройките на секцията и актуализирайте следното:

• Цвят на фона на левия градиент: # ddd6f3
• Цвят на градиентния фон вдясно: # faaca8
• Посока на градиента: 90deg
• Начална позиция: 30%

• Top Divider Style: вижте екранната снимка
• Цвят на горния разделител: #ffffff
• Височина на горния разделител: 50px

• Стил на долния разделител: вижте екранната снимка
• Цвят на долния разделител: #ffffff
• Височина на долния разделител: 50px
• Накланяне на долния разделител: хоризонтален

• Височина: 100px
• Подплащане: 0px високо, 0px ниско

След като дизайнът завърши, не забравяйте да запазите блока за оформление Divi.

Сега разделителят на блока за оформление на Divi ще се появи в редактора на публикации в WordPress.

Имайте предвид, че разстоянието над и под оформлението на Divi на блока за оформление може да изглежда по-голямо в бекенда, отколкото във външния интерфейс.

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

Но преди да направите това, може да е от полза да разберете какво е блок за многократна употреба в WordPress.

Какво е блок за многократно оформление

Блок за многократна употреба в редактора на блокове по подразбиране на WordPress (Gutenberg) е подобен на глобален елемент в Divi. Блокът може да се използва многократно, но съдържанието и външният вид остават абсолютно еднакви за всички случаи. И когато редактираме блока за многократна употреба, промяната се прилага към всички случаи на блока в целия сайт. След като блокът за многократна употреба бъде направен за многократна употреба в WordPress, той ще бъде достъпен в списъка с блокове при писане на публикацията. Това прави много удобно добавянето на един и същ блок за многократна употреба в множество публикации в блога.

Трансформирайте блока за оформление Divi в блок за многократна употреба

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

След това дайте име на блока за многократна употреба и кликнете върху бутона Save, за да запазите блока като блок за многократна употреба.

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

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

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

За да промените оформлението на блока за многократна употреба, задръжте курсора на мишката върху блока и кликнете върху бутона Modify в горния десен ъгъл на блока.

След това изберете (щракнете) оформлението в блока за многократна употреба и щракнете върху иконата за редактиране в горното меню, което се показва. Можем също да кликнете върху връзката Редактиране на оформлението под раздела Елемент в дясната странична лента.

След това променете дизайна на оформлението по желание. В този пример можем да променим цветовете, използвани за градиентния фон.

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

Ще забележите, че промените в дизайна се актуализират за всички случаи на оформлението за многократна употреба.

Съвет: Използвайте блок за многократно оформление като шаблон

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

За да използвате блок за многократно оформление като шаблон, първо добавете блока за многократна употреба към публикацията.

След това отворете менюто за блокиране и изберете опцията "конвертиране в нормален блок".

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

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

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