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.

wyświetlaj fragmenty artykułów po najechaniu kursorem w Divi

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
wyświetlaj fragmenty artykułów po najechaniu kursorem w Divi

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.

  1. @media all and (min-width981px) {
  2.   /* add transition for post content*/
  3.   .toggle-blog-excerpt .et_pb_post .post-content {
  4.     -webkit-transitionall 500ms !important;
  5.     transitionall 500ms !important;
  6.   }
  7.   /* keep post content visible in visual builder */
  8.   body.et-fb .toggle-blog-excerpt .et_pb_post .post-content {
  9.     visibility:visible;
  10.     opacity1;
  11.     max-height:none;
  12.   }
  13.   /* hide post content */
  14.   .toggle-blog-excerpt .et_pb_post .post-content {
  15.     visibilityhidden;
  16.     opacity0;
  17.     max-height:0px;
  18.   }
  19.   /* show post content when hovering over post item */
  20.   .toggle-blog-excerpt .et_pb_post:hover .post-content {
  21.     visibilityvisible;
  22.     opacity:1;
  23.     max-height500px;
  24.   }
  25.   /* set min-height for all post items */
  26.   .toggle-blog-excerpt .et_pb_post {
  27.     min-height400px
  28.   }
  29. }

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
wyświetlaj fragmenty artykułów po najechaniu kursorem w Divi

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
wyświetlaj fragmenty artykułów po najechaniu kursorem w Divi

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.