Искате да знаете как да показвате откъси от публикации при задържане на курсора на мишката в Divi?
Прегледът на фрагменти от публикации в блога при задържане на курсора може да бъде ефективен начин да поддържате компактно оформление на мрежата за публикациите в блога си, без да изоставяте тези фрагменти напълно.
И така, идеята е първоначално да скриете фрагменти и след това да ги покажете, когато задържите курсора на мишката върху публикация в мрежата. Следователно, той позволява на читателите да виждат повече публикации, като същевременно им дава възможност да виждат фрагменти от публикациите, които ги интересуват.
И така, в този урок ще ви покажем как да създадете ефект на обръщане на откъси от блог публикации при задържане на курсора на мишката в Divi.
Нека да започнем!
изследване
Първо, ето преглед на това, което ще създадем в този урок.
Създаване на оформлението на модула на блога
Първо, трябва да създадем основно оформление за публикациите в нашия блог. За този урок ще добавим ред към колона и ще вмъкнем блог модул в него.
Създайте линия
За да започнете, вмъкнете ред от една колона в секцията
ширина на линията
След това отидете на настройките на линията. след това в раздела Стил, под Оразмеряване, променете ширините, както следва:
- Максимална ширина: 90%
- Максимална ширина: 1200px
Добавете блог модул
След това поставете блог модул в колоната на предварително създадения ред.
Настройки на модула на блога
След това отидете в настройките на модула „Блог“, в раздела „Съдържание“, под „Елементи“, задайте опцията „Показване на бутона „Прочетете още“ на „Да“
Сега отидете в раздела Стил, под Шаблон, изберете шаблона „Решетка“ като оформление за блога.
Накрая отидете в раздела Разширени и добавете следния CSS клас:
CSS клас: togle-blog-excerpt
Впоследствие ще използваме този клас като селектор за нашия персонализиран CSS код в следващата стъпка.
Добавете персонализиран CSS с модула Code.
На този етап нашите публикации в блога са разположени в мрежа и персонализиран CSS клас е добавен към менюто на блога. Така че ще използваме този селектор на CSS клас, за да насочим конкретно този модул на блога и ще добавим превключващ ефект, когато задържите курсора на мишката над статия.
За да добавим CSS, ще използваме модула Code. За да направите това, добавете модул Код под модула Блог.
След това поставете по-долу персонализиран CSS, необходим за създаване на ефекта за превключване на фрагмента на статията при задържане на мишката. Преди всичко, не забравяйте да поставите CSS кода между необходимите етикети за стил.
@mediaalland (min-width:981px) {/* add transition for post content*/.toggle-blog-excerpt .et_pb_post .post-content {-webkit-transition:all500ms!important;transition:all500ms!important;}/* keep post content visible in visual builder */body.et-fb .toggle-blog-excerpt .et_pb_post .post-content {visibility:visible;opacity:1;max-height:none;}/* hide post content */.toggle-blog-excerpt .et_pb_post .post-content {visibility:hidden;opacity:0;max-height:0px;}/* show post content when hovering over post item */.toggle-blog-excerpt .et_pb_post:hover .post-content {visibility:visible;opacity:1;max-height:500px;}/* set min-height for all post items */.toggle-blog-excerpt .et_pb_post {min-height:400px;}}
Нека видим резултата, който се получава до момента.
резултат
Нека добавим малко допълнителен стил към блог модула с Divi builder
След като CSS кодът е настроен, за да ни даде ефекта на превключване за откъсите от публикациите в блога, можем да добавим допълнителни стилове към модула на блога, използвайки Divi builder-а.
За този пример ще направим минимални корекции в стила, но не се колебайте да изследвате и вашия собствен стил.
Стил на заглавието на статията
- Приглушено светло заглавие: Удебелен текст
- Цвят на текста на заглавието: #6D6A7E
- Размер на заглавния текст: 20px
- Височина на заглавния ред: 1.3 em
Стил на текст "Прочетете повече"
- Прочетете повече Приглушена светлина: удебелен текст
- Прочетете повече Стил на копиране: TT
- Цвят на текста Прочетете повече: #6D6A7E
- Разстояние между буквите Прочетете повече: 1px
- Височина на линията Прочетете повече: 3.5em
Променете показването на текста на пагинация
- Показване на пагинация Слаба светлина: удебелен текст
- Цвят на текста Показване на пагинация: #6D6A7E
- Буквено разстояние Показване на пагинация: 1px
- Показване на пагинация Стил на копиране: TT
Премахване на рамката
- Ширина на границата на оформлението на мрежата: 0px
Стил на полето за сянка
- Кутия за сянка: Вижте екранната снимка
- Начална позиция: 0px
- Сила на размазване на сянка на кутията: 38px
- Цвят на шрифта на субтитрите: rgba (109,106,126,0.25)
Краен резултат
Заключение
В заключение, както е показано в този урок, добавянето на някои CSS фрагменти може да ви даде функционалността, от която се нуждаете, за да разклащате фрагменти от публикации в блог с приятен ефект на завъртане.
Най-важното при този метод е, че можем да добавим допълнителен стил, както пожелаем, към модула на блога, като използваме интегрираните опции на Divi. Освен това, това ще ви позволи да персонализирате елементи на публикация, включително добавяне на повече ефекти при задържане на мишката.
Надяваме се, че това ще ви помогне да подобрите дизайна и функционалността на вашия уебсайт Divi. Споделете вашия опит с нас в коментарите.
