Jak połączyć nagłówek i treść za pomocą modułu treści postów i dzielników sekcji Divi

Do tej pory wszyscy przyzwyczailiśmy się do wbudowanego dzielnika sekcji Divi. Pomagają dodać dodatkowy akcent do tworzonych przez nas stron internetowych. Służą również jako płynne przejście między dwiema różnymi sekcjami, ale w przypadku Theme Buildera Divi podejście do tworzenia tego przejścia jest nieco inne. W tym poście poprowadzimy Cię przez kroki, które musisz podjąć, aby się tam dostać. Będziesz mógł również bezpłatnie pobrać szablonowy plik JSON!

Weźmy się za to.

Zapowiedź

Zanim zagłębimy się w samouczek, rzućmy okiem na wyniki na różnych rozmiarach ekranu.

Pulpit

mobilny

Pobierz szablon strony podziału sekcji ZA DARMO

Aby położyć ręce na szablonie strony z bezpłatnym podziałem sekcji, musisz najpierw pobrać go za pomocą przycisku poniżej. Aby uzyskać dostęp do pobrania, musisz zapisać się na naszą listę e-mailową Divi Daily, korzystając z poniższego formularza. Jako nowy subskrybent otrzymasz jeszcze więcej dobroci Divi i darmowy pakiet Divi Layout w każdy poniedziałek! Jeśli jesteś już na liście, po prostu wpisz poniżej swój adres e-mail i kliknij pobierz. Nie będziesz „ponownie subskrybować” ani otrzymywać dodatkowych wiadomości e-mail.

Pobierz pliki

Pobierz za darmo

Dołącz do biuletynu Divi, a wyślemy Ci e-mailem kopię najlepszego pakietu układu strony docelowej Divi, a także mnóstwo innych niesamowitych i bezpłatnych zasobów, wskazówek i sztuczek Divi. Idź dalej, a w mgnieniu oka zostaniesz mistrzem Divi. Jeśli masz już subskrypcję, wpisz poniżej swój adres e-mail i kliknij Pobierz, aby uzyskać dostęp do pakietu układów.

POBIERANIE

Udało Ci się zasubskrybować. Sprawdź swój adres e-mail, aby potwierdzić subskrypcję i uzyskać dostęp do bezpłatnych cotygodniowych pakietów układów Divi!

Subskrybuj nasz kanał YouTube

1. Przejdź do kreatora motywów Divi i dodaj nowy szablon

Przejdź do kreatora motywów Divi

Zacznij od przejścia do Divi Theme Builder.

Dodaj nowy szablon dla stron

Tam utwórz nowy szablon, klikając ikonę plusa.

Wybierz „Wszystkie strony”, jeśli chcesz, aby efekt mieszania był stosowany na wszystkich Twoich stronach. Możesz sprawić, by ten sam efekt działał również w innych typach szablonów, ale musisz osobno uwzględnić górną część rozdzielającą w każdym z szablonów. Po utworzeniu nowego szablonu zacznij tworzyć niestandardowy nagłówek.

2. Zbuduj niestandardowy nagłówek

Ustawienia sekcji

Tło gradientowe

W edytorze szablonów zauważysz sekcję. Otwórz tę sekcję i dodaj do niej tło gradientowe.

• Kolor 1: #d13232
• Kolor 2: #fc6a3c

Rozstaw

Dodaj również niestandardową górną i dolną wyściółkę do sekcji.

• Górna wyściółka: 1vw (komputer stacjonarny), 2vw (tablet i telefon)
• Dolna wyściółka: 1vw (komputer stacjonarny), 2vw (tablet i telefon)

Indeks Z

Aby mieć pewność, że Twój nagłówek pozostaje na wierzchu całej treści, zwiększymy indeks z w ustawieniach widoczności.

• Indeks Z: 99999

Dodaj nowy wiersz

Struktura kolumny

Kontynuuj, dodając nowy wiersz do sekcji, korzystając z następującej struktury kolumn:

Rozmiary

Nie dodając jeszcze żadnych modułów, otwórz ustawienia wiersza i zmodyfikuj ustawienia rozmiaru w następujący sposób:

• Użyj niestandardowej szerokości rynny: Tak
• Szerokość rynny: 1
• Szerokość: 100%
• Maksymalna szerokość: 100%

Rozstaw

Usuń również całą górną i dolną wyściółkę.

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

Główny element

Na koniec wyśrodkuj zawartość kolumny i pozostaw kolumny obok siebie na mniejszych ekranach, dodając dwa pojedyncze wiersze kodu CSS do głównego elementu wiersza.

display: flex;
align-items: center;

Dodaj moduł obrazu do kolumny 1

Prześlij logo

Po skonfigurowaniu wszystkich ustawień sekcji i wierszy nadszedł czas na dodanie modułów, zaczynając od modułu obrazu w kolumnie 1. Prześlij logo z przezroczystym tłem.

Wyrównanie

Następnie przejdź do zakładki projektowania modułu i zmień wyrównanie obrazu.

• Wyrównanie obrazu: Środek

Rozmiary

Zmodyfikuj również szerokość modułu na różnych rozmiarach ekranu.

• Szerokość: 6vw (komputer stacjonarny), 13vw (tablet), 17vw (telefon)

Dodaj moduł menu do kolumny 2

Wybierz menu

W drugiej kolumnie potrzebujemy modułu menu. Wybierz wybrane menu.

Usuń kolor tła

Kontynuuj, usuwając kolor tła modułu.

Układ

Przejdź do zakładki projektu i zmień układ.

• Styl: wyrównany do lewej
• Menu rozwijane Kierunek: w dół

Tekst menu

Następnie odpowiednio dostosuj styl tekstu menu:

• Czcionka menu: Oswald
• Waga czcionki menu: lekka
• Styl czcionki menu: wielkie litery
• Kolor tekstu menu: #ffffff (komputer), #202332 (tablet i telefon)
• Rozmiar tekstu menu: 0,8vw (komputer), 2vw (tablet), 2,5vw (telefon)
• Odstępy między literami menu: 0.1vw

Menu rozwijane

Zmień kolor linii menu rozwijanego w ustawieniach menu rozwijanego.

• Kolor linii menu rozwijanego: #ffffff

Ikony

I uzupełnij ustawienia modułu, używając koloru ikony menu z białym hamburgerem.

• Kolor ikony menu Hamburger: #ffffff

Dodaj moduł przycisku do kolumny 3

Dodaj kopię

Do ostatniej kolumny! Tam jedynym modułem, którego będziemy potrzebować, jest moduł przycisku. Dodaj wybraną kopię.

Wyrównanie

Przejdź do zakładki projektu modułu i zmień wyrównanie przycisków.

• Wyrównanie przycisków: środek

Ustawienia przycisków

Kontynuuj, stylizując przycisk w ustawieniach przycisków.

• Użyj niestandardowych stylów dla przycisku: Tak
• Rozmiar tekstu przycisku: 0,6vw (komputer), 1vw (tablet), 1,5vw (telefon)
• Kolor tekstu przycisku: #000000
• Kolor tła przycisku: #FFFFFF
• Szerokość obramowania przycisku: 0px

• Promień obramowania przycisku: 100px
• Odstępy między przyciskami: 2px
• Czcionka przycisku: Otwórz Sans
• Waga czcionki przycisku: pogrubiona
• Styl czcionki przycisku: wielkie litery

Rozstaw

I uzupełnij ustawienia modułu, dodając niestandardowe wypełnienie na różnych rozmiarach ekranu.

• Wyściółka górna: 0,8vw (komputer stacjonarny), 1,6vw (tablet), 2,2vw (telefon)
• Dolna wyściółka: 0,8vw (komputer stacjonarny), 1,6vw (tablet), 2,2vw (telefon)
• Lewa wyściółka: 1,5vw (komputer stacjonarny), 2,5vw (tablet), 3,5vw (telefon)
• Prawa wyściółka: 1,5vw (komputer stacjonarny), 2,5vw (tablet), 3,5vw (telefon)

3. Zbuduj niestandardowe nadwozie i dodaj górny rozdzielacz

Po ukończeniu niestandardowego nagłówka szablonu zacznij tworzyć niestandardową treść.

Ustawienia sekcji

Górny rozdzielacz

Znowu zauważysz sekcję na stronie. Otwórz tę sekcję i dodaj do niej górną przegrodę.

• Styl dzielnika: Znajdź na liście
• Kolor dzielnika: #fc6a3c
• Wysokość dzielnika: 6vw
• Powtarzanie poziome dzielnika: 15x
• Przerzucanie dzielnika: Pionowy
• Układ rozdzielający: na górze treści sekcji

Rozstaw

Przejdź do zakładki projektu sekcji i usuń wszystkie domyślne górne i dolne wyściółki.

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

Dodaj nowy wiersz

Struktura kolumny

Kontynuuj, dodając nowy wiersz do sekcji, korzystając z następującej struktury kolumn:

Rozmiary

Otwórz ustawienia wiersza i zmień ustawienia rozmiaru w następujący sposób:

• Użyj niestandardowej szerokości rynny: Tak
• Szerokość rynny: 1
• Szerokość: 100%
• Maksymalna szerokość: 100%

Rozstaw

Usuń również wszystkie domyślne górne i dolne wyściółki.

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

Dodaj moduł treści posta do kolumny

Teraz, aby wyświetlić całą zawartość strony, musisz dodać moduł treści posta do swojego wiersza. Ten moduł reprezentuje układ, który zbudowałeś wewnątrz samej strony za pomocą Divi. Jeśli dodajesz to przejście do strony produktu, na przykład szablonu, w którym zaangażowana jest zawartość dynamiczna, ma miejsce inne podejście. Jedyną ważną rzeczą do zapamiętania jest to, że będziesz musiał dodać górną przegrodę do pierwszej sekcji ciała szablonu. Upewnij się, że kolor dzielnika jest taki sam, jak kolor tła globalnego nagłówka.

3. Zapisz zmiany Konstruktora i zobacz wyniki

Po ukończeniu treści szablonu możesz zapisać zmiany i wyświetlić wynik w swojej witrynie!

Zapowiedź

Teraz, gdy przeszliśmy przez wszystkie kroki, przyjrzyjmy się ostatecznemu wynikowi na różnych rozmiarach ekranu.

Pulpit

mobilny

Końcowe przemyślenia

W tym poście pokazaliśmy, jak połączyć nagłówek i treść szablonu za pomocą dzielników sekcji Divi i modułu treści posta. Przejście rozdzielające natychmiast dotyczy wszystkich Twoich stron. Udało Ci się również pobrać plik JSON za darmo! Jeśli masz jakieś pytania lub sugestie, możesz zostawić komentarz w sekcji komentarzy poniżej.

Jeśli chcesz dowiedzieć się więcej o Divi i zdobyć więcej gratisów Divi, zasubskrybuj nasz biuletyn e-mailowy i kanał YouTube, dzięki czemu zawsze będziesz jedną z pierwszych osób, które poznają i będą czerpać korzyści z tych bezpłatnych treści.