Tworzenie wartościowych postów na blogu wymaga czasu i wysiłku. Oprócz znajdowania najlepszych tematów do napisania w swojej niszy, ważne jest również, aby utrzymać zaangażowanie czytelników i umożliwić im szybkie znalezienie informacji, których szukają.
Teraz dobrym sposobem podejścia do tego typu doświadczeń użytkownika jest udostępnienie wizualnego podsumowania na końcu posta na blogu, tuż przed końcowymi przemyśleniami.
Dzięki nowym blokom układu Divi możesz teraz bez wysiłku utworzyć podsumowanie z wbudowanymi opcjami Divi. W tym samouczku przeprowadzimy Cię przez ten proces, a także będziesz mógł bezpłatnie pobrać plik JSON układu!
Zacznijmy od nowa!
Użyj szablonu publikacji dla szóstego pakietu motywów
Pobierz Sixth Theme Builder Pack
Pole podsumowania, które utworzymy w tym samouczku, idealnie pasuje do szablonu postu Szóstego pakietu Theme Builder Pack wolny. Uzyskać dostęp doblogu i pobierz cały pakiet.
Idź do Divi Theme Builder
Następnie przejdź do Konstruktora motywów Divi.
Pobierz szablon publikacji
Kliknij ikonę w prawym górnym rogu i pobierz szablon posta z pakietu Theme Building Pack. Pamiętaj, aby później edytować wszelkie zmiany w kreatorze motywów.
Otwórz istniejącą publikację Gutenberga lub utwórz nową
Teraz, po dodaniu odpowiedniego szablonu postów, czas na utworzenie pola podsumowania. Otwórz lub utwórz nowy post za pomocą Gutenberg.
Dodaj streszczenie tytułu H2
Pod koniec postu na blogu dodamy nowy tytuł H2.
Dodaj nowy blok Divi online
Następnie dodamy nowy blok układu Divi.
Utwórz nowy układ w bloku Divi
Po dodaniu bloku będziesz mieć dwie opcje. Wybierz, aby utworzyć nowy układ.
Ustawienia sekcji
Kolor tła
W edytorze bloków układu Divi zauważysz sekcję. Otwórz tę sekcję i użyj do niej białego tła.
- Kolor tła: #FFFFFF
rozstaw
Przejdź do zakładki projektowania sekcji i dodaj niestandardowe wartości marginesów i dopełnienia.
- Górny margines: 100px
- Lewy margines: -10% (biuro), 0% (tablet i telefon)
- Prawy margines: -10% (biuro), 0% (tablet i telefon)
- Górna wyściółka: 0px
- Dolne wypełnienie: 0px
granica
Dodaj także promień obramowania.
- U dołu po lewej: 16 pikseli
- U dołu po prawej: 16 pikseli
Pole cienia
Z subtelnym cieniem pudełka.
- Pole Shadow Blur Strength: 60px
- Siła propagacji cienia w pudełku: 10px
- Kolor cienia: rgba (0,0,0,0,08)
Dodaj nową linię
Struktura kolumny
Kontynuuj dodawanie nowego wiersza do sekcji przy użyciu następującej struktury kolumn:
zaklejania
Nie dodając jeszcze modułu, otwórz ustawienia wiersza i pozwól, aby wiersz zajmował całą szerokość kontenera sekcji.
- Użyj niestandardowej szerokości rynny: Tak
- Szerokość rynny: 1
- Wyrównaj wysokości kolumn: Tak
- Szerokość: 100%
- Maksymalna szerokość: 100%
rozstaw
Następnie usuń domyślne górne i dolne wypełnienie z linii.
- Górna wyściółka: 0px
- Dolne wypełnienie: 0px
Ustawienia kolumny 1
Kolor tła
Następnie otwórz ustawienia w kolumnie 1 i użyj do tego białego koloru tła.
- Kolor tła: #FFFFFF
rozstaw
Dodaj także niestandardowe wartości wypełnienia.
- Górna wyściółka: 70px
- Dolne wypełnienie: 70px
- Lewa wyściółka: 70 pikseli
- Prawa wyściółka: 70 pikseli
Pole cienia
Kontynuuj, dodając subtelny cień pola z innym domyślnym kolorem cienia.
- Pole Shadow Blur Strength: 50px
- Domyślny kolor cienia: rgba (0,0,0,0)
- Hover shadow color: rgba (0,0,0,0,15)
Najedź skalą transformacji
Po najechaniu myszą chcemy również nieznacznie przeskalować kolumnę.
- Prawo: 105%
- Niski: 105%
Wskaźnik Hover Z.
Uzupełnij parametry kolumny, dodając wskaźnik najechania z.
- Wskaźnik aktywacji Z: 11
Dodaj moduł tekstowy # 1 do kolumny
Dodaj numer do obszaru zawartości
Czas dodać moduły, zaczynając od pierwszego modułu tekstowego. Dodaj liczbę do pola treść.
Tło gradientowe
Następnie dodaj tło gradientowe.
- Kolor 1: # ff5e92
- Kolor 2: # ffd4b6
- Kierunek gradientu: 165 stopni
Ustawienia tekstu
Przejdź do zakładki projektowania modułu i zmień ustawienia tekstu w następujący sposób:
- Czcionka tekstu: Poppins
- Kolor tekstu: #ffffff
- Rozmiar tekstu: 26px
- Wyrównanie tekstu: środek
zaklejania
Następnie przypisz szerokość i wysokość.
- Szerokość: 150 pikseli
- Wysokość: 150px
granica
Dodaj także promień obramowania.
- Dolny lewy, prawy górny i prawy dolny: 100 pikseli
Główny element CSS
Aby wyśrodkować tekst w naszym kontenerze, będziemy musieli dodać kilka wierszy kodu CSS do głównego elementu modułu na karcie Zaawansowane.
display: flex;align-items: center;justify-content: center;
Pozycja
I zakończymy parametry modułu, zmieniając jego położenie.
- Pozycja: absolutna
- Lokalizacja: w lewym górnym rogu
Dodaj moduł tekstowy # 2 do kolumny
Dodaj zawartość H3
Przejdźmy do kolejnego modułu tekstowego. Dodaj trochę treść H3 według własnego wyboru.
Ustawienia tekstu H3
Następnie zmodyfikuj rozmiar tekstu H3 modułu.
- Tytuł 3 Rozmiar tekstu: 23px
rozstaw
Zmień także ustawienia odstępów.
- Górny margines: 100px
- Dolny margines: 20px
Dodaj moduł separacji do kolumny
widoczność
Następnym modułem, którego potrzebujemy, jest moduł separacji. Upewnij się, że opcja „Pokaż separator” jest włączona.
- Pokaż separator: Tak
Ustawienia linii
Przejdź do zakładki projektowania modułu i zmień ustawienia wiersza w następujący sposób:
- Kolor linii: # ff5e92
- Styl linii: jednolity
- Pozycja linii: wysoka
zaklejania
Zmodyfikuj także rozmiar modułu.
- Waga dzielnika: 2px
- Szerokość: 20%
Dodaj moduł tekstowy # 3 do kolumny
Dodaj treść
Przejdźmy do kolejnego i ostatniego modułu tekstowego. Dodaj trochę treść do wyboru.
Klonowanie kolumny
Po wypełnieniu kolumny i wszystkich jej modułów możesz sklonować całą kolumnę.
Zmień kolor cienia domyślnego pola
Otwórz ustawienia w kolumnie 2 i zmień domyślny kolor cienia.
- Kolor cienia: rgba (0,0,0,0,06)
Zmień tło gradientowe modułu tekstowego nr 1
Otwórz pierwszy moduł tekstowy w następnych 2 kolumnach i zmień tło gradientowe.
- Kolor 1: # 7e5ce6
- Kolor 2: # 25b8ee
Zmień granicę modułu tekstowego nr 1
Zmień także ustawienia granicy modułu.
- Lewy górny, lewy dolny i prawy dolny: 100 pikseli
Zmień pozycję modułu tekstowego nr 1
I zmień położenie modułu w zakładce Zaawansowane.
- Lokalizacja: w prawym górnym rogu
Zmień kolor separatora
Kontynuuj, otwierając ustawienia modułu separacji. Zmień kolor linii, aby dopasować ją do nowego schematu kolorów.
- Kolor linii: # 7e5ce6
Zmień całą zawartość
Na koniec zmodyfikuj całą zawartość modułu w kolumnie 2.
Sklonuj całą sekcję dwukrotnie
Po ukończeniu pierwszej sekcji możesz ją dwukrotnie sklonować.
Zmień odstępy pierwszej zduplikowanej sekcji
Otwórz ustawienia w pierwszej zduplikowanej sekcji i odpowiednio zmień wartości marginesów:
- Lewy margines: -5% (komputer stacjonarny), 0% (tablet i telefon)
- Prawy margines: -5% (biuro), 0% (tablet i telefon)
Zmień odstępy w drugiej zduplikowanej sekcji
Otwórz także drugi duplikat, usuń wszystkie wartości marginesów i dodaj niższy margines.
- Dolny margines: 100px
Zmień całą zawartość
Na koniec zmodyfikuj całą zawartość modułu.
Zapisz układ w bibliotece Divi do ponownego użycia
Jeśli planujesz używać tego podsumowania w innych postach na blogu, zapisz je w swojej bibliotece Divi, aby mieć do niego łatwy dostęp! Otóż to !
badanie
Teraz, gdy przeszliśmy przez wszystkie kroki, przyjrzyjmy się ostatecznie, jak wygląda na różnych rozmiarach ekranu.
końcowe przemyślenia
W tym artykule pokazaliśmy, jak dodać pole podsumowania do postu Gutenberga za pomocą nowych bloków układu Divi. Pola podsumowania to świetny wizualny sposób pomocy odwiedzający aby znaleźć informacje, których szukają.
Możesz także bezpłatnie pobrać plik JSON dla układu! Jeśli masz jakieś pytania, możesz zostawić komentarz w sekcji komentarzy poniżej.