Искате ли да създадете плъзгач на цял екран с Divi ?
Плъзгачът на цял екран може да работи много добре като заглавка на вашата начална страница. уеб сайт.
Аспектът на цял екран систематично поддържа съдържание важно на видимата на екрана част от страницата. А функционалността на плъзгача позволява на потребителите да виждат съдържание допълнителни, без да се налага да превъртате страницата.
Създайте плъзгач на цял екран с Divi е изненадващо лесно да се направи. Ключът е да зададете на вашия плъзгач височина спрямо височината на браузъра, след което да се отървете от всякакви допълнителни ограничения за полета и ширина на родителския ред или раздел.
Само за няколко минути можете да създадете плъзгач на цял екран, който се разширява, за да запълни целия екран при зареждане на страницата и изглежда страхотно на всички устройства.
Нека да започнем.
изследване
Ето кратък преглед на плъзгача, който ще създадем в този урок.
Създайте нова страница с Divi Builder
В таблото за управление на WordPress отидете на Страници> Добавяне на ново
Дайте подходящо за вас заглавие и щракнете върху „употреба Divi Строител"
Накрая щракнете „Започнете да строите“
След това ще имате празна страница, за да започнете да проектирате в Divi.
Създайте плъзгач на цял екран в Divi
Конфигурация на секции и линии
За да започнете, добавете ред с една колона към секцията.
поле на раздел
Преди да добавите модул, отворете настройките на секцията, отидете на раздела Дизайн, дръпнете надолу опцията Отстояние и променете настройките, както следва:
- Подложка (отгоре и отдолу): 0px
Настройки на линията
След това отворете настройките на линията и актуализирайте следното в раздела Дизайн :
- Ширина: 100%
- Максимална ширина: 100%
- Подложка (отгоре и отдолу): 0px
С всички тези настройки вече можем да преминем към създаването на действителния плъзгач.
Създаване на плъзгач на цял екран
За да създадете плъзгача на цял екран, добавете нов модул Slider към реда.
Добавете изображения към всеки слайд
Преди да актуализирате общите настройки на слайда, отворете настройките по подразбиране за първия слайд
Добавете изображение и фоново изображение към слайда. За този пример използваме едно и също изображение за изображението на слайда и фоновото изображение (около 1920px на 1500px).
След това отворете настройките за втория слайд
Добавете към слайда различно изображение и фоново изображение от предишното.
Имайте предвид, че можете да добавите толкова слайдове, колкото искате.
Актуализирайте настройките на плъзгача
Сега, когато всеки отделен слайд има уникално изображение и фоново изображение, ние сме готови да актуализираме настройките на плъзгача като цяло.
Върнете се към настройките на плъзгача и актуализирайте следното под раздела Дизайн :
Подложка
- Използване на фоново наслагване: ДА
- Цвят на наслагване на фона: rgba(27,18,38,0.74)
Box Shadow
- Стил на сенчеста кутия: Вижте заснемане (1)
- Позиция на сянка на кутията (хоризонтална и вертикална): -8vw
- Сила на разпространение на сянка в кутия: -6,5 vw
- Цвят на сянката: #cf1259
Заглавен текст
Редактиране на настройките за заглавие
- Шрифт на заглавието: Монсерат
- Тегло на шрифта на заглавието: ултра получер
- Размер на текста: 5vw (десктоп), 40px (таблет и телефон)
основен текст
Редактирайте настройките на текста на описанието, както следва:
- Тегло на основния шрифт: полуудебелен
- Размер на основния текст: 16px
- Височина на реда: 1.8 em
Стилове на бутони
- Използване на персонализирани стилове за бутон: ДА
- Размер на текста на бутона: 16px
- Фон: #cf1259
- Ширина на рамката: 0px
- Радиус на границата: 0px
- Тегло на шрифта: получер
- Стил на шрифта: TT
- Подложка (отгоре и отдолу): 15px
- Подложка (ляво и дясно): 30px
Височина на плъзгача и ширина на съдържанието
- Максимална ширина на съдържанието: 90%
- Минимална височина: 100vh
Даването на плъзгача на минимална височина от 100vh ще гарантира, че плъзгачът обхваща цялата височина на прозореца на браузъра. Това е ключът към създаването на слайдер на цял екран.
Плъзгачът вече ще обхваща цялата ширина на прозореца на браузъра, тъй като ширината на линията е 100%.
Плъзгащи се стрелки
В раздела Разширени актуализирайте размера и позицията на стрелките на плъзгача, като добавите следния персонализиран CSS към CSS областта Плъзнете стрелки :
font-size: 8vw !important;
margin-top: -4vw;
Това ще увеличи стрелките на плъзгача на големи екрани и ще ги свие до по-малък размер на мобилни устройства.
Извадете височината на заглавката от височината на плъзгача
Ако имате заглавка на страницата, плъзгачът за цял екран всъщност ще се простира малко под прозореца на браузъра.
Това е така, защото височината на заглавката намалява плъзгача, който в момента има височина 100vh (100% от височината на прозореца/браузъра). За да предотвратите натискането на плъзгача под прозореца за изглед на браузъра, можете да добавите CSS функция изчисление () за да извадите височината на заглавката от височината на плъзгача.
Ще трябва да знаете височината на заглавката (настолен и мобилен), за да работи това. Ако използвате заглавката на Divi по подразбиране, височината на заглавката ще бъде 80px. Следователно височината на плъзгача трябва да бъде 100vh – 80px.
За да добавите персонализираната височина, отворете настройките на плъзгача и добавете следния персонализиран CSS към основния елемент на плъзгача, а също и за всеки слайд:
min-height: calc(100vh - 80px)!important;
Краен резултат
Ето и крайния резултат.
Изтеглете DIVI сега!!!
А ето как изглежда дизайнът на таблет и телефон.
Заключение
Ключовите стъпки за създаване на плъзгач на цял екран в Divi са да конфигурирате секцията и реда да обхващат цялата ширина на браузъра, след което да дадете на плъзгача минимална височина от 100vh.
Ако използвате заглавка, можете да добавите персонализиран CSS фрагмент, който ще извади височината на заглавката, за да гарантира, че плъзгачът на цял екран няма да надхвърли долната част на браузъра.
С тези ключови стъпки можете допълнително да персонализирате плъзгача (и слайдовете), както искате, като използвате всички мощни функции, включени в Divi Builder.
Използвайте го, за да създадете красиви и ефективни плъзгачи, които запълват всеки екран на всяко устройство.
Надяваме се, че този урок ще ви вдъхнови за следващите ви Divi проекти. Ако имате притеснения или предложения, намерете ни раздел коментари за да го обсъдим.
Можете също да се консултирате нашите ресурси, ако имате нужда от повече елементи, за да осъществите вашите проекти за създаване на интернет сайтове, като се консултирате с нашето ръководство за Създаване на блог на WordPress или тази, която е включена Divi: най-добрата тема на WordPress за всички времена.
Но междувременно, споделете тази статия във вашите различни социални мрежи.
...