Jak korzystać z globalnych ustawień wstępnych z blokami układu Divi, aby usprawnić projektowanie postów na blogu?

Tworzenie treści na bloga jest wystarczająco trudne bez martwienia się o projekt. Dlatego ważne jest, aby w Twojej witrynie elementy projektu były łatwo dostępne (lub wstępnie zaprojektowane), abyś mógł bardziej skoncentrować się na tworzeniu niesamowitych treści. Oczywiście, tradycyjny motyw potomny WordPressa sobie z tym poradzi, ale w większości przypadków utkniesz z projektem, którego nie da się łatwo zmienić.

Dzięki Divi zyskujemy większą kontrolę nad projektowaniem postów na blogu. Globalne ustawienia wstępne Divi umożliwiają tworzenie projektu dla całej witryny (takiego jak motyw potomny) dla elementów w całej witrynie z dodatkową wygodą możliwości dostosowania projektu w dowolny sposób za pomocą kilku kliknięć. Dodatkowo, jeśli jesteś przyzwyczajony do tworzenia treści w domyślnym edytorze bloków WordPress, możesz wykorzystać moc bloku układu Divi, aby pobrać te elementy globalnych ustawień wstępnych w locie w treści posta. Umożliwi to dodanie zupełnie nowych elementów projektu do posta na blogu, który pasuje do szablonu i reszty witryny.

W tym samouczku pokażemy, jak korzystać z globalnych ustawień wstępnych z blokami Divi Layout, aby usprawnić proces projektowania postu na blogu. Aby to zrobić, pokażemy, jak korzystać z globalnych ustawień wstępnych do szybkiego i wydajnego projektowania nowej zawartości postów na blogu. Pomoże to stworzyć blogowanie, które nie będzie miało negatywnego wpływu na ogólną markę Twojej witryny.

Zacznijmy!

zapowiedź

Oto krótkie spojrzenie na projekt, który zbudujemy w tym samouczku.

Szybki przegląd globalnych ustawień wstępnych

Piękno Divi polega na tym, że zapewnia pełną kontrolę nad projektem witryny przy użyciu szerokiej gamy ustawień projektowych, których można użyć do dostosowania wyglądu dowolnego elementu lub modułu.

Nowy system Divi Presets pozwala zaprojektować niestandardowy wygląd elementu Divi (takiego jak moduł przycisku) i zapisać go jako ustawienie wstępne. Wszystkie wprowadzone zmiany w projekcie są zapisywane w ustawieniach wstępnych. Po dodaniu nowego modułu do strony możesz przeglądać zapisane ustawienia wstępne i szybko je stosować.

Po zastosowaniu ustawienia wstępnego domyślny projekt modułu jest kontrolowany przez ustawienie wstępne. Jeśli zaktualizujesz styl ustawienia wstępnego, wszystkie moduły używające tego ustawienia wstępnego również zostaną zaktualizowane. Pozwala to kontrolować projekt całej witryny za pomocą niewielkiej kolekcji zapisanych ustawień wstępnych. Ponadto oszczędza mnóstwo czasu podczas dodawania nowych modułów do strony, ponieważ nie musisz projektować każdego nowego modułu od zera, ale zamiast tego możesz szybko wybrać wygląd z biblioteki Presetów Divi.

Przewodniki po globalnych ustawieniach wstępnych

Globalne przewodniki po stylach (takie jak te, których użyjemy w tym samouczku) można utworzyć, aby przyspieszyć projektowanie elementów podczas projektowania witryny. Te przewodniki po stylach zawierają kolekcję modułów z różnymi ustawieniami wstępnymi, które pasują do projektu Twojej witryny. Posiadanie ustawień wstępnych dostępnych na początku usprawni proces projektowania poprzez wyeliminowanie trudu aktualizowania ustawień projektowych dla każdego nowego modułu. Mamy nawet przewodnik po stylu dla tych, którzy chcą stworzyć swój własny.

Szybki przegląd bloków układu Divi

Blok układu Divi pozwala użytkownikom dodawać dowolny układ Divi do posta na blogu w edytorze Gutenberg. Możemy nawet przekonwertować blok Divi Layout na blok wielokrotnego użytku w Gutenbergu, tak jak każdy inny blok WordPress. Otwiera to drzwi do usprawnienia niektórych pomocnych projektów Divi Layout do normalnego przepływu pisania postu w Gutenbergu.

Jak globalne ustawienia wstępne i bloki układu współpracują ze sobą

Ponieważ globalne ustawienie wstępne jest „globalne”, style tego ustawienia wstępnego wpływają na wszystkie jego wystąpienia w całym serwisie. Oznacza to, że możesz używać globalnych ustawień wstępnych podczas projektowania elementu w edytorze bloku układu, a te ustawienia również zostaną odpowiednio zaktualizowane. Tak więc, jeśli chcesz dodać CTA do treści swojego posta na blogu za pomocą bloku układu Divi, możesz zbudować CTA, dodając moduły z globalnymi ustawieniami wstępnymi, tak jak zwykłą stronę lub post. Dzięki temu możesz szybko i skutecznie dodawać pasujące elementy projektu do swojego posta.

Korzystanie z globalnych ustawień wstępnych z blokami układu Divi w celu usprawnienia projektowania postów na blogu

Przesyłanie globalnego przewodnika po stylach ustawień wstępnych

W tym samouczku zamierzamy szybko rozpocząć tworzenie globalnych ustawień wstępnych za pomocą układu przewodnika po stylach globalnych ustawień wstępnych dla układu agencji internetowej. Po przesłaniu przewodnika stylu będziemy mieć do dyspozycji kilka globalnych ustawień wstępnych, których można użyć podczas dodawania elementów projektu do posta na blogu za pomocą bloku układu Divi.

Aby pobrać ustawienia globalne, przejdź do wpisu na blogu. Przewiń w dół do sekcji zatytułowanej „Download the Global Presets Style Guide”. Następnie wprowadź swój adres e-mail i kliknij, aby otrzymać plik do pobrania.

Po pobraniu pliku zip na komputer rozpakuj plik i wróć do pulpitu nawigacyjnego WordPress.

Aby zaimportować plik JSON przewodnika stylów do biblioteki Divi…

1. przejdź do Divi > Biblioteka Divi.
2. Kliknij przycisk Importuj i eksportuj.
3. W oknie podręcznym Przenośność wybierz kartę importu.
4. Wybierz plik JSON globalnego przewodnika po stylu agencji internetowej.
5. Upewnij się, że wybrałeś Importowanie ustawień wstępnych.
6. Następnie kliknij przycisk importu.

Teraz wszystkie te globalne ustawienia wstępne są dostępne w Divi Builder.

Przesyłanie szablonu posta

Teraz, gdy przewodnik po stylu jest już gotowy, możemy przyspieszyć projektowanie szablonu postu na blogu, importując szablon postu na blogu agencji internetowej, który już pasuje do elementów przewodnika stylu.

Aby pobrać szablon, przejdź do wpisu na blogu, wprowadź swój adres e-mail i kliknij, aby pobrać pliki.

Aby zaimportować szablon posta…

1. przejdź do Divi > Kreator motywów.
2. Następnie kliknij ikonę przenoszenia.
3. W module przenośności wybierz kartę importu.
4. Wybierz pobrany plik JSON szablonu posta.
5. Następnie kliknij przycisk importu.

Używanie ustawień wstępnych do aktualizacji/projektowania szablonu posta

Po utworzeniu niestandardowego szablonu posta kliknij, aby edytować niestandardowy szablon treści. Możesz tam również zobaczyć projekt szablonu posta i dokonać korekt za pomocą globalnych ustawień wstępnych, które są dostępne w importowanym przewodniku stylu. Jeśli tworzysz własny szablon posta od podstaw, możesz użyć globalnych ustawień wstępnych, aby dopasować projekt szablonu posta do innych elementów na stronie internetowej. Na przykład możesz użyć ustawienia „WALP – H1 – 1” w tytule postu w następujący sposób:

Możesz też użyć ustawienia modułu notatek „WALP – Blurb 2” na notatce zawierającej dynamiczne informacje o autorze.

Moduł treści postu to obszar, w którym na stronie zostanie wygenerowana treść posta na blogu. Dlatego ważne jest, aby dopasować ustawienia projektowe modułu treści postów do innych elementów tekstowych używanych w Twojej witrynie.

Jeśli tworzyłeś szablon posta od podstaw, możesz skopiować i wkleić ustawienia tekstu z różnych modułów tekstowych za pośrednictwem witryny. Lub, jeśli wcześniej utworzyłeś globalny, gotowy przewodnik stylu dla swojej witryny, możesz skopiować elementy projektu z tych modułów w przewodniku stylu.

Na przykład, możesz skopiować style tekstu nagłówka dla globalnego ustawienia wstępnego utworzonego dla wszystkich stylów tekstu w jednym module tekstowym.

Następnie wklej te style tekstu nagłówka do modułu treści posta dla szablonu posta. Pomoże to upewnić się, że wszystkie nagłówki użyte w treści posta będą pasować do stylu witryny.

Ważną rzeczą jest to, że masz szablon posta, który pasuje do stylu Twojej witryny. Korzystanie z globalnych ustawień wstępnych może ogromnie wspomóc ten proces, jeśli projektujesz szablon od podstaw.

Korzystanie z globalnych ustawień wstępnych z blokami układu Divi

Po zaprojektowaniu szablonu jesteśmy gotowi do rozpoczęcia korzystania z globalnych ustawień wstępnych z blokami Divi Layout do projektowania dodatkowych elementów treści postu za pomocą domyślnego edytora bloków WordPress.

Aby to zrobić, edytuj (lub utwórz) post na blogu. Następnie upewnij się, że masz jakieś pozorowane treści (takie jak kilka nagłówków i akapitów oraz wyróżniony obraz).

W tej chwili, jeśli spojrzysz na post w interfejsie, będzie on miał treść posta wyświetlaną w szablonie posta, a treść (nagłówki, treść, itp.) dziedziczy styl z ustawień modułu treści postu.

Moduł treści posta obsługuje tylko stylizację podstawowej treści tekstowej. Jeśli chcesz dodać dodatkowe elementy w całym swoim poście za pomocą domyślnego edytora bloków WordPress, stylizacja tych elementów będzie musiała zostać zmieniona za pomocą niestandardowego CSS w motywie podrzędnym. To znaczy, chyba że używasz bloków układu Divi.

Aby dodać dodatkowe treści, które chcesz dopasować do szablonu posta i witryny, możesz użyć bloków Divi Layout. Umożliwi to dodanie dowolnej zawartości i jej stylizację za pomocą Divi Builder. A ponieważ możemy również korzystać z globalnych ustawień wstępnych, możemy jeszcze bardziej usprawnić projektowanie treści naszych postów na blogu w locie.

Projekt nr 1: Budowanie CTA bloga z globalnymi ustawieniami wstępnymi i blokiem układu Divi

W tym pierwszym przykładzie utwórzmy niestandardowe wezwanie do działania na blogu, które pasuje do szablonu posta i projektu witryny.

Aby to zrobić, dodaj blok układu Divi do treści posta.

Następnie kliknij Zbuduj nowy układ.

Spowoduje to otwarcie edytora bloków układu, który jest w zasadzie jak zwykle Divi Builder. Daj sekcji domyślnej wiersz z jedną kolumną.

Otwórz globalny układ ustawień wstępnych w innej przeglądarce, upewniając się, że klikasz, aby zbudować na interfejsie, aby móc zobaczyć elementy. W ten sposób w jednej przeglądarce zostanie otwarty Edytor układu, a w drugiej przewodnik stylu.

Jeśli nie masz przewodnika po stylu, możesz otworzyć układ strony w swojej witrynie, aby uzyskać dostęp do dowolnych elementów projektu, które chcesz przenieść.

Skopiuj tło z przewodnika po stylach

W tym CTA użyjemy królewskiego niebieskiego tła z przewodnika stylistycznego. Otwórz ustawienia modułu tekstowego i skopiuj tło.

Następnie otwórz ustawienia sekcji w edytorze układu i wklej tło do sekcji.

Dodaj moduł tekstowy z predefiniowanym ustawieniem H3

Następnie dodaj nowy moduł tekstowy do wiersza.

Następnie otwórz ustawienia i zaktualizuj następujące elementy:

Dodaj nagłówek H3 do CTA, wklejając w treści następujący kod HTML:

<h3>Learn How One Client Increased Revenue by 500%</h3>

Otwórz menu rozwijane Global Presents i wybierz ustawienie wstępne dla nagłówka H3 (WALP – H3 – 1)

Aktualizuj projekt

Następnie zmień kolor tekstu na biały i wyśrodkuj wyrównanie.

Dodaj przycisk z globalnym ustawieniem wstępnym

Pod modułem tekstowym dodaj nowy przycisk.

Następnie zaktualizuj tekst przycisku i wybierz jeden z gotowych projektów przycisków. W tym przykładzie użyjmy „WALP – Przycisk 3”.

Zapisz zmiany

Po zakończeniu kliknij Zapisz i wyjdź.

Teraz możesz zobaczyć element wyświetlany w Edytorze bloku WordPress.

Projekt #2: Tworzenie cytatu z bloga z globalnymi ustawieniami wstępnymi i blokiem układu Divi

Dla tego kolejnego elementu projektu dodamy cytat do posta na blogu.

Dodaj blok układu Divi

Aby rozpocząć, dodaj blok układu Divi w miejscu, w którym ma być wyświetlany cytat.

Następnie kliknij Zbuduj nowy układ.

Kopiuj i wklej tło z przewodnika po stylach

Skopiuj ciemnoniebieskie tło z przewodnika stylu.

Następnie wklej go do domyślnej sekcji edytora układu.

Dodaj wiersz

Następnie dodaj do sekcji wiersz z jedną kolumną.

Dodaj moduł referencji z ustawieniem wstępnym

Następnie dodaj moduł referencji do kolumny. Następnie wybierz globalne ustawienie wstępne „WALP – Testimonial 2”.

To będzie świetny początek w projektowaniu cytatu do wpisu na blogu.

Zaktualizuj projekt

Na karcie projekt dostosuj ustawienia projektu w następujący sposób:

• Kolor ikony cytatu:
• Waga czcionki ciała: lekka
• Styl czcionki ciała: kursywa
• Wyrównanie tekstu podstawowego: do lewej
• Kolor tekstu ciała: #ffffff
• Czcionka autora: Ubuntu
• Rozmiar tekstu autora: 16px

Dodaj nowe ustawienie globalne

Ponieważ wprowadziliśmy znaczące zmiany w tym ustawieniu referencji, sensowne jest utworzenie nowego w tym momencie, aby można go było wykorzystać w przyszłych cytatach postów.

Aby utworzyć nowy, kliknij przycisk „Utwórz nowe ustawienie wstępne z bieżących stylów”. Następnie nadaj nowemu presetowi nazwę („cytat posta na blogu”) i zapisz go. Globalne ustawienie wstępne jest teraz gotowe do użycia w przyszłości.

Zapisz układ, a zobaczysz go w treści posta.

Projekt nr 1: Dodawanie Blurbs do posta na blogu z globalnymi ustawieniami wstępnymi i blokiem układu Divi

W następnym przykładzie dodamy do posta kilka notatek.

Dodaj nowy blok układu Divi

Dodaj kolejny blok układu Divi i kliknij przycisk Zbuduj nowy układ.

W Edytorze układu dodaj do układu dwukolumnowy wiersz.

Dodaj moduł Blurb z ustawieniami wstępnymi

W lewej kolumnie dodaj moduł notki.

Dodaj nowy obraz ikony do notki. Następnie otwórz listę rozwijaną ustawień wstępnych i wybierz ustawienie wstępne „WALP – Blurb 4”.

Dodaj drugą plamę

Następnie skopiuj notkę i wklej ją do kolumny 2 i zaktualizuj obraz.

Zapisz układ, a zobaczysz go w treści posta.

Ostateczny wynik

Teraz otwórz post na froncie, aby zobaczyć ostateczny wynik.

Bloki wielokrotnego użytku z globalnymi ustawieniami wstępnymi

Jeśli chcesz skorzystać z bloków wielokrotnego użytku z blokami układu Divi, dobrze jest wiedzieć, że będą one działać z ustawieniami globalnymi. Jeśli więc chcesz zapisać utworzone wcześniej wezwania do działania na blogu jako blok wielokrotnego użytku, będziesz mieć wygodny blok, którego możesz użyć do dodawania wezwania do działania podczas tworzenia postów. A ponieważ CTA używa przycisku i tekstu z globalnym ustawieniem wstępnym, aktualizacja globalnego ustawienia wstępnego dla tego elementu spowoduje również zaktualizowanie elementu w bloku wielokrotnego użytku.

Końcowe przemyślenia

Globalne ustawienia wstępne to jedno z naszych najpotężniejszych narzędzi do projektowania dostępnych w Divi. Gdy poświęcisz trochę czasu na dodanie globalnych ustawień wstępnych do modułów, których używasz w całej witrynie, możesz naprawdę skorzystać z usprawnionego procesu projektowania szablonów postów na blogu i treści przy użyciu bloków układu.

Czekam na kontakt z Państwem w komentarzach.

Pozdrawiam!