Jak korzystać z funkcji dynamicznej zawartości Divi, aby zaprojektować dynamiczny układ postu

Nowa funkcja Dynamic Content Divi daje nam możliwość tworzenia dynamicznych układów dla postów na blogu (i nie tylko). I są dobre powody, dla których możesz to rozważyć. Jednym z powodów jest projekt. Możesz zaprojektować niesamowite układy postów za pomocą Divi za pomocą kreatora wizualnego, zwłaszcza gdy używasz gotowych układów dostępnych jako punkt wyjścia. Innym powodem jest wygoda. Po zaprojektowaniu układu posta z wszystkimi dynamicznymi elementami treści (takimi jak kategorie, polecane obrazy, tagi postów, pola niestandardowe itp.) proces tworzenia i aktualizowania postów na blogu jest znacznie uproszczony. Poza rzeczywistą treścią posta wszystkie inne dane posta można aktualizować bez konieczności wdrażania wizualnego konstruktora.

W tym samouczku pokażę, jak zbudować dynamiczny układ postów w Divi. Zaczynając od gotowego układu, przeprowadzę Cię przez proces dodawania dynamicznej zawartości w całym układzie, a następnie zaprojektowania tej zawartości tak, aby pasowała. Przedstawię nawet prosty sposób używania pól niestandardowych jako zawartości dynamicznej.

Zacznijmy.

zapowiedź

Czego potrzebujesz, aby zacząć

Do tego samouczka potrzebne będą:

• Motyw Divi
• Pakiet układu osobistego trenera. Ten pakiet układu jest dostępny z Divi Builder. Będziemy używać układu strony usług osobistego trenera, aby rozpocząć projektowanie układu naszego postu.

Pokażę Ci również, jak skorzystać z niestandardowych pól, aby zbudować wyróżnioną sekcję treningu za pomocą funkcji niestandardowego typu postu. Pola niestandardowe są wbudowane w WordPress i nie wymagają dodatkowych wtyczek ani niczego. Więc masz już to, czego potrzebujesz.

Część 1: Dodawanie gotowego układu do postu

Aby rozpocząć, śmiało utwórz nowy post (nie stronę), nadaj mu tytuł, a następnie kliknij przycisk Użyj Divi Builder. Nie wdrażaj jeszcze wizualnego kreatora, ponieważ najpierw musimy dostosować nasze ustawienia postów z domyślnego ekranu edytora WordPress.

Ponieważ chcemy dodać nasz gotowy układ, aby pobrać nasze obrazy z układu (potrzebujemy go do naszego polecanego obrazu). Kliknij przycisk Załaduj układ znajdujący się w menu Divi Builder.

Z wyskakującego okienka Wczytaj z biblioteki wybierz układ strony usługi osobistego trenera i umieść go w swoim poście, klikając przycisk „Użyj tego układu”.

Następnie opublikuj swój post, aby zapisać swoje ustawienia.

Część 2: Aktualizowanie ustawień strony Divi, metadanych postu i wyróżnionego obrazu

Ustawienia strony Divi

Ważne jest, aby zaktualizować ustawienia strony Divi, aby nasz nowy układ pasował do projektu. Musimy również ukryć domyślny sposób wyświetlania tytułu posta, ponieważ zamiast tego użyjemy modułu tytułu posta.

W prawym górnym rogu strony znajdź pole Ustawienia strony Divi i zaktualizuj następujące elementy:

Układ strony: Pełna szerokość
Pokaż tytuł posta: Ukryj

Jeśli nie widzisz ustawień strony Divi, prawdopodobnie nie masz aktywowanego Divi Builder, więc upewnij się, że zrobiłeś to najpierw.

Dodaj kategorie

W polu kategorii dodaj nową kategorię o nazwie „Trening siłowy” i upewnij się, że jest to jedyna wybrana kategoria.

Dodaj tagi

W polu znaczników dodaj następujące trzy znaczniki: Szybkość, Trening i Treningi.

Przedstawiony obraz

Następnie dodaj polecany obraz, który pasuje do obrazu tła używanego w nagłówku układu, jak pokazano na zrzucie ekranu poniżej.

Część 3: Dodawanie niestandardowych pól do treści treningu dynamicznego

Pola niestandardowe są wbudowane w WordPress. Pozwalają autorom postów na dodawanie dodatkowych informacji (zwanych metadanymi) do postów oprócz domyślnych metadanych, takich jak kategorie, autor postu, data postu itp. Na podstawowym poziomie można użyć pól niestandardowych do wyświetlania pogody lub nastrój autora podczas pisania posta. Istnieje jednak wiele różnych sposobów wykorzystania pól niestandardowych do tworzenia dynamicznej zawartości witryny. Przeczytaj więcej o dodawaniu pól niestandardowych do swojej witryny. Ale w tym przypadku użycia, myślę, że zrozumiesz podstawową koncepcję pól niestandardowych, budując kilka dla siebie.

W tym przykładzie pokażę, jak dodać kilka niestandardowych pól, których można użyć do dodania dynamicznej zawartości do posta. Treścią dynamiczną tego przykładu jest polecany trening. Gdy pola niestandardowe są już na miejscu, wszystko, co autor postu musiałby zrobić, to wypełnić wartości pól niestandardowych, a zawartość zostanie zaktualizowana (dynamicznie) do postu bez konieczności ładowania programu Visual Builder.

Aby to zrobić, przewiń w dół posta i znajdź pole Pola niestandardowe. Jeśli z jakiegoś powodu nie jest wyświetlany, upewnij się, że wybrałeś go z opcji ekranu u góry strony.

Następnie kliknij menu rozwijane pola Pola niestandardowe (jeśli jest zwinięte), aby dodać nowe pole niestandardowe i wprowadź następujące informacje:

Nazwa: tytuł treningu
Wartość: polecany trening

Następnie kliknij przycisk Dodaj pole niestandardowe.

Nazwa to sposób, w jaki identyfikujesz niestandardowe pole w Divi. Wartość to zawartość, która będzie dynamicznie dodawana do strony za pomocą funkcji dynamicznej zawartości Divi (więcej na ten temat później).

Kontynuuj ten proces, aby dodać do swojej witryny następujące pola niestandardowe.

Nazwa: rozgrzewka
Wartość: bieg 800m

Nazwa: czas trwania
Wartość: 30 minut

Nazwa: podnoszenie ciężarów
Wartość:

<ul>
<li>Squats: 10 reps at 60% max (4 sets)</li>
<li>Bench: 6 reps at 70% max (3 sets)</li>
</ul>

Nazwa: ochłodzić się
Wartość: bieg 400m

Uwaga: te pola niestandardowe zostaną dodane do motywu Divi i będą dostępne w każdym nowym poście, który utworzysz w przyszłości. Innymi słowy, nie ogranicza się do tego pojedynczego postu.

Nie zapomnij zaktualizować swojego posta!

Część 4: Dodawanie zawartości dynamicznej do układu posta za pomocą programu Visual Builder

Teraz, gdy mamy już ustawienia i metadane postów, nadszedł czas, aby zacząć dodawać dynamiczną zawartość do naszego posta. Aby to zrobić, wdróż program Visual Builder.

Aby ułatwić zlokalizowanie i edycję tego zaawansowanego projektu układu, otwórz menu ustawień i ustaw domyślny tryb interakcji konstruktora na tryb kliknięcia.

W sekcji nagłówka usuń moduł przycisku (nie potrzebujemy go).

Zastępowanie obrazu tła prezentowaną dynamiczną zawartością obrazu

W przypadku naszego pierwszego fragmentu treści dynamicznej zastąpimy obraz tła używany w kolumnie 1 naszego górnego wiersza sekcji nagłówka wyróżnionym obrazem użytym w poście. Aby to zrobić, otwórz ustawienia wiersza i znajdź ustawienia tła dla kolumny 1 i kliknij kartę obrazu tła. Następnie usuń obraz, który się tam znajduje, a następnie najedź kursorem na pole podglądu obrazu tła. W prawym górnym rogu pola zobaczysz ikonę zawartości dynamicznej. Kliknij go, aby otworzyć opcje zawartości dynamicznej. Następnie wybierz z listy opcję zawartości dynamicznej Polecany obraz.

Twój układ będzie wyglądał dokładnie tak samo, ponieważ używamy tego samego obrazu. Jedyną różnicą jest to, że obraz tła jest pobierany z dowolnego obrazu ustawionego jako polecany obraz posta. Na tym polega piękno dynamicznej zawartości!

Kontynuujmy.

Dodawanie tytułu posta za pomocą modułu tytułu posta

Pod modułem tekstowym, w którym aktualnie znajduje się tytuł strony, dodaj moduł Tytuł posta. Istnieje również opcja dodania tytułu posta do modułu za pomocą zawartości dynamicznej, ale ponieważ moduł tytułu posta działa już jak zawartość dynamiczna i zachowuje tag nagłówka h1 dla SEO, jest idealny, ponieważ można go używać do niestandardowego układu postu .

Następnie zaktualizuj ustawienia modułu tytułu posta w następujący sposób:

Pokaż meta: NIE
Pokaż wyróżniony obraz: NIE

Teraz przejdź do modułu tekstowego powyżej i skopiuj style nagłówka h2, klikając prawym przyciskiem myszy zakładkę h2 i wybierając opcję z tej listy.

Następnie wklej style nagłówków h2 do modułu tytułu posta, klikając go prawym przyciskiem myszy i wybierając opcję z listy.

Następnie wróć ponownie do modułu tekstowego powyżej i skopiuj style odstępów i wklej je do modułu tytułu posta. Następnie zmień kolor tekstu tytułu posta na jasny, aby uzyskać biały kolor.

Teraz tytuł posta powinien pasować do projektu oryginalnego tytułu układu.

Teraz możesz usunąć moduł tekstowy zawierający oryginalny nagłówek.

Używanie zawartości dynamicznej do tworzenia wiersza metadanych

Przejdź do drugiej części układu. Następnie wyjmij górną wyściółkę sekcji, przeciągając ją w konstruktorze wizualnym lub ustawiając na 0px w ustawieniach sekcji.

W pierwszym rzędzie drugiej części układu zauważysz moduł tekstowy (zawiera treść „O treningu personalnym”) z przegrodą pod nim. W tym miejscu zamierzamy zbudować nasz niestandardowy wiersz metadanych przy użyciu zawartości dynamicznej.

Chcemy, aby rozmiar tego wiersza odpowiadał rozmiarowi wiersza w górnej części. Aby to zrobić, otwórz ustawienia wiersza w górnej sekcji i skopiuj style ustalania rozmiarów. Następnie wklej je do pierwszego rzędu drugiej sekcji. Następnie zaktualizuj rynnę rzędu do 2. Nowy rozmiar powinien wyglądać jak na poniższym zrzucie ekranu.

Będziesz także musiał dodać niestandardowe odstępy w następujący sposób:

Niestandardowe wypełnienie: 1% w lewo, 1% w prawo

Następnie zapisz ustawienia wiersza.

Teraz zaktualizuj strukturę kolumn wierszy do układu czterech kolumn.

Teraz jesteśmy gotowi do dodania naszej zawartości dynamicznej. Aby to zrobić, otwórz ustawienia modułu tekstowego w skrajnej lewej kolumnie i najedź kursorem na pole treści. W prawym górnym rogu pola zobaczysz ikonę zawartości dynamicznej. Kliknij go, aby otworzyć opcje zawartości dynamicznej.

Następnie wybierz opcję: Data publikacji posta.

Następnie zmień odpowiednio format daty.

Spowoduje to dodanie daty publikacji posta jako treści dynamicznej.

Aby wystylizować moduł tekstowy za pomocą zawartości dynamicznej daty, skopiuj style modułu modułu tekstowego w lewej kolumnie wiersza bezpośrednio poniżej.

Następnie wklej style modułu do modułu tekstowego z dynamiczną zawartością daty i zmień kolor tekstu na biały.

Następnie skopiuj moduł tekstowy i znajdujący się pod nim separator i wklej go do kolumny 2. Następnie zmień zawartość dynamiczną na Kategorie postów.

Musisz zmienić kolor tekstu linku na biały, aby pasował do projektu układu.

Teraz skopiuj moduł tekstowy kategorii postów z separatorem do kolumny 3. Następnie zmień dynamiczną zawartość na Post Comment Count. W wyskakującym okienku Liczba komentarzy do posta wprowadź następujące informacje w polu wprowadzania Przed:

Przed: Komentarze:

Pola wprowadzania przed i po dostępne w wyskakujących okienkach zawartości dynamicznej są wygodną opcją dodawania tekstu przed i/lub po zawartości dynamicznej. Jest to pomocne przy dodawaniu etykiet, symboli cen i innych elementów w razie potrzeby.

Teraz kontynuujmy dodawanie naszej zawartości dynamicznej. Skopiuj moduł tekstowy i dzielnik w kolumnie 3 i wklej do kolumny 4. Ta ostatnia kolumna będzie zawierała miniaturę autora posta i nazwisko autora. Zmień więc dynamiczną zawartość modułu tekstowego na Autor posta. W wyskakującym okienku Autor posta zaktualizuj następujące elementy:

Przed: przez:
Format imienia i nazwiska: imię i nazwisko

Nad modułem tekstowym z treścią autora posta dodaj nowy moduł obrazu. Otwórz ustawienia modułu obrazu i usuń domyślny obraz. Tak jak robiliśmy, kliknij ikonę zawartości dynamicznej w polu podglądu obrazu i dodaj zdjęcie profilowe autora posta jako zawartość dynamiczną.

Następnie dostosuj ustawienia projektu, aby podnieść obraz i nadać mu niestandardową szerokość w następujący sposób:

Szerokość: 80px
Margines niestandardowy (komputer): -82px Top
Margines niestandardowy (tablet): 0px Górny

Uwaga: nazwa autora postu będzie wskazywać autora przypisanego do bieżącego posta. A zdjęcie profilowe autora posta jest tym, co zostało ustawione dla profilu użytkownika w panelu WordPress w sekcji Użytkownicy> Twój profil.

Część 5: Dodawanie niestandardowych pól jako zawartości dynamicznej w celu dodania wyróżnionego treningu do posta

Pamiętasz, jak dodaliśmy te niestandardowe pola wcześniej w samouczku? Teraz użyjemy tych niestandardowych pól jako treści do polecanego treningu w naszym poście.

Aby dodać naszą polecaną dynamiczną zawartość treningu, najpierw zduplikuj dwukolumnowy wiersz bezpośrednio pod czterokolumnowym wierszem ze wszystkimi naszymi dynamicznymi metadanymi. Następnie usuń moduły w obu kolumnach i dodaj moduł notki do lewej kolumny.

Zamierzamy wykorzystać moduły notatek, aby dodać dynamiczną zawartość do sekcji treningu. Aby rozpocząć, dodaj nowy moduł notki do lewej kolumny.

Jako Tytuł dodaj pole niestandardowe o nazwie „Tytuł treningu” jako zawartość dynamiczną. Następnie dla treści notki dodaj pole niestandardowe o nazwie „Czas trwania” jako treść dynamiczną.

Aby wszystko się toczyło, nie zamierzam szczegółowo omawiać stylizacji tych modułów. Musisz jednak dodać ikonę notki umieszczonej po lewej stronie tytułu i zaktualizować projekt, aby pasował do układu.

Następnie dodaj drugi moduł notki poniżej. Wpisz tekst „Rozgrzewka” jako tytuł. A następnie dodaj pole niestandardowe o nazwie „Rozgrzewka” jako zawartość dynamiczną.

Dodaj trzeci moduł poniżej tego, z „Podnoszenie ciężarów” jako tytuł i niestandardowym polem „Podnoszenie ciężarów” jako dynamiczną treścią. Ponieważ używamy html dla tej niestandardowej wartości pola, musisz włączyć surowy html w wyskakującym okienku podnoszenia ciężarów.

Dodaj ostatni moduł notki z „Ochłodzenie” jako tytuł i niestandardowym polem „Ochłodzenie” jako treścią dynamiczną.

Teraz masz dynamiczną sekcję do dodawania treningów do swojego posta!

Wszystko, co musisz zrobić, to zaktualizować wartości pól niestandardowych z domyślnego edytora stron w WordPressie, a zawartość zostanie automatycznie dodana do układu posta bez konieczności przechodzenia do kreatora Divi.

Część 6: Projektowanie sekcji „Tematy pokrewne” za pomocą tagów postów Treści dynamiczne

Możesz użyć dynamicznej zawartości, aby wyświetlić tagi postów i stworzyć fajnie wyglądającą sekcję „pokrewne tematy” dla swojego posta. Aby to zrobić, utwórz nowy wiersz z jedną kolumną i dodaj do niego moduł tekstowy.

Następnie w polu treści dodaj tagi postów jako zawartość dynamiczną. Następnie zaktualizuj następujące opcje tagów postów:

Przed: Tematy pokrewne:
Separator tagów: //

Uwaga: możesz użyć dowolnego zestawu znaków jako separatora tagów, więc możesz eksperymentować z różnymi, aby tworzyć kreatywne projekty.

Aby nadać styl zawartości, zaktualizuj następujące ustawienia projektu:

Czcionka tekstu: Oswald
Grubość czcionki tekstu: pół pogrubiona
Kolor tekstu: #ff4c00
Rozmiar tekstu: 30px
Czcionka łącza: Oswald
Grubość czcionki łącza: pół pogrubiona
Kolor tekstu łącza: #262d3f
Rozmiar tekstu linku: 50px
Odstępy między literami: 2px
Wysokość linii łącza: 1,6 em

Oto ostateczny projekt.

Część 7: Dodawanie biografii autora i sekcji komentarzy

W tym momencie jesteś dobrze przygotowany do dodawania dynamicznej zawartości i dostosowywania projektu układu postu z dużą łatwością, więc nie będę się zagłębiał w te dwa ostatnie elementy.

Dodawanie sekcji biografii autora za pomocą zawartości dynamicznej

Aby dodać sekcję z biografią autora na dole treści posta, możesz użyć dynamicznej zawartości Autor posta, Zdjęcie profilowe autora posta i Bio autora. Jak widać na poniższym zrzucie ekranu, utworzyłem wiersz kolumny 1/4 3/4. Następnie dodałem zdjęcie profilowe autora posta do lewej kolumny. W prawej kolumnie dodałem autora posta z biografią autora pod spodem. Dodałem również dynamiczną zawartość polecanego obrazu jako obraz tła dla sekcji (i nakładkę gradientową). Oto przykład tego, jak by to wyglądało.

Dodawanie sekcji komentarzy za pomocą modułu komentarzy

Ponieważ używamy niestandardowego układu postów, od tego czasu używamy modułu komentarzy, dzięki czemu możemy dopasować projekt sekcji komentarzy do układu. Po prostu dodaj moduł komentarzy do nowego wiersza sekcji i dopasuj style przycisków i czcionki do bieżącego układu. Oto przykład tego, jak by to wyglądało.

Ostateczny projekt

Oto ostateczny projekt całego postu po dostosowaniu całego projektu.

Aktualizowanie treści postów i zapisywanie układu dla przyszłych postów

Ponieważ do tworzenia układu postu używamy Divi Builder, nadal będziesz musiał zaktualizować rzeczywistą treść postu za pomocą modułów Divi. Ale gdy wszystko inne jest teraz dynamiczne, znacznie ułatwia to proces. Będziesz musiał zapisać układ postu w swojej bibliotece, aby podczas tworzenia nowego posta wystarczyło dodać zapisany układ do posta i zaktualizować treść posta.

Końcowe przemyślenia

Dynamiczna zawartość Divi to potężna funkcja, która znacznie ułatwia dodawanie i aktualizowanie danych postów. Jeśli więc chcesz zaprojektować niestandardowy układ swoich postów na blogu (lub innych niestandardowych typów postów, takich jak Projekty) za pomocą Divi Builder, dynamiczna zawartość jest dobrym rozwiązaniem. Oczywiście zawartość dynamiczna nie ogranicza się do postów. Możesz skorzystać z dynamicznej zawartości i pól niestandardowych w całej witrynie. Mam nadzieję, że ten post pomoże Ci zrozumieć niektóre możliwości i zainspiruje Cię do korzystania z dynamicznych treści na nowe, niesamowite sposoby.

Czekam na kontakt z Państwem w komentarzach.

Pozdrawiam!