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

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

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

Как да добавите шаблона на чекмеджето на Footer към вашия сайт Divi

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

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

След това отидете на таблото за управление на WordPress и отидете на Divi> Theme Builder.

След това кликнете върху иконата за преносимост в горния десен ъгъл на страницата.

В прозореца за преносимост изберете JSON файла, който току-що сте разархивирали, и изберете опцията „Изтегляне на резервно копие преди импортиране“, само в случай, че преди това сте имали нещо в шаблон за уебсайт по подразбиране, който не сте искали да замените.

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

Накрая, запазете промените в генератора на теми и покажете страница на живо, за да видите фиксираната лента на долния колонтитул.

А сега към урока, нали?

Част 1: Добавяне на глобален долен колонтитул

Тематичният генератор на Divi ви позволява да замените долния долен колонтитул с нов чрез актуализиране на шаблона на уебсайта по подразбиране.

За да създадете глобален долен колонтитул, отидете на таблото за управление на WordPress и отидете на Divi> Конструктор на теми. След това кликнете върху пространството „Добавяне на глобален долен колонтитул“ в шаблона на уебсайта по подразбиране.

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

Добавете предварително дефинирано оформление към глобално оформление на долния колонтитул

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

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

Премахнете нежеланото съдържание от предварително подготвеното оформление

След като оформлението се зареди в редактора, разгънете изскачащото поле Layers, като щракнете върху иконата за слоеве в менюто с настройки. След това изтрийте всички раздели на оформлението с изключение на последните две.

Преместете и маркирайте двете секции

След като разделите бъдат премахнати, трябва да имате две секции, едната със заглавие „Долен колонтитул“, а другата със заглавие „Как работи“. Преместете секцията „Долен колонтитул“ в горната част на оформлението.

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

Част 2: Създаване на чекмеджето с фиксиран долен колонтитул

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

Създаване на бутона на чекмеджето на долния колонтитул

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

В долната част на долния колонтитул добавете нов ред в колона.

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

Подплънки на редове

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

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

Подложка за секции

След това отворете настройките в секцията "Чекмедже на фона" и актуализирайте подложката, както следва:

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

Ето как.

Добавете модул Blurb

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

Съдържание / икона на замъгляване

След това премахнете заглавието и съдържанието на тялото по подразбиране и изберете иконата със стрелка, която сочи към горния ляв ъгъл (вижте екранната снимка). Използваме частично завъртяната икона, защото ще я завъртим по-късно.

Дизайн на замъгляване

След това дайте текста на презентацията, както следва:

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

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

• Цвят на иконата: #eeeeee
• Икона на кръг: ДА
• Цвят на кръга: # 081540
• Използвайте размер на шрифта на иконата: ДА
• Размер на шрифта на иконата: 17 пиксела

Размер на текста на презентацията

Сега дайте на модула височина и ширина, както следва:

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

Това ще доведе до преливане на иконата на кръг в текстовия контейнер, за да се създаде форма на капка вода.

Положение на замъгляване

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

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

Настройки за трансформация на замъгляване

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

Актуализирайте следните елементи:

• Ос Трансформирай Преводач X: -50%
• Преобразуване на ос Y: -250%
• Преобразуване на въртене на оста Z -45 градуса

След това премахнете анимацията на иконата по подразбиране:

• Анимация на изображение / икона: Без анимация

Ще използваме JQuery за превключване на чекмеджето, така че трябва да насочим текста / иконата като кликващ елемент с CSS клас, който ще използваме по-късно в кода. Добавете следния клас CSS:

• CSS клас: целево чекмедже

Настройки на секцията на чекмеджето на футера

Сега ще скрием секцията „Чекмедже на долния колонтитул“, използвайки опцията за преобразуване на превод. Отворете настройките на раздела и актуализирайте следното:

• Ос за трансформиране на преводач: 100%

Красотата на използването на трансформацията тук е, че процентните стойности се основават на действителния размер на елемента. По този начин, 100% по оста Y ще бъде директно спрямо височината на секцията (номинално какво е във всеки един момент). С други думи, елементът ще бъде преместен надолу по точното разстояние като собствена височина.

За да се върне челно изображението на долния колонтитул, ще трябва да обърнем преобразуването на преобразуване, което току-що добавихме към раздела. За да направим това, ще трябва да насочим елемента с CSS клас и да деактивираме преобразуването на превода, като щракнем върху иконата (върнете целия раздел в първоначалното му положение).

Добавете клас CSS в секцията на чекмеджето на долния колонтитул

Под раздела за разширени добавете следния клас CSS:

• CSS клас: има-трансформира

Секция на чекмеджето на футера Фиксирана позиция

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

Актуализирайте позицията на секцията „Footer чекмедже“, както следва:

• Положение: фиксирано
• Местоположение: долу вляво
• Z индекс: 13

Изключете мобилното съдържание

Тъй като ще имате ограничено количество съдържание на чекмеджето на долния колонтитул, което да пасва на таблета и телефона (поради ограничената височина на екраните), ще трябва да изключите / скриете несъществени елементи от дисплея. В този пример ще скрием средния ред на оформлението на раздела.

Отворете настройките на предпоследния ред в секцията „Чекмедже на долния колонтитул“. Под разширения раздел актуализирайте опцията до видимост за деактивиране на линията на телефона и таблета.

Добавяне на персонализиран код

За да добавим функционалността за щракване и превключване в чекмеджето на долния колонтитул, трябва да добавим персонализирани CSS и JQuery към страницата. За да направите това, създайте нов кодов модул под модула Blurb, използван за бутона.

След това поставете следния код в областта на кода:

.has-transform, .drawer-target {transition: all 400ms ease-in-out;} .toggle-drawer-animation {transform: none !important;}.toggle-icon-animation {transform: rotate(-135deg) !important;}  .drawer-target {cursor: pointer;}(function($) {$(document).ready(function(){$('.drawer-target').click(function(){$(this).toggleClass('toggle-icon-animation');      $('.has-transform').toggleClass('toggle-drawer-animation');   });    });})( jQuery );   

Запазване на промените

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

Запазете и промените в генератора на теми.

Краен резултат

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

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

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

Други ресурси

Ето списък с уроци, които могат да ви помогнат да постигнете повече с вътрешните функции на Divi.

• Как да създадете тема с инструменти на Divi
• Как да създадете анимиран промоционален раздел за Divi
• Как да персонализирате решетките на Divi

Преведено от: Елегант Палитри