Jak stylizować moduł komentarzy Divi w szablonie postu na blogu

Opublikowany: 2020-01-11

Projektowanie szablonu postów na blogu jest dość łatwe dzięki kreatorowi motywów Divi. Ale jest jedna rzecz, która zwykle jest pomijana podczas projektowania szablonów blogów, a jest to sekcja komentarzy. Na szczęście Divi ma konfigurowalny moduł komentarzy, który można łatwo dodać do szablonu posta na blogu. W tym poście pokażemy, jak utworzyć dwa niestandardowe projekty sekcji komentarzy, które można umieścić w dowolnym szablonie bloga. Będziesz mógł również pobrać plik JSON za darmo!

Weźmy się za to.

Zapowiedź

Przyjrzyjmy się, jak projekty układu komentarzy wyglądają na różnych rozmiarach ekranu. Pierwszy projekt to minimalistyczny styl w czerni i bieli, a drugi jest bardziej kolorowy.

Pulpit

Moduł komentarzy Divi w szablonie postu na blogu

Tablet

Telefon

Pulpit

Moduł komentarzy Divi w szablonie postu na blogu

Tablet

mobilny

Pobierz szablony modułu komentarzy ZA DARMO

Aby położyć swoje ręce na szablonach bezpłatnego modułu komentarzy, 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

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.

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!

Odtwórzmy projekt modułu komentarzy nr 1

Utwórz projekt tła

Pierwszym krokiem do odtworzenia szablonu układu komentarzy czarno-białych jest zaprojektowanie tła kropek. Jeden do widoku pulpitu, a drugi do responsywnych ekranów. Jeśli chcesz stworzyć to samodzielnie, potrzebujesz narzędzia do tworzenia szablonów Adobe Illustrator. W przeciwnym razie możesz pobrać podobny wzór z Internetu lub użyć tego, który znajduje się w powyższym pliku .zip do pobrania.

  1. W programie Adobe Illustrator utwórz pusty obszar roboczy o wysokości około 1920 pikseli i szerokości 670 pikseli.
  2. Utwórz czarne kółko w białym kwadracie z marginesami około połowy wielkości koła.
  3. Wybierz oba kształty i utwórz wzór, klikając obiekt > wzór > utwórz.
  4. W kreatorze wzorców wybierz „cegła po kolumnie” i zapisz jako próbkę wzorca.
  5. Utwórz kształt wielkości obszaru roboczego i zastosuj wzór.
  6. W przypadku responsywnych rozmiarów ekranu zmniejsz kształt o połowę. Naciśnij klawisz Shift, aby zachować proporcje kół.
  7. Skopiuj i wklej wzorzysty kształt obok pierwszego, a teraz masz ten sam wzór z mniejszymi kółkami.
  8. Pobierz oba osobno.

Otwórz Kreatora motywów i dodaj nowy szablon

Teraz nadszedł czas, aby otworzyć kreatora motywów. Dodaj nowy szablon.

Wybierz szablon dla wszystkich postów

Użyj nowego szablonu we wszystkich postach.

Dodaj niestandardową karoserię i zbuduj od podstaw

Na koniec zacznij budować niestandardową treść szablonu.

Dodaj nową sekcję

Tło

Teraz możemy zacząć budować projekt układu komentarzy. W edytorze szablonów zauważysz sekcję. Otwórz ustawienia sekcji i prześlij obrazy tła wzoru. Dodaj również nakładkę gradientową.

  • Tło: Gradient
  • Kolor 1: półprzezroczysty biały rgba (255,255,255,0.96)
  • Kolor 2: Biały #ffffff
  • Umieść gradient nad obrazem tła: Tak
  • Obraz:
    • Pulpit: wzór w kropki Obraz 1
    • Tablet i telefon: wzór w kropki 2

Dodaj nowy wiersz

Struktura kolumny

Teraz dodaj nowy wiersz z dwiema kolumnami.

Rozmiary

Następnie dostosuj rozmiar rzędu.

  • Niestandardowa szerokość rynny: 2
  • Szerokość: 80%
  • Maksymalna szerokość: 100%

Ustawienia kolumny 2

Granica

W ustawieniach kolumn dodaj górną ramkę do drugiej kolumny.

  • Styl: tylko Top
  • Szerokość: 3px
  • Kolor: czarny #ffffff

Dodaj moduł tekstowy do kolumny 1

Zadowolony

Dodaj pierwszy moduł tekstowy do kolumny 1 z wybraną zawartością H3.

  • Tekst: akapit

Tekst nagłówka

Następnie na karcie projektu dostosuj styl tekstu nagłówka.

  • Poziom nagłówka: H3
  • Czcionka: GFS Didot
  • Kolor: Czarny #000000
  • Rozmiar:
    • Pulpit: 5vw
    • Tablet: 9vw
    • Telefon: 13vw

Rozstaw

Dostosuj również odstępy.

  • Dolna wyściółka
    • Komputer stacjonarny: 3vw
    • Tablet i telefon: 7vw

Dodaj moduł referencji do kolumny 1

Zadowolony

Teraz dodaj moduł referencji do kolumny 1 z wybraną przez siebie treścią. Prześlij również obraz.

  • Autor: Lojalny Czytelnik
  • Stanowisko: specjalista ds. marketingu treści
  • Firma: Tiger Media Company
  • Treść: tekst akapitowy
  • Obraz: Zdjęcie portretowe

Tło

Upewnij się, że tło jest przezroczyste

  • Kolor tła: przezroczysty

Elementy

Na karcie elementów wybierz, aby wyświetlić ikonę cytatu.

  • Pokaż ikonę wyceny: Tak

Cytat ikona

Następnie dostosuj ikonę cytatu w następujący sposób.

  • Kolor: Czarny #000000
  • Tło: Białe #ffffff
  • Rozmiar czcionki ikony:
    • Komputer stacjonarny: 2vw
    • Tablet: 5vw
    • Telefon: 9vw

Obraz

Następnie zmień ustawienia obrazu.

  • Szerokość i wysokość:
    • Pulpit: 110px
    • Tablet i telefon: 90px
  • Zaokrąglone rogi: 90px
  • Kolor obramowania: przezroczysty

Tekst

Zmień również wyrównanie tekstu.

  • Wyrównanie: Środek

Tekst główny

Następnie dostosuj styl tekstu głównego.

  • Czcionka: Verdana
  • Kolor czarny
  • Rozmiar:
    • Komputer stacjonarny: 0,7vw
    • Tablet: 2vw
    • Telefon: 3vw

Tekst autora

Kontynuuj, stylizując tekst autora.

  • Czcionka: GFS Didot
  • Waga: pogrubienie
  • Kolor: czarny #ffffff
  • Rozmiar:
    • Komputer stacjonarny: 1.2vw
    • Tablet: 2,5vw
    • Telefon: 4vw
  • Odstępy między literami: 1px

Tekst pozycji

Następnie tekst pozycji.

  • Czcionka: GFS Didot
  • Kolor: czarny #ffffff
  • Rozmiar:
    • Komputer stacjonarny: 0,9vw
    • Tablet: 2vw
    • Telefon: 3vw
  • Wysokość linii: 2em

Tekst firmowy

Również tekst firmowy.

  • Czcionka: GFS Didot
  • Kolor: czarny #ffffff
  • Rozmiar:
    • Komputer stacjonarny: 0,7vw
    • Tablet: 2vw
    • Telefon: 3vw
  • Wysokość linii: 2em

Rozmiary

Kontynuuj, dostosowując rozmiar modułu.

  • Szerokość:
    • Komputer stacjonarny: 60%
    • Tablet: 65%
    • Telefon: 75%
  • Wyrównanie modułu: Środek

Rozstaw

Dostosuj również odstępy.

  • Górna wyściółka:
    • Komputer stacjonarny: 1,5vw
    • Tablet: 5vw
    • Telefon: 6vw

Granica

Na koniec dodaj górną ramkę do modułu.

  • Style obramowania: tylko na górze
  • Szerokość: 2px
  • Kolor: czarny #ffffff

Dodaj moduł komentarzy do kolumny 2

Elementy

Przechodząc do kolumny 2, dodaj moduł komentarzy. Zmień ustawienia elementów w następujący sposób.

  • Pokaż awatar autora: Nie
  • Pokaż przycisk odpowiedzi: Tak
  • Pokaż liczbę komentarzy: Nie

Pola

Przejdź do zakładki projektu modułu i zmień ustawienia pól.

  • Kolor tekstu: czarny #oooooo
  • Kolor tła: jasnoszary #f7f7f7
  • Kolor tekstu ostrości: czarny #oooooo
  • Kolor tła ostrości: jasnoszary #f7f7f7
  • Czcionka: GFS Didot
  • Rozmiar czcionki:
    • Komputer stacjonarny: 0,9vw
    • Tablet: 1,5VW
    • Telefon: 2.5vw
  • Odstępy między literami: 1px

Tekst tytułu formularza

Następnie zmodyfikuj ustawienia tekstu tytułu formularza.

  • Czcionka: GFS Didot
  • Kolor: czarny #ffffff
  • Rozmiar:
    • Komputer stacjonarny: 0,9vw
    • Tablet: 2,5vw
    • Czcionka: 3.5vw

Meta tekst

Kontynuuj, stylizując metatekst.

  • Czcionka: GFS Didot
  • Kolor: czarny #ffffff
  • Rozmiar:
    • Komputer stacjonarny: 1,3vw
    • Tablet: 3vw
    • Telefon: 4vw

Tekst komentarza

Również tekst komentarza.

  • Czcionka: Verdana
  • Kolor: czarny #ffffff
  • Rozmiar:
    • Komputer stacjonarny: 0,7vw
    • Tablet: 1,7vw
    • Telefon: 2.7vw
  • Odstępy między literami: 1px
  • Wysokość linii: 1,8 em

Przycisk

Idąc dalej, stylizuj przyciski.

  • Rozmiar czcionki:
    • Komputer stacjonarny: 0,9vw
    • Tablet: 2,5vw
    • Telefon: 3.5vw
  • Kolor tekstu: biały #000000
  • Tło: Czarne #ffffff
  • Odstępy między literami: 1px
  • Czcionka: GFS Didot

Rozmiary

Następnie dostosuj ustawienia rozmiaru modułu.

  • Szerokość: 90%
  • Wyrównanie modułu: Środek

Rozstaw

Wreszcie odstępy.

  • Górna wyściółka:
    • Komputer stacjonarny: 4vw
    • Tablet i telefon: 8vw
  • Wyściółka lewa i prawa: 3vw

Odtwórzmy projekt modułu komentarzy nr 2

Utwórz projekt tła

Pierwszym krokiem do odtworzenia układu modułu komentarzy kolorowych kółek jest przygotowanie projektu tła. Możesz stworzyć prosty projekt koła w swoim ulubionym edytorze graficznym. Oto kroki, które należy wykonać, aby utworzyć obraz tła:

  1. Utwórz płótno o szerokości 1800 pikseli i wysokości około 1800 pikseli.
  2. Dodaj dwa kółka, jedno większe od drugiego.
  3. Pokoloruj kółka i dodaj trochę przezroczystości.
  4. Umieść dwa koła lekko zachodzące na siebie w lewym górnym rogu płótna.
  5. Zgrupuj kręgi jako jeden obiekt i zduplikuj je.
  6. Odwróć kółka i umieść je po przekątnej w dół i na prawo od pierwszych dwóch.
  7. Upewnij się, że zostawiłeś miejsce na górze i na dole. Gdy jest dużo komentarzy, obraz będzie się powtarzał i układał sąsiadująco w pionie.

Projekt tła, który stworzyliśmy dla tego szablonu układu komentarzy, jest również dostępny w spakowanym folderze, który można pobrać na początku samouczka.

Otwórz Kreatora motywów i dodaj nowy szablon

Teraz nadszedł czas, aby otworzyć kreatora motywów. Dodaj nowy szablon.

Wybierz szablon dla wszystkich postów

Zastosuj szablon do wszystkich postów.

Dodaj niestandardową karoserię i zbuduj od podstaw

I zacznij budować niestandardową treść szablonu.

Dodaj nową sekcję

W edytorze szablonów zauważysz sekcję. Otwórz tę sekcję i prześlij obraz tła. Dołącz również nakładkę koloru gradientu.

Tło

  • Tło: Gradient
  • Kolor gradientu 1: przezroczysty biały rgba (255,255,255,0,55)
  • Kolor gradientu 2: przezroczysty biały rgba (255,255,255,0,55)
  • Obraz: koła w tle

Rozstaw

Dostosuj również odstępy przekroju przed dodaniem rzędu.

  • Wyściółka górna i dolna: 200px

Dodaj nowy wiersz

Struktura kolumny

Teraz dodaj wiersz z trzema kolumnami.

Rozmiary

Przed dodaniem modułów dostosuj rozmiar wiersza.

  • Niestandardowa szerokość rynny: 2
  • Szerokość: 80%
  • Maksymalna szerokość: 100%

Ustawienia kolumny 2

Tło

Teraz stylizuj drugą kolumnę, dodając niebieskie tło.

  • Kolor tła: niebieski #51a2ff

Granica

Kontynuuj, zaokrąglając granice.

  • Zaokrąglone rogi: 1vw wszystkie cztery rogi

Cień Pudełka

Na koniec dodaj też cień do pudełka.

  • Cień: trzecia opcja
  • Siła rozmycia: 80px
  • Kolor: rgba(0,0,0,0.13)

Dodaj moduł Osoba do kolumny 1

Zadowolony

Czas dodać moduły. Zacznij od modułu osoby w kolumnie 1 i dodaj treść.

  • Imię: Jenny McAbee
  • Stanowisko: Stały współpracownik
  • Treść: tekst akapitowy
  • Obraz: Zdjęcie portretowe

Tło

Dodaj białe tło do modułu.

  • Kolor tła: biały #000000

Obraz

Na karcie projektu dostosuj styl obramowania obrazu w następujący sposób.

  • Zaokrąglone rogi: 0,5vw w lewym górnym rogu i prawym górnym rogu
  • Style obramowania: dolna granica
    • Szerokość: 5px
    • Kolor: Niebieski #51a2ff

Tekst tytułu

Kontynuuj, stylizując tekst nagłówka.

  • Poziom nagłówka: H4
  • Czcionka: Alegreya Sans SC
  • Styl: TT
  • Kolor: #021859
  • Rozmiar:
    • Pulpit: 1vw
    • Tablet: 3vw
    • Telefon: 5vw
  • Odstępy między literami: 1px
  • Wysokość linii: 1,6 em

Tekst główny

Następnie także tekst podstawowy.

  • Czcionka: Lato
  • Kolor: Niebieski #1a1f73
  • Rozmiar:
    • Komputer stacjonarny: 0,7vw
    • Tablet: 2vw
    • Telefon: 3vw
  • Wysokość linii: 2em

Tekst pozycji

Kontynuuj z tekstem pozycji.

  • Czcionka: Lato
  • Styl: kursywa
  • Kolor: #021859
  • Rozmiar:
    • Komputer stacjonarny: 0,8vw
    • Tablet: 3vw
    • Telefon: 3.5vw

Rozmiary

Następnie dostosuj rozmiar.

  • Szerokość:
    • Pulpit: 100%
    • Tablet: 50%
    • Telefon: 70%
  • Wyrównanie modułu: Środek

Rozstaw

Również odstępy.

  • Wyściółka górna i dolna: 4vw

Granica

Następnie dodaj zaokrąglone rogi.

  • Zaokrąglone rogi: o.5vw na wszystkich czterech rogach
  • Style obramowania: 24 px ze wszystkich czterech stron
    • Kolor: biały #ffffff

Cień Pudełka

Na koniec dodaj cień pudełkowy.

  • Cień: trzecia opcja
  • Siła rozmycia: 80px
  • Kolor: rgba(0,0,0,0.13)

Dodaj moduł śledzenia mediów społecznościowych do kolumny 1

Sieci

Poniżej modułu osoby dodaj moduł śledzenia w mediach społecznościowych z trzema sieciami społecznościowymi.

  • Facebook
  • Linkedin
  • Świergot

Ustawienia sieci

Zastosuj przezroczysty kolor tła do każdej sieci społecznościowej. Musisz to zrobić jeden po drugim.

  • Tło: przezroczyste

Wyrównanie

W głównych ustawieniach projektu wyśrodkuj wyrównanie modułu.

  • Wyrównanie modułu: Środek

Ikona

Na koniec pokoloruj ikony na niebiesko.

  • Kolor: Niebieski #51a2ff
  • Rozmiar:
    • Pulpit: 1vw
    • Tablet i telefon: 4vw

Dodaj moduł tekstowy do kolumny 2

Zadowolony

Przejdź do kolumny 2. Dodaj moduł tekstowy z wybraną zawartością h3.

  • Tekst: Zostaw nam komentarz

Tło

Dodaj białe tło.

  • Kolor tła: biały #ffffff

Tekst nagłówka

Następnie przejdź do karty projektu i dostosuj tekst nagłówka.

  • Poziom nagłówka: H3
  • Czcionka: Alegreya Sans SC
  • Waga: pogrubienie
  • Styl czcionki: TT
  • Kolor: niebieski #021859
  • Rozmiar:
    • Komputer stacjonarny: 2vw
    • Tablet i telefon: 5.5vw

Rozstaw

Na koniec dostosuj odstępy.

  • Górna wyściółka:
    • Komputer stacjonarny: 3vw
    • Tablet: 2vw
    • Telefon: 6vw
  • Dolna wyściółka
    • Komputer stacjonarny i tablet: 3vw
  • Wyściółka lewa i prawa:
    • Komputer stacjonarny i tablet: 1vw

Dodaj moduł komentarzy do kolumny 2

Elementy

Teraz dodaj moduł komentarzy do kolumny 2. Włącz wszystkie elementy.

  • Pokaż awatar autora: Tak
  • Pokaż przycisk odpowiedzi: Tak
  • Pokaż liczbę komentarzy: Tak

Tło

Dodaj białe tło do modułu komentarzy.

  • Kolor tła: biały #ffffff

Pola

Następnie zacznij stylizować moduł, dostosowując ustawienia pól w następujący sposób

  • Kolor tła: biały #ffffff
  • Kolor tekstu: niebieski #1a1f73
  • Kolor tła ostrości: biały #ffffff
  • Kolor tekstu ostrości: niebieski #1a1f73
  • Czcionka: Alegreya Sans SC
  • Styl: TT
  • Rozmiar:
    • Pulpit: 1vw
    • Tablet: 3vw
    • Telefon: 4vw
  • Zaokrąglone rogi: 5px wszystkie rogi

Obraz

Zmień też ustawienia obrazu.

  • Zaokrąglone rogi: 5px
  • Styl obramowania: wszystkie strony
  • Szerokość: 3px
  • Kolor: Niebieski #1a1f73

Tekst licznika komentarzy

Następnie tekst licznika komentarzy.

  • Poziom nagłówka: H3
  • Czcionka: Alegreya Sans SC
  • Styl czcionki: TT
  • Kolor: niebieski #021859
  • Rozmiar:
    • Komputer stacjonarny: 1,3vw
    • Tablet: 3vw
    • Telefon: 5vw
  • Wysokość linii: 2 em

Tekst tytułu formularza

Dostosuj również styl tekstu tytułu formularza.

  • Poziom nagłówka: H3
  • Czcionka: Alegreya Sans SC
  • Styl czcionki: TT
  • Kolor: niebieski #021859
  • Rozmiar:
    • Pulpit: 1vw
    • Tablet: 3vw
    • Telefon: 5vw
  • Wysokość linii: 2 em

Meta tekst

Przejdź do metatekstu i stylu w następujący sposób.

  • Czcionka: Lato
  • Kolor: #021859
  • Rozmiar:
    • Pulpit: 1vw
    • Tablet: 2,7vw
    • Telefon: 3.5vw

Tekst komentarza

Następnie tekst komentarza.

  • Czcionka: Lato
  • Kolor: #021859
  • Rozmiar:
    • Komputer stacjonarny: 0,9vw
    • Tablet: 1,8vw
    • Telefon: 2.5vw

Przycisk

Nie zapomnij też o stylizacji przycisków.

  • Rozmiar czcionki:
    • Komputer stacjonarny: 0,9vw
    • Tablet: 2,5vw
    • Telefon: 3.5vw
  • Kolor tekstu: biały #ffffff
  • Promień graniczny: 5px
  • Czcionka: Lato

Rozstaw

Również rozmieszczenie modułu komentarzy.

  • Górny margines:
    • Pulpit: -1vw
    • Tablet i telefon: -3.3vw
  • Górna wyściółka:
    • Komputer stacjonarny i tablet: 3vw
    • Telefon: 4vw
  • Dolna wyściółka:
    • Komputer stacjonarny: 3vw
    • Telefon i tablet: 0vw
  • Wyściółka lewa i prawa:
    • Komputer stacjonarny: 2vw
    • Tablet: 4vw
    • Telefon: 7vw

Granica

Na koniec dodaj zaokrąglone rogi do modułu komentarzy.

  • Style obramowania: 2 piksele ze wszystkich czterech stron
  • Kolor: Niebieski #1a1f73

Dodaj moduł e-mail Optin do kolumny 3

Zadowolony

Przejdź do kolumny 3 i modułu e-mail optin. Nadaj modułowi tytuł.

  • Tekst: Otrzymuj regularne aktualizacje
  • Treść: tekst akapitowy

Konto e-mail

Skonfiguruj dostawcę poczty e-mail na karcie konta e-mail. Wybierz listę i dodaj swój klucz API.

  • Dostawca poczty e-mail
    • Lista
    • Klucz API

Pola

Następnie wybierz użycie tylko jednego pola nazwy.

  • Użyj pola z jednym imieniem: Tak

Tło

Dodaj białe tło do modułu.

  • Kolor tła: biały

Układ

Przejdź do projektu i zmień ustawienia układu w następujący sposób.

  • Układ: ciało po lewej, formularz po prawej
  • Nazwa pełnej szerokości: Tak
  • Imię o pełnej szerokości: Tak
  • Nazwisko Pełna szerokość: Tak
  • Pełna szerokość e-maila: Tak

Pola

Następnie dostosuj ustawienia pól.

  • Kolor tekstu: niebieski #1a1f73
  • Kolor tła: biały #ffff
  • Kolor tekstu ostrości: niebieski #1a1f73
  • Kolor tła ostrości: biały #ffff
  • Czcionka: Lato
  • Rozmiar czcionki:
    • Komputer stacjonarny: 0,7vw
    • Tablet: 2.2vw
    • Telefon: 3.2vw
  • Odstępy między literami: 1px
  • Zaokrąglone rogi: 0,2vw na wszystkich rogach
  • Style obramowania: wszystkie cztery strony
    • Szerokość: 2px
    • Kolor: Niebieski #1a1f73

Tekst tytułu

Po nim następuje tekst tytułowy.

  • Poziom nagłówka: H4
  • Czcionka: Alegreya Sans SC
  • Waga: średnia
  • Styl czcionki: TT
  • Kolor: Niebieski #1a1f73
  • Rozmiar:
    • Pulpit: 1vw
    • Tablet: 4vw
    • Telefon: 5vw
  • Odstępy między literami: 1px

Tekst główny

Również tekst podstawowy.

  • Czcionka: Lato
  • Kolor: Niebieski #1a1f73
  • Rozmiar:
    • Komputer stacjonarny: 0,7vw
    • Tablet: 2.3vw
    • Telefon: 3vw

Tekst wiadomości wynikowej

Nie zapomnij o treści wiadomości z wynikami.

  • Czcionka: Lato
  • Kolor: Niebieski #1a1f73
  • Rozmiar:
    • Komputer stacjonarny: 0,7vw
    • Tablet: 2.3vw
    • Telefon: 3vw

Przycisk

Dostosuj również styl przycisku.

  • Rozmiar czcionki:
    • Komputer stacjonarny: 0,7vw
    • Tablet: 2.3vw
    • Telefon: 3vw
  • Kolor tekstu: biały #ffffff
  • Kolor tła: niebieski #51a2ff
  • Czcionka: Lato

Rozstaw

Dostosuj odstępy.

  • Wyściółka górna i dolna: 4vw

Granica

Następnie dodaj zaokrąglone rogi.

  • Zaokrąglone rogi: o.5vw na wszystkich czterech rogach

Cień Pudełka

Na koniec dodaj cień pudełkowy.

  • Cień: trzecia opcja
  • Siła rozmycia: 80px
  • Kolor: rgba(0,0,0,0.13)

Zapowiedź

Teraz, gdy przeszliśmy przez wszystkie kroki, przyjrzyjmy się końcowemu wynikowi tego samouczka.

Pulpit

Tablet

Telefon

Pulpit

Tablet

mobilny

To opakowanie modułu komentarzy!

Otóż ​​to! Właśnie dodałeś dostosowaną sekcję komentarzy do szablonu posta na blogu. Mamy nadzieję, że te projekty zainspirują Twoje własne kreacje do tworzenia motywów Divi. Na początku tego samouczka można było pobrać pliki JSON obu projektów. Jeśli masz jakieś pytania lub sugestie, możesz zostawić komentarz w sekcji komentarzy poniżej!