Искате ли да вмъкнете компактен плъзгач за препоръки за заглавка 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 за всички времена.
Но междувременно, споделете тази статия във вашите различни социални мрежи.
...