Искате ли да публикувате публикации в блогове в Divi?
Днес ще ви покажем креативен начин за представяне на публикации в блогове като плаващи карти в Divi. Всеки блог или уеб сайт devrait chercher à avoir un excellent contenu attrayant et, peut-être tout aussi important ou accessible.
Une façon de s’assurer que le contenu reste accessible aux utilisateurs est de le faire flotter sur la page.
А за блогърите ще ви покажем как да представяте статии от вашия блог като плаващи карти, така че да останат видими, докато превъртате страницата.
Да вървим.
изследване
Ето кратък преглед на резултата, който ще получим в края на този урок.
Какво трябва да започнете
Преди да започнете да създавате този дизайн в Divi, ще трябва да направите следното:
- Създайте нова страница, дайте подходящо име и кликнете върху „Използване на Divi Builder“
- Изберете опцията Изберете оформление".
- Намерете и изберете оформление "целева страница на блогър'.
- Кликнете върху бутона Изберете оформление за да го заредите на страницата.
След това ще имате предварително направеното оформление, готово за използване за този урок.
Как да създадете плаващи картички за публикация в блог с помощта на модула за блог на Divi
Сега, когато оформлението е заредено на страницата, ние сме готови да създадем нашите плаващи карти за публикации в блога.
Прочетете още: Как да създадете лепкава глобална заглавка в Divi
Създайте нов раздел в най-долната част на оформлението.
След това добавете нов ред с една колона към секцията.
Добавете блог модул и заглавие към реда/колоната
Вместо да създавате нов блог модул тук, превъртете нагоре и намерете съществуващия блог модул, показващ три публикации в блог (той е в третата секция близо до средата на страницата). Отворете " Други параметри на модула »И изберете« Копиране на модул".
След това поставете модула в новия ред с една колона, който създадохме в долната част на страницата, като щракнете с десния бутон върху сивата икона плюс и изберете „ Поставяне на модул".
След това ще добавим заглавие над нашите публикации в блога, което също ще се носи над картите в блога. За да направите това, копирайте съществуващия текстов модул с малкия заглавен текст " Lifestyle".
След това поставете модула точно над новия блог модул, който току-що добавихме.
След това редактирайте текста на заглавието, за да опишете типа публикации в блога, които искате да представите. В този пример просто ще използваме " Представени".
Персонализиране на линията с фиксирана позиция и персонализирана ширина
Искаме да намалим размера на плаващите публикации в блогове, така че да не заемат твърде много място на страницата, когато имат фиксирана позиция. Би било забавно. За да направите това, отворете настройките на линията и актуализирайте следното:
За да накараме елементите да плават, трябва да дадем на линията фиксирана позиция. В раздела Разширени актуализирайте следното:
- Позиция: фиксирана
- Местоположение: Долу вдясно
- Вертикално отместване: 20px
- Хоризонтално отместване: 20px
- Z индекс: 12
Актуализиран модул за блог с минимално съдържание и сянка
Като цяло, модулът на блога вече има оформление на решетка с три колони и приятен стил, който идва с избрания от нас пакет за оформление. Но има няколко неща, които трябва да направим.
Вижте също: Как да създадете глобална заглавка с формуляр за влизане в Divi
Tout d’abord, nous devons réduire la taille des cartes (verticalement) et supprimer certains éléments de contenu.
За да направите това, отворете настройките на блога и скрийте всички елементи с изключение на представеното изображение. Това ще накара публикацията да показва само избраното изображение и заглавие.
В раздела Стил конфигурирайте сянката на кутията, както следва:
- Shadow box: Вижте екранната снимка
- Сила на замъгляване на сянката на кутията: 28px
- Цвят на шрифта на субтитрите: rgba(0,0,0,0.19)
изследване
Ето преглед на резултата, който имаме досега.
Накарайте реда от статии да се показва при задържане на мишката
И накрая, можем да добавим хубав ефект на задържане, който насърчава потребителите да взаимодействат с плаващите статии.
Прочетете още: Как да създадете страницата на блога с модула Блог в Divi
Отворете настройките на линията и опциите за актуализиране:
За офиса
- Трансформация: 50%
За състояние на задържане
- Трансформация: 0%
Това първоначално ще изведе цялата линия извън прозореца на браузъра с 50%. След като потребителят задържи курсора на мишката върху линията, тя се връща напълно в изгледа.
Скриване на ред на мобилно устройство
Освен ако не искате да публикувате една публикация в блог, няма смисъл да пускате тези публикации в блог на мобилно устройство. Вероятно ще заеме твърде много място и ще създаде проблеми при опит за превъртане.
Вижте също: Как да добавите формуляр за контакт към глобална заглавка в Divi
Pour masquer les cartes sur mobile, ouvrez les paramètres de la section et désactivez la видимост de la section sur le téléphone et la tablette.
Краен резултат
Изтеглете DIVI сега!!!
Заключение
Така ! В този урок ви показахме креативен и оригинален начин за представяне на публикациите в блога, които искате да подчертаете.
Ако имате притеснения или предложения, намерете ни раздел коментари за да го обсъдим.
Можете обаче да се консултирате нашите ресурси, ако имате нужда от повече елементи, за да осъществите вашите проекти за създаване на интернет сайтове, като се консултирате с нашето ръководство за Създаване на блог на WordPress или тази, която е включена Divi: най-добрата тема на WordPress за всички времена.
Но междувременно, споделете тази статия във вашите различни социални мрежи.
...