Divi: Jak dodać sekcję Hero do posta na blogu

Chcesz ulepszyć swoje wpisy na blogu? Divi dodając do niego sekcję Hero?

Pełnoekranowe sekcje bohaterów świetnie wyglądają na każdej stronie internetowej, ale szczególnie dobrze sprawdzają się w postach na blogu. 

Mimo że wyróżniony obraz jest wyświetlany na pełnym ekranie, istnieje wiele opcji projektowania dotyczących umieszczania tytułu i metatekstu. Łatwo to zrobić z Kreator motywów Divi . 

W tym artykule zobaczymy kilka sposobów dodania pełnoekranowej sekcji Bohater do szablonu posta na blogu. Divi.

Zacznijmy.

badanie

Oto podgląd tego, co będziemy projektować w tym samouczku.

Czytaj także: Divi: Jak korzystać z „Konstruktora gradientów”, aby upiększyć swoje obrazy

Sekcja Hero z modułem Post Title w wersji Desktop

Sekcja Bohater z modułem wersji mobilnej tytułu posta

Układ sekcji Alternatywny bohater z modułem wersji tytułowej posta na komputer

Pobierz DIVI teraz !!!

Układ sekcji Alternatywny bohater z mobilnym modułem tytułu posta

Sekcja bohatera z metadanymi Wersja na komputer

Sekcja bohatera z wersją mobilną metadanych

Pobierz DIVI teraz !!!

Szablony postów na blogu dla Twojej sekcji pełnoekranowego bohatera

Możesz utworzyć szablon postów na blogu w Divi Theme Builder od podstaw lub pobierz szablon z bloga Elegant Themes. Aby je znaleźć, przeszukaj bloga „bezpłatny szablon posta na blogu”. Jeśli pobierasz szablon, pamiętaj, aby go rozpakować.

W naszych przykładach użyjemy  darmowy szablon posta na blogu dla pakietu Divi's Fashion Designer Layout . Używamy również pakietu układu wolny Projektant mody nagłówków i stopek .

Pobierz lub utwórz szablon posta na blogu dla pełnoekranowej sekcji Bohater

Możesz pobrać szablon posta na blogu lub utworzyć go od podstaw. Prześlemy jeden, ale proces tworzenia pełnoekranowej sekcji bohaterów jest taki sam.

Zobacz też: Divi: Jak używać masek i wzorów tła w sekcji bohaterów

Metoda 1: Moduł tytułu pełnoekranowego posta

Ta metoda użyje Moduł PostTitle . To dobry wybór, jeśli chcesz wyświetlić wszystkie informacje razem. Gdy masz już szablon, wybierz ikonę edycji, aby go otworzyć.

Przesłany przez nas szablon zawiera sekcję z polecanym obrazem. Usuniemy tę sekcję i dodamy Sekcja o pełnej szerokości Na swoim miejscu.

wybierać Tytuł posta o pełnej szerokości na liście modułów o pełnej szerokości.

Domyślnie zaznaczone są wszystkie elementy. Pozostaw je włączone. Przewiń do Polecane umieszczenie obrazu i wybierz Powyżej tytułu.

• Umieszczenie wyróżnionego obrazu: nad tytułem

Przewiń do Kolor tła i ustaw kolor na #fff9f2

• Tło: #fff9f2

Tekst tytułu

Wybierz zakładkę Projekt. Jako tekst tytułu zachowaj H1 i wybierz Playfair Display. Ustaw go na wyrównanie do lewej i wybierz kolor #34332e.

• Tytuł:
  • Poziom nagłówka: H1
  • Czcionka: Wyświetlacz Playfair
  • Wyrównanie tekstu: wyrównanie do lewej
  • Kolor tekstu: #34332e

Do rozmiar czcionki , ustaw wersję komputerową na 65 pikseli, wersję mobilną na 42 piksele, a wysokość wiersza na 1,2 em.

• Rozmiar tekstu tytułu (komputer stacjonarny): 65 pikseli (komputer stacjonarny), 42 piksele (telefon)
• Wysokość wiersza tytułu: 1,2 em

Meta tekst

Przewiń do Meta tekst. Wybierz czcionkę Montserrat i ustaw średnie, duże litery, wyrównanie do prawej dla wersji komputerowej i wyrównanie do lewej dla wersji mobilnej. Wybierz kolor #7b7975.

• MetaCzcionka:
  • Czcionka: Montserrat
  • Waga: średnia
  • Styl: TT
• Metatekst:
  • Wyrównanie: do prawej (komputer stacjonarny), do lewej (telefon)
  • Kolor: #7b7975

Zdefiniuj rozmiar czcionki dla wersji desktopowej 14 px, dla wersji mobilnej 10 px, odstęp między literami 1 px i wysokość linii 1,6 em. Zamknij ustawienia i zapisz szablon.

• Metatekst:
  • Rozmiar (komputer stacjonarny): 14 pikseli
  • Rozmiar (telefon): 10 pikseli
• Odstępy między literami: 1px
• Wysokość linii: 1,6 em

Tytuł na obrazie tła

Jeśli zdecydujesz, że chcesz, aby tytuł pojawił się na wyróżnionym obrazie, użyj tych samych ustawień projektu i wróć do zakładki Treść. 

wybierać Obraz tła tytułu/meta dla Polecane umieszczenie obrazu.

• Polecane umieszczenie obrazu: tytuł/meta obraz tła

Przewiń do Tło i wybierz Gradient tła. Ustaw lewy kolor na #fff9f2, prawy kolor na rgba(255,255,255,0), kierunek na 90 stopni, pozycję początkową na 30% i wybierz tak, aby umieścić gradient nad obrazem tła. Zamknij i zapisz ustawienia.

• Gradient zatrzymuje się:
  • 30%: #fff9f2
  • 100%: rgba (255,255,255,0)
• Kierunek gradientu: 90 st
• Kwadratowy gradient nad obrazem tła : TAK

Metoda 2: Pełnoekranowa sekcja bohatera z metadanymi

Ta metoda użyje modułów tekstowych z zawartość dynamiczna dla informacji. Jest to dobra opcja, jeśli chcesz wyświetlić wszystkie elementy w różnych miejscach. 

Najpierw pobierz szablon i usuń pierwszą sekcję. Odtworzymy moduły i ich ustawienia w lewej kolumnie, ale przejdziemy przez nie, abyś mógł je skonfigurować.

Ustawienia sekcji bohatera pełnoekranowego z metadanymi

Otwórz ustawienia Sekcja i przewiń do Zdjęcie w tle. Wybierz Gradient tła i zmień ustawienia w następujący sposób:

• Gradient zatrzymuje się:
  • 30%: #fff9f2
  • 100%: rgba (255,255,255,0)
• Kierunek gradientu: 90 stopni
• Kwadratowy gradient nad obrazem tła : TAK

wybierać Zdjęcie w tle i wybierz opcję Użyj zawartości dynamicznej.

Wybierać Prześlij zdjęcia w opcjach.

Wybierz zakładkę Wnętrzei przewiń do Dobór. Dodaj 100vh do minimalnej wysokości. Zamknij ustawienia sekcji.

• Minimalna wysokość: 100vh

Ustawienia sekcji bohatera pełnoekranowego z metadanymi

Następnie dodaj wiersz podwójnej kolumny do sekcji.

Dodać Moduł tekstowy w prawej kolumnie.

Dla jego treść, wybierz Użyj zawartości dynamicznej.

Wybierać Tytuł posta/archiwum na liście opcji.

• Treść dynamiczna: tytuł wpisu/archiwum

Przejdź do zakładki Projekt.

• Nagłówek:
  • Tekst: H1
  • Czcionka: Wyświetlacz Playfair
  • Wyrównanie tekstu: wyrównanie do lewej
  • Kolor tekstu: #34332e

dla rozmiaru Teksty , ustaw dla wersji desktopowej na 65px, dla wersji mobilnej na 42px i wysokość wiersza na 1,2em.

• Nagłówek:
  • Rozmiar tekstu: 65px (komputer stacjonarny), 42px (telefon)
  • Wysokość linii: 1,2 em

Przewiń do Rozstaw i wprowadź 50% dla wypełnienia górnego. Zamknij ustawienia.

• Wypełnienie: 50% (góra)

Możesz także przeczytać ten artykuł na: Jak utworzyć sekcję bohatera za pomocą modułu nagłówka o pełnej szerokości Divi?

Sekcja bohatera z kategorią metadanych

Dodaj nową sekcję regularnie w sekcji Hero.

Otwórz jego ustawienia i ustaw kolor tło na #fff9f2. Zamknij ustawienia.

• Kolor tła: #fff9f2

Następnie dodaj linia z 4 kolumn do nowej sekcji.

Pełnoekranowy bohater z tekstem kategorii metadanych

Dodać Moduł tekstowy w lewej kolumnie.

Otwórz ustawienia modułu i wybierz Użyj zawartości dynamicznej dla treści tekstu.

wybierać Kategorie z przeszłości na liście.

• Zawartość dynamiczna: kategorie postów

Wybierz zakładkę Wnętrze i przewiń w dół do pozycji Tekst nagłówka. Wybierz H4. Wybierz czcionkę Playfair Display i ustaw ją na średnie, wielkie litery, wyrównanie do prawej dla wersji komputerowej i wyrównanie do lewej dla wersji na telefon. Wybierz kolor #7b7975.

• Nagłówek:
  • Wyświetlanie tekstu
  • Czcionka: Wyświetlacz Playfair
  • Grubość czcionki: Średnia
  • Styl: TT
  • Wyrównanie tekstu: do środka
  • Kolor tekstu: #7b7975

Ustaw rozmiar czcionki dla wersji desktopowej na 14 px, dla wersji mobilnej na 10 px, odstęp między literami na 1 px i wysokość linii na 1,6 em. Zamknij ustawienia i zapisz szablon.

• Pozycja 4:
  • Rozmiar (komputer stacjonarny): 14 pikseli
  • Rozmiar (telefon): 10 pikseli
  • Odstępy między literami: 1px
  • Wysokość linii: 1,6 em

Przewiń do Rozstaw i dodaj 0px do dolnego marginesu. Zamknij ustawienia.

• Margines (dolny): 0px

Pełnoekranowa sekcja Bohater z metadanymi Meta Text

Następnie skopiuj moduł Kategoria i przeciągnij go do następnej kolumny. Każdy z modułów Meta ma takie same ustawienia. Pokażemy, jak utworzyć pierwszy moduł, a następnie skopiujemy go dwukrotnie, aby utworzyć inne moduły.

Autor

Otwórz ustawienia i usuń plik treść dynamiczny.

Kliknij Użyj zawartości dynamicznej i wybierz Autor postu.

• Treść dynamiczna: Autor postu

w zakładce Wnętrze, Zmień następujące ustawienia. 

• Pozycja 4:
• Czcionka: Montserrat
• Grubość czcionki: Średnia
• Styl: TT
• Wyrównanie tekstu (komputer stacjonarny): środek
• Wyrównanie tekstu (telefon): do lewej
• Kolor: #7b7975

Parametry rozmiar czcionki zawierać:

• Rozmiar tekstu: 14 pikseli (komputer stacjonarny), 10 pikseli (telefon)
• Odstępy między literami: 1px
• Wysokość linii: 1,6 em

La dolny margines musi mieć 0px.

• Margines (dolny): 0px

Data

kopia moduł Author i przeciągnij go do następnej kolumny.

Usuń to treść dynamique aktualny, wybierz Użyj zawartości dynamicznej i wybierz Data publikacji posta. Zamknij ustawienia.

• Treść dynamiczna: data publikacji po publikacji

commentaires

Wreszcie kopia moduł Post Publish Date i przeciągnij go do ostatniej kolumny.

Podobnie jak w przypadku innych modułów, usuń zawartość dynamiczną i wybierz Użyj zawartości dynamicznej .

Wybierać Liczba komentarzy do postów od twoich wyborów.

• Treść dynamiczna: liczba komentarzy do postów

Tym razem dodaj spację i słowo Komentarze w polu Po . Zamknij mały moduł, a następnie zamknij ustawienia. Zapisz swoją pracę.

• Po: Komentarze

Czytaj także: Divi: Jak wyświetlić moduł nagłówka o pełnej szerokości na pełnym ekranie?

Résultats

Sekcja Hero z modułem Post Title w wersji Desktop

Sekcja Bohater z modułem wersji mobilnej tytułu posta

Układ sekcji Alternatywny bohater z modułem wersji tytułowej posta na komputer

Układ sekcji Alternatywny bohater z mobilnym modułem tytułu posta

Sekcja bohatera z metadanymi Wersja na komputer

Sekcja bohatera z metadanymi wersji mobilnej

Pobierz DIVI teraz !!!

Wnioski

To wszystko! Oto nasze spojrzenie na to, jak dodać pełnoekranową sekcję Bohater do szablonu posta na blogu. Divi. 

Moduły Divi i Theme Builder oferują kilka opcji tworzenia pełnoekranowych sekcji Bohaterów. Wszystkie metody działają bardzo dobrze i wszystkie mają swoje zalety. 

Korzystając z tych metod, możesz dodać pełnoekranową sekcję Hero do dowolnego szablonu posta na blogu Divi.

Mamy nadzieję, że ten samouczek zainspiruje Cię do kolejnych projektów Divi. Jeśli masz jakiekolwiek wątpliwości lub sugestie, znajdź nas w sekcja komentarzy przedyskutować to.

Możesz również skonsultować nasze zasoby, jeśli potrzebujesz więcej elementów do realizacji swoich projektów tworzenia stron internetowych.

Nie wahaj się również skonsultować z naszym przewodnikiem na temat Tworzenie bloga WordPress lub ten na Divi: najlepszy motyw WordPress wszechczasów.

Ale w międzyczasie udostępnij ten artykuł w różnych sieciach społecznościowych.

...