Divi: Как да създадете лепкава глобална заглавка

Искате ли да създадете лепкава заглавка с Divi ?

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

Всъщност не само е по-лесно, но този метод предлага повече възможности за персонализиране на дизайна.

Затова ще отделим време в този урок, за да ви покажем как да създадете ултра персонализирана лепкава заглавка с помощта на параметрите Divi.

изследване

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

Изградете структурата на заглавния елемент

Създайте нов глобален шаблон за заглавка

Влезте в Divi Theme Builder и започнете да създавате нова глобална или персонализирана заглавка.

Параметри на раздел 1

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

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

Прочетете още: Как да създадете плъзгащо се и натискащо меню в DIVI

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

Цвят 1: #ffba60
Цвят 2: #ffd6a0
Посока на градиента: 90 градуса
Начална позиция: 50%
Крайна позиция: 50%

разстояние

След това премахнете всички вътрешни полета (отгоре и отдолу) по подразбиране.

Върх на вътрешен марж: 0px
Долно вътрешно поле: 0px

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

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

За да създадем нашата горна заглавна лента, ще добавим нов ред към нашия раздел, като използваме следната структура на колоните:

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

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

Използвайте персонализирана ширина на улука: Да
Разстояние между колоните: 1
Максимална ширина: 95%
Максимална ширина: 2 пиксела

разстояние

Също така добавете персонализирани вътрешни (горни и долни) полета.

Върх на вътрешен марж: 15px
Долно вътрешно поле: 15px

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

И за да сме сигурни, че колоните остават една до друга на по-малки размери на екрана, ще добавим ред от CSS код към основния елемент на реда в разширения раздел.

display: flex;

Добавете модула „Следвайте ни в социалните медии“ към колона 1

Добавете социални мрежи по избор

Време е да добавите модули, като започнете с модул „Следвайте ни в социалните медии“ в колона 1. Добавете социалните мрежи по ваш избор заедно със съответните им връзки.

Премахнете цвета на фона от всяка социална мрежа

Продължете, като премахнете всеки от фоновите цветове от социалната мрежа поотделно.

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

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

Цвят на иконата: #26333a

разстояние

Добавете също и топ марж.

Горно поле: 5 px

Добавете модула Button към колона 2

Добавете текст към бутона

В колона 2 единственият модул, от който се нуждаем, е модул Button. Добавете текст по ваш избор.

Добави линк

След това добавете връзка.

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

След това преминете към раздела Стил и променете подравняването на бутоните.

Подравняване на бутоните: дясно

Настройки на бутона

Ние също персонализираме бутона.

Използвайте персонализирани стилове за Бутон: Да
Размер на текста на бутона: 14px
Цвят на текста на бутона: #26333a
Ширина на рамката на бутона: 2px
Цвят на рамката на бутона: #26333a
Радиус на границата на бутона: 0 пиксела

Бутони за разстояние между буквите: 4px
Бутон за мека светлина: Удебелен текст
Бутон за копиране на стил: главни букви
Бутон за показване: да

разстояние

И ние ще завършим настройките на модула, като добавим вътрешни полета (отгоре и отдолу) към настройките за разстояние.

Върх на вътрешен марж: 10px
Долно вътрешно поле: 10px