Искате ли да създадете лепкав долен колонтитул с DIVI, който да се разкрива напълно при превъртане надолу?
Добавяне на лепкав долен колонтитул към вашия уеб сайт може да внесе онзи малък допълнителен щрих, който сте търсили уеб сайт. Ефектът "Разкриване", който позволява долният колонтитул да се разкрива при превъртане надолу, ще придаде много очарователен дизайн на вашите уеб страници.
Обикновено този ефект изисква персонализиран CSS, който е ограничаващ и труден за използване. Но благодарение на DIVI можете лесно да го постигнете.
В този урок ще ви покажем как да създадете ефект на разкриване на вашия залепен долен колонтитул. Необходими са само няколко лесни стъпки.
Нека да започнем!
изследване
Ето кратък преглед на залепващия долен колонтитул с ефект Reveal, който ще създадем в този урок.
Създайте нов шаблон за долен колонтитул
Посещение Divi >> Създател на теми от таблото за управление на WordPress.
Там щракнете върху „Добавяне на глобален долен колонтитул“
След това изберете „Изграждане на глобален долен колонтитул“
В този урок ще използваме предварително направено оформление, за да ускорим процеса на създаване, но можете също да го направите от нулата. За да направите това, щракнете „Зареждане от библиотеката“.
Под изскачащия прозорец Зареждане от библиотеката, намерете и използвайте оформлението " Страница за Марина » от пакета за оформление на Марина.
След като оформлението се зареди, изтрийте всички секции с изключение на секцията в долния колонтитул. Ще използваме този раздел на долния колонтитул, за да добавим ефекта Reveal.
Добавете ефект на разкриване и направете долния колонтитул лепкав
Направете долния колонтитул лепкав
Вижте също: Как да създадете плъзгащо се и натискащо меню в DIVI?
Първо, трябва да направим долния колонтитул лепкав. За да направите това, отворете настройките на секцията и щракнете върху раздела напреднал. Под „Ефекти на превъртане“, променете настройките, както следва:
- Залепваща позиция: Придържайте се към дъното
Актуализирайте Z индекса за лепкаво състояние
След това трябва да дадем на секцията ни в долния колонтитул z-индекс 0, когато секцията е в лепкаво състояние. Това ще позволи на секцията да остане зад други секции или елементи в тялото на страницата при превъртане.
За да направите това, актуализирайте позицията на Z Index, като щракнете върху залепващата икона до опцията Z Index. След това актуализирайте Z индекса до 0.
- Z индекс (залепващ): 0
Актуализиране на лепкав заместващ долен колонтитул Z индекс
Когато на даден елемент е присвоена лепкава позиция в Divi, автоматично се създава и дублиран елемент на контейнера. Това осигурява функционалността, необходима за позициониране и проектиране на лепкави елементи с помощта на Divi Builder.
Вижте също: Как да създадете глобален хедър с Theme Builder на Divi
В този случай се създава контейнер за долен колонтитул със z-индекс по подразбиране 1. Не искаме нашата действителна лепкава секция за долен колонтитул (сега с Z-индекс 0) зад секцията за контейнер, така че трябва да актуализираме Z индекс на контейнера до -1.
За да направите това, първо добавете персонализиран CSS клас към секцията на долния колонтитул, както следва:
- CSS клас: sticky-footer-reveal
След това отворете настройките на страницата, като използвате менюто с настройки на Създател на теми.
Отидете на " Разширено " и въведете следния CSS в полето Персонализирайте CSS :
.sticky-footer-reveal.et_pb_sticky_placeholder {
z-index:-1;
}
Това ще принуди секцията за контейнер да остане зад лепкавия долен колонтитул.
Запазване на промените
След като сте готови, запазете промените, направени в шаблона на долния колонтитул.
Също така запазете промените в Divi Theme Builder.
Краен резултат
За да видите крайния резултат, вижте страница и превъртете.
Изтеглете DIVI сега!!!
Заключение
В Divi добавянето на лепкав долен колонтитул към вашия уеб сайт не изисква плъгин или сложен персонализиран CSS. Използване на конструктора теми, можете лесно да създадете шаблон за долен колонтитул с Ефект на разкриване след няколко минути.
Надяваме се, че това ще даде на вашия дизайн на долния колонтитул фин тласък с привлекателно взаимодействие, което посетители ще оценят. Ако имате притеснения или предложения, намерете ни раздел коментари за да го обсъдим.
Вижте също нашите ресурси, ако имате нужда от повече елементи, за да осъществите вашите проекти за създаване на интернет сайтове, като се консултирате с нашето ръководство за Създаване на блог на WordPress или тази, която е включена Divi: най-добрата тема на WordPress за всички времена.
Но междувременно, споделете тази статия във вашите различни социални мрежи.
...