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.

Pobierz pakiet divi

Idź do Divi Theme Builder

Następnie przejdź do Konstruktora motywów Divi.

Uzyskaj dostęp do motywu konstruktora

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.

Pobierz model publikacji

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.

Utwórz publikację divi

Dodaj streszczenie tytułu H2

Pod koniec postu na blogu dodamy nowy tytuł H2.

Dodaj tytuł modułu tekstowego Gutenberga

Dodaj nowy blok Divi online

Następnie dodamy nowy blok układu Divi.

Dodaj 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.

Utwórz nowy układ wewnątrz bloku divi

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
Kolor tła Divi

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
Konfiguracja odstępów Divi

granica

Dodaj także promień obramowania.

  • U dołu po lewej: 16 pikseli
  • U dołu po prawej: 16 pikseli
Konfiguracja obramowania modułu Divi

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)
Konfiguracja Shadow Box Divi

Dodaj nową linię

Struktura kolumny

Kontynuuj dodawanie nowego wiersza do sekcji przy użyciu następującej struktury kolumn:

Podział układu wyboru

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%
Konfiguracja linii Divi

rozstaw

Następnie usuń domyślne górne i dolne wypełnienie z linii.

  • Górna wyściółka: 0px
  • Dolne wypełnienie: 0px
Regulacja odstępów między wierszami Divi

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
Regulacja kolumny Divi

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
Ustawienia odstępów między kolumnami Divi

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)
Ustawienia tła kolumny Divi

Najedź skalą transformacji

Po najechaniu myszą chcemy również nieznacznie przeskalować kolumnę.

  • Prawo: 105%
  • Niski: 105%
Ustawienie kolumny Divi

Wskaźnik Hover Z.

Uzupełnij parametry kolumny, dodając wskaźnik najechania z.

  • Wskaźnik aktywacji Z: 11
Pozycja kolumny Divi

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ść.

Ustawienie tekstu Divi

Tło gradientowe

Następnie dodaj tło gradientowe.

  • Kolor 1: # ff5e92
  • Kolor 2: # ffd4b6
  • Kierunek gradientu: 165 stopni
Tło gradientu tekstu Divi

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
Konfiguracja czcionki Divi 1

zaklejania

Następnie przypisz szerokość i wysokość.

  • Szerokość: 150 pikseli
  • Wysokość: 150px
Konfiguracja odstępów między modułami tekstowymi na divi

granica

Dodaj także promień obramowania.

  • Dolny lewy, prawy górny i prawy dolny: 100 pikseli
Konfiguracja obramowania modułu tekstowego 1

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;

Kod ustawienia modułu CSS tekst divi

Pozycja

I zakończymy parametry modułu, zmieniając jego położenie.

  • Pozycja: absolutna
  • Lokalizacja: w lewym górnym rogu
Konfiguracja pozycji modułu tekstowego Divi

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.

Dodaj zawartość modułu tekstowego

Ustawienia tekstu H3

Następnie zmodyfikuj rozmiar tekstu H3 modułu.

  • Tytuł 3 Rozmiar tekstu: 23px
Parametr modułu tekstowego Divi

rozstaw

Zmień także ustawienia odstępów.

  • Górny margines: 100px
  • Dolny margines: 20px
Podziałka konfiguracji rozstawu modularnego

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
Pokaż separator divi

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
Ustawienie linii Divi

zaklejania

Zmodyfikuj także rozmiar modułu.

  • Waga dzielnika: 2px
  • Szerokość: 20%
Rozmiary Divi

Dodaj moduł tekstowy # 3 do kolumny

Dodaj treść

Przejdźmy do kolejnego i ostatniego modułu tekstowego. Dodaj trochę treść do wyboru.

Kolumna tekstowa 3 divi

Klonowanie kolumny

Po wypełnieniu kolumny i wszystkich jej modułów możesz sklonować całą kolumnę.

Kolumna DIVI kolumna

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ń kolor cienia divi

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ń tło gradientu divi

Zmień granicę modułu tekstowego nr 1

Zmień także ustawienia granicy modułu.

  • Lewy górny, lewy dolny i prawy dolny: 100 pikseli
Zmodyfikuj obramowanie modułu divi text

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ń położenie tekstu divi

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ń kolor separatora divi

Zmień całą zawartość

Na koniec zmodyfikuj całą zawartość modułu w kolumnie 2.

Zmień zawartość modułu divi text

Sklonuj całą sekcję dwukrotnie

Po ukończeniu pierwszej sekcji możesz ją dwukrotnie sklonować.

Klonuj kolumny tyle razy, ile potrzeba

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)
Dostosuj odstępy między liniami DIVI

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
Skonfiguruj górny margines divi

Zmień całą zawartość

Na koniec zmodyfikuj całą zawartość modułu.

Edytuj całą zawartość divi

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 !

Zapisz w bibliotece Divi

badanie

Teraz, gdy przeszliśmy przez wszystkie kroki, przyjrzyjmy się ostatecznie, jak wygląda na różnych rozmiarach ekranu.

Podgląd projektu Divi

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.