Divi Theme Builder

W skrócie, Divi Theme Builder korzysta na mocy wizualnego kreatora Divi Builder i pozwala na wykorzystanie go na wszystkich obszarach motywu Divi. Co pozwala na tworzenie niestandardowych nagłówków, stopek, kategorii, szablonów stron, szablonów produktów, wpisów blogowych, stron 404.

Oto jedne z wielu rzeczy, które możesz zrobić w Theme Builder:

Zaprojektować nagłówek z menu dla całej strony (globalny nagłówek) dla twojej całej strony od podstaw z wykorzystaniem Divi Buildera.
Zaprojektować globalną stopkę dla całej witryny od podstaw z wykorzystaniem Divi Builder.
Tworzyć niestandardowe strony 404.
Tworzyć niestandardowe szchematy szablonów dla wszystkich wpisów blogowych używając Divi Buildera.
Tworzyć niestandardowe szablony ston produktu dla wszystkich produktów.
Tworzyć własny szablon dla stron archiwalnych.
Tworzyć własny szablon dla wszystkich wpisów (lub produktów) z danej kategorii.
Konstruować kompletne zestawy szablonów Theme Buildera (coś jak child-themes), które można eksport i import do innych stron internetowych.

Spis zagadnień tego wpisu

Dostosowywanie szablonów za pomocą Divi Theme Builder
Domyślny szablon strony internetowej
Tworzenie „Global Header” (globalny nagłówek strony)
Tworzenie „Global Body” (globalna treśc strony)
Tworzenie „Global Footer”(globalnej stopki)
Szablony niestandardowe
Dodanie nowego szablonu
Zarządzanie przypisaniami szablonów
Jak obsługiwać globalne elementy w nowych szablonach
Niestandardowe ustawienia szablonów
Zapisywanie zmian w Theme Builder
Korzystanie z zawartości dynamicznej w Theme Builder
Budowanie szablonu postu na blogu w całej witrynie
Zbuduj stronę produktu dla całej witryny
Opcje przenoszenia szablonów konstruktora motywów

Gdzie jest Divi Theme Builder?

Divi Theme Builder znajduje się w kokpicie WordPress wybierając w menu zakładkę „Divi”.

W panelu administaracyjnym WordPress przechodzisz do zakładki Divi > Theme Builder

Spowoduje to przejście do głównego interfejsu Divi Theme Builder, gdzie można zarządzać swoimi szablonami.

Jak używać szablonów w Divi Theme Builder?

Domyślny szablon strony (Default Website Template)

Domyślnie w Divi Theme Builder mamy tylko jeden szablon o nazwie „Default Website Template”, który nie można usunąć, ale można go modyfikować. Jest to standardowy szablon motywu Divi. Jeśli w szablonie „Default Website Template” edytujemy obszar „Global Header” to nagłówek motywu Divi zostanie zmieniony na całej stronie. To samo dotyczy obszarów „Global Body” (treść strony) i „Global Footer” (stopki).

Szablon domyślny „Default Website Template” i jego zawartość

Szablon domyślny „Default Website Template” składa się z trzech obszarów: „Global Header” (nagłowka strony), „Global Body” (treści głównej strony) i „Global Footer” (stopki strony).

Aby rozpocząć proces tworzenia nowej zawartości dla wybranego obszaru szablonu, to wystarczy kliknąć na jeden z pustych obszarów.

Tworzenie „Global Header” (nagłówka strony)

Jeśli chcesz stworzyć nowy globalny nagłówek na swojej stronie, kliknij obszar „Add Global Header”, a następnie wybierz opcję “Build Global Header”.

Dalsza część tworzenia jest podobna jak przy budowie strony w wizualnym kreatorze Divi Builder. Pojawia się okno z trzema możliwościami: „Buduj od zera”, „Wybierz układ” i „Klon istniejącej strony”. Jeśli chcesz zbudować nagłówek od zera to wybierasz „Buduj od zera”.

Po wybraniu opcji „Buduj od zera”, pojawi się edytor układu szablonu. Jest to edytor wizualnego kreatora stron Divi Builder, gdzie dokładnie tak samo tworzy sie szablon nagłowka jak normalne strony.

Należy pamiętać o tym, że cokolwiek zostanie zrobione w tym edytorze szablonów, będzie to widoczne w nagłówku strony. A jeśli jest to globalny nagłówek, to będzie widoczne w całej witrynie, zastępując standardowy nagłówek Divi.

Po zakończeniu projektowania nagłówka, pamiętaj o tym, aby zapisać układ przed wyjściem z edytora układu szablonu.

Teraz powinieneś zobaczyć obszar „Global Header” w kolorze zielonym. Tem kolor symbolizuje obszar globalny.

Po zapisaniu zmian, Twoja strona będzie teraz mieć nowy globalny nagłówek, który zastępuje standardowy nagłówek Divi.

Tworzenie „Global Body”

W większości przypadków nie będzisz korzystał z szablonu „Global Body”, ponieważ najprawdopodobniej treść głowną na stronie będziesz tworzył z osobna dla każdej strony. Możemy ten obsar wykorzystać gdy chcemy aby jakiś element był wyświetlany na wszystkich stronach, albo tylko na wpisach blogowych. W ten sposób nie trzeba edytować kazdy wpis z osobna tylko wystarczy stworzyć szablon strony wpisu z „Global Body”.

Aby dodać „Global Body” do szablonu strony, po prostu kliknij obszar „Add Global Body”, a następnie wybierz opcję „Build Global Body”.

Spowoduje to przejście do edytora szablonów, w którym można zaprojektować globalny obszar body na swojej stronie. Istotne jest to aby dodać moduł „Post content”. Moduł „Post content” pozwala wypełnić szablon rzeczywistą zawartość strony lub postu.

Moduł wyświetla próbkę treści wpisu. Pozwala dodać style do treści dla wszystkich stron i postów.

Moduł „Post content” zastępuje treść, która jest dodawana do zawartości strony w Divi. Jeśli nie korzystasz z Divi Builder na stronie, moduł „Post content” wyświetli zawartość z edytora WYSIWYG, strony lub posta z backendu.

Oto przykład, w jaki sposób treść będzie pojawiać się w obszarze szablonu „Global content”.

Jeśli zdecydujesz się użyć Divi Builder do edycji strony lub postu. Obszar wyznaczony dla treści Divi Builder również będzie zawarty w wyznaczonym obszarze modułu „Post content” w treści szablonu.

Dlatego w większości przypadków nie polecam korzystać z obszaru „Global content” w „Defalut Website Template” dla Twojej witryny, chyba że masz konkretny powód. Może się okazać, że utworzenie „Global content” nałoży niepotrzebne ograniczenia na twoje możliwości do projektowania zawartości strony w Divi.

Tworzenie „Global footer”

Divi Theme Builder pozwala zastąpić standardową stopkę Divi (i pasek stopki) nową niestandardową stopką, którą można zaprojektować całkowicie od podstaw za pomocą Divi Builder.

Aby zbudować globalną stopkę dla swojej witryny, wystarczy po prostu kliknąć w obszar „Add Global Footer” i wybierać „Build Global Footer”.

Następnie w wizualnym edytorze Divi Builder zaprojektuj układ szablonu stopki. Pamiętaj zapisać szablon po jego wykonaniu.

UWAGA: Możesz także dodać jeden z gotowych układów do edytora szablonu stopki, aby szybko rozpocząć projektowanie stopki. Możesz to zrobić w dowolnym momencie, klikając na dole edytora w ikonę z plusem i wybrać z menu „Dodaj z biblioteki”.

Po zainstalowaniu globalnego nagłówka, treści i stopki przykładowa strona wyglądałaby mniej więcej tak.

Global Body nie jest konieczne w szablonie

Jak wspomniano wcześniej, Global Body nie jest konieczne. Można je łatwo usunąć klikając ikonę kosza.

Bez Global Body, masz pełną kontrolę nad projektem strony używając Divi Buildera.

Niestandardowe Szablony

Domyślny szablon witryny kontroluje domyślny szablon dla całej witryny. Jednak szablony niestandardowe pozwalają zastąpić szablon domyślny, podając szablon niestandardowy dowolnej stronie lub postowi w witrynie. Innymi słowy, szablony niestandardowe umożliwiają tworzenie szablonów stron lub postów, których nie chcesz dziedziczyć pod szablonie domyślnym.

Tworzenie niestandardowych szablonów

Aby utworzyć nowy szablon, po prostu kliknij w pole „Add New Template” z szarą ikoną plus.

Spowoduje to wyświetlenie okienka ustawienień szablonu, na którym decydyjesz do jakich stron lub postów chcesz przypisać szablon. Więcej na ten temat poniżej.

Zarządzanie przypisaniami szablonów

Use on vs Exculde From (Użyj vs wyklucz)

Przypisania szablonów można wybrać na karcie „Use on” i na karcie „Exclude From”. Od Ciebie zależy, czy chcesz opierać swoje zadania na logice „Use on”, czy na logice „Exclude”. Ale w razie potrzeby możesz skorzystać z obu kombinacji.

Możesz na przykład użyć go na wszystkich stronach i postach, ale wykluczyć określoną stronę lub post.

UWAGA: Jeśli wybór używania jest w konflikcie z wyborem wykluczenia, wybór wykluczenia zawsze zastępuje używanie. Na przykład, jeśli wybierzesz opcję „Uwzględnij na stronie głównej” i „Wyklucz ze strony głównej”, ten szablon zostanie wykluczony ze strony głównej.

Możesz przypisywać szablony nie tylko do stron i postów ale też do stron i produktów WooCommerce, jeśli na twojej stronie jest zainstalowany WooCommerce.

Poziom Makro i Mikro

Szablony można przypisywać na poziomie makro i / lub mikro. Na przykład możesz przypisać szablon do wszystkich stron w witrynie (poziom makro) lub możesz przypisać szablon do jednego konkretnego postu (poziom mikro). Lub obydwa! Możesz nawet wybrać wiele poziomów przypisań, co daje pełną kontrolę nad tym, gdzie chcesz przypisać szablon w całej witrynie.

Sprzeczne Przypisania

Jeśli użytkownik przypisze szablon do strony, która jest już przypisana do innego szablonu, nowo zapisany szablon będzie miał pierwszeństwo, a poprzednie przypisanie do innego szablonu zostanie usunięte. Pojawi się komunikat ostrzegawczy informujący o tym przed zapisaniem szablonu.

Zmiana nazw niestandardowych szablonów

Po wybraniu wszystkich przypisań zobaczysz nazwę nowego szablonu, który został wygenerowany na podstawie wybranych przez Ciebie wyborów. Po najechaniu myszką na obszar tytułu karty szablonu pojawia się etykieta, która pokazuje listę wszystkiego, do czego szablon jest używany lub wykluczony. Aby zmienić nazwę szablonu, kliknij w jego nazwę.

Ostrzeżenie o nieprzypisanym szablonie

Jeśli nie wybierzesz przypisania szablonu, zamiast nazwy szablonu zobaczysz tekst ostrzegawczy o treści „Unassigned” (Nieprzypisany).

Niestandardowe obszary szablonów

Podobnie jak domyślny szablon strony internetowej (lub szablon globalny), szablon niestandardowy będzie również zawierał następujące obszary: Nagłówek, Treść Główna i Stopka.

Jeśli domyślny szablon strony internetowej ma globalne układy szablonów dodane do jednego z trzech obszarów, te globalne układy zostaną automatycznie dodane do nowego szablonu.

Jak obsługiwać globalne elementy w nowych szablonach

Nie musisz używać tego globalnego układu w nowym szablonie. Możesz użyć opcji obszaru Szablon, aby usunąć układ i zbudować nowy od zera lub wyłączyć globalny i dostosować układ do określonych potrzeb układu.

Na przykład jeśli masz globalny nagłówek w domyślnym szablonie witryny, nowy szablon odziedziczy ten globalny nagłówek. Możesz wybrać jedną z następujących czynności:

Możesz użyć globalnego nagłówka na swoim nowym szablonie

2. Możesz wyłączyć Globalny, aby dostosować projekt niestandardowego szablonu.

3. Możesz usunąć globalny nagłówek i zbudować niestandardowy nagłówek od zera dla szablonu lub dodać go z biblioteki.

4. Możesz także pozostawić obszar niestandardowego nagłówka pusty, który odziedziczy standardowy nagłówek motywu Divi.

Dodawanie do obszaru szablonu z biblioteki

Dodając niestandardowy obszar szablonu do nowego szablonu, możesz dodać układ z biblioteki Divi. Ta funkcjonalność naśladuje proces dodawania nowego układu do strony podczas korzystania z Divi Builder. Aby dodać układ do obszaru szablonu z biblioteki, kliknij obszar szablonu i wybierz opcję Dodaj z biblioteki. Pojawi się wyskakujące okno dodawania z biblioteki, w którym możesz wybrać wstępnie utworzone, zapisane lub istniejące układy strony. Po dodaniu układu do obszaru szablonu można wybrać ikonę koła zębatego, aby edytować układ za pomocą narzędzia Divi Builder w edytorze układu szablonu.

Przeciągnij i upuść „Obszary” szablonów

Obszary szablonu można przeciągać i upuszczać do innych obszarów szablonów. Jest to szybki i łatwy sposób na zduplikowanie i umieszczenie obszaru szablonu w jednej akcji przeciągania i upuszczania. Przeciąganie nie usuwa go z obszaru, z którego jest przeciągany – tylko wypełnia lub zastępuje obszar, do którego jest przeciągany. Pomyśl o tym jak o powielaniu, a nie wycinaniu i wklejaniu.

Opcje widoczności obszaru szablonu: Ukrywanie / pokazywanie obszarów nagłówka, treści i stopki.

Oprócz możliwości dostosowania każdego obszaru szablonu, możesz także przełączyć widoczność obszaru, aby go pokazać lub ukryć na stronie, klikając ikonę „oka” obok każdego obszaru. Na przykład możesz ukryć obszar nagłówka i obszar stopki swojej strony 404.

UWAGA: ukrycie obszaru szablonu nie przywraca obszaru domyślnego, całkowicie ukrywa obszar z strony.

Niestandardowe ustawienia szablonów

Menu ustawień szablonów

Po najechaniu kursorem na szablon w narzędziu Theme Builder, menu ustawień szablonu pojawi się w lewym górnym rogu pola szablonu. To menu jest bardzo podobne do menu wyświetlane po najechaniu kursorem na sekcję, wiersz lub moduł w Divi Builder.

Menu zawiera ikony następujących funkcji:

Ustawienia szablonów – tutaj możesz zarządzać przypisaniami szablonów
Duplikuj szablon – spowoduje to skopiowanie szablonu w celu szybkiego uruchomienia innego niestandardowego szablonu. Duplikowanie szablonu powoduje dokładnie to samo, co zrobiłoby kliknięcie karty Dodaj nowy szablon. Różnica polega na tym, że po zdefiniowaniu ustawień szablonu wygenerowany szablon używa tego samego obszaru nagłówka, obszaru ciała i obszaru stopki, co powielony szablon.
Usuń szablon – spowoduje to całkowite usunięcie szablonu. Wszelkie strony, posty lub archiwa, którym przypisano usunięty szablon, powrócą do domyślnego szablonu strony i / lub standardowego układu motywu Divi dla tej strony (jeśli nie zostanie utworzony szablon domyślny).
Eksportuj szablon – Możesz kliknąć ikonę eksportu szablonu, aby wyeksportować plik .json tego konkretnego szablonu. Po kliknięciu ikony szablonu eksportu wprowadź nazwę pliku eksportu i kliknij przycisk „Export Divi Theme Builder Template”.

Więcej opcji ustawień – ikona więcej ustawień otwiera wygodną listę wszystkich dostępnych ustawień szablonów w jednym miejscu.

Budowanie niestandardowego nagłówka

Zbudowanie niestandardowego nagłówka będzie wymagało tego samego procesu co zbudowanie nagłówka globalnego. Ponieważ nagłówek to miejsce, w którym należy umieścić podstawowe menu witryny, ważne jest, aby zrozumieć, jak korzystać z modułu menu zbudowanego specjalnie dla konstruktora motywów.

Budowanie własnego ciała

Budowanie niestandardowego obszaru treści dla szablonu może być świetnym sposobem na dodanie projektu i / lub treści do treści wielu stron lub postów jednocześnie. A jeśli korzystasz z treści dynamicznych, możesz naprawdę usprawnić projekt i funkcjonalność swoich postów na blogu lub produktów WooCommerce.

Budowanie niestandardowej stopki

Budowanie niestandardowej stopki obejmuje ten sam proces, co budowanie globalnej stopki. Należy pamiętać, że każda niestandardowa stopka dodana do szablonu całkowicie zastąpi standardową stopkę Divi, w tym dolny pasek stopki.

Zapisywanie zmian za pomocą Theme Buildera

Zapisywanie i anulowanie układów szablonów

Po zakończeniu tworzenia szablonu ważne jest, aby zapisać zmiany ustawień szablonu. Aby to zrobić, musisz kliknąć przycisk „Zapisz” w prawym dolnym rogu ekranu. Jeśli chcesz anulować zmiany wprowadzone w układzie, po prostu kliknij ikonę „X” w prawym górnym rogu.

Uwaga: Jeśli klikniesz ikonę „X” podczas tworzenia (bez zapisywania) układu szablonu, to on nie zostanie utworzony ani zapisany.

Zapisywanie zmian Theme Buildera

Podobnie jak w przypadku Ustawień motywu Divi, musisz zapisać zmiany w Theme Builder, aby zmiany zostały wprowadzone. Jeśli odświeżysz stronę lub zamkniesz okno, zmiany zostaną anulowane / utracone.

Korzystanie z zawartości dynamicznej w Theme Builder

Treści dynamiczne (tj. Tytuł, wyróżniony obraz, treść posta itp.) Mogą być zawarte w układach szablonów globalnych lub niestandardowych. Jest to potężne narzędzie, które pozwala usprawnić projekt i funkcjonalność strony internetowej, szczególnie w przypadku postów na blogu i / lub produktów WooCommerce.

Budowanie szablonu postu na blogu w całej witrynie

Wpisy na blogu są doskonałym przykładem tego, gdzie potrzebny jest niestandardowy szablon z dynamiczną treścią. Umożliwi to zaprojektowanie szablonu posta na blogu, który zostanie zastosowany do wszystkich postów na blogu w całej witrynie przy użyciu Divi Builder i dynamicznej zawartości. Po zakończeniu wystarczy zaktualizować zawartość wszystkich przyszłych postów. Nowa treść posta odziedziczy projekt niestandardowego szablonu!

Oto szybki przykład jak to zrobić:

Najpierw utwórz nowy szablon i przypisz szablon do wszystkich postów. Następnie dodaj Custom Body do szablonu.

Za pomocą Edytora układu szablonów zaprojektuj cały układ za pomocą narzędzia Divi Builder w połączeniu z wbudowanymi modułami i opcjami dynamicznej zawartości Divi.

Na przykład możesz użyć modułu Tytuł postu, aby dynamicznie wyświetlać tytuł posta.

Lub użyj modułu tekstowego, który pobiera datę publikacji.

Co najważniejsze, podczas tworzenia dowolnego niestandardowego układu treści dla szablonu należy uwzględnić moduł Post Content. Moduł Post Content zawiera obszar treści strony lub postu, który ma być wyświetlany w obszarze treści szablonu.

Po utworzeniu szablonu możesz łatwo utworzyć nowy post na blogu za pomocą domyślnego edytora postów WordPress i sprawić, aby ten post odziedziczył projekt szablonu posta utworzonego za pomocą Divi Theme Builder.

Do tego niestandardowego szablonu można również korzystać z narzędzi Divi Builder w wpisach na blogu. Będzie działać w ten sam sposób. Cokolwiek zbudujesz za pomocą Divi Buildera dla twojego wpisu, pojawi się w obszarze wyznaczonym przez moduł Post Content w układzie szablonu.

Tworzenie strony produktu dla całej witryny

Treści dynamiczne nie dotyczą tylko szablonów wpisów na blogu. Możesz także użyć wbudowanych modułów Divi WooCommerce (lub Woo), aby stworzyć niestandardowy szablon strony produktu w całej witrynie.

Aby to zrobić, po prostu utwórz nowy szablon i przypisz szablon do „Wszystkie produkty”. Następnie dodaj niestandardowy obiekt do szablonu i kliknij, aby zbudować układ Body Content za pomocą edytora szablonów.

Następnie użyj Theme Builder Divi i modułów Woo, aby zaprojektować szablon strony produktu.

Teraz za każdym razem, gdy tworzysz nowy produkt na zapleczu WordPresss za pomocą standardowego edytora stron produktu, produkt automatycznie odziedziczy projekt przypisanego szablonu treści.

Opcje przenoszenia szablonów Theme Builder

Eksportowanie i importowanie szablonów

Korzystając z opcji przenośności Theme Buildera, możesz wyeksportować wszystkie lub niektóre szablony motywów w jednym pliku. Te pliki eksportu będą zawierać wszystkie układy bibliotek powiązane z każdym szablonem i wszystkie dane przypisania szablonu.

Aby uzyskać dostęp do opcji przenośności narzędzia Theme Builder, kliknij ikonę przenośności po prawej stronie fioletowego paska u góry interfejsu programu Theme Builder.

Zostanie wyświetlonye okno Popup przenośności z kartą eksportu. Nadaj nazwę eksportowanemu plikowi, zaktualizuj opcję eksportowania (w razie potrzeby) i kliknij, aby wyeksportować plik. Jeśli pozostawisz opcję eksportu, aby wyeksportować wszystkie szablony, wszystkie szablony motywów zostaną wyeksportowane do pliku.

Jeśli usuniesz zaznaczenie opcji „Eksportuj wszystkie szablony”, zobaczysz listę opcji, w tym określony szablon, który możesz dołączyć do pliku eksportu.

Aby zaimportować plik json szablonu Theme Buildera do swojej witryny, musisz w oknie popup wybrać zakładkę importowania. Wybierz plik, który chcesz zaimportować, zaktualizuj opcje zastępowania (w razie potrzeby) i kliknij, aby zaimportować plik.

WAŻNE: importowanie importuje wszystko, nawet szablony przypisane do stron i postów, które nie istnieją w bieżącej instalacji WP. Wszystkie konflikty są rozwiązywane przez zezwolenie importowanym szablonom na zastąpienie istniejących szablonów w witrynie. Oznacza to, że szablon domyślny jest zastępowany, a wszystkie przypisania stron lub postów importowanych szablonów mają pierwszeństwo. Na przykład, jeśli zaimportujesz szablon przypisany do strony 404, spowoduje to usunięcie strony 404 z bieżącego szablonu, który jest przypisany do strony 404.

Importuj i eksportuj całe pakiety Theme Builder

Eksportowanie Theme Builder nazywane jest „Theme Builder Pack”. Pomyśl o nich jak o paczkach Divi Layout, z wyjątkiem ogólnej struktury witryny zamiast poszczególnych projektów stron. Theme Builder Pack motywów w wielu przypadkach eliminują potrzebę korzystania z motywów potomnych i umożliwiają tworzenie gotowych szablonów motywów, które można wykorzystać na dowolnej stronie internetowej.

Divi Theme Builder – Nowe Narzędzie w Divi 4.0 – Tutorial