Jak dodać wyróżnione cytaty Divi-Built w całym swoim poście Gutenberg

Pisząc post na blogu, często będziesz chciał kogoś zacytować lub podkreślić zdanie użyte w zwykłym akapicie. Teraz, w edytorze Gutenberg, możesz od razu dodać blok cytatu, ale nie zapewnia to tak dużej swobody projektowania, jak byś chciał. Z blokami układu Divi to już nie problem. Możesz łatwo zbudować konkretny blok za pomocą Divi, zachowując jednocześnie środowisko Gutenberga w innym miejscu. W tym samouczku pokażemy, jak dodawać wbudowane wyróżnione cytaty do swoich postów na blogu za pomocą Divi. Będziesz mógł również pobrać plik JSON za darmo!

Weźmy się za to.

Zapowiedź

Zanim zagłębimy się w samouczek, rzućmy okiem na wyniki na różnych rozmiarach ekranu.

Przykład 1

Pulpit

mobilny

Przykład #2

Pulpit

mobilny

Pobierz układy wyróżnionych cytatów Divi-Built za DARMO

Aby położyć ręce na darmowych układach wyróżnionych cytatów, zbudowanych przez Divi, najpierw musisz je pobrać za pomocą poniższego przycisku. 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!

https://youtu.be/zScpa4-I7-8

Subskrybuj nasz kanał YouTube

Importowanie bloku układu JSON

Prześlij układ do biblioteki Divi

Aby zaimportować plik JSON, który udało Ci się pobrać powyżej, przejdź do swojej biblioteki Divi na zapleczu pulpitu WordPress i kliknij „Importuj i eksportuj”.

Następnie wybierz plik JSON w folderze pobierania i kliknij „Importuj układy Divi Builder”.

Dodaj nowy blok Divi wewnątrz postu Gutenberga

Po zaimportowaniu układu możesz przejść do swojego postu Gutenberg i dodać nowy blok układu Divi.

Importuj plik JSON z zapisanych układów

Następnie kliknij „Wczytaj z biblioteki”, przejdź do „Twoich zapisanych układów” i wybierz układ, aby zaimportować wyróżniony układ cytatów do swojego posta na blogu. Otóż ​​to!

Ogólne kroki

Użyj prostego i przyjaznego dla UX szablonu postu na blogu

Pobierz szablon

Aby zdefiniować styl tego samouczka, użyjemy szablonu poprzedniego posta. Przejdź do tego posta i pobierz szablon.

Przejdź do kreatora motywów Divi

Następnie przejdź do Divi Theme Builder.

Prześlij szablon posta

Kliknij ikonę w prawym górnym rogu, przejdź do zakładki importu i zaimportuj szablon posta, który pobrałeś w pierwszym kroku tego samouczka.

Otwórz istniejący post Gutenberga lub utwórz nowy

Po ustawieniu szablonu posta możesz utworzyć nowy post Gutenberga lub otworzyć istniejący.

Dodaj nowy wbudowany blok Divi

Dodaj nowy blok Divi gdzieś w swoim poście.

Zbuduj nowy układ wewnątrz bloku Divi

Po dodaniu bloku otrzymasz dwie opcje. Wybierz ten, który mówi „Zbuduj nowy układ”.

Odtwórz przykład nr 1

Ustawienia sekcji

Rozstaw

Gdy znajdziesz się w edytorze bloków układu Divi, zauważysz sekcję. Aby odtworzyć pierwszy przykładowy projekt, otwórz ustawienia przekroju i odpowiednio zmodyfikuj wartości marginesów:

• Górny margines: 50px
• Margines dolny: 50px
• Lewy margines: -5%
• Prawy margines: -5%

Granica

Dodaj lewe obramowanie do następnej sekcji.

• Szerokość lewej krawędzi: 2px
• Kolor lewej krawędzi: #000000

Animacja

I użyj następujących ustawień animacji:

• Styl animacji: slajd
• Kierunek animacji: w dół
• Czas trwania animacji: 1500 ms
• Intensywność animacji: 200%
• Początkowe krycie animacji: 100%
• Krzywa szybkości animacji: łatwość wchodzenia i wychodzenia

Dodaj nowy wiersz

Struktura kolumny

Kontynuuj, dodając nowy wiersz do sekcji, korzystając z następującej struktury kolumn:

Rozmiary

Otwórz ustawienia wiersza i odpowiednio zmień ustawienia rozmiaru:

• Szerokość: 90%
• Maksymalna szerokość: 100%

Animacja

Uzupełnij ustawienia wiersza, zmieniając ustawienia animacji w następujący sposób:

• Styl animacji: zanikanie
• Opóźnienie animacji: 1500 ms
• Krzywa szybkości animacji: łatwość wchodzenia i wychodzenia

Dodaj moduł tekstowy do kolumny

Wstaw zawartość H3

Jedyny moduł, którego potrzebujemy, to moduł tekstowy. Wstaw podświetloną treść cytatu H3.

Ustawienia tekstu H3

Uzupełnij ustawienia modułu, modyfikując ustawienia tekstu H3 w następujący sposób:

• Styl czcionki H3: kursywa
• Rozmiar tekstu H3: 2,1 rem (komputer stacjonarny), 1,5 rem (tablet), 1,3 rem (telefon)
• Wysokość linii H3: 1,5 em

Odtwórz przykład nr 2

Ustawienia sekcji

Rozstaw

Chcesz zamiast tego odtworzyć drugi przykład projektu? Otwórz ustawienia przekroju i zmodyfikuj wartości odstępów w następujący sposób:

• Górny margines: 50px
• Margines dolny: 50px
• Lewy margines: -5%
• Prawy margines: -5%
• Górna wyściółka: 0px
• Dolna wyściółka: 0px

Dodaj nowy wiersz

Struktura kolumny

Następnie dodaj nowy wiersz, korzystając z następującej struktury kolumn:

Rozmiary

Nie dodając jeszcze żadnych modułów, otwórz ustawienia wierszy i pozwól wierszowi zająć całą szerokość kontenera sekcji.

• Szerokość: 100%
• Maksymalna szerokość: 100%

Dodaj moduł tekstowy nr 1 do kolumny

Dodaj zawartość

Czas dodać moduły, zaczynając od pierwszego modułu tekstowego. Dodaj cytat do pola treści.

Ustawienia tekstu

Przejdź do zakładki projektu i zmień ustawienia tekstu w następujący sposób:

• Czcionka tekstu: wyświetlacz Playfair
• Kolor tekstu: #eaeaea
• Rozmiar tekstu: 500px
• Wysokość linii tekstu: 0em

Rozstaw

Dodajemy też górny margines.

• Górny margines: 150px

Animacja

Następnie zmienimy ustawienia animacji.

• Styl animacji: Odwróć
• Kierunek animacji: Centrum
• Opóźnienie animacji: 500 ms
• Intensywność animacji: 200%
• Krzywa szybkości animacji: łatwość wchodzenia i wychodzenia

Pozycja

Upewnimy się, że cytat jest umieszczony w lewym górnym rogu kontenera wierszy, modyfikując również ustawienia pozycji.

• Pozycja: bezwzględna
• Lokalizacja: górny lewy

Dodaj moduł tekstowy nr 2 do kolumny

Dodaj zawartość H3

Przejdź do następnego modułu tekstowego. Dodaj wyróżnioną treść cytatu H3 do pola treści.

Ustawienia tekstu H3

Przejdź do zakładki projektowania modułu i zmień ustawienia tekstu H3 w następujący sposób:

• Styl czcionki nagłówka 3: kursywa
• Rozmiar tekstu nagłówka 3: 2,6 rem (komputer), 1,7 rem (tablet), 1,3 rem (telefon)
• Nagłówek 3 Wysokość linii: 1.4em

Rozstaw

Dodaj również niestandardowe wartości marginesów dla różnych rozmiarów ekranu.

• Górny margines: 150px
• Margines dolny: 150px
• Lewy margines: 150px (komputer), 70px (tablet), 30px (telefon)
• Prawy margines: 150px (komputer), 70px (tablet), 30px (telefon)

Animacja

I uzupełnij ustawienia modułu, zmieniając ustawienia animacji w następujący sposób:

• Styl animacji: zanikanie
• Opóźnienie animacji: 2000 ms
• Krzywa szybkości animacji: łatwość wchodzenia i wychodzenia

Dodaj moduł tekstowy nr 3 do kolumny

Dodaj zawartość

Przejdźmy do następnego i ostatniego modułu, który jest kolejnym modułem tekstowym. Dodaj symbol cudzysłowu do pola treści.

Ustawienia tekstu

Przejdź do zakładki projektu modułu i zmień ustawienia tekstu.

• Czcionka tekstu: wyświetlacz Playfair
• Kolor tekstu: #eaeaea
• Rozmiar tekstu: 500px
• Wysokość linii tekstu: 0em
• Wyrównanie tekstu: do prawej

Animacja

Następnie użyj następujących ustawień animacji:

• Styl animacji: Odwróć
• Kierunek animacji: Centrum
• Opóźnienie animacji: 1000 ms
• Intensywność animacji: 200%
• Krzywa szybkości animacji: łatwość wchodzenia i wychodzenia

Pozycja

I upewnij się, że cytat jest umieszczony w prawym dolnym rogu kontenera wiersza.

• Pozycja: bezwzględna
• Lokalizacja: dolny prawy

Zapisz układy cytatów w bibliotece Divi do ponownego wykorzystania

Po ukończeniu wybranego układu cytatów upewnij się, że zapisałeś go w swojej bibliotece Divi, aby móc z niego korzystać również w przyszłych postach!

Zapowiedź

Teraz, gdy przeszliśmy przez wszystkie kroki, przyjrzyjmy się ostatecznemu wynikowi na różnych rozmiarach ekranu.

Przykład 1

Pulpit

mobilny

Przykład #2

Pulpit

mobilny

Końcowe przemyślenia

W tym poście pokazaliśmy, jak wykazać się kreatywnością dzięki blokom układu Divi. Mówiąc dokładniej, pokazaliśmy, jak dodawać animowane, wyróżnione cytaty w poście na blogu Gutenberga. Możliwości projektowania są nieograniczone, ale przedstawiliśmy Ci dwa przykłady, od których możesz zacząć. Udało Ci się również pobrać pliki JSON za darmo! Jeśli masz jakieś pytania lub sugestie, możesz zostawić komentarz w sekcji komentarzy poniżej.

Jeśli chcesz dowiedzieć się więcej o Divi i zdobyć więcej gratisów Divi, zasubskrybuj nasz biuletyn e-mailowy i kanał YouTube, dzięki czemu zawsze będziesz jedną z pierwszych osób, które poznają i będą czerpać korzyści z tych bezpłatnych treści.