Tworzenie unikalnych projektów kolumn FAQ za pomocą Divi

Każda strona internetowa, która regularnie komunikuje się z klientami, może skorzystać z sekcji FAQ. Tworząc swoją witrynę internetową za pomocą Divi, istnieje wiele sposobów podejścia do projektowania sekcji FAQ. Teraz w tym poście stworzymy zabawną sekcję FAQ, która skupia się na połączeniu kolumny i kontenera modułów, aby stworzyć piękny projekt. 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.

Pulpit

mobilny

Pobierz projekt kolumny FAQ za DARMO

Aby położyć swoje ręce na darmowym projekcie kolumny FAQ, najpierw musisz go 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!

Subskrybuj nasz kanał YouTube

Zacznijmy odtwarzać

Dodaj nową sekcję

Tło

Zacznij od dodania nowej zwykłej sekcji do strony, nad którą pracujesz. Przed dodaniem wiersza dostosuj tło sekcji.

• Tło: Gradient
• Kolor 1: Ciemny Aqua #50aebf
• Kolor drugi: Jasny Aqua #6bf2ff
• Kierunek: 180 stopni
• Pozycja startowa: 21%

Rozstaw

Zmodyfikuj również wartości dopełnienia sekcji.

• Górna wyściółka:
  • Komputer stacjonarny: 4vw
  • Tablet: 15vw
  • Telefon: 24vw
• Dolna wyściółka: 2vw

Dodaj nowy wiersz

Struktura kolumny

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

Ustawienia kolumny

Rozstaw

Otwórz ustawienia kolumny 1 i dodaj dopełnienie lewego i prawego.

• Wyściółka lewa i prawa:
  • Pulpit: 1vw
  • Tablet + telefon: 3vw

Dodaj moduł tekstowy

Dodaj zawartość

Czas zacząć dodawać moduły! Dodaj nowy moduł tekstowy z wybraną zawartością H2 i akapitów.

Tekst

Przejdź do karty projektu i nadaj styl tekstowi akapitu.

• Czcionka tekstu: aktor
• Kolor tekstu: złamana biel ##f6f6f6
• Rozmiar czcionki:
  • Komputer stacjonarny + tablet: 1,5vw
  • Telefon: 3.8vw
• Odstępy między literami tekstu: 1px
• Wyrównanie tekstu: do środka

Tekst nagłówka

Następnie dostosuj styl tekstu nagłówka.

• Poziom tekstu nagłówka: H2
• Czcionka H2: Verdana
• Grubość czcionki H2: pół pogrubiona
• Kolor czcionki H2: złamana biel: #f6f6f6
• Rozmiar czcionki H2:
  • Komputer stacjonarny: 3vw
  • Tablet: 5vw
  • Telefon: 6vw
• Odstępy między literami H2: 7px
• Wysokość linii H2:
  • Pulpit: 1,8 em
  • Tablet: 1,6 em
  • Telefon: 1,5 em

Rozmiary

Ponadto dostosuj rozmiar.

• Szerokość: 100%

Rozstaw

Na koniec dostosuj odstępy.

• Górny margines:
  • Komputer stacjonarny + tablet: 1,5vw
• Margines dolny:
  • Telefon: -5vw
• Dolna wyściółka: 0vw
• Wyściółka lewa + prawa: 7vw

Dodaj moduł dzielnika

Linia

Pod tekstem dodaj moduł rozdzielający i zmień go na żółty.

• Kolor linii: Żółty #ffe100

Rozmiary

Następnie dostosuj wagę i szerokość.

• Waga dzielnika: 4px
• Szerokość: 12%
• Wyrównanie modułu: Środek

Rozstaw

Na koniec dostosuj odstępy.

• Górny margines:
  • Komputer stacjonarny + tablet: -1vw
  • Telefon: 10vw

Dodaj nowy wiersz

Struktura kolumny

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

Rozmiary

Przede wszystkim dostosuj rozmiar.

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

Rozstaw

Następnie dostosuj odstępy.

• Górny margines: 3vw
• Dolny margines: 11vw
• Margines lewy i prawy: auto
• Górna wyściółka: 0vw
• Dolna wyściółka: 11vw
• Wyściółka lewa i prawa: 5vw

Ustawienia kolumny 1

Tło po najechaniu

Przed dodaniem pozostałych kolumn dostosuj tło kolumny 1 w następujący sposób:

• Tło najechania: Gradient
• Kolor jeden: żółty #ffe100
• Kolor drugi: przezroczysty
• Typ gradientu: Promieniowy
• Kierunek promieniowy: górny lewy
• Pozycja początkowa i końcowa: 19%

Rozstaw

Dodaj kilka wartości odstępów do następnej kolumny.

• Dolna wyściółka:
  • Komputer stacjonarny + tablet: 0vw
  • Telefon: 4vw
• Wyściółka lewa i prawa:
  • Pulpit: 1vw
  • Tablet + telefon: 3vw

Granica

Dodaj również zaokrąglone rogi do kolumny.

• Zaokrąglone rogi: 1vw wszystkie cztery rogi

Przekształcać

Na koniec zastosuj do kolumny niestandardową wartość tłumaczenia przekształcenia.

• Transform Translate: oś y 4vw (komputer), 0vw (Hover, tablet i telefon)

Powiel kolumnę 1 cztery razy

Teraz zduplikuj pierwszą kolumnę cztery razy.

Ustawienia kolumny 2

Przekształcać

Następnie dostosuj wartości transformacji. Po pierwsze, kolumna 2.

• Transform Translate: oś y 2vw (komputer), 0vw (Hover, tablet i telefon)

Kolumna 3 Ustawienia

Przekształcać

Następnie zresetuj wartość transformacji w kolumnie 3.

• Przekształć Tłumacz: Zresetuj

Kolumna 4 Ustawienia

Przekształcać

Dostosuj także wartość transformacji w kolumnie 4.

• Transform Translate: oś y 2vw (komputer), 0vw (Hover, tablet i telefon)

Kolumna 5 Ustawienia

Przekształcać

Na koniec przejrzyj wartości transformacji w kolumnie 5.

• Transform Translate: oś y 4vw (komputer), 0vw (Hover, tablet i telefon)

Dodaj moduł przełączania do kolumny 1

Dodaj zawartość

Czas zacząć dodawać moduły! Dodaj moduł przełączania do pierwszej kolumny z wybraną zawartością.

• Tytuł
• Ciało

Stan

Następnie wybierz „Zamknij” jako stan modułu.

• Stan: Zamknięty

Tło

I dodaj przezroczysty obraz znaku zapytania jako tło.

• Zdjęcie w tle
• Mieszanie obrazu tła: miękkie światło

Ikona

Na karcie projektu nadaj styl ikonie.

• Kolor ikony: żółty #ffe100
• Rozmiar ikony:
  • Pulpit: 34px
  • Tablet + telefon: 20px

Przełącznik

Następnie dostosuj style przełączania tła tak, aby były statyczne i zawisły.

• Otwórz przełącznik koloru tła: turkusowy #0092af
• Zamknięty przełącznik koloru tła: złamana biel: #f7f7f7
  • Hover: turkusowy #0092af

Tekst tytułu

Kontynuuj, stylizując tekst tytułu.

• Kolor tekstu otwartego tytułu: złamana biel: #f7f7f7
• Kolor tekstu tytułu: bardzo ciemnoszary #3a3a3a
  • Najedź: złamana biel: #f7f7f7
• Poziom nagłówka tytułu: H5
• Czcionka H5: aktor
• Wyrównanie H5: w lewo
• Rozmiar tekstu H5:
  • Komputer stacjonarny: 1,5 vw
  • Tablet: 3 vw
  • Telefon: 4.5 vw

Tekst zamkniętego tytułu

Stylizuj również zamknięty tekst.

• Kolor tekstu zamkniętego tytułu: bardzo ciemnoszary #3a3a3a
• Czcionka tytułu zamkniętego: aktor
• Wyrównanie: w lewo
• Zamknięty rozmiar tekstu:
  • Komputer stacjonarny: 1,5vw
  • Tablet: 3vw
  • Telefon: 4.5vw

Tekst główny

Nie zapomnij o treści.

• Czcionka ciała: aktor
• Wyrównanie tekstu podstawowego: do lewej
• Kolor tekstu głównego: złamana biel: #f7f7f7
• Rozmiar tekstu treści:
  • Komputer stacjonarny: 0,9vw
  • Tablet: 2vw
  • Telefon: 3vw
• Wysokość linii ciała: 1,8 em

Rozstaw

Po stylizacji tekstu dodaj kilka wartości odstępów.

• Górny margines:
  • Komputer stacjonarny + tablet: 1vw
• Wyściółka górna + dolna:
  • Komputer stacjonarny: 2vw
  • Tablet: 3vw
  • Telefon: 5vw
• Lewa wyściółka:
  • Komputer stacjonarny: 2vw
  • Tablet: 4vw
  • Telefon: 5vw
• Prawa wyściółka:
  • Komputer stacjonarny: 2vw
  • Tablet: 3vw
  • Telefon: 4vw

Granica

Dodaj trochę zaokrąglonych rogów i usuń domyślną ramkę 1px.

• Zaokrąglone rogi: 1vw wszystkie cztery rogi
• Ramka: 0px

Cień Pudełka

Na koniec dodaj cień wewnętrznego pudełka.

• Cień pudełka: 6. opcja
• Siła rozmycia cienia pudełkowego:
  • Komputer stacjonarny + tablet: 18 pikseli
  • Telefon: 9px
• Siła rozprzestrzeniania się cieni w pudełku: -4px
• Kolor cienia: rgba(0,0,0,0.21)

Powiel moduł przełączania 4 razy

Zduplikuj stylizowany moduł przełączania cztery razy i przeciągnij nowe do pustych kolumn.

Edytuj zawartość

Edytuj pytania i odpowiedzi w zduplikowanych modułach przełączania i gotowe!

Zapowiedź

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

Pulpit

mobilny

Wniosek

W tym poście pokazaliśmy, jak stworzyć unikalny projekt kolumny FAQ. Dodaliśmy kilka opcji najechania, aby nadać projektowi ciekawy efekt żółtego narożnika. Mamy nadzieję, że ten projekt zainspiruje Cię do stworzenia ciekawych projektów FAQ w ramach Twoich projektów Divi. Jeśli masz jakieś pytania lub sugestie, możesz zostawić komentarz w sekcji komentarzy poniżej!