Искате ли да създадете лента за навигация между публикациите, която е лепкава в Divi?
Залепващата навигационна лента за публикации е ефективен начин за подобряване на потребителското изживяване на всеки уебсайт на блог. В допълнение към основната навигация на вашия сайт, връзките за навигация в публикациите позволяват на потребителите лесно да преминават към предишната публикация или следващата публикация на вашия блог. И ако добавите тези връзки за навигация в публикация към лепкава лента, тези връзки остават видими и по-достъпни.
В този урок ще създадем лента за навигация между залепващи публикации Divi. За да направим това, ще използваме вградените опции на Divi, за да трансформираме ред в лепкава лента. След това ще използваме модула за навигация на статии, за да проектираме връзките „предишна статия“ и „следваща статия“.
Освен това ще добавим заглавие на публикация като динамично съдържание в средата на лентата, което напомня на потребителите за публикацията, която гледат в момента, придавайки на лентата за навигация хубав елемент „минало, настояще и бъдеще“.
Да започнем!
изследване
Ето един бърз поглед върху дизайна, който ще създадем в този урок.
Какво трябва да започнете
Въпреки че можете да добавите тази лепкава лента за навигация на публикация към всяко оформление на публикация в блог или шаблон в Divi, ние ще използваме предварително направен шаблон за публикация в блог, за да ускорим процеса и бързо да започнем дизайна.
Импортирайте шаблона за публикация в блога „Комплект за хранене“ в Divi Theme Builder
За да започнете, изтеглете безплатен шаблон за публикация в блога за комплекта за хранене на Divi . За да направите това, отидете на публикацията в блога .
След това въведете вашия имейл, за да изтеглите zip файла.
След това разархивирайте файла, така че да е готов за импортиране.
За да импортирате файла в редактора на теми, изпълнете следните стъпки:
- Отидете на Divi > Theme Builder.
- Кликнете върху иконата за преносимост.
- В изскачащия прозорец за преносимост изберете раздела за импортиране.
- Изберете предварително изтегления разархивиран файл за импортиране.
- Кликнете върху « Импортиране на Divi Theme Builder Шаблони ».
- Щракнете върху иконата за редактиране, за да редактирате импортирания шаблон.
Създайте лепкава лента за навигация в Divi
Част 1: Създаване на лепкава линия
За да създадем лепкава лента за навигация, ще използваме ред с три колони като лепкав контейнер за нашите навигационни връзки между публикацията и заглавието на публикацията.
Прочетете още: Divi: Как да използвате опцията „Повтаряне на градиент“, за да създадете персонализирани фонови модели
Във втория раздел на оформлението на шаблона добавете нов ред под реда, съдържащ съдържанието на публикацията.
Настройки на линията
Отворете настройките на линията.
Първо, трябва да добавим лепкава позиция към линията, така че да можем да актуализираме други опции за дизайн в лепкаво състояние.
Под раздела Подробно, актуализирайте следното:
- Залепваща позиция: Залепете отгоре и отдолу
- Горна лепкава граница: Секция
- Долна лепкава граница: Площ на тялото
За да сте сигурни, че колоните не се натрупват на мобилно устройство, добавете следния персонализиран CSS към Основен елемент :
display:flex;
flex-wrap:nowrap;
align-items:center;
Под раздела съдържание, добавете бял фонов цвят към линията в лепкаво състояние, както следва:
- фон: няма
- Фон: #ffffff (лепкаво)
Под настройки Дизайн, актуализирайте следното:
- Използване на персонализирана ширина на улука: ДА
- Ширина на улука: 1
- Ширина: 100%
- Максимална ширина: 100%
- Подплата: 0px (отгоре и отдолу)
Скриване на средната колона на таблет и телефон
За да скриете колоната на мобилно устройство, отворете настройките за колона 2 (средна колона) и актуализирайте опциите видимост както следва :
- Деактивиране на: телефон, таблет
Част 2: Създаване на връзки за навигация на статии
За да отворим повече гъвкавост на дизайна за навигация в публикации, ще използваме два отделни модула за навигация в публикации. В лявата колона ще добавим модул за навигация на публикации, който показва само връзката към предишната статия. В дясната колона ще добавим модул за навигация на публикация, който показва само връзката към следващата публикация.
Линк към предишна публикация
В колона 1 добавете нов модул за навигация на публикации.
Отворете настройките на модула, актуализирайте раздела с опции на съдържание както следва :
- Предишна връзка (текст): Предишна публикация
- Показване на връзка към предишна публикация: ДА
- Показване на връзка към следващата публикация: НЕ
- Фон: #000000
Под раздела Дизайн, актуализирайте следното:
- Шрифт за връзки: Kumbh Sans
- Тегло на шрифта на връзките: Получер
- Стил на шрифта: TT
- Цвят на текста на връзките: #ffffff
- Размер на текста на връзките: 26px (десктоп), 16px (таблет и телефон)
- Височина на реда: 1,3 em
- Подложка: 0,9 em (отгоре), 0,7 em (отдолу), 2 em (отляво и отдясно)
Тъй като скриваме средната колона на мобилно устройство, двете останали колони, които ще съдържат връзките за навигация, вече могат да заемат 50% от ширината на браузъра на таблет и телефон.
Вижте също: Divi: Как да промените стила на няколко елемента при задържане или след щракване
За да сте сигурни, че връзката за навигация обхваща 50% от прозореца за изглед, добавете следния персонализиран CSS към полето CSS за връзки за преглед на таблет:
display:block;
width:50vw;
text-align:center;
float:none;
Създаване на връзка към следващата публикация
За да създадете връзката за следващата публикация, копирайте модула за навигация на публикация (с връзката към предишната публикация), който току-що проектирахме, и го поставете в колона 3 (дясна колона).
След това отворете настройките за навигация на публикациите за дублиращия се модул в дясната колона и актуализирайте следните опции на раздела за съдържание:
- Следваща връзка: Следваща публикация
- Показване на връзка към предишна публикация: НЕ
- Показване на връзка към следващата публикация: ДА
- Фон: #ffb100
Под раздела Дизайн, актуализирайте цвета на текста на връзката:
- Цвят на текста на връзките: #000000
Част 3: Създаване на динамично заглавие на публикация
С двете връзки за навигация сме готови да добавим заглавието на публикацията като динамично съдържание в средната колона.
Идеята е да се даде на потребителя приятно напомняне за съобщението, което чете, с възможност за навигация до предишното и следващото съобщение.
В средната колона добавете нов текстов модул.
Под раздела съдържание, кликнете върху иконата „Използване на динамично съдържание“ в областта на тялото, след което изберете Заглавие на публикация/архив.
След като динамичното заглавие на публикацията бъде добавено, отворете настройките на Заглавие на публикация/архив и актуализирайте съдържанието преди:
- Преди четене
След това запазете промените.
Под раздела Дизайн, актуализирайте следното:
- Шрифт на текста: Kumbh Sans
- Тегло на шрифта на текста: получер
- Стил на шрифта: TT
- Текст Цвят на текста: прозрачен (Desktop), #000000 (Sticky)
- Размер на текста: 16px
- Разстояние между буквите: 1px
- Височина на реда: 1,3 em
- Подравняване на текста: центрирано
- Максимална ширина: 96%
- Модул за подравняване: център
- Подложка: 0,5 em (отгоре и отдолу)
Краен резултат
Изтеглете DIVI сега!!!
Заключение
В този урок показахме колко лесно е да създадете лепкава лента за навигация на публикация за шаблон за публикация в блог в Divi.
Функцията за залепване на лента/линия също може лесно да се регулира с вградените опции на Divi. Например, можете да ограничите лепкавото състояние до секция или да изберете да го направите лепкаво само в горната или долната част на прозореца на браузъра.
Надяваме се, че това ще бъде полезно за следващия ви блог сайт. Ако имате притеснения или предложения, намерете ни раздел коментари за да го обсъдим.
Можете също да се консултирате нашите ресурси, ако имате нужда от повече елементи, за да осъществите вашите проекти за създаване на интернет сайтове.
Не се колебайте да се консултирате и с нашето ръководство за Създаване на блог на WordPress или тази, която е включена Divi: най-добрата тема на WordPress за всички времена.
Но междувременно, споделете тази статия във вашите различни социални мрежи.
...