Dapatkan Hosting Instan dengan Elementor dan Elementor Pro

dengan CDN, SSL dan cadangan.

Mulai hari ini

Cara Mendesain Bagian FAQ Kreatif Dengan Divi

Rifat Divi Tutorials Oct 19, 2021

"Frequently Asked Question(FAQ)" adalah bagian khusus di mana penyedia layanan membagikan informasi penting atau mengklarifikasi keraguan yang biasanya ditanyakan orang. Ini adalah bagian penting untuk situs web apa pun yang menyediakan layanan apa pun karena orang biasanya mengunjungi mereka terlebih dahulu untuk menemukan jawaban atas pertanyaan mereka. Halaman FAQ dengan desain kreatif adalah cara yang bagus untuk mengetahui seberapa haus kecantikan Anda, dan pada saat yang sama, Anda peduli dengan pertanyaan mereka.

Bagian FAQ adalah bagian tetap dengan beberapa pertanyaan dan jawaban. Hal ini penting untuk menjaga mereka terorganisir. Dalam tutorial hari ini, kita akan belajar bagaimana kita dapat menggunakan Divi untuk mendesain bagian FAQ yang kreatif dengan tab yang dapat diklik.

Sneak Peek

Ini adalah bagaimana desain akhir kami akan terlihat seperti.

Membangun Struktur

Tambahkan: Bagian 1

Warna latar belakang

Kita akan mulai dengan menambahkan warna latar belakang pada bagian awal halaman kerja kita. Buka pengaturan bagian dan terapkan warna latar belakang.

Buat Situs Web Luar Biasa

Dengan Elementor pembuat halaman gratis terbaik

Mulai sekarang
  • Warna Latar Belakang: #fffbf2

Pengaturan Spasi

Kami akan membuat beberapa penyesuaian pada jarak.

  • Padding Bawah: 0px

Pengaturan Perbatasan

Sekarang, kita akan menerapkan batas kustom ke bagian tersebut.

  • Lebar Perbatasan: 1vw
  • Warna Perbatasan: #fffbf2

Pengaturan Bayangan Kotak

Tambahkan bayangan kotak.

  • Posisi Vertikal Bayangan Kotak: 0px
  • Kekuatan Penyebaran Bayangan Kotak: 1px
  • Warna Bayangan: #000000
  • Posisi Bayangan Kotak: Bayangan Dalam

Pengaturan Indeks Z

Tingkatkan nilai indeks-Z di tab lanjutan dan kita selesai dengan pengaturan bagian ini.

Tambahkan: Baris 1 Pada Bagian 1

Struktur Kolom

Tambahkan baris baru (disebutkan dalam gambar) ke bagian yang baru selesai.

Pengaturan Ukuran

Buka pengaturan baris dan buat penyesuaian berikut.

  • Gunakan Lebar Talang Kustom: Ya
  • Lebar Talang: 1
  • Lebar Maks: 1380px

Pengaturan Spasi

Buat beberapa penyesuaian pada tab spasi juga!

  • Margin Atas: 3%
  • Margin Bawah: 3%
  • Padding Kiri: 1%
  • Padding Kanan: 1%

Tambahkan: Modul Teks Kolom

Konten H1

Tambahkan modul teks ke baris dan tambahkan beberapa tag H1.

Pengaturan Teks H1

Ubah pengaturan teks H1.

  • Font Judul: Cormorant Garamond
  • Berat Huruf Judul: Tebal
  • Ukuran Teks Judul: Desktop: 60px, Tablet: 42px, dan Telepon: 36px

Tambahkan: Modul Pembagi Pada Kolom

Tambahkan modul pembagi di bawah modul teks.

Pengaturan Visibilitas

Pastikan Show Divider Option diaktifkan.

  • Tampilkan Pembagi: Ya

Pengaturan Jalur

Beralih ke tab desain dan ubah warna pembagi.

  • Warna Garis: #000000

Pengaturan Ukuran

Di bawah pengaturan garis, buat beberapa penyesuaian ukuran.

  • Berat Pembagi: 2px
  • Lebar Maks: 150px
  • Tinggi: 2px

Pengaturan Spasi

Sekarang, tambahkan beberapa margin dari pengaturan spasi.

  • Margin Atas: 4%

Tambahkan: Baris 2 Pada Bagian 1

Struktur Kolom

Tambahkan baris ke-2 di bawah baris ke-1 dengan struktur kolom yang sama.

Pengaturan Ukuran

Ubah pengaturan ukuran baris yang baru dibuat dari tab desain.

  • Gunakan Lebar Talang Kustom: Ya
  • Lebar Talang: 1
  • Lebar Maks: 1380px

Pengaturan Spasi

Buat beberapa penyesuaian kecil pada bagian spasi juga.

  • Padding Atas: 0px
  • Padding Bawah: 0px

Tambahkan: Modul Teks Kolom 1

Konten H3

Tambahkan modul Teks baru dan tambahkan beberapa konten H3.

Warna latar belakang

Tambahkan warna latar belakang.

  • Warna Latar Belakang: #ffffff

Pengaturan Konten H3

Buat pengaturan ini ke teks H3.

  • Judul 3 Font: Karla
  • Judul 3 Berat Font: Tebal
  • Judul 3 Gaya Font: Huruf Besar
  • Judul 3 Perataan Teks: Tengah
  • Judul 3 Ukuran Teks: 15px
  • Spasi Judul 3 Huruf: 4px

Pengaturan Ukuran

Ubah pengaturan ukuran untuk ukuran layar yang berbeda.

  • Lebar: Desktop - 22%, Tablet Dan Seluler - 44%

Pengaturan Spasi

Sesuaikan nilai spasi.

  • Margin Kanan: 1%
  • Padding Atas: 30px
  • Padding Bawah: 20px
  • Padding Kiri: 5%
  • Padding Kanan: 5%

Berbatasan

Tambahkan batas ke desain kami yang sedang berjalan.

  • Lebar Perbatasan: 1px

Bayangan Kotak

Tambahkan bayangan kotak untuk membuat desain lebih hidup.

  • Posisi Vertikal Bayangan Kotak: 0px
  • Warna Bayangan: #fff3dd
  • Posisi Bayangan Kotak: Bayangan Dalam

CSS Elemen Utama

Sebagai tugas akhir untuk modul teks ini, kami akan menambahkan kode CSS khusus dari tab lanjutan. CSS ini akan digabungkan dengan seluruh desain teks dan memungkinkan untuk menampilkan beberapa modul secara berdampingan dari kategori yang sama

display: inline-block;

Duplikat Modul Teks 3 Kali

Sekarang kloning modul teks yang baru selesai 3 kali.

Ubah Konten Pada Modul Kloning

Sekarang ubah konten pada modul yang dikloning sesuai dengan kebutuhan Anda.

Tambahkan: Bagian 2

Jarak

Sekarang, tambahkan bagian "Biasa" tepat di bawah yang sebelumnya dan ubah pengaturan spasi dari tab desain.

  • Padding Atas: 100px
  • Padding Bawah: 100px

Tambahkan: Baris 1 Pada Bagian 2

Struktur Kolom

Sekarang, tambahkan baris baru ke bagian ini. Gunakan struktur kolom yang ditandai pada gambar.

Pengaturan Ukuran

Buka pengaturan baris dan buat penyesuaian ukuran dari tab desain.

  • Gunakan Lebar Talang Kustom: Ya
  • Lebar Talang: 2
  • Lebar Maks: 1380px

Tambahkan: Alihkan Modul 1 Pada Kolom

Tambah isi

Tambahkan modul Toggle pada baris dan tambahkan konten.

Pengaturan Ikon

Dari tab desain, lakukan penyesuaian pada pengaturan ikon.

  • Warna Ikon: #000000
  • Gunakan Ukuran Ikon Kustom: Ya
  • Ukuran Font Ikon: 24px

Alihkan Pengaturan

Ubah pengaturan sakelar.

  • Buka Toggle Background Color: #fffbf2
  • Warna Latar Toggle Tertutup: #ffffff

Teks Judul

Saatnya untuk menyesuaikan teks judul.

  • Warna Teks Judul Terbuka: #333333
  • Warna Teks Judul: #333333
  • Judul Judul Tingkat: H4
  • Judul Font: Cormorant Garamond
  • Judul Font Berat: Tebal
  • Judul Teks Ukuran: Desktop: 36px, Tablet: 34px, dan Telepon: 28px

Teks Judul Tertutup

Ubah warna untuk teks judul tutup.

  • Warna Teks Judul Tertutup: #333333

Teks Tubuh

Kami juga akan menyesuaikan teks isi.

  • Font Tubuh: Karla
  • Ukuran Teks Tubuh: 17px
  • Tinggi Garis Tubuh: 1.9em

Pengaturan Spasi

Sekarang, ubah beberapa nilai spasi untuk membuatnya responsif.

  • Padding Atas: Desktop: 2%, Tablet: 4%, dan Telepon: 6%
  • Padding Bawah: Desktop: 2%, Tablet: 4%, dan Telepon: 6%
  • Padding Kiri: 5%
  • Padding Kanan: 5%

Pengaturan Perbatasan

Kemudian, ubah warna border menjadi hitam.

  • Warna Perbatasan: #000000

Alihkan CSS Konten

Dari tab lanjutan, tambahkan kode CSS ke area konten sakelar.

margin-top: 30px;

Duplikat Modul Toggle

Setelah selesai dengan modul toggle pertama kami, klon sebanyak yang Anda butuhkan.

Tambahkan Konten Unik

Ubah semua konten dari modul sakelar kloning. Dengan cara ini akan terlihat lebih unik.

Alihkan Pengaturan Status Modul

Perluas modul Toggle 1 dan ubah statusnya.

  • Negara bagian: Terbuka

Duplikat Seluruh Baris 3 Kali

Kami sekarang telah menyelesaikan set modul sakelar pertama kami. Sekarang kita akan mengkloningnya tiga kali. Akan ada empat baris modul sakelar. 4 baris untuk empat bagian yang telah kita buat sebelumnya.

Ubah Konten Pada Modul Duplikat

Ubah konten pada modul kloning sesuai kebutuhan Anda.

Fungsi Menambahkan

Bagian 1 Baris 2: Penambahan ID CSS Berturut-turut

Sekarang kita akan menambahkan beberapa ID CSS khusus ke modul kita. Di sini kami mencoba membuat desain di mana pengunjung akan mengklik tab FAQ, dan toggle FAQ berikut akan meluas. Untuk membuat desain ini berfungsi, buka setiap modul teks dari "Baris 2 Pada Bagian 1" dan tambahkan ID CSS berurutan berikut.

  • Modul Teks #1: faq-item-1
  • Modul Teks #2: faq-item-2
  • Modul Teks #3: item-faq-3
  • Modul Teks #4: item-faq-4

Bagian 2 Semua Baris: Penambahan ID CSS Berturut-turut

Kemudian kita akan menambahkan ID CSS ke keempat baris yang berisi modul toggle di Bagian 2. Selain itu, kita akan mempertahankan urutan berurutan yang sama.

  • Baris Pertama: faq-tab-1
  • Baris Kedua: faq-tab-2
  • Baris Ketiga: faq-tab-3
  • Baris Keempat: faq-tab-4

Tambahkan: Modul Kode Ke Baris 1 Pada Bagian 1

Karena kita telah menempatkan semua ID CSS berturut-turut dengan benar, sekarang kita akan menambahkan beberapa kode CSS dan JQuery ke halaman kita. Tambahkan modul Kode baru di baris pertama bagian 1 (di bawah modul pembagi).

Pastikan tag gaya dan skrip ditambahkan di tab lanjutan.

Tambahkan: Kode CSS

Salin dan tempel kode berikut di antara tag gaya.

[id*="faq-item"] {
cursor: pointer; 
}
 
[id*="faq-tab"]{  
position: absolute!important;
top: 0px;
bottom: auto;
left: 50%;
right: auto;
transform: translateX(-50%);
}
 
 
.active-faq-item {
color: #6b63dd !important;
background-color: #fff;
}
 
.hide-faq-tab{  
visiblity: hidden;
opacity: 0;  
}
 
.show-faq-tab{
visibility: visible !important;
opacity: 1 !important;
z-index: 12;
   
position: relative !important;
left: 0 !important;
transform: translateX(0%) !important;
}
   
.faq-item-active {
background-color: #000 !important;
color: #fff !important;
}
 
.faq-item-active h3{
color: #fff !important;
}

Tambahkan: Kode JQuery

Sekarang tambahkan beberapa kode JQuery di antara tag skrip.

jQuery(document).ready(function($){
 
$('#faq-item-1').addClass('faq-item-active');
$('#faq-tab-1').addClass('show-faq-tab');
$('[id*="faq-tab"]').not('#faq-tab-1').addClass('hide-faq-tab');
  
$('[id*="faq-item"]').click(function() {
  
var selector = $(this).attr('id').replace('item', 'tab');
var $faqSelect  = $('#' + selector);
 
$('[id*="faq-tab"]').removeClass('show-faq-tab');
$('[id*="faq-tab"]').addClass('hide-faq-tab');
$faqSelect.addClass('show-faq-tab');
  
$('[id*="faq-item"]').removeClass('faq-item-active');
$(this).addClass('faq-item-active');
    
});
});

Hasil Akhir

Kami selesai dengan pekerjaan itu, dan bagian FAQ kami yang dirancang khusus akan terlihat seperti ini.

Kata-kata Terakhir

Semua jenis desain yang indah dapat kami buat melalui Divi , yang akan membuat pengunjung situs web bertahan lama. Desain halaman FAQ interaktif hari ini adalah salah satunya. Jika Anda ingin melihat lebih banyak tutorial Divi seperti itu, beri tahu kami di komentar. Juga, jika Anda ingin kami melakukan tutorial pilihan Anda, beri tahu kami. Jika Anda menikmati tutorial hari ini, berbagi akan menginspirasi kami untuk menghadirkan lebih banyak tutorial untuk Anda.