Jak budować bloki układu obrazu wielokrotnego użytku w celu dodawania obrazów w stylu Divi do postów Gutenberga?

Blok układu Divi może być używany jako blok układu wielokrotnego użytku do dodawania obrazów w stylu Divi do postów na blogu Gutenberga. Łączy to potężne opcje projektowania i funkcjonalność Divi (do tworzenia pięknych obrazów) z wygodą pisania postów (i dodawania bloków) za pomocą Gutenberga.

W tym samouczku zademonstrujemy, jak wykorzystać blok układu Divi do zaprojektowania kilku oszałamiających układów obrazu. Następnie dodamy te układy jako bloki wielokrotnego użytku w Gutenbergu. Dzięki tej technice będziemy mogli dodać prawie każdą funkcję Divi do naszych obrazów (tła, lightbox, filtry, animacje, efekty przewijania i wiele więcej). Następnie możemy użyć tego wspaniałego projektu jako wygodnego szablonu obrazu do dodawania obrazów do przyszłych postów tworzonych za pomocą Gutenberga.

Zacznijmy!

zapowiedź

Pobierz BEZPŁATNIE bloki układu obrazu wielokrotnego użytku

Aby położyć swoje ręce na blokach układu z tego samouczka, najpierw musisz je pobrać 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!

Jak korzystać z pobierania, aby zaimportować te bloki układu do swojej witryny?

Aby zaimportować te wielokrotnego użytku bloki układu obrazu Divi do swojej witryny, najpierw musisz rozpakować pobrany plik. Znajdziesz tam trzy pliki JSON, które musisz zaimportować do swojej witryny.

Przejdź do edycji posta za pomocą domyślnego edytora (Gutenberg). Otwórz menu "Więcej narzędzi i opcji" w prawym górnym rogu strony i wybierz "Zarządzaj wszystkimi blokami wielokrotnego użytku".

Następnie kliknij przycisk Importuj z JSON. Wybierz jeden z plików JSON z folderu pobierania i kliknij przycisk importu.

Powtórz ten proces, aby zaimportować wszystkie trzy pliki JSON.

Po zakończeniu dodaj nowy blok w obrębie Gutenberga. Zaimportowane bloki układu wielokrotnego użytku będziemy mogli znaleźć pod przełącznikiem opcji wielokrotnego użytku. Po prostu kliknij ten, który chcesz dodać do swojego posta.

Otóż ​​to!

Przejdźmy do samouczka, dobrze?

Czego potrzebujemy, aby zacząć

Aby rozpocząć, musimy wykonać następujące czynności:

1. Jeśli jeszcze tego nie zrobiłeś, zainstaluj i aktywuj motyw Divi.
2. Utwórz nowy post w WordPressie i użyj domyślnego edytora (Gutenberg), aby dodać fałszywą treść (tytuł, nagłówki, akapity, wyróżniony obraz itp.). Zasadniczo potrzebujemy posta testowego, aby zbudować bloki układu obrazu w stylu Divi.

Po tym jesteśmy gotowi do startu.

Część 1: Tworzenie obrazu o pełnej szerokości z blokiem układu Divi wielokrotnego użytku z podpisem

Dodaj blok układu Divi

Aby rozpocząć, dodaj blok układu Divi do swojego posta.

Następnie kliknij „Zbuduj nowy układ”.

Projektowanie układu obrazu Divi

W Edytorze bloku układu rozpocznij projektowanie układu, dodając jednokolumnowy wiersz.

Moduł obrazu

Dodaj moduł obrazu do wiersza.

Następnie zaktualizuj ustawienia w następujący sposób:

• Otwórz w Lightbox: TAK

Dzięki temu nasz obraz będzie wyświetlany w lightboxie po kliknięciu.

• Nakładka obrazu: WŁĄCZONA
• Kolor ikony nakładki: #ffffff
• Kolor nakładki na wskaźniku myszy: rgba (120,47,130,0,57)

Aby zrobić trochę miejsca wokół naszego obrazu, zaktualizuj ustawienia wiersza w następujący sposób:

• Użyj niestandardowej szerokości rynny: TAK
• Szerokość rynny: 1
• Szerokość: 90%
• Maksymalna szerokość: 90%
• Wyściółka: 5% góra, 5% dół

To da nam 5% odstępu wokół obrazu. Będzie to również przestrzeń, w której będzie wyświetlany gradient tła, który dodamy do sekcji.

Otwórz ustawienia przekroju i zaktualizuj projekt za pomocą gradientu tła w następujący sposób:

• Kolor tła gradientu po lewej stronie: #782f82
• Prawy kolor tła gradientu: #fe756b
• Kierunek gradientu: 90 stopni

Aby obraz nieco wykraczał poza kontener treści posta na blogu, możemy nadać sekcji niestandardową szerokość w następujący sposób:

• Szerokość: 110%
• Maksymalna szerokość: 100%
• Marża: pozostało -5%
• Padding: 0px na górze, 0px na dole

Na koniec nadaj sekcji kreatywny akcent, dodając wewnętrzny cień pudełka w następujący sposób:

• Cień pudełka: patrz zrzut ekranu
• Pozycja pozioma cienia pudełka: 5vw
• Pozycja pionowa cienia pudełka: 5vw
• Kolor cienia: rgba (255,255,255,0.7)

Jeśli chcemy mieć układ obrazu bez podpisu, możemy na tym poprzestać, ale aby dodać podpis do układu obrazu, dodaj moduł tekstowy pod obrazem.

Następnie dodaj zawartość wypełniacza, która będzie służyć jako tekst podpisu.

Następnie zaktualizuj następujące ustawienia tekstu:

• Czcionka tekstu: Montserrat
• Grubość czcionki tekstu: pół pogrubiona
• Kolor tekstu: #ffffff
• Szerokość: 80%
• Wyrównanie modułu: prawo
• Marża: 5% góry

Po zakończeniu zapisz układ za pomocą Ctrl + S lub otwórz pasek ustawień na dole i kliknij „Zapisz i wyjdź”.

Dodawanie układu obrazu do bloków wielokrotnego użytku

Aby dodać układ do bloków wielokrotnego użytku, kliknij menu "Więcej opcji" nad blokiem i wybierz "Dodaj do bloków wielokrotnego użytku".

Nadaj blokowi wielokrotnego użytku nazwę i kliknij „Zapisz”.

Teraz obraz o pełnej szerokości z układem podpisów został dodany do bloków wielokrotnego użytku i będzie dostępny z listy bloków podczas tworzenia posta.

Nie zapomnij zaktualizować/zapisać posta, aby zapisać zmiany.

Część 2: Tworzenie lewego obrazu z blokiem układu Divi wielokrotnego użytku z podpisem

Teraz obraz o pełnej szerokości z układem podpisów został dodany do bloków wielokrotnego użytku, możemy użyć tego bloku, aby utworzyć nasz lewy obraz z układem podpisów.

Konwertuj blok wielokrotnego użytku na blok zwykły

Aby rozpocząć, otwórz menu "Więcej opcji" u góry bloku wielokrotnego użytku zawierającego układ obrazu o pełnej szerokości. Następnie wybierz „Konwertuj na zwykły blok”.

Nie martw się, nie spowoduje to usunięcia bloku układu, który właśnie utworzyliśmy z bloków wielokrotnego użytku (jest jednak na to opcja). To po prostu sprawi, że blok wielokrotnego użytku stanie się zwykłym blokiem, dzięki czemu będziemy mogli edytować i używać bloku dla pojedynczej instancji.

Aktualizuj układ

Gdy blok jest regularny, kliknij przycisk Edytuj układ nad blokiem.

W edytorze układu otwórz ustawienia przekroju i zaktualizuj szerokość w następujący sposób:

• Szerokość: auto
• Maksymalna szerokość: 500px

To wszystko, co musimy zrobić w edytorze układu. Pamiętaj, aby zapisać i wyjść z układu.

Po wybraniu bloku otwórz pasek boczny ustawień głównych i wybierz kartę bloku, aby wyświetlić ustawienia bloku. Pod przełącznikiem zaawansowanym dodaj następującą klasę:

• Dodanie klasy CSS: alignleft

Ta klasa jest natywna dla WordPressa i przesunie blok po lewej stronie, co spowoduje również uniesienie naszego obrazu po lewej stronie treści naszego posta.

Po dodaniu klasy otwórz menu „Więcej opcji” bloku i kliknij „Dodaj do bloków wielokrotnego użytku.

Nadaj blokowi wielokrotnego użytku nazwę (np. „Lewy obraz z podpisem”) i kliknij Zapisz.

Teraz blok układu Lewy obraz z podpisem został dodany do listy bloków wielokrotnego użytku, aby zapewnić łatwy dostęp.

Część 3: Tworzenie „właściwego obrazu z podpisem” wielokrotnego użytku bloku układu Divi

Do tej pory mamy obraz o pełnej szerokości z blokiem układu podpisów i lewy obraz z blokiem układu podpisów. Teraz możemy dodać odpowiedni obraz z blokiem układu podpisów.

Konwertuj blok wielokrotnego użytku na blok zwykły

Aby to zrobić, otwórz menu "Więcej opcji" na lewym obrazie z blokiem wielokrotnego użytku z podpisem. Następnie wybierz „Konwertuj na zwykły blok”.

Aktualizuj układ

Gdy blok jest zwykłym blokiem układu, kliknij, aby edytować układ.

Następnie otwórz ustawienia sekcji i wyjmij lewy margines.

Zapisz i wyjdź z edytora układu.

Następnie zaktualizuj dodatkową klasę CSS bloku w następujący sposób:

• Dodatkowa klasa CSS: alignright

Po dodaniu klasy dodaj blok układu do bloków wielokrotnego użytku.

I nadaj blokowi wielokrotnego użytku nazwę (tj. „Prawy obraz z podpisem”) i zapisz go.

Teraz kliknij jedną z niebieskich ikon plusa pod blokiem w poście, aby dodać nowy blok. Następnie w wyskakującym okienku listy bloków otwórz przełącznik Wielokrotnego użytku. Mamy teraz gotowe do użycia trzy bloki układu obrazu wielokrotnego użytku.

Część 4: Używanie bloków układu obrazu wielokrotnego użytku na poście.

Chociaż utworzyliśmy nasze bloki układu obrazu, istnieją one (dla naszych celów) tylko jako szablon, aby przyspieszyć proces dodawania obrazu do posta. Dlatego za każdym razem, gdy chcemy dodać rzeczywisty obraz do postu przy użyciu tych bloków układu, musimy najpierw przekonwertować go na zwykły blok przed dodaniem obrazu i podpisu do układu.

Oto jak to zrobić.

Krok 1: Dodaj blok układu wielokrotnego użytku

Dodaj jeden z bloków układu obrazu Divi wielokrotnego użytku do posta.

Krok 2: Przekształć go w zwykły blok

Otwórz menu "Więcej opcji" i wybierz "Konwertuj na zwykły blok".

Krok 3: Edytuj blok układu z nowym obrazem i podpisem

Gdy blok jest regularny, kliknij, aby edytować układ.

Zaktualizuj układ, dodając wybrany przez siebie obraz.

Następnie zaktualizuj tekst podpisu w module tekstowym.

Krok 4: Zapisz blok układu

Po zakończeniu zapisz i wyjdź z edytora układu.

Kontynuuj ten sam proces, aby dodać pozostałe dwa układy obrazów do posta.

Ostateczny wynik

Końcowe przemyślenia

Kiedy już opanujemy używanie bloku układu Divi, staje się oczywiste, jak cenny może być dla życia naszego bloga. W tym poście omówiliśmy, jak używać bloku układu, aby dodać całkiem fajne obrazy w stylu Divi do posta na blogu Gutenberga. Sztuczka polega na tym, aby najpierw zapisać układy jako blok wielokrotnego użytku. Następnie, gdy jesteśmy gotowi dodać obrazy do posta na blogu, możemy łatwo przekonwertować blok wielokrotnego użytku na zwykły blok, aby móc dodać nasz obraz i podpis.

Mamy nadzieję, że dostarczy to inspiracji do przeniesienia obrazów bloga na zupełnie nowy poziom.

Czekam na kontakt z Państwem w komentarzach.

Pozdrawiam!