Jak utworzyć blok układu Divi wielokrotnego użytku dla postów na blogu Gutenberg

Blok układu Divi nadal jest użytecznym ulepszeniem motywu Divi, pozwalając nam dodać 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.

W tym samouczku zademonstrujemy, jak utworzyć blok układu Divi wielokrotnego użytku dla postów na blogu Gutenberga. Aby to zilustrować, zbudujemy dzielnik sekcji dla naszego przykładowego bloku układu Divi wielokrotnego użytku dla tego postu. Ale możemy z łatwością zastosować tę samą technikę, aby utworzyć blok układu Divi wielokrotnego użytku dla prawie wszystkiego z konstruktora Divi.

Zacznijmy.

Tworzenie bloku układu Divi dla posta na blogu Gutenberg

Utwórz lub edytuj post na blogu

Aby rozpocząć, musimy utworzyć nowy wpis na blogu lub edytować już istniejący. W tym przykładzie dodajmy trochę pozorowanej zawartości do tytułu i treści posta, używając kilku bloków nagłówka i akapitu. Następnie dodaj wyróżniony obraz i wybierz "Bez paska bocznego" dla układu strony w ustawieniach strony Divi.

Dodaj wbudowany blok układu Divi

Po utworzeniu większości postu wystarczy dodać nowy blok układu Divi w dowolnym miejscu w obszarze treści posta.

Aby go dodać, najedź kursorem na obszar, w którym chcemy dodać opcję e-mail. Następnie kliknij niebieską ikonę plusa, aby dodać nowy blok. Z listy bloków podręcznych wybierz blok Divi Layout.

Zbuduj nowy układ w bloku układu Divi

Po wybraniu bloku układu Divi będziemy mieli opcję „Zbuduj nowy układ” lub „Załaduj z biblioteki”. Ponieważ musimy zbudować nowy rozdzielacz dla naszego przykładu, wybierz opcję „Zbuduj nowy układ”.

Zaprojektuj układ za pomocą edytora bloków układu Divi

Po wybraniu przycisku Zbuduj nowy układ możemy zaprojektować nasz układ Divi w edytorze bloków układu.

W tym przykładzie zbudujemy niestandardowy separator lub dzielnik, używając dzielników kształtu przekroju Divi i tła gradientowego. Jest to element projektu, który będziemy mogli przekształcić w blok wielokrotnego użytku, aby w wygodny sposób dodawać podziały sekcji w poście Gutenberga.

Aby utworzyć projekt podziału przekroju, otwórz ustawienia przekroju i zaktualizuj następujące elementy:

• Kolor tła gradientu po lewej stronie: #ddd6f3
• Gradientowy kolor tła w prawo: #faaca8
• Kierunek gradientu: 90 stopni
• Pozycja startowa: 30%

• Styl Top Divider: patrz zrzut ekranu
• Kolor górnego dzielnika: #ffffff
• Wysokość górnego dzielnika: 50px

• Styl dolnego rozdzielacza: patrz zrzut ekranu
• Kolor dolnej przegrody: #ffffff
• Wysokość dolnej przegrody: 50px
• Klapka dolnej przegrody: pozioma

• Wysokość: 100px
• Padding: 0px na górze, 0px na dole

Po zakończeniu projektowania pamiętaj, aby zapisać blok układu Divi.

Teraz dzielnik sekcji Divi Layout Block pojawi się w edytorze postów WordPress.

Pamiętaj, że odstępy nad i pod układem Divi bloku układu mogą wydawać się większe na zapleczu niż na interfejsie.

Teraz jesteśmy gotowi do przekształcenia tego bloku układu Divi w blok układu wielokrotnego użytku, aby ułatwić dodanie tego samego dzielnika sekcji w przyszłych postach.

Ale zanim to zrobimy, może pomóc wiedzieć, czym jest blok wielokrotnego użytku w WordPressie.

Co to jest blok układu wielokrotnego użytku

Blok wielokrotnego użytku w domyślnym edytorze bloków WordPress (Gutenberg) jest bardzo podobny do globalnego elementu w Divi. Blok może być używany wielokrotnie, ale zawartość i wygląd pozostają takie same we wszystkich instancjach. A kiedy edytujemy blok układu wielokrotnego użytku, zmiana jest stosowana do wszystkich wystąpień bloku układu w całej witrynie. Gdy blok układu zostanie ponownie wykorzystany w WordPress, będzie on dostępny na liście bloków podczas pisania posta. Dzięki temu bardzo wygodne jest wielokrotne dodawanie tego samego bloku układu w wielu postach na blogu.

Przekształcanie bloku układu Divi w blok układu wielokrotnego użytku

Aby nasz blok układu Divi stał się blokiem wielokrotnego użytku, najedź kursorem na blok układu i otwórz menu ustawień, klikając ikonę z trzema kropkami. Następnie z listy wybierz opcję „Dodaj do bloków wielokrotnego użytku”.

Następnie nadaj blokowi wielokrotnego użytku nazwę i kliknij przycisk Zapisz, aby zapisać blok jako blok wielokrotnego użytku.

Teraz, gdy dodamy nowy blok w poście na blogu, możemy znaleźć nasz nowy blok układu wielokrotnego użytku na liście (pod przełącznikiem Kategoria wielokrotnego użytku). Wystarczy kliknąć blok wielokrotnego użytku, a zostanie on dodany do posta.

Teraz, jeśli spojrzymy na post na żywo, możemy zobaczyć dwa wystąpienia tego samego dokładnego dzielnika sekcji.

Gdy wielokrotnie użyjemy bloku wielokrotnego użytku w poście lub witrynie, możemy edytować jedno z wystąpień bloku wielokrotnego użytku, a zmiany te zostaną zastosowane do wszystkich wystąpień bloku w całej witrynie.

Aby edytować blok układu wielokrotnego użytku, najedź na blok i kliknij przycisk edycji w prawym górnym rogu bloku.

Następnie wybierz (kliknij) układ w bloku wielokrotnego użytku i kliknij ikonę edycji w górnym menu, które się pojawi. Możemy również kliknąć link edytuj układ pod zakładką bloku na prawym pasku bocznym.

Następnie zmień projekt układu tak, jak chcemy. W tym przykładzie możemy zmienić kolory używane dla tła gradientowego.

Po zapisaniu układu kliknij przycisk Zapisz w prawym górnym rogu bloku układu wielokrotnego użytku. Następnie zaktualizuj post i zobacz zmiany w aktywnej witrynie.

Zauważysz, że zmiany projektowe są aktualizowane dla wszystkich wystąpień układu wielokrotnego użytku.

Wskazówka: Używanie bloku układu wielokrotnego użytku jako szablonu

Są chwile, kiedy chcemy użyć zmodyfikowanej wersji bloku wielokrotnego użytku w naszym poście. Dzięki temu możemy dodać do posta blok wielokrotnego użytku jako szablon początkowy, dzięki czemu możemy dostosować blok układu dla określonej instancji bez wpływu na blok wielokrotnego użytku w całej witrynie.

Aby użyć bloku wielokrotnego użytku jako szablonu, najpierw dodaj blok wielokrotnego użytku do posta.

Następnie otwórz menu bloku i wybierz opcję „konwertuj na zwykły blok”.

Teraz możemy edytować układ dla konkretnego projektu dla tej instancji bez wpływu na inne bloki wielokrotnego użytku.

Końcowe przemyślenia

Tworzenie bloków układu Divi wielokrotnego użytku może być pomocne, szczególnie w przypadku elementów projektu Divi, takich jak przegroda sekcji. Dzięki temu możemy wielokrotnie używać dzielnika w naszych postach. Nie tylko usprawnia to proces pisania posta, ale także daje nam możliwość znacznie łatwiejszego aktualizowania projektu bloku w całej witrynie. W tym poście pokazaliśmy, jak dodać rozdzielacz sekcji jako blok wielokrotnego użytku, ale ta sama technika może być wykorzystana do tworzenia niekończących się bloków układu Divi wielokrotnego użytku z niezliczonych innych powodów.

Czy potrafisz znaleźć przydatne sposoby włączania bloków układu Divi wielokrotnego użytku do własnych postów na blogu?

Czekam na kontakt z Państwem w komentarzach.

Pozdrawiam!