Przejdź do głównej treści

Jak dołączyć blok Divi do przedmiotu Gutenberga

Divi: najłatwiejszy w użyciu motyw WordPress

Divi: Najlepszy motyw WordPress wszechczasów!

więcej Pobieranie 600.000, Divi jest najpopularniejszym motywem WordPress na świecie. Jest kompletny, łatwy w użyciu i zawiera więcej niż darmowe szablony 62. [Zalecane]

Tworzenie cennych postów na blogu wymaga czasu i wysiłku. Oprócz znalezienia najlepszych tematów do napisania w Twojej niszy ważne jest, aby czytelnicy byli zaangażowani i pozwalali im szybko znaleźć informacje, których szukają.

Teraz dobrym sposobem na zbliżenie się do tego rodzaju doświadczeń użytkownika jest udostępnienie wizualnego pola podsumowania na końcu postu na blogu, tuż przed końcowymi przemyśleniami.

Dzięki nowym blokom układu Divi możesz teraz bez wysiłku utworzyć pole podsumowania z wbudowanymi opcjami Divi. W tym samouczku przeprowadzimy Cię przez proces, a także możesz bezpłatnie pobrać plik JSON układu!

Zacznijmy od nowa!

Użyj szablonu publikacji dla szóstego pakietu motywów

Pobierz Sixth Theme Builder Pack

Pole podsumowania, które odtworzymy w tym samouczku, idealnie pasuje do modelu wydania szóstego darmowego pakietu generatora motywów. Idź doblogu i pobierz cały pakiet.

Idź do Divi Theme Builder

Następnie przejdź do Konstruktora motywów Divi.

Pobierz szablon publikacji

Kliknij ikonę w prawym górnym rogu i pobierz szablon publikacji pakietu tworzenia motywu. Pamiętaj, aby zmodyfikować wszelkie zmiany wprowadzone w generatorze motywów później.

Otwórz istniejącą publikację Gutenberga lub utwórz nową

Teraz, po dodaniu odpowiedniego szablonu publikacji, czas utworzyć pole podsumowania. Otwórz lub utwórz nową wiadomość za pomocą Gutenberga.

Dodaj streszczenie tytułu H2

Pod koniec postu na blogu dodamy nowy tytuł H2.

Dodaj nowy blok Divi online

Następnie dodamy nowy blok układu Divi.

Utwórz nowy układ w bloku Divi

Po dodaniu bloku będziesz mieć dwie opcje. Wybierz, aby utworzyć nowy układ.

Ustawienia sekcji

Kolor tła

W edytorze bloków układu Divi zauważysz sekcję. Otwórz tę sekcję i użyj do tego białego tła.

  • Kolor tła: #FFFFFF

rozstaw

Przejdź do karty projektowania sekcji i dodaj niestandardowe wartości marginesów i wypełnień.

  • Górny margines: 100px
  • Lewy margines: -10% (biuro), 0% (tablet i telefon)
  • Prawy margines: -10% (biuro), 0% (tablet i telefon)
  • Górna wyściółka: 0px
  • Dolne wypełnienie: 0px

granica

Dodaj także promień obramowania.

  • U dołu po lewej: 16 pikseli
  • U dołu po prawej: 16 pikseli

Pole cienia

Z subtelnym cieniem pudełka.

  • Pole Shadow Blur Strength: 60px
  • Siła propagacji cienia w polu: 10 pikseli
  • Kolor cienia: rgba (0,0,0,0,08)

Dodaj nową linię

Struktura kolumny

Kontynuuj dodawanie nowego wiersza do sekcji przy użyciu następującej struktury kolumn:

zaklejania

Bez dodawania modułu na razie otwórz parametry linii i pozwól linii zajmować całą szerokość kontenera sekcji.

Łatwo stwórz swoją stronę internetową dzięki Elementor

Elementor pozwala łatwo stworzyć dowolny projekt strony internetowej o profesjonalnym wyglądzie. Przestań płacić drogo za to, co możesz zrobić sam. [Bezpłatny]

  • Użyj niestandardowej szerokości rynny: Tak
  • Szerokość rynny: 1
  • Wyrównaj wysokości kolumn: Tak
  • Szerokość: 100%
  • Maksymalna szerokość: 100%

rozstaw

Następnie usuń domyślne górne i dolne wypełnienie z linii.

  • Górna wyściółka: 0px
  • Dolne wypełnienie: 0px

Ustawienia kolumny 1

Kolor tła

Następnie otwórz ustawienia w kolumnie 1 i użyj do tego białego koloru tła.

  • Kolor tła: #FFFFFF

rozstaw

Dodaj także niestandardowe wartości wypełnienia.

  • Górna wyściółka: 70px
  • Dolne wypełnienie: 70px
  • Lewa wyściółka: 70 pikseli
  • Prawa wyściółka: 70 pikseli

Pole cienia

Kontynuuj, dodając subtelny cień z domyślnym kolorem cienia i innym najechaniem kursorem.

  • Pole Shadow Blur Strength: 50px
  • Domyślny kolor cienia: rgba (0,0,0,0)
  • Kolor cienia w dymku: rgba (0,0,0,0,15)

Najedź skalą transformacji

Podsumowując, chcemy również delikatnie skalować kolumnę.

  • Prawo: 105%
  • Niski: 105%

Wskaźnik Hover Z.

Uzupełnij parametry kolumny, dodając wskaźnik najechania z.

  • Wskaźnik aktywacji Z: 11

Dodaj moduł tekstowy # 1 do kolumny

Dodaj numer do obszaru zawartości

Czas dodać moduły, zaczynając od pierwszego modułu tekstowego. Dodaj numer do obszaru zawartości.

Tło gradientowe

Następnie dodaj tło gradientowe.

  • Kolor 1: # ff5e92
  • Kolor 2: # ffd4b6
  • Kierunek gradientu: 165 stopni

Ustawienia tekstu

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

  • Czcionka tekstu: Poppins
  • Kolor tekstu: #ffffff
  • Rozmiar tekstu: 26px
  • Wyrównanie tekstu: środek

zaklejania

Następnie przypisz szerokość i wysokość.

  • Szerokość: 150 pikseli
  • Wysokość: 150px

granica

Dodaj także promień obramowania.

  • Dolny lewy, prawy górny i prawy dolny: 100 pikseli

Główny element CSS

Aby wyśrodkować tekst w naszym kontenerze, będziemy musieli dodać kilka wierszy kodu CSS do głównego elementu modułu na karcie zaawansowanej.

Szukasz najlepszych motywów i wtyczek WordPress?

Pobierz najlepsze wtyczki i motywy WordPress na Envato i łatwo stwórz swoją stronę. Już więcej niż pobrań 49.720.000. [EXCLUSIVE]

display: flex;align-items: center;justify-content: center;

Pozycja

I zakończymy parametry modułu, zmieniając jego położenie.

  • Pozycja: absolutna
  • Lokalizacja: w lewym górnym rogu

Dodaj moduł tekstowy # 2 do kolumny

Dodaj zawartość H3

Przejdźmy do następnego modułu tekstowego. Dodaj wybraną zawartość H3.

Ustawienia tekstu H3

Następnie zmodyfikuj rozmiar tekstu H3 modułu.

  • Tytuł 3 Rozmiar tekstu: 23px

rozstaw

Zmień także ustawienia odstępów.

  • Górny margines: 100px
  • Dolny margines: 20px

Dodaj moduł separacji do kolumny

widoczność

Kolejnym modułem, którego potrzebujemy, jest moduł separacji. Upewnij się, że opcja „Pokaż separator” jest włączona.

  • Pokaż separator: Tak

Ustawienia linii

Przejdź do karty projektu modułu i zmodyfikuj parametry linii w następujący sposób:

  • Kolor linii: # ff5e92
  • Styl linii: jednolity
  • Pozycja linii: wysoka

zaklejania

Zmodyfikuj także rozmiar modułu.

  • Waga dzielnika: 2px
  • Szerokość: 20%

Dodaj moduł tekstowy # 3 do kolumny

Dodaj treść

Przejdźmy do następnego i ostatniego modułu tekstowego. Dodaj wybraną treść.

Klonowanie kolumny

Po wypełnieniu kolumny i wszystkich jej modułów możesz sklonować całą kolumnę.

Zmień kolor cienia domyślnego pola

Otwórz ustawienia w kolumnie 2 i zmień domyślny kolor odcienia.

  • Kolor cienia: rgba (0,0,0,0,06)

Zmień tło gradientowe modułu tekstowego nr 1

Otwórz pierwszy moduł tekstowy w następnej kolumnie 2 i zmień tło gradientowe.

  • Kolor 1: # 7e5ce6
  • Kolor 2: # 25b8ee

Zmień granicę modułu tekstowego nr 1

Zmień także ustawienia granicy modułu.

  • Lewy górny, lewy dolny i prawy dolny: 100 pikseli

Zmień pozycję modułu tekstowego nr 1

I przestaw moduł w zakładce zaawansowanej.

  • Lokalizacja: w prawym górnym rogu

Zmień kolor separatora

Kontynuuj, otwierając ustawienia modułu separacji. Zmień kolor linii, aby dopasować ją do nowej palety kolorów.

  • Kolor linii: # 7e5ce6

Zmień całą zawartość

Na koniec zmodyfikuj całą zawartość modułu w kolumnie 2.

Sklonuj całą sekcję dwukrotnie

Po ukończeniu pierwszej sekcji możesz ją dwukrotnie sklonować.

Zmień odstępy w pierwszej zduplikowanej sekcji

Otwórz ustawienia w pierwszej zduplikowanej sekcji i odpowiednio zmień wartości marginesów:

Z łatwością stwórz swój sklep internetowy

Uzyskaj woocommerce, najlepsze wtyczki e-commerce do sprzedaży produktów swoich fizycznych i cyfrowych na WordPressie. [Zalecane]

  • Lewy margines: -5% (komputer stacjonarny), 0% (tablet i telefon)
  • Prawy margines: -5% (biuro), 0% (tablet i telefon)

Zmień odstępy w drugiej zduplikowanej sekcji

Otwórz także drugi duplikat, usuń wszystkie wartości marginesów i dodaj niższy margines.

  • Dolny margines: 100px

Zmień całą zawartość

Na koniec zmodyfikuj całą zawartość modułu.

Zapisz układ w bibliotece Divi do ponownego użycia

Jeśli planujesz używać tego pola podsumowania w innych postach na blogu, pamiętaj o zapisaniu go w bibliotece Divi, aby uzyskać łatwy dostęp! To jest to!

badanie

Teraz, gdy przeszliśmy przez wszystkie etapy, rzućmy okiem na wynik na różnych rozmiarach ekranu.

końcowe przemyślenia

W tym artykule pokazaliśmy, jak dodać pole podsumowania do artykułu Gutenberga za pomocą nowych bloków układu Divi. Pola podsumowań to świetny wizualny sposób, aby pomóc odwiedzającym znaleźć informacje, których szukają.

Możesz także pobrać plik JSON układu bezpłatnie! Jeśli masz jakieś pytania, zostaw komentarz w sekcji komentarzy poniżej.

Ten artykuł zawiera komentarze 0

Zostaw komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *

Ta strona używa Akismet, aby zmniejszyć niechciane. Dowiedz się więcej o sposobie wykorzystania danych komentarzy.

Powrót do góry
1 akcji
udział1
ćwierkanie
Enregistrer