Искате ли да вмъкнете компактен плъзгач за препоръки за заглавка Divi?
Добавянето на препоръки към вашия сайт е ефективен начин за изграждане на доверие към вашия бизнес (или вашата марка) и изграждане на доверие сред потребителите. посетители.
Плъзгачът за препоръки е удобен инструмент за показване на препоръки на едно място. Имайки това предвид, има смисъл да добавите компактен плъзгач за препоръки към заглавката си, така че тези препоръки да са едно от първите неща, които потребителят вижда, когато посети вашия уебсайт.
В този урок ще ви покажем как да създадете компактен плъзгач за препоръки, за да покажете кратки препоръки в заглавката на вашия уеб сайт.
За да направим това, ние ще модифицираме Divi Slider Module по забавен и уникален начин.
Да започнем!
Но преди да откриете нашето ръководство за Divi, най-добрата и лесна за използване тема на WordPress в света
изследване
Ето компактния слайдер с препоръки, който ще изградим с помощта на модула Slider на Divi.
И тук е същият плъзгач за препоръки, добавен към глобална заглавка.
И ето как изглежда на мобилен телефон.
Създайте нова страница с Divi Builder
За да започнете, ще трябва да направите следното:
От таблото за управление на WordPress отидете на Страници> Добавяне на ново за да създадете нова страница.
Дайте му заглавие, което има смисъл за вас, и щракнете Използвайте Divi Builder
След това кликнете Започнете да строите (Изграждане от нулата)
След това ще имате празно платно, за да започнете да проектирате в Divi.
Как да създадете компактен плъзгач за препоръки в Divi
Добавете нов модул за ред и плъзгач
За да започнете, добавете ред с една колона към секцията.
След това добавете модул Slider към линията.
Редактиране на слайд
Под настройките на плъзгача премахнете втория слайд по подразбиране под раздела съдържание, след което щракнете, за да промените настройките за оставащия слайд.
Съдържание на слайда
Под раздела съдържание от настройките на слайда актуализирайте следното:
- Заглавие: „Donec solicitudin molestie malesuada. Vivamus suscipit tortor eget.
- Бутон: Прочетете всички
- Тяло: — Татяна Гагелман
След като сте готови, запазете настройките на слайда.
Прочетете още: Divi: Как да използвате настройките на фоновата маска и опциите за трансформиране на шаблона
Актуализирайте настройките на плъзгача
Дублиране на контролите за слайд и скриване
След актуализиране на първия слайд с съдържание, дублирайте този слайд, за да създадете един или повече допълнителни слайдове.
След това под групата опции Елементи, скрийте контролите на плъзгача, като актуализирате следното:
- Контрол на шоуто: НЕ
Актуализирайте фона на всички слайдове
След това ще добавим фон, който ще се използва за всички слайдове.
За да добавите фон, актуализирайте следното:
- Градиент на фона:
- Градиент спира 0%: #000000
- Градиент спира 100%: #000000
- Фоново изображение:
- Размер: Fit
- Позиция: център вляво
- Смес: Яркост
Настройки на плъзгача
Под раздела Дизайн, актуализирайте следното:
капак
- Използване на фоново наслагване: ДА
- Цвят на наслагване на фона: rgba(0,0,0,0.7)
Текст на заглавието
- Заглавие:
- Ниво на заглавие: H4
- Шрифт: Josefin Sans
- Тегло на шрифта: средно
- Подравняване на текста: ляво
- Размер на текста: 16px (настолен компютър и таблет), 14px (телефон)
- Височина на линията: 1,5 ем
Тялото на текста
- Тяло:
- Шрифт: Josefin Sans
- Подравняване на текста: ляво
- Цвят на текста: #aaaaaa
- Разстояние между буквите: 0,05 em
бутон
- Използвайте персонализиран размер за бутон: ДА
- Бутон:
- Размер на текста: 1em
- Цвят на текста: по подразбиране (Desktop), #000 (Hover)
- Цвят на фона (десктоп): rgba(255,255,255,0.19)
- Цвят на фона (задръжте курсора): #ffffff
- Ширина на рамката: 0 пиксела
- Разстояние между буквите: 0,05 em
- Шрифт: Josefin Sans
- Поле: 0px (отгоре и отдолу)
- Подплата: 0px (отгоре и отдолу), 0,6 em (отляво и отдясно)
Автоматично попълване и анимация
След това актуализирайте разстоянието на плъзгача, за да бъде компактно, и задайте желаната скорост на автоматична анимация.
- Марж: 0px (отгоре и отдолу)
- Подплата: 1em (отгоре и отдолу), 5% (отляво и отдясно)
- Автоматична анимация: ВКЛ
- Скорост на автоматична анимация: 3500
Персонализиран CSS
Под раздела Подробно, добавете следния персонализиран CSS, за да актуализирате стила на всеки елемент на плъзгача (заглавие, бутон и стрелки)
Заглавие на слайда
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;Това ще гарантира, че заглавието на слайда няма да създаде нов ред на по-малки екрани.
Бутон за плъзгане
position:absolute;
bottom: 1em;
right: 6%;Това дава на бутона абсолютна позиция, така че да стои доста под заглавието и вдясно от слайда, което прави плъзгача още по-компактен.
Плъзнете стрелки
font-size: 30px;
margin-top: -15px;Той просто прави стрелките за навигация на плъзгача по-малки, за да се приспособи към компактния размер на плъзгача.
Съвет: Добавете същия фонов цвят към колоната за по-плавни преходи на слайдовете
За да направите това, отворете настройките на родителската колона на плъзгача и добавете следния цвят на фона:
- Фон: #000000
Добавяне на авторски фонови изображения към слайд
Ако искате да включите авторско фоново изображение за слайд, можете да го направите, като добавите фоново изображение към всеки слайд.
След като добавите фоновото изображение към слайда, фоновото изображение ще наследи стиловете, които вече са на мястото си под настройките на плъзгача (не на слайда).
резултат
Вижте крайния резултат.
Добавяне на компактен плъзгач за препоръки към шаблон за заглавка
Запазете модула в библиотеката Divi
Преди да можем да добавим компактния плъзгач за препоръки към глобална заглавка, първо трябва да регистрираме модула в библиотеката Divi.
Можете да направите това, като задържите курсора на мишката над модула Slider и щракнете върху " Добавяне към библиотеката“. След това дайте име на оформлението и щракнете върху бутона " Запазване в библиотеката".
Добавено е компактно оформление на модула за препоръки към шаблон за заглавка
Редактиране на персонализиран заглавен колонтитул
След като новият модул на плъзгача за препоръки бъде запазен в библиотеката, ние сме готови да го добавим към персонализирана заглавка.
Достъп до Divi > Създател на теми, след което щракнете върху иконата, която ви позволява да промените " Персонализирана заглавка".
Вмъкване на записан плъзгач за препоръки от библиотеката
В редактора на оформлението на заглавката щракнете, за да добавите компактния плъзгащ модул за препоръки, където искате да се показва.
В мод „Вмъкване на модул“, изберете раздела „Добавяне от библиотека“. Намерете компактния плъзгач за препоръки, който сте запазили по-рано в библиотеката, и го изберете.
След като се зареди, запазете промените.
Вижте също: Divi: Как да покажа модула Fullwidth Header на цял екран
Краен резултат
По-долу е плъзгачът за препоръки, добавен към глобална заглавка.
Тук имаме плъзгача за препоръки без фоновите изображения на автора.
И ето как изглежда на мобилен телефон.
Изтеглете DIVI сега!!!
Заключение
Компактният плъзгач за препоръки може да бъде ново допълнение към заглавката на всичко уеб сайт стремейки се да повиши доверието в своите услуги на най-видимото място на своя уебсайт.
Можете също да го използвате за пренасочване посетители към страница с препоръки или страница за продажби, за да увеличите реализациите. Надяваме се, че това ще ви бъде полезно в следващите ви Divi проекти.
Ако имате притеснения или предложения, намерете ни раздел коментари за да го обсъдим.
Можете също да се консултирате нашите ресурси, ако имате нужда от повече елементи, за да осъществите вашите проекти за създаване на интернет сайтове.
Не се колебайте да се консултирате и с нашето ръководство за Създаване на блог на WordPress или тази, която е включена Divi: най-добрата тема на WordPress за всички времена.
Но междувременно, споделете тази статия във вашите различни социални мрежи.
...