Chcesz wiedzieć, jak wyświetlać fragmenty artykułów po najechaniu myszą w Divi ?
Podgląd fragmentów wpisów na blogu po najechaniu myszą może być skutecznym sposobem na zachowanie zwartego układu siatki dla swoich postów na blogu bez całkowitego porzucania tych fragmentów.
Chodzi o to, aby początkowo ukryć fragmenty, a następnie pokazać je, gdy najedziesz kursorem na post w siatce. Dlatego umożliwia czytelnikom zobaczenie większej liczby postów, a jednocześnie daje im możliwość zobaczenia fragmentów postów, które ich interesują.
W tym samouczku pokażemy, jak utworzyć fragmenty tego wpisu na blogu, aby włączyć efekt przełączania po najechaniu myszą Divi.
Zacznijmy!
badanie
Po pierwsze, oto przegląd tego, co będziemy tworzyć w tym samouczku.
Tworzenie układu modułu bloga
Najpierw musimy stworzyć podstawowy układ dla naszych postów na blogu. W tym samouczku dodamy wiersz do kolumny i wstawimy do niej moduł Blog.
Utwórz linię
Aby rozpocząć, wstaw wiersz jednej kolumny do sekcji
szerokość linii
Następnie przejdź do ustawień linii. następnie na karcie Styl w obszarze Rozmiar zmień szerokości w następujący sposób:
- Maksymalna szerokość: 90%
- Maksymalna szerokość: 1200px
Dodaj moduł bloga
Następnie wstaw moduł Blog w kolumnie utworzonego wcześniej wiersza.
Ustawienia modułu bloga
Następnie przejdź do ustawień modułu Blog w zakładce Treśćw obszarze Elementy ustaw opcję „Pokaż przycisk Czytaj więcej” na „Tak”
Teraz przejdź do karty Styl, w obszarze Szablon wybierz szablon „Siatka” jako układ bloga.
Na koniec przejdź do zakładki Zaawansowane i dodaj następującą klasę CSS:
Klasa CSS: toggle-blog-excerpt
Następnie użyjemy tej klasy jako selektora dla naszego niestandardowego kodu CSS w następnym kroku.
Dodaj niestandardowy CSS za pomocą modułu Code.
W tym momencie nasze wpisy na blogu są ułożone w siatce, a do menu Blog dodano niestandardową klasę CSS. Dlatego użyjemy tego selektora klas CSS, aby wskazać ten moduł bloga i dodać efekt przełączania po najechaniu kursorem na artykuł.
Aby dodać CSS, użyjemy modułu Code. Aby to zrobić, dodaj moduł Code w module Blog.
Następnie wklej poniższy niestandardowy kod CSS potrzebny do utworzenia efektu przełączania fragmentów artykułu po najechaniu myszą. Przede wszystkim upewnij się, że wklejasz kod CSS między niezbędnymi tagami stylu.
@media
all
and (
min-width
:
981px
) {
/* add transition for post content*/
.toggle-blog-excerpt .et_pb_post .post-content {
-webkit-
transition
:
all
500
ms
!important
;
transition
:
all
500
ms
!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
;
}
}
Zobaczmy dotychczas uzyskany wynik.
Wynik
Dodajmy trochę dodatkowej stylizacji do modułu Blog za pomocą kreatora Divi
Teraz, gdy CSS jest już dostępny i umożliwia nam przełączanie fragmentów wpisów na blogu, możemy dodać dowolną dodatkową stylizację do modułu bloga za pomocą konstruktora Divi.
W tym przykładzie wprowadzimy minimalne zmiany w stylu, ale zachęcamy również do odkrywania własnego stylu.
Styl tytułu artykułu
- Tytuł przyciemnionego światła: Tekst pogrubiony
- Kolor tekstu tytułu: #6D6A7E
- Rozmiar tekstu tytułu: 20px
- Wysokość wiersza tytułu: 1.3 em
Styl tekstu „Czytaj więcej”
- Czytaj więcej Dim Light: pogrubiony tekst
- Czytaj więcej Styl kopiowania: TT
- Kolor tekstu Czytaj więcej: #6D6A7E
- Odstępy między literami Czytaj więcej: 1px
- Wysokość linii Czytaj więcej: 3.5em
Zmień sposób wyświetlania stronicowania tekstu
- Pokaż paginację Dim light: Tekst pogrubiony
- Kolor tekstu Pokaż paginację: #6D6A7E
- Odstępy między literami Pokaż paginację: 1px
- Pokaż paginację Styl kopiowania: TT
Usuń obramowanie
- Szerokość obramowania układu siatki: 0px
Wskaż styl pola cienia
- Pudełko cienia: Zobacz zrzut ekranu
- Pozycja wyjściowa: 0px
- Siła rozmycia cieni w pudełku: 38px
- Kolor czcionki napisów: rgba (109,106,126,0.25 XNUMX XNUMX)
Ostateczny wynik
Wnioski
Podsumowując, jak pokazano w tym samouczku, dodanie niektórych fragmentów CSS może zapewnić funkcjonalność niezbędną do obsługi fragmentów postów na blogu z przyjemnym efektem najechania.
Najważniejszą rzeczą w tej metodzie jest to, że możemy dodać dodatkową stylizację do modułu bloga, korzystając ze zintegrowanych opcji Divi. Co więcej, pozwoli Ci dostosować elementy postu, w tym dodać więcej efektów najechania.
Miejmy nadzieję, że pomoże to w nadawaniu blogowi Twojego bloga Witryna internetowa Divi to dodatkowy impuls pod względem wzornictwa i funkcjonalności. Opowiedz nam o swoich doświadczeniach w komentarzach.