Искате ли да създадете персонализиран долен колонтитул в DIVI?
Една от най-важните части на създателя на теми на Divi е възможността за динамично добавяне на глобални колонтитули към вашите уеб страници и публикации.
След като сте проектирали долен колонтитул, можете автоматично да го добавите към всеки тип страница или публикация, която искате, като използвате създателя на теми на Divi.
В този урок ще ви преведем стъпка по стъпка през процеса на създаване и добавяне на глобален долен колонтитул към вашия уеб сайт.
изследване
Преди да се потопим в урока, нека да разгледаме долния колонтитул, който ще проектираме.
бюро
Отидете до Divi Theme Builder и добавете Global Footer
- Отидете на Divi > Theme Builder и щракнете върху " Добавете глобален долен колонтитул«
- Да избера " Изградете глобален долен колонтитул«
Персонализирайте раздел #1
Цвят на фона
Отворете секцията, която можете да намерите на страницата, и променете цвета на фона на секцията.
- Фон: #000000
разстояние
Превключете към раздела Стил и след това променете настройките за разстояние за секцията.
- Поле (горе, ляво и дясно): 6vw
- Вътрешно поле (ляво и дясно): 30px
граница
След това добавете горна рамка отляво и отдясно.
- Горен ляв заоблен правоъгълник: 20px
- Горен десен заоблен правоъгълник: 20px
Кутия за сянка
Включете също сянка на кутия в настройките на раздела.
- Bow Shadow Blur Strength: 135px
- Цвят на шрифта на субтитрите: rgba(0,0,0,0.18)
Добавете нов ред към раздела
Структура на колоната
Продължете, като добавите ред към вашия раздел, като използвате следната структура на колони:
Добавете текстов модул към колоната
Добавете заглавие с размер H2 (Заглавие 2)
Вмъкване на текстов модул с съдържание с размер Н2.
H2 текстови настройки
Превключете към раздела на Стил на модула и съответно променете параметрите на H2 текста:
- Заглавен шрифт: Poppins
- Заглавие със заглушена светлина: полуудебелено
- Подравняване на текста: Центрирано
- Цвят на текста в горния колонтитул: #ffffff
- Размер на текста в горния колонтитул: 31px (десктоп), 24px (таблет), 18px (телефон)
- Височина на горната линия: 1,6 em
оразмеряване
Също така добавете максимална ширина към модула.
- Максимална ширина: 700 пиксела
Добавете бутонен модул към колоната
Добавете текст към бутона
Вмъкнете модул Button точно под модула Text във вашата колона и въведете текст по ваш избор.
подравняване
Превключете към раздела на Стил на модула и променете подравняването на бутона към центъра.
- Подравняване на бутоните: центрирано
Настройки на бутона
Продължете, като персонализирате бутона.
- Използвайте персонализирани стилове за Бутон: Да
- Размер на текста на бутона: 12px
- Цвят на текста на бутона: #000000
- Бутон за фон: #FFFFFF
- Бутон за ширина на рамката: 0 пиксела
Прочетете още: Как да покажете страница на блог като въртележка в DIVI
- Радиус на границата на бутона: 100 px
- Разстояние между буквите на бутоните: 1 px
- Шрифт на бутоните: Poppins
- Бутон с мека светлина: Полудебел
- Бутон за копиране на стил: TT
разстояние
Също така добавете персонализирани вътрешни стойности на полето.
- Вътрешно поле (отгоре и отдолу): 14px
- Вътрешно поле: ляво (40px); Вдясно (58px)
Секция 2
Добавете втори "нормален" раздел под предишния.
Цвят на фона
Промяна на цвета на фона
- Фон: #ffffff
разстояние
След това премахнете всички вътрешни полета (отгоре и отдолу).
- Вътрешно поле (отгоре и отдолу): 0px
граница
Също така добавете радиус на границата към секцията.
- Заоблен правоъгълник (горе вляво): 20px
- Заоблен правоъгълник (горе вдясно): 20px
Кутия за сянка
И завършете настройките на секциите, като добавите фина сянка на кутията.
- Сила на замъгляване на сянка в кутия: 135px
- Цвят на шрифта на субтитрите: rgba(0,0,0,0.18)
Добавете нов ред към раздела
Структура на колоната
След като завършите настройките на секцията, добавете нов ред, като използвате следната структура на колоните:
оразмеряване
Без да добавяте още модули, отворете настройките на реда и ги променете, както следва:
- Използвайте персонализирана ширина на улука: Да
- Разстояние между колоните: 1
- Хармонизиране на височините на колоните: Да
- Максимална ширина: 100%
- Максимална ширина: 100%
разстояние
След това премахнете вътрешните полета по подразбиране (отгоре и отдолу) от линията.
- Вътрешно поле (отгоре и отдолу): 0px
Разстояние между колоните
Продължете, като отворите настройките на колоната, за да добавите персонализирани стойности за подпълване.
- Вътрешно поле (отгоре и отдолу): 100px (десктоп), 50px (таблет и телефон)
- Вътрешно поле (ляво и дясно): 100px (десктоп), 50px (таблет и телефон)
Добавяне на модул Text #1 към колона
Добавете съдържание
Вече можем да добавяме модули към него. Добавете текстов модул към колоната и вмъкнете съдържание по ваш избор.
Текстови настройки
Превключете към раздела на Стил на модула и съответно променете текстовите параметри:
- Текст Шрифт: Poppins
- Тегло на шрифта на текста: получер
- Цвят на текста: #000000
- Размер на текста: 17px
- Подравняване на текста: Центрирано
разстояние
След това добавете персонализирани полета (отгоре и отдолу).
- Горно поле: 10 px
- Долно поле: 30px
Добавете разделителен модул към колоната
Точно под текстовия модул добавете разделителен модул.
видимост
Уверете се, че опцията " Показване на разделител Разрешено е
- Показване на разделител: Да
Ligne
Променете цвета на линията на черен.
- Цвят на етикета: #000000
оразмеряване
Също така променете настройките за размер на сплитера.
- Максимална ширина: 15%
- Подравняване на текст: Център
Добавяне на модул Text #2 към колона
Добавете съдържание
Продължете, като добавите друг текстов модул към колоната, както и a съдържание по ваш избор.
Добави линк
Вмъкнете връзка към страницата, към която искате да препраща този модул.
Текстови настройки
След това превключете към раздела Стил и променете настройките на текста, както следва:
- Шрифт на текста: Poppins
- Текст с мека светлина: Ясен
- Цвят на текста Текст: #777777
- Текст Размер на текста: 15 px
- Подравняване на текста: Центрирано
разстояние
Също така добавете поле (отгоре и отдолу).
- Поле (отгоре и отдолу): 10 px
Клонирайте текстов модул #2, ако е необходимо
След като завършите втория текстов модул, можете да го клонирате толкова пъти, колкото ви е необходимо (в зависимост от това колко елементи с възможност за кликване в долния колонтитул искате да включите).
Редактиране на съдържание и връзки
Не забравяйте да редактирате съдържанието на модула и връзките за всеки дубликат.
Клонирайте цялата колона два пъти
След като завършите колоната и нейните модули, можете да я клонирате два пъти.
Цвят на фона на колона 2
След това отворете настройките за колона 2 и променете цвета на фона.
- Фон: #f9f9f9
Редактиране на съдържание и връзки
Не забравяйте да редактирате цялото съдържание и връзки във всяка дублирана колона.
Добавяне на нова колона
След това добавете четвърта колона към реда.
Цвят на фона
Променете цвета на фона на новата колона.
- Фон: #0fffc7
разстояние
Променете вътрешните полета, както следва:
- Вътрешно поле (отгоре и отдолу): 70px
- Вътрешно поле (ляво и дясно): 50px
Добавете модула „Следвайте ни в социалните медии“ към колона 4
Добавете социални мрежи
Продължете с добавяне на модул " Последвайте ни в социалните мрежи в колона 4 и поставете социалните мрежи по ваш избор.
Нулирайте стиловете на иконите на социалните медии
Кликнете върху Нулирайте Роли Елементи Стилове за всяка от социалните мрежи.
подравняване
След това превключете към раздела Стил и променете подравняването на модула.
- Подравняване на текст: Център
Настройки на икони
Също така променете цвета на иконите на социалните медии.
- Цвят на иконата: #000000
Добавете модул за опция за имейл към колона 4
Вмъкване на мод " Избор на имейл "под модула" Последвайте ни в социалните мрежи«
Изчистете съдържанието и заглавието на модула
Имейл акаунт
След това добавете имейл акаунт. Ако не добавите имейл акаунт, модулът няма да се покаже, след като излезете от създателя на теми.
Премахнете цвета на фона
- Използвайте цвят на фона: Не
Настройки на полето
Превключете към раздела Стил и променете настройките на полето, както следва:
- Полета за цвят на фона: rgba(0,0,0,0)
- Полета за цвят на текста: #000000
- Шрифт Champs: Poppins
- Полета с размер на текста: 13px
- Полета за ширина на границата: 1 px
Настройки на бутона
Също така персонализирайте бутона на вашия модул.
- Използвайте персонализирани стилове за Бутон: Да
- Размер на текста на бутона: 12px
- Цвят на текста на бутона: #000000
- Бутон за фон: #FFFFFF
- Ширина на рамката: 0px
- Радиус на границата на бутона: 100 px
- Разстояние между буквите на бутоните: 1 px
- Шрифт на бутоните: Poppins
- Бутон за приглушена светлина: Полудебел
- Бутон за копиране на стил: TT
Вижте също: Как да създадете лепкава форма за контакт в DIVI
- Подплата на бутоните (отгоре и отдолу): 15px
Добавете динамичен текстов модул към колона 4
Следващият и последен модул, от който се нуждаем, за да завършим този дизайн, е текстов модул.
Активирайте опцията " Използвайте динамично съдържание".
След това изберете опцията " текуща дата".
И променете настройките за динамично съдържание, както следва:
- Отпред: Copyright ©
- След: | Всички права запазени
- Формат на датата: митнически
- Персонализиран формат на датата: 20 г
Текстови настройки
След това преминете към раздела стил и променете настройките на текста:
- Шрифт на текста: Poppins
- Цвят на текста Текст: #000000
- Текст Размер на текста: 16 px
разстояние
Попълнете параметрите на модула, като добавите поле и готово!
- Горно поле: 50 px
Запазете глобалния долен колонтитул и опциите за създаване на теми
След като приключите, не забравяйте да запазите работата си, преди да излезете от строителя. Тема на Divi.
Веднага след като излезете от оформлението на шаблона, запазете всички промени в създателя на теми и сте готови!
изследване
Сега, след като преминахме през всички стъпки, нека да разгледаме за последно резултата.
Изтеглете DIVI сега!!!
Заключение
В този урок ви показахме колко лесно е да създадете красив персонализиран глобален долен колонтитул с инструмента за създаване на теми на Divi.
Надяваме се, че този урок ще ви вдъхнови да създадете красиви глобални колонтитули за следващите си Divi проекти.
Ако имате притеснения или предложения, намерете ни раздел коментари за да го обсъдим.
Можете обаче да се консултирате нашите ресурси, ако имате нужда от повече елементи, за да осъществите вашите проекти за създаване на интернет сайтове, като се консултирате с нашето ръководство за Създаване на блог на WordPress или тази, която е включена Divi: най-добрата тема на WordPress за всички времена.
Но междувременно, споделете тази статия във вашите различни социални мрежи.
...