4 wspaniałe przykłady modułu Divi's Post Title i jak je osiągnąć

Dla wszystkich blogerów Divi, którzy szukają nowych sposobów angażowania ludzi w swoje posty na blogu, moduł Divi Post Title to świetne miejsce na rozpoczęcie. Moduł tytułu posta umożliwia stylizowanie tytułu posta (i wyróżnionego obrazu) na różne sposoby, aby uzyskać niezliczone oszałamiające projekty. Dzięki temu możesz tworzyć piękne artykuły, które od pierwszego spojrzenia przyciągają potencjalnych czytelników. Dzisiaj pokażę Ci cztery wspaniałe sposoby, w jakie możesz stylizować moduł tytułu Divi Post, aby pomóc przyciągnąć czytelników.

Zacznijmy!

zapowiedź

Oto krótki rzut oka na projekty modułów tytułów postów przedstawione w tym samouczku.

#1 Abstrakcyjne kadrowanie

Rozpocznij budowę #1

#2 Nakładający się tekst i wyróżniony obraz

Rozpocznij budowę #2

#3 Unikalne tła treści zapewniające czytelność

Rozpocznij budowę #3

#4 Efekt układania z dwoma polecanymi obrazami

Rozpocznij budowę #4

Pierwsze kroki

Subskrybuj nasz kanał YouTube

Wszystko, czego naprawdę potrzebujesz do tego samouczka, to Divi. Będziemy tworzyć nowe posty i używać Divi Builder do tworzenia projektów tytułów postów. Potrzebujesz również kilku obrazów, które będą służyć jako polecane obrazy.

Konfiguracja nowych postów

W tym samouczku będę używać Divi Builder do tworzenia przykładowych projektów tytułów postów w nowym poście. Aby uzyskać konfigurację kompilacji z tego samouczka, musisz wykonać następujące czynności:

1. Utwórz nowy post.
2. Dodaj tytuł do swojego posta.
3. Dodaj wyróżniony obraz do swojego posta.
4. Wdróż Konstruktora Divi.
5. Wybierz budowanie od podstaw
6. w obszarze Ustawienia strony Divi wybierz układ strony Bez paska bocznego i wybierz opcję Ukryj tytuł posta.
7. Następnie kliknij kompiluj w interfejsie lub wdróż tryb widoku pulpitu na zapleczu, aby można było wizualnie zaprojektować stronę.

Od Ciebie zależy, czy chcesz utworzyć nowy post dla każdego projektu, czy po prostu dodać wiele projektów tytułów postów do jednego posta. Pamiętaj tylko, że jeśli dodasz wiele tytułów postów w jednym poście, odziedziczą one ten sam tytuł strony i polecany obraz.

#1 Abstrakcyjne kadrowanie

Ten przejrzysty projekt tytułu posta zawiera subtelne, abstrakcyjne elementy ramek, które będą dobrze działać z polecanym obrazem i tytułem posta. Efekt kadrowania jest tworzony przy użyciu niestandardowych stylów obramowania i cienia ramki.

Oto jak to zrobić.

Upewnij się, że ustawiłeś nowy post zgodnie z opisem na początku tego artykułu (Dodaj tytuł, Polecany obraz, Brak układu strony na pasku bocznym, ukryj domyślny tytuł posta). Dodaj do posta nową sekcję z jednokolumnowym wierszem. Następnie dodaj moduł tytułu posta do wiersza.

W ustawieniach tytułu posta ustaw pozycję wyróżnionego obrazu w następujący sposób:

Polecane położenie obrazu: nad tytułem

Następnie zaktualizuj dodaj gradient tła, aby dodać mały abstrakcyjny element projektu w prawym dolnym rogu modułu.

Kolor lewego gradientu tła: rgba (0,0,0,0,06)
Prawy kolor gradientu tła: rgba (0,0,0,0)
Typ gradientu: Promieniowy
Kierunek promieniowy: dolny prawy
Pozycja startowa: 10%
Pozycja końcowa: 0%

Kontynuuj aktualizację reszty projektu w następujący sposób:

Czcionka tytułu: Josefin Sans
Wyrównanie tekstu tytułu: do prawej
Rozmiar tekstu tytułu: 36px
Wysokość wiersza tytułu: 1,7 metra (komputer), 1,3 metra (tablet i smartfon)
Meta Czcionka: Josefin Sans
Meta styl czcionki: TT
Wyrównanie metatekstu: do lewej
Meta odstępy między literami: 2px
Wysokość linii Meta: 2em
Margines niestandardowy: -5vw góra
Niestandardowe dopełnienie: 5vw góra, 5vw dół, 5vw lewo, 5vw prawo
Szerokość prawego obramowania: 4px

Margines -5vw wyciąga moduł poza wiersz, aby prawa krawędź znalazła się nad lewą krawędzią, którą dodamy do wiersza.

Teraz dodajmy abstrakcyjny element projektu za pomocą cienia pudełka:

Cień pudełka: patrz zrzut ekranu
Pozycja pozioma cienia pudełka: 112px
Pozycja pionowa cienia pudełka: 85px
Siła rozprzestrzeniania się cieni w pudełku: -80px
Kolor cienia: rgba (224,43,32,0.3)

Zapisz ustawienia.

Teraz otwórz ustawienia wiersza, aby zmienić jego rozmiar i utwórz lewą stronę projektu ramki za pomocą obramowania i cienia pola.

Szerokość niestandardowa: 700px
Szerokość prawego obramowania: 4px

Cień pudełka: patrz zrzut ekranu
Pozycja pozioma cienia pudełka: 112px
Pozycja pionowa cienia pudełka: 85px
Siła rozprzestrzeniania się cieni w pudełku: -80px
Kolor cienia: rgba (224,43,32,0.3)

Sprawdźmy teraz ostateczny projekt.

#2 Nakładający się tekst i wyróżniony obraz

Utwórz nową sekcję z wierszem w dwóch kolumnach. Następnie dodaj moduł obrazu w lewej kolumnie.

Będzie to służyć jako nasz polecany obraz z dynamiczną zawartością. Otwórz ustawienia obrazu i usuń próbny obraz, a następnie kliknij ikonę zawartości dynamicznej w prawym górnym rogu pola podglądu obrazu. Następnie wybierz Polecany obraz z listy, aby dodać wyróżniony obraz do strony.

Teraz dodaj moduł tytułu posta do prawej kolumny. Otwórz ustawienia i ukryj wyróżniony obraz, ustawiając opcję Pokaż wyróżniony obraz na NIE.

Następnie dodaj gradient tła do modułu tytułu posta.

Kolor lewego gradientu tła: #ffffff
Prawy gradient tła: rgba (255,255,255,0)

Stanie się to widoczne, gdy dodamy trochę ujemnego marginesu, aby nałożyć obraz.

Zaktualizuj resztę projektu w następujący sposób:

Czcionka tytułu: Fira Sans Condensed
Grubość czcionki tytułu: Ultra Light
Rozmiar tekstu tytułu: 80px (komputer), 70px (tablet), 45px (smartfon)
Meta Czcionka: Fira Sans Condensed
Meta styl czcionki: TT
Meta Wyrównanie tekstu: w prawo
Kolor tekstu meta: #cccccc
Meta odstępy między literami: 2px
Margines niestandardowy: pozostało -20% (komputer), 0% (tablet i smartfon)
Niestandardowe dopełnienie: 5vw góra, 5vw dół, 30px w lewo

Teraz nadajmy mu cień prostokątny, aby utworzyć linię pod tytułem.

Cień pudełka: patrz zrzut ekranu
Pozycja pozioma cienia pudełka: 80px
Pozycja pionowa cienia pudełka: 82px
Siła rozprzestrzeniania się cieni w pudełku: -80px

Zapisz ustawienie i otwórz ustawienia rzędu, aby dostosować szerokość rynny.

Szerokość rynny: 1
Wyrównaj wysokości kolumn: TAK

Teraz sprawdź ostateczny projekt.

Alternatywny zaokrąglony projekt obrazu

Wystarczy kilka drobnych poprawek, aby wyróżniony obraz był okrągły i wyreguluj kafelek postu, aby był wyśrodkowany w pionie. Aby to zrobić, otwórz ustawienia obrazu i zaktualizuj następujące elementy:

Zaokrąglone rogi: 50%

Następnie otwórz ustawienia wiersza i dodaj następujący niestandardowy kod CSS w elemencie głównym:

align-items: center;

Działa to tylko wtedy, gdy masz ustawione wyrównanie wysokości kolumn na TAK, co aktywuje właściwość flex, pozwalającą nam wyrównać elementy w pionie.

Oto ostateczny projekt.

#3 Unikalne tła treści zapewniające czytelność

Ten projekt tytułu posta zawiera gradienty tła, dzięki czemu tytuł i metatekst są bardziej czytelne z wyróżnionym tłem obrazu.

Oto jak to zrobić.

Utwórz nową sekcję z jednokolumnowym wierszem. Następnie dodaj moduł tytułu posta do wiersza.

Następnie zaktualizuj ustawienia modułu tytułu posta, aby ukryć polecany obraz.

Czcionka tytułu: Abril Fatface
Kolor tekstu tytułu: #121212
Rozmiar tekstu tytułu: 75px (komputer), 50px (tablet), 30px (smartfon)
Odstępy między literami tytułu: 2px
Wysokość wiersza tytułu: 1,1 em
Meta Czcionka: Roboto Condensed
Kolor tekstu meta: #ffffff
Rozmiar tekstu meta: 16px
Meta odstępy między literami: 2px
Wysokość linii Meta: 2em
Szerokość: 60% (komputer), 90% (tablet), 100% (smartfon)
Niestandardowe wypełnienie: pozostało 3vw

Teraz dodajmy cień pudełka, który posłuży jako tło do metatekstu i sprawi, że będzie on czytelny.

Cień pudełka: patrz zrzut ekranu
Pozycja pozioma cienia pudełka: 0px
Pozycja pionowa cienia pudełka: -32px
Kolor cienia pudełka: #121212

Teraz dodamy nasz wyróżniony obraz do tła sekcji za pomocą zawartości dynamicznej. Otwórz ustawienia sekcji i kliknij ikonę zawartości dynamicznej w prawym górnym rogu pola podglądu obrazu tła. Następnie wybierz wyróżniony obraz z listy, aby dodać wyróżniony obraz do sekcji.

Teraz dodajmy nasz gradientowy element tła, aby tekst tytułu posta był bardziej czytelny. Po prostu kliknij kartę gradientu i zaktualizuj następujące elementy:

Kolor lewego gradientu tła: rgba (255,255,255,0.76)
Prawy gradient tła: rgba (255,255,255,0)
Typ gradientu: Promieniowy
Kierunek promieniowy: górny lewy
Pozycja startowa: 40%
Pozycja końcowa: 0%
Umieść gradient nad obrazem tła: TAK

Zobaczmy teraz ostateczny projekt.

#4 Efekt układania z dwoma polecanymi obrazami

Ten projekt zawiera pewne cienie prostokątne, aby uzyskać efekt ułożenia elementów tworzących moduł tytułu posta i tło sekcji. Wykorzystuje również dwie wersje przedstawionego obrazu (dynamicznie) dla unikalnego elementu projektu.

Oto jak to zrobić.

Utwórz nową sekcję z jednokolumnowym wierszem. Następnie dodaj moduł postu do wiersza i zaktualizuj umiejscowienie polecanego obrazu do tytułu/meta obrazu tła.

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

Kolor tekstu: jasny
Kolor tła tekstu: rgba (1,59,104,0.79)
Orientacja tekstu: środek
Czcionka tytułu: Roboto Condensed
Grubość czcionki tytułu: lekka
Rozmiar tekstu tytułu 70px (komputer), 50px (tablet), 30px (smartfon)
Wysokość wiersza tytułu: 1,3 em
Waga czcionki Meta: lekka
Meta styl czcionki: TT
Kolor tekstu meta: #cccccc
Meta odstępy między literami: 1px
Niestandardowe wypełnienie: góra 10vw, dół 0px

Teraz dodajmy nasz pierwszy cień do pudełka, aby utworzyć naszą pierwszą warstwę układania.

Cień pudełka: patrz zrzut ekranu
Pozycja pozioma cienia pudełka: 0px
Pozycja pionowa cienia pudełka: -46px
Kolor cienia: #ffffff

Widać, że służy to również jako kreatywny sposób na podzielenie tytułu i tekstu meta.

Teraz zapisz ustawienia i otwórz ustawienia sekcji. Dodaj wyróżniony obraz do tła jako zawartość dynamiczną. Następnie dodaj gradient w następujący sposób:

Kolor lewego gradientu tła: rgba (1,59,104,0.79)
Gradient tła Prawy kolor: rgba (1,59,104,0,79)
Umieść gradient nad obrazem tła: TAK

Ten dodatkowy projekt tła z wyróżnionym obrazem to wyjątkowy sposób na nadanie tytułowi posta unikalnego projektu, który będzie się dynamicznie zmieniał wraz z każdym nowym wyróżnionym obrazem.

Następnie dodaj niestandardowe wypełnienie.

Niestandardowe wypełnienie (komputer): 10vw góra, 0px dół
Niestandardowe wypełnienie (smartfon): 0vw na górze, 0px na dole

Następnie dodaj kolejny cień pudełka, aby kontynuować efekt układania.

Cień pudełka: patrz zrzut ekranu
Pozycja pozioma cienia pudełka: 0px
Pozycja pionowa cienia pudełka: -92px
Kolor cienia: #ffffff

Aby zakończyć projekt, otwórz ustawienia wiersza i zaktualizuj następujące elementy:

Ustaw pełną szerokość tego wiersza: TAK
Szerokość rynny: 1
Niestandardowe wypełnienie (komputer): 0px na górze, 0px na dole, 6% po lewej, 6% po prawej
Niestandardowe dopełnienie (smartfon: 0px na górze, 0px na dole, 0% po lewej, 0% po prawej)

Teraz sprawdź ostateczny projekt.

Końcowe przemyślenia

Dzięki tym projektom tytułów postów powinieneś dobrze zrozumieć, co jest możliwe dzięki modułowi tytułów postów Divi i Divi Builder. Dzięki zaledwie kilku poprawkom projektowym, w połączeniu z mocą dynamicznej zawartości dla polecanych obrazów, możesz tworzyć niezliczone unikalne style tytułów postów dla swoich postów na blogu. Jeśli już, mam nadzieję, że zainspirują Cię one do samodzielnego tworzenia wspaniałych tytułów postów.

Aby uzyskać więcej powiązanych inspiracji projektowych, zapoznaj się z naszym postem na blogu, w którym znajdziesz piękne i wciągające dynamiczne sekcje bohaterów postów na blogu oraz sekret projektowania uszkodzonych układów siatki w Divi.

Czekam na kontakt z Państwem w komentarzach.

Pozdrawiam!