Jak zaprojektować ostatnie posty według układu kategorii z fajnymi efektami najechania w Divi

Wszyscy jesteśmy przyzwyczajeni do oglądania najnowszych postów wyświetlanych na stronie internetowej. Zazwyczaj są one generowane za pomocą widżetu Ostatnie posty WordPress lub wtyczki do wyświetlania ostatnio opublikowanych artykułów na blogu. Zwykle pojawiają się na stronie bloga, na dole postów, na paskach bocznych lub jako polecana sekcja strony docelowej (coś w tym rodzaju).

W tym samouczku pokażemy, jak wyświetlać najnowsze posty według kategorii. Korzystając tylko z Divi Builder (i kilku modułów blogowych), stworzymy sekcję wyświetlającą najnowsze posty z czterech różnych kategorii. Te ostatnie posty według sekcji kategorii będą zawierać unikalne tagi kategorii, animacje i efekty najechania – wszystko bez wtyczki.

Sprawdź to!

zapowiedź

Oto krótkie spojrzenie na projekt i funkcjonalność ostatnich postów według układu kategorii, które wspólnie zbudujemy.

Pobierz najnowsze posty według układu kategorii 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 już jesteś na liście, po prostu wpisz poniżej swój adres e-mail i kliknij pobierz. Nie będziesz iresubscribedi ani otrzymywać dodatkowych e-maili.

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 na swoją stronę, po prostu wyodrębnij plik zip i przeciągnij plik json do 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. Ponadto funkcjonalność sekcji ostatnich postów zależy od posiadania w witrynie aktualnych postów na blogu z przypisanymi do nich kategoriami. Upewnij się więc, że masz skonfigurowane kilka próbnych postów na blogu, jeśli korzystasz z witryny testowej.

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

Tworzenie ostatnich postów według sekcji kategorii w Divi

Utwórz wiersz z 4 kolumnami

Aby rozpocząć pracę w Divi Builder, utwórz wiersz z 4 kolumnami.

Tworzenie bloga Moduł 1

Każda z czterech kolumn będzie zawierała osobny moduł bloga. Dodaj pierwszy moduł bloga do kolumny 1.

Każdy z modułów bloga domyślnie wyświetla najnowszy post z Twojej witryny. Wszystko, co zamierzamy zrobić, to wybrać konkretną kategorię do uwzględnienia w tym konkretnym module bloga. Następnie ograniczymy liczbę postów do 1, aby wyświetlić tylko jeden post. W ten sposób otrzymamy dynamicznie najnowszy wpis na blogu dla tej kategorii.

Treść bloga

Zaktualizuj opcje zawartości bloga w następujący sposób:

• Typ postu: Posty
• Liczba postów: 1
• Uwzględnione kategorie: Wiadomości (lub jedna z Twoich)
• Użyj fragmentów posta: NIE
• Długość fragmentu: 120

Opcje elementu

Następnie zaktualizuj opcje elementów w następujący sposób:

• Pokaż kategorie: NIE
• Pokaż fragment: NIE (komputer), TAK (naciśnięcie i tablet)
• Pokaż paginację: NIE

Projekt bloga

Następnie zaktualizuj projekt w następujący sposób:

• Kolor tła (pulpit): #ffffff
• Kolor tła (najechanie): #8ac829
• Grubość czcionki tytułu: pół pogrubiona
• Styl czcionki tytułu: TT
• Rozmiar tekstu tytułu: 24px
• Odstępy między literami tytułu: 1px
• Wysokość wiersza tytułu: 1.4em
• Kolor tekstu ciała: #ffffff
• Waga czcionki Meta: lekka
• Meta odstępy między literami: 3px

• Minimalna wysokość: 450px (komputer), auto (tablet)
• Wypełnienie: 5% góra, 5% dół, 5% lewo, 5% prawo
• Cień pudełka: Zobacz zrzut ekranu
• Styl animacji: Zoom

To zajmuje się projektem naszego pierwszego modułu blogowego. Teraz musimy utworzyć nasz niestandardowy tag kategorii.

Tworzenie etykiety kategorii 1

Aby utworzyć tag, dodaj nowy moduł tekstowy pod modułem bloga, a następnie przeciągnij go nad moduł bloga.

Treść tekstowa

Zaktualizuj treść treści o nazwę kategorii wybranej dla modułu bloga. W moim przykładzie wyświetlam ostatni post z kategorii Wiadomości, więc dodam słowo „Wiadomości” do treści treści.

Projektowanie tagu kategorii

W ustawieniach projektu tekstu zaktualizuj następujące elementy:

• Kolor tła: #8ac829
• Grubość czcionki tekstu: Ultra Bold
• Kolor tekstu: #ffffff
• Wyrównanie tekstu: do środka
• Szerokość: 120px
• Margines: 80px góra, -80px dół
• Padding: 10px góra, 10px dół
• Styl animacji: zanikanie
• Opóźnienie animacji: 1000 ms
• Indeks Z: 1

Ponieważ używamy ujemnego marginesu, aby umieścić tag na karcie bloga, musimy ustawić indeks z na 1, aby tag pozostał nad modułem bloga.

Teraz, gdy mamy gotowy jeden post, możemy wdrożyć tryb widoku szkieletowego i skopiować te moduły do ​​innych kolumn.

Skopiuj moduł tekstu i bloga z kolumny 1 i wklej go do kolumn 2, 3 i 4, aby w każdej kolumnie były dokładnie takie same moduły.

Dla każdego zduplikowanego modułu bloga musimy nadać mu nową kategorię bloga i kolor tła najechania kursorem. A dla każdego zduplikowanego tagu kategorii musimy zaktualizować nazwę kategorii, aby odpowiadała kategorii wybranej dla modułu bloga, a następnie zaktualizować kolor tła, aby pasował do koloru tła po najechaniu na moduł bloga.

Zaktualizuj moduły w kolumnie 2

Pozostając w widoku szkieletowym, otwórz ustawienia modułu bloga w kolumnie 2 i zaktualizuj następujące elementy:

• Uwzględnione kategorie: Biznes (lub własny)
• Kolor tła (najechanie): #f64937

Następnie zaktualizuj ustawienia modułu tekstowego w kolumnie 2 w następujący sposób:

• Treść: „Biznes”
• Kolor tła: #f64937

Zaktualizuj moduły w kolumnie 3

Następnie otwórz ustawienia modułu bloga w kolumnie 3 i zaktualizuj następujące elementy:

• Zawarte kategorie: Pieniądze (lub własne)
• Kolor tła (najechanie): #6529c7

Następnie zaktualizuj ustawienia modułu tekstowego w kolumnie 3 w następujący sposób:

• Treść: „Pieniądze”
• Kolor tła: #6529c7

Zaktualizuj moduły w kolumnie 4

Następnie otwórz ustawienia modułu bloga w kolumnie 4 i zaktualizuj następujące elementy:

• Zawarte kategorie: Coaching (lub własny)
• Kolor tła (najechanie): #f17809

Następnie zaktualizuj ustawienia modułu tekstowego w kolumnie 4 w następujący sposób:

• Treść: „Coaching”
• Kolor tła: # f17809

Aktualizacja ustawień wiersza

Jest kilka zmian, które musimy wprowadzić w naszym rzędzie, w tym ustaloną wysokość i niestandardową szerokość rynny. Zaktualizuj następujące ustawienia wierszy:

• Użyj niestandardowej szerokości rynny: TAK
• Szerokość rynny: 2
• Szerokość: 94%
• Maksymalna szerokość: 1400px
• Wysokość: 540px (komputer), auto (tablet)
• Padding: 0px na górze, 0px na dole

Ustawiamy wysokość wiersza na 540 pikseli na komputerze, aby wiersz nie rozwijał się i nie przesuwał innych treści na stronie po najechaniu kursorem na kartę bloga. Pamiętaj, aby ustawić wysokość na automacie na tablecie, aby nie ukrywać żadnych treści.

Aktualizacja ustawień dla każdej kolumny

Aby nadać ostatnim postom na blogu efekt najechania, który zostanie zastosowany do obu modułów jednocześnie, możemy dodać efekt najechania do kolumny zawierającej dwa moduły, z których składa się post na blogu. Otwórz ustawienia dla każdej kolumny i zaktualizuj następujące elementy:

• Skala transformacji (najechanie): 115%

Następnie dodaj następujący niestandardowy kod CSS tylko do głównego elementu na ekranie tabletu:

transform: none !important

Ten mały fragment wyłączy efekt najechania skalą transformacji na urządzeniach mobilnych.

Teraz, gdy wszystkie ostatnie posty są ustawione z odpowiednim tagiem kategorii i pasującym kolorem tła, które wyświetlają się po najechaniu kursorem na kartę. Ponadto karta powiększy się i wyświetli fragment po najechaniu kursorem.

Aktualizacja ustawień sekcji

W sekcji dodajmy nowy gradient tła i trochę dopełnienia. Otwórz ustawienia sekcji i zaktualizuj następujące elementy:

• Kolor gradientu tła po lewej stronie: #6529c7
• Prawy gradient tła: #f64937
• Kierunek gradientu: 270 stopni
• Wyściółka: góra 10vw, dół 10vw

Ostateczny wynik

Otóż ​​to! Sprawdźmy efekt końcowy. Ten obraz zawiera tytuł, który można łatwo dodać, aby ukończyć projekt.

A oto animacja i efekty najechania.

Końcowe przemyślenia

Tworzenie ostatnich postów według układu kategorii jest naprawdę łatwym procesem, jeśli myślisz trochę nieszablonowo. Wszystko, co naprawdę musisz zrobić, to stworzyć moduł bloga dla każdej kategorii, którą chcesz wyświetlić. Następnie ogranicz ten moduł do wyświetlania tylko najnowszego posta z określonej kategorii. Następnie masz moc Divi po swojej stronie, aby zająć się projektem.

Ten układ może być używany w dowolnym miejscu w witrynie, w tym w szablonach Theme Builder. Możesz więc importować je w dowolne miejsce, korzystając z opcji przenoszenia. Mam nadzieję, że przyda się to w twoim następnym projekcie lub przynajmniej da ci trochę inspiracji, aby te koła się obracały, aby uzyskać jeszcze lepsze projekty Divi.

Czekam na kontakt z Państwem w komentarzach.

Pozdrawiam!