Jak tworzyć piękne i wciągające sekcje z bohaterami postów na blogu za pomocą Divi

Za każdym razem, gdy pojawia się nowa aktualizacja, zwiększają się możliwości projektowania. Na przykład łączenie zawartości dynamicznej i opcji najechania może przynieść oszałamiające rezultaty. Aby to zademonstrować, pokażemy Ci, jak stworzyć 3 oszałamiające dynamiczne sekcje bohaterów postów na blogu, używając tylko wbudowanych opcji Divi. Poprowadzimy Cię krok po kroku przez każdy z przykładów, które zainspirują Cię również do stworzenia własnych odmian.

Weźmy się za to!

Zapowiedź

Zanim zagłębimy się w samouczek, spójrzmy na końcowy rezultat wszystkich trzech przykładów, które będziemy tworzyć.

Przykład 1

Przykład #2

Przykład #3

Dodaj nowy wpis na blogu

Opublikuj szczegóły

Najpierw zacznij od stworzenia nowego posta na blogu. Dodaj tytuł, wybraną kategorię i wyróżniony obraz. Gdy to zrobisz, włącz Divi Builder.

Ustawienia strony Divi

Przed przejściem do Visual Builder zmień ustawienia strony Divi w prawym górnym rogu nowego wpisu na blogu.

• Układ strony: Pełna szerokość
• Tytuł posta: Ukryj

Przełącz się na Visual Builder

Czas przejść do Visual Builder i zacząć tworzyć różne przykłady!

Tworzenie modułów

Dodaj nową sekcję + jednokolumnowy wiersz

Zanim przejdziemy do każdego z przykładów osobno, zaczniemy od utworzenia modułów tekstowych zawierających zawartość dynamiczną. We wszystkich trzech przykładach użyjemy tych gotowych modułów, aby zakończyć projekt. Po dodaniu nowej sekcji dodaj do niej nowy wiersz, korzystając z następującej struktury kolumn:

Moduł tekstowy tytułu posta

Wybierz dynamiczną zawartość tytułu posta

Pierwszy moduł dynamiczny, którego potrzebujemy, będzie zawierał tytuł posta. Dodaj nowy moduł tekstowy i wybierz Tytuł posta z listy zawartości dynamicznej.

Ustawienia tekstu

Następnie przejdź do ustawień tekstu i wprowadź zmiany.

• Czcionka tekstu: Lato
• Grubość czcionki tekstu: pogrubiona
• Kolor tekstu: #000000
• Rozmiar tekstu: 58px (komputer), 45px (tablet), 35px (telefon)
• Wysokość linii tekstu: 1em
• Orientacja tekstu: Środek

Rozstaw

Zmień również wartości odstępów.

• Margines dolny: 50px
• Górna wyściółka: 10px
• Dolna wyściółka: 10px

Moduł tekstowy daty publikacji postu

Wybierz zawartość dynamiczną z datą publikacji posta

Drugim modułem, którego będziemy potrzebować, jest moduł tekstowy zawierający datę publikacji posta. Śmiało, dodaj jeden i wybierz Data publikacji posta na dynamicznej liście treści.

Ustawienia tekstu

Następnie zmień ustawienia tekstu tego modułu.

• Grubość czcionki tekstu: Lekka
• Kolor tekstu: #000000
• Rozmiar tekstu: 30px (komputer), 20px (tablet), 16px (telefon)
• Odstępy między literami tekstu: 14px
• Orientacja tekstu: Środek

Rozstaw

Dodaj również dolny margines.

• Margines dolny: 50px

Moduł tekstowy kategorii postów

Wybierz kategorie Treści dynamiczne

Ostatnim modułem, który dodamy, jest moduł tekstowy zawierający dynamiczną zawartość kategorii postów.

Ustawienia tekstu

Przejdź do ustawień tekstu i zmień orientację tekstu.

• Orientacja tekstu: Środek

Ustawienia tekstu łącza

Następnie wprowadź pewne modyfikacje w ustawieniach tekstu łącza.

• Grubość czcionki łącza: Ultra Bold
• Styl czcionki łącza: wielkie litery
• Kolor tekstu łącza: #000000
• Rozmiar tekstu linku: 15px
• Odstępy między literami: 5px

Rozstaw

Następnie dodaj dolną wyściółkę.

• Dolna wyściółka: 20px

Granica

I wykończ subtelną dolną ramką.

• Szerokość dolnego obramowania: 1px
• Kolor dolnej krawędzi: #000000

Tworzenie przykładu #1

Dodaj nową sekcję

Rozstaw

Zacznijmy tworzyć pierwszy przykład! Tuż pod poprzednią sekcją, którą utworzyłeś, śmiało dodaj nową. Otwórz jego ustawienia i usuń wszystkie domyślne niestandardowe dopełnienie.

• Górna wyściółka: 0px
• Dolna wyściółka: 0px

Dodaj nowy wiersz

Struktura kolumny

Kontynuuj, dodając nowy wiersz o następującej strukturze kolumn:

Rozmiary

Otwórz ustawienia rozmiaru tego wiersza i zmień wszystko.

• Stwórz ten wiersz o pełnej szerokości: Tak
• Użyj niestandardowej szerokości rynny: Tak
• Szerokość rynny: 1
• Wyrównaj wysokości kolumn: Tak

Rozstaw

Następnie dodaj kilka niestandardowych wartości odstępów.

• Górna wyściółka: 0px
• Dolna wyściółka: 0px
• Górna wyściółka kolumny 2: 130px
• Dolna wyściółka kolumny 2: 130px
• Dopełnienie kolumny 2 po lewej stronie: 50px
• Kolumna 2 prawa dopełnienie: 50px

Dodaj moduł obrazu do kolumny 1

Wybierz polecaną zawartość dynamiczną obrazu

Kontynuuj, dodając moduł obrazu do pierwszej kolumny. Zamiast przesyłać obraz, połącz moduł z dynamicznym Polecanym obrazem.

Domyślne obramowanie

Dodajemy również prawą ramkę po najechaniu myszą. Aby to zrobić, najpierw wybierz następującą domyślną szerokość obramowania:

• Szerokość prawego obramowania: 0px

Granica zawisu

I dodaj następujące ustawienia po najechaniu kursorem:

• Szerokość prawego obramowania: 24px
• Kolor prawego obramowania: #FFFFFF

Domyślny cień pudełka

To samo dotyczy cienia pudełka, zastosuj następujące domyślne ustawienia cienia pudełka:

• Pozycja pionowa cienia pudełka: 0px
• Siła rozmycia cieni w pudełku: 0px
• Siła rozprzestrzeniania się cieni w pudełku: 80px
• Kolor cienia: rgba (255,255,255,0)

Pudełko na cień

I zmieniaj rzeczy po najechaniu:

• Pozycja pozioma cienia pudełka: 600px
• Pozycja pionowa cienia pudełka: 0px
• Siła rozmycia cieni w pudełku: 0px
• Siła rozprzestrzeniania się cieni w pudełku: 80px
• Kolor cienia: # E4BAC7

Przejścia

Aby stworzyć płynne przejście, zmień czas trwania przejścia w zakładce Zaawansowane.

• Czas trwania przejścia: 1200 ms

Umieść moduły dynamiczne w kolumnie 2

Jedyne, co pozostało do zrobienia, aby ukończyć ten przykład, to umieszczenie modułów, które stworzyliśmy w pierwszej części tego samouczka, w drugiej kolumnie.

Tworzenie przykładu #2

Dodaj nową sekcję

Domyślny górny dzielnik

Przechodząc do następnego! Dodaj nową sekcję z następującą górną przegrodą:

• Styl dzielnika: Znajdź na liście
• Kolor dzielnika: #FFFFFF
• Wysokość dzielnika: 50px
• Układ rozdzielający: nad zawartością sekcji

Górny dzielnik unoszący się

Zmień wysokość dzielnika po najechaniu kursorem.

• Wysokość dzielnika: 174px

Rozstaw

Usuń wszystkie niestandardowe dopełnienie następnej sekcji. Umożliwi to zderzenie rzędu i sekcji w jednym z następnych kroków.

• Górna wyściółka: 0px
• Dolna wyściółka: 0px

Przejścia

Aby utworzyć płynne przejście rozdzielające, zmień czas trwania przejścia w zakładce Zaawansowane.

• Czas trwania przejścia: 500 ms

Dodaj nowy wiersz

Struktura kolumny

Teraz śmiało dodaj wiersz do swojej sekcji, korzystając z następującej struktury kolumn:

Domyślny kolor tła

Dodaj do niego następujący kolor tła:

• Kolor tła: #FFFFFF

Kolor tła Hover

Zmień kolor tła po najechaniu myszą.

• Kolor tła: rgba (255,255,255,0,56)

Wyróżniony obraz Dynamiczny obraz tła

Prześlij wyróżniony obraz również jako dynamiczny obraz tła wiersza. Po wykonaniu tej czynności zmień mieszanie obrazu tła.

• Mieszanie obrazu tła: ekran

Rozmiary

Pozwól wierszowi zająć całą szerokość ekranu, zmieniając ustawienia rozmiaru.

• Stwórz ten wiersz o pełnej szerokości: Tak
• Użyj niestandardowej szerokości rynny: Tak
• Szerokość rynny: 1

Rozstaw

I dodaj kilka niestandardowych wartości odstępów.

• Górna wyściółka: 200px
• Dolna wyściółka: 200px
• Lewe wypełnienie: 100px (komputer), 50px (tablet), 20px (telefon)
• Prawe dopełnienie: 100px (komputer), 50px (tablet), 20px (telefon)

Przejścia

Na koniec utwórz płynne przejście, zmieniając czas trwania przejścia.

• Czas trwania przejścia: 700ms

Umieść moduły dynamiczne w kolumnie

Możesz teraz umieścić wszystkie moduły dynamiczne w kolumnie wiersza i gotowe!

Tworzenie przykładu nr 3

Dodaj nową sekcję

Wyróżniony obraz Dynamiczny obraz tła

Do ostatniego przykładu! Dodaj nową sekcję i wybierz wyróżniony obraz jako obraz tła sekcji.

Domyślne odstępy

Następnie usuń wszystkie domyślne niestandardowe dopełnienie sekcji.

• Górna wyściółka: 0px
• Dolna wyściółka: 0px

Odstępy Hover

Dodaj trochę niestandardowego marginesu po najechaniu kursorem, aby uzyskać efekt zmniejszania.

• Lewe wypełnienie: 150px (komputer), 50px (tablet), 30px (telefon)
• Prawe dopełnienie: 150px (komputer), 50px (tablet), 30px (telefon)

Przejścia

Zmień również czas trwania przejścia.

• Czas trwania przejścia: 500 ms

Dodaj nowy wiersz

Struktura kolumny

Po zakończeniu modyfikowania ustawień sekcji kontynuuj, dodając nowy wiersz o następującej strukturze kolumn:

Domyślny kolor tła

Dodaj następujący kolor tła:

• Kolor tła: #ffffff

Kolor tła Hover

Zmień kolor tła po najechaniu myszą.

• Kolor tła: rgba (255,255,255,0.46)

Tło gradientowe

Dodaj również promieniste tło gradientowe.

• Kolor 1: rgba (41,196,169,0)
• Kolor 2: #ffffff
• Typ gradientu: Promieniowy
• Pozycja startowa: 29%
• Pozycja końcowa: 29%

Rozmiary

Zmień ustawienia rozmiaru następnego wiersza.

• Stwórz ten wiersz o pełnej szerokości: Tak
• Użyj niestandardowej szerokości rynny: Tak
• Szerokość rynny: 1

Rozstaw

I dodaj kilka niestandardowych wartości dopełnienia.

• Górna wyściółka: 200px
• Dolna wyściółka: 200px
• Lewe wypełnienie: 100px (komputer), 50px (tablet), 20px (telefon)
• Prawe dopełnienie: 100px (komputer), 50px (tablet), 20px (telefon)

Przejścia

Na koniec zmień czas trwania przejścia, aby uzyskać płynne przejście.

• Czas trwania przejścia: 500 ms

Umieść moduły dynamiczne w kolumnie

Śmiało i umieść wszystkie gotowe moduły w kolumnie wiersza.

Zmień orientację tekstu wszystkich modułów

Jedyną rzeczą, którą musisz zmienić w tych modułach, jest orientacja tekstu i gotowe!

• Orientacja tekstu: w lewo

Zapowiedź

Teraz, gdy przeszliśmy przez wszystkie kroki, przyjrzyjmy się wszystkim trzem stworzonym przez nas przykładom.

Przykład 1

Przykład #2

Przykład #3

Końcowe przemyślenia

W tym poście pokazaliśmy, jak połączyć dynamiczną zawartość z opcjami najechania Divi, aby stworzyć oszałamiające sekcje bohaterów postów na blogu. Te przykłady niezaprzeczalnie zainspirują Cię do stworzenia własnych odmian i spersonalizowania posta na blogu, który tam zamieszczasz. Jeśli masz jakieś pytania lub sugestie, koniecznie zostaw komentarz w sekcji komentarzy poniżej!