Jak przełączać fragmenty postów na blogu na Hover w Divi

Przełączanie fragmentów postów na blogu po najechaniu myszą może być skutecznym sposobem na zachowanie zwartego układu siatki dla postów na blogu bez całkowitego porzucania tych fragmentów. Chodzi o to, aby początkowo ukryć fragmenty, a następnie przełączyć ich widoczność po najechaniu kursorem na element postu w siatce. Dzięki temu użytkownicy mogą zobaczyć więcej postów w oknie przeglądarki, jednocześnie zapewniając użytkownikowi możliwość obejrzenia fragmentów postów, którymi są zainteresowani, po najechaniu na posta.

W tym samouczku pokażemy, jak przełączać fragmenty postów na blogu po najechaniu myszą w Divi. Aby to zrobić, dodamy kilka fragmentów niestandardowego kodu CSS, które będą przełączać fragmenty elementu posta modułu bloga po najechaniu kursorem (nie jest potrzebne JQuery). Po umieszczeniu kodu możesz dowolnie stylizować moduł bloga, korzystając z wbudowanych ustawień Divi.

Zacznijmy!

zapowiedź

Oto krótkie spojrzenie na projekt, który zbudujemy w tym samouczku.

Pobierz układ za DARMO

Aby położyć swoje ręce na projektach z tego samouczka, najpierw musisz go pobrać za pomocą przycisku poniżej. Aby uzyskać dostęp do pobrania, musisz zapisać się na naszą listę e-mailową Divi Daily, korzystając z poniższego formularza. Jako nowy subskrybent otrzymasz jeszcze więcej dobroci Divi i darmowy pakiet Divi Layout w każdy poniedziałek! Jeśli jesteś już na liście, po prostu wpisz poniżej swój adres e-mail i kliknij pobierz. Nie będziesz „ponownie subskrybować” ani otrzymywać dodatkowych wiadomości e-mail.

Pobierz pliki

Pobierz za darmo

Dołącz do biuletynu Divi, a wyślemy Ci e-mailem kopię najlepszego pakietu układu strony docelowej Divi, a także mnóstwo innych niesamowitych i bezpłatnych zasobów, wskazówek i sztuczek Divi. Idź dalej, a w mgnieniu oka zostaniesz mistrzem Divi. Jeśli masz już subskrypcję, wpisz poniżej swój adres e-mail i kliknij Pobierz, aby uzyskać dostęp do pakietu układów.

POBIERANIE

Udało Ci się zasubskrybować. Sprawdź swój adres e-mail, aby potwierdzić subskrypcję i uzyskać dostęp do bezpłatnych cotygodniowych pakietów układów Divi!

Aby zaimportować układ sekcji do Biblioteki Divi, przejdź do Biblioteki Divi.

Kliknij przycisk Importuj.

W wyskakującym okienku przenośności wybierz zakładkę importu i wybierz plik do pobrania z komputera.

Następnie kliknij przycisk importu.

Po zakończeniu układ sekcji będzie dostępny w Divi Builder.

Przejdźmy do samouczka, dobrze?

Czego potrzebujesz, aby zacząć

Aby rozpocząć, musisz wykonać następujące czynności:

1. Jeśli jeszcze tego nie zrobiłeś, zainstaluj i aktywuj motyw Divi.
2. Utwórz nową stronę w WordPress i użyj Divi Builder, aby edytować stronę w interfejsie (konstruktor wizualny).
3. Wybierz opcję „Buduj od podstaw”.

Następnie będziesz mieć puste płótno, aby rozpocząć projektowanie w Divi.

Jak przełączać fragmenty postów na blogu na Hover w Divi

Tworzenie układu modułu bloga

Najpierw musimy stworzyć podstawowy układ dla naszych postów na blogu. W tym przykładzie dodamy jednokolumnowy wiersz z umieszczonym w nim modułem bloga.

Utwórz wiersz

Dodaj jednokolumnowy wiersz do sekcji.

Szerokość wiersza

W trybie modalnym ustawień wiersza zaktualizuj następujące ustawienia projektu, aby dostosować szerokość.

• Szerokość: 95%
• Maksymalna szerokość: 1200 pikseli

Dodaj moduł bloga

W kolumnie wiersza dodaj nowy moduł bloga.

Ustawienia modułu bloga

Następnie zaktualizuj ustawienia zawartości modułu blogu, wybierając opcję wyświetlania przycisku Czytaj więcej.

Na karcie projektu wybierz układ siatki bloga.

W zakładce Zaawansowane dodaj następującą klasę CSS:

• Klasa CSS: toggle-blog-excerpt

Użyjemy tej klasy jako selektora dla naszego niestandardowego kodu CSS w następnym kroku.

Dodaj niestandardowy CSS za pomocą modułu kodu

W tym momencie mamy podstawowy układ siatki dla naszych postów na blogu z niestandardową klasą CSS dodaną do modułu bloga. Użyjemy tego selektora klas CSS, aby kierować reklamy na ten konkretny moduł bloga i dodać efekt przełączania po najechaniu myszą na fragment fragmentu posta.

Aby dodać CSS, użyjemy modułu kodu. Dodaj nowy moduł kodu poniżej modułu bloga.

Wklej następujący niestandardowy kod CSS potrzebny do efektu przełączania fragmentu posta. Pamiętaj, aby owinąć CSS w niezbędne tagi stylu .

@media all and (min-width: 981px) {
  /* add transition for post content*/
  .toggle-blog-excerpt .et_pb_post .post-content {
    -webkit-transition: all 500ms !important;
    transition: all 500ms !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;  
  }
}

Sprawdźmy dotychczasowy wynik na stronie live.

Wynik

Kod omówimy nieco bardziej szczegółowo na końcu artykułu. Ale na razie sprawdźmy dotychczasowy wynik.

Dodaj dodatkową stylizację do modułu bloga za pomocą Divi Builder

Teraz, gdy CSS jest na miejscu, aby dać nam efekt przełączania dla naszych fragmentów postów na blogu, możemy dodać dowolną dodatkową stylizację do modułu bloga za pomocą Divi Builder.

W tym przykładzie zamierzamy wprowadzić minimalne zmiany w stylu, ale zachęcamy również do odkrywania własnego stylu.

Styl Tytuł posta

• Grubość czcionki tytułu: pogrubiona
• Kolor tekstu tytułu: #6d6a7e
• Rozmiar tekstu tytułu: 20px
• Wysokość wiersza tytułu: 1,3 em

Styl Czytaj więcej tekstu

• Czytaj więcej Grubość czcionki: pogrubienie
• Czytaj więcej Styl czcionki: TT
• Czytaj więcej Kolor tekstu: #6d6a7e
• Czytaj więcej Odstępy między literami: 1px
• Czytaj więcej Wysokość linii: 3,5 em

Paginacja stylu

• Grubość czcionki paginacji: pogrubiona
• Styl czcionki paginacji: TT
• Kolor tekstu paginacji: #6d6a7e
• Odstępy między literami paginacji: 1px

Usuń obramowanie

• Szerokość obramowania układu siatki: 0px

Style Box Shadow po najechaniu kursorem

• Cień pudełka: Zobacz zrzut ekranu
• Pozycja pionowa cienia pudełka: 0px
• Siła rozmycia cieni w pudełku: 38px
• Kolor cienia (pulpit): przezroczysty
• Kolor cienia (najechanie): rgba (109,106,126.0,25)

Ostateczny wynik

O kodzie CSS

Jeśli interesuje Cię rozbicie niestandardowego CSS dodanego wcześniej do modułu kodu, oto on.

Po pierwsze, musimy owinąć cały CSS w zapytaniu o media, które zastosuje CSS tylko do przeglądarek komputerowych.

@media all and (min-width: 981px) {

}

Po drugie, musimy dodać przejście o czasie trwania 500 ms do treści posta/fragmentu do zmian stylu, które wystąpią po najechaniu kursorem na element posta.

  /* add transition for post content*/
  .toggle-blog-excerpt .et_pb_post .post-content {
    -webkit-transition: all 500ms !important;
    transition: all 500ms !important;
  }

Po trzecie, musimy upewnić się, że treść/fragment posta pozostaje widoczny podczas korzystania z narzędzia do tworzenia wizualnych, abyśmy mogli wprowadzać zmiany.

  /* 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;
  }

Po czwarte, musimy domyślnie ukryć treść/fragment posta po załadowaniu strony. Aby to zrobić, używamy widoczności:ukryte, aby ukryć zawartość. Następnie dodajemy krycie:0, aby uzyskać efekt przejścia zanikania i zanikania, gdy dodamy krycie:1 do stanu najechania. Używamy również max-height:0px, aby uzyskać efekt przesuwania, gdy dodajemy max-height:500px do stanu najechania.

  /* hide post content */
  .toggle-blog-excerpt .et_pb_post .post-content {
    visibility: hidden;
    opacity: 0;
    max-height:0px;
  }

Po piąte, pokazujemy treść/fragment postu, gdy element postu (.et_pb_post) znajduje się w stanie najechania kursorem. W tym celu zmieniamy widoczność na widoczne, krycie na 1, a maksymalną wysokość na 500px.

  /* show post content when hovering over post item */
  .toggle-blog-excerpt .et_pb_post:hover .post-content {
    visibility: visible;
    opacity:1;
    max-height: 500px;
  }

W przypadku końcowego fragmentu możemy nadać wszystkim elementom posta tę samą minimalną wysokość, aby uzyskać bardziej przejrzysty układ siatki wyrównany w pionie.

  /* set min-height for all post items */
  .toggle-blog-excerpt .et_pb_post {
    min-height: 400px;  
  }

Oto jeszcze jedno spojrzenie na ostateczny kod.

@media all and (min-width: 981px) {
  /* add transition for post content*/
  .toggle-blog-excerpt .et_pb_post .post-content {
    -webkit-transition: all 500ms !important;
    transition: all 500ms !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;  
  }
}

Końcowe przemyślenia

Jak pokazano w tym samouczku, dodanie kilku fragmentów CSS może zapewnić funkcjonalność niezbędną do przełączania fragmentów postów na blogu z przyjemnym efektem najechania. Najlepsze w tej metodzie jest to, że możemy wykorzystać tę funkcjonalność, dodając dowolną dodatkową stylizację do modułu bloga za pomocą wbudowanych opcji Divi. Umożliwi to dodanie bardziej zaawansowanego stylu do elementów postu, w tym więcej efektów najechania. Mamy nadzieję, że pomoże to w zwiększeniu projektu i funkcjonalności bloga witryny Divi.

Czekam na kontakt z Państwem w komentarzach.

Pozdrawiam!