Cara Mendesain Bagan Perbandingan Produk Kreatif dengan Divi

Bagan perbandingan produk dapat menjadi cara yang sangat efektif untuk mempromosikan produk baru bersama dengan fitur yang ditingkatkan. Aspek visual bagan lebih menarik bagi pengguna daripada teks sederhana. Dan struktur perbandingan berdampingan memungkinkan pengguna untuk melihat perbedaan antara setiap fitur produk dengan mudah.

Dalam tutorial ini, saya akan menunjukkan cara mendesain bagan perbandingan produk kreatif dengan Divi. Dan tata letak desain ini dapat digunakan untuk membandingkan apa saja. Sebagai contoh, saya dapat melihat ini sebagai tata letak yang sempurna untuk studi kasus juga.

Mari kita mulai.

Sneak Peek

Berikut adalah cuplikan grafik perbandingan yang akan saya buat dalam tutorial ini.

Apa yang Anda Butuhkan untuk Tutorial Ini

Untuk tutorial ini, Anda memerlukan yang berikut:

• Tema Divi (Terpasang dan Aktif)
• Dua Gambar (sekitar 800px kali 450px) untuk dijadikan gambar produk Anda di bagan perbandingan.

Membuat Judul dan Gambar Produk Anda

Sebagai permulaan, buat halaman baru, terapkan Visual Builder, lalu pilih untuk membuat halaman Anda dari awal.

Selanjutnya tambahkan tata letak satu kolom ke baris bagian Anda.

Sebelum kita menambahkan modul, mari masuk ke pengaturan bagian dan perbarui yang berikut:

Warna Latar Belakang: #222222
Warna Gradien Latar Belakang Kiri: rgba(242,90,71,0.14)
Warna Gradien Latar Belakang Kanan: rgba(255,255,255,0)
Tipe Gradien: Radial
Tempatkan Gradien Di Atas Gambar Latar Belakang: YA

Simpan Pengaturan. Sekarang buka pengaturan baris Anda dan beri baris Anda lebar kustom 100%.

Kemudian tambahkan modul teks ke satu baris kolom Anda dengan pengaturan berikut:

Untuk konten, masukkan html ini:

<h2>Compare</h2>
VS

Font Teks: Montserrat
Berat Font Teks: Sangat Tebal
Gaya Font Teks: TT (Huruf Besar)
Warna Teks Teks: rgba(255,255,255,0.3)
Ukuran Teks Teks: 3vw
Tinggi Baris Teks: 1.8em
Orientasi Teks: Tengah

Selanjutnya perbarui opsi desain heading h2 dan berikan modul Anda margin bawah kustom untuk membuat efek tumpang tindih.

Judul 2 Font: Montserrat
Judul 2 Warna Teks: rgba(255,255,255,0.3)
Judul 2 Ukuran Teks: 13vw
Spasi Judul 2 Huruf: 1vw
Margin Kustom: -13vw Bawah

Sebagian teks Anda akan disembunyikan untuk saat ini, tetapi akan muncul setelah kami menambahkan konten lainnya.

Dua membuat baris kedua kami menduplikasi baris pertama dan kemudian menghapus modul teks di dalam baris yang digandakan. Kemudian perbarui struktur kolom menjadi baris dua kolom.

Silakan dan perbarui pengaturan baris Anda sebagai berikut:

Lebar Talang Kustom: 1
Kolom 1 Padding Kustom: 2vw Kanan
Kolom 2 Padding Kustom: Kiri 2vw

Di sinilah kita akan meletakkan gambar dari dua produk yang ingin kita bandingkan. Di kolom kiri baris kami, tambahkan gambar Anda menggunakan modul gambar. Untuk contoh ini, saya menggunakan gambar png 800px kali 459px. Kemudian perbarui pengaturan modul gambar sebagai berikut:

Lebar: 70%
Penyelarasan Modul: Kanan
Padding Kustom: Bawah 40px

Kemudian salin modul dan tempel ke kolom kanan. Ubah gambar lalu sesuaikan perataan modul ke kiri.

Di bawah modul gambar di kolom kiri, tambahkan modul teks dengan konten teks berikut: “Produk Lama”.

Kemudian masuk ke modul teks di baris pertama di atas dan salin gaya teks.

Kemudian arahkan kursor ke modul teks baru dengan teks "Produk Lama" dan tempel gaya teks ke modul menggunakan klik kanan.

Ini akan mencocokkan gaya teks yang kita butuhkan jauh lebih cepat. Sekarang yang perlu kita lakukan adalah
perbarui ukuran dan perataan teks:

Ukuran Teks Teks: 16px
Orientasi Teks: Kanan

Sekarang buka tab lanjutan dan masukkan CSS khusus berikut ke dalam kotak input Elemen Utama:

text-align:right !important;

Ini diperlukan karena Divi akan menyesuaikan perataan teks ke kiri di smartphone secara default. Cuplikan CSS ini akan menimpa ini dan memastikannya tetap selaras di smartphone juga.

Simpan Pengaturan. Kemudian salin modul teks dan tempel di bawah gambar di kolom kanan. Ubah konten teks menjadi "Produk Baru" dan perbarui orientasi teks menjadi "Kiri".

Berikut adalah apa yang kita miliki sejauh ini.

Membuat Bagan Perbandingan Produk

Untuk membuat grafik perbandingan kami, kami akan menggunakan urutan dua baris kolom yang masing-masing dipisahkan oleh satu baris kolom. Dua baris kolom akan menampung batang berwarna kami. Dan baris satu kolom akan menampilkan nama fitur yang terkait dengan nilai bar.

Buat baris dua kolom baru dan perbarui pengaturan baris sebagai berikut:

Lebar Kustom: 100%
Lebar Talang: 1
Padding Kustom: Bawah 0px
Kolom 1 Padding Kustom: 2vw Kanan
Kolom 2 Padding Kustom: Kiri 2vw

Padding kustom kolom 1 dan 2 menciptakan ruang yang kita butuhkan di tengah diagram batang yang akan kita tambahkan.

Di kolom kiri tambahkan modul pembagi dan perbarui pengaturan sebagai berikut:

Warna Gradien Latar Belakang Kiri: rgba(81,91,214,0.25)
Warna Gradien Latar Belakang Kanan: rgba(255,255,255,0.15)
Arah Gradien: 90 derajat
Posisi Awal: 35%
Warna: #515bd6
Berat Pembagi: 23px (nilai ini harus sama dengan nilai Tinggi Pembagi yaitu 23px secara default sehingga pembagi memiliki lebar yang sama dengan latar belakang modul)
Padding Kustom: 70% Kiri (Ini mendorong pembagi ke kanan 75% menghasilkan nilai grafik batang 25% dari kanan)

Simpan Pengaturan.

Sekarang salin Modul Pembagi ke kolom kanan dari baris yang sama. Kemudian perbarui pengaturan berikut:

Warna Gradien Latar Belakang Kiri: rgba(255,255,255,0.15)
Warna Gradien Latar Belakang Kanan: rgba (242,90,71,0.25)
Posisi Awal: 70%
Warna: #f25a47
Padding Kustom: 30% Kanan (Ini mendorong pembagi ke kiri 30% menghasilkan nilai grafik batang 70% dari kiri.)

Sekarang setelah baris pertama batang Anda berada di tempatnya, kita perlu menambahkan satu baris kolom di bawahnya untuk meletakkan label fitur produk kita.

Buat satu baris kolom dengan padding khusus 0px di bagian atas. Kemudian tambahkan modul blurb baru dan perbarui pengaturan modul blurb sebagai berikut:

Konten: "fitur"
Gunakan Ikon: YA
Ikon: lihat tangkapan layar

Warna Ikon: rgba(255,255,255,0.3)
Gunakan Ukuran Font Ikon: YA
Ukuran Font Ikon: 30px
Orientasi Teks: tengah
Font Tubuh: Montserrat
Berat Huruf Tubuh: Ultra Tebal
Warna Teks Tubuh: rgba(255,255,255,0.3)
Spasi Huruf Isi: 2px
Margin Kustom: -20px

Di bawah tab lanjutan, Anda dapat menghilangkan margin default di bawah ikon uraian dengan menambahkan CSS khusus berikut di kotak CSS Gambar Blurb:

margin-bottom: 0px;

Sekarang setelah Anda memiliki contoh kerja pertama fitur perbandingan produk, yang perlu Anda lakukan adalah menduplikasi dua baris yang membentuk fitur perbandingan (baris dengan dua batang/pembagi dan baris dengan modul uraian). Saya menemukan bahwa paling mudah untuk menggunakan ctrl + c (atau perintah + c) untuk menyalin setiap baris dan kemudian ctrl + v (atau perintah + v) untuk menempelkannya di bawah satu sama lain. Kemudian cukup perbarui padding khusus untuk pembagi duplikat untuk menampilkan nilai diagram batang yang berbeda.

Anda juga dapat menyesuaikan posisi awal dan akhir gradien tergantung pada nilai padding khusus yang Anda pilih. Misalnya, jika Anda memberi pembagi kolom kiri padding 60% Kiri, Anda dapat menyesuaikan posisi awal gradien Anda menjadi 30% (tepatnya setengah jarak padding).

Untuk sentuhan terakhir, Anda mungkin ingin menambahkan latar belakang pembagi ke bagian Anda. Untuk contoh ini, saya akan menambahkan yang berikut:

Pembagi Atas: Lihat tangkapan layar
Warna Pembagi: rgba (255,255,255,0,05)
Tinggi Pembagi: 19vw

Berikut adalah hasil akhirnya.

Saya juga menyukai tampilan desainnya ketika saya mengubah warna background bagian menjadi #000314.

Membuat Desain Responsif

Di Divi, setiap baris dua kolom akan secara otomatis ditumpuk di atas satu sama lain di perangkat seluler. Ini tentu saja akan merusak desain di ponsel. Untuk memperbaikinya, kita perlu melakukan dua hal. Pertama, kita perlu menambahkan potongan kecil CSS khusus di dalam penyesuai tema.

@media (max-width: 980px){
.disable-break .et_pb_column {
    width: 50%!important;
    margin-bottom: 30px;
}
}

Kode ini akan menyesuaikan lebar kolom dari setiap baris dengan kelas CSS “disable-break” menjadi 50%. Ini akan memastikan kami menjaga struktur dua kolom kami di perangkat seluler sehingga desainnya tidak rusak. Jangan lupa untuk mempublikasikan perubahan Anda.

Setelah CSS berada di tempatnya, kita perlu menambahkan kelas CSS ke setiap baris yang memiliki struktur dua kolom.

Sebagai permulaan, mari tambahkan kelas CSS ke baris dua kolom yang menyimpan dua gambar produk kita. Buka pengaturan baris dan buka tab lanjutan. Kemudian masukkan "disable-break" ke dalam kotak input Kelas CSS.

Kemudian klik kanan pada opsi Kelas CSS dan klik "Salin Kelas CSS".

Sekarang yang perlu Anda lakukan adalah klik kanan pada setiap baris yang memiliki struktur dua kolom (semua baris dengan pembagi/bar) dan klik “Paste CSS Class”.

Sekarang kolom Anda akan mempertahankan struktur dua kolom di perangkat seluler dan menjaga desain tetap konsisten..

Pikiran Akhir

Membuat bagan perbandingan produk di Divi sangatlah mudah setelah Anda mempelajari beberapa teknik desain. Triknya adalah mengatur baris dua kolom Anda dengan lebar 100% dan lebar talang 1. Setelah itu, Anda dapat menggunakan modul pembagi untuk membuat beberapa desain diagram batang yang unik. Dan jika Anda ingin mempertahankan tata letak dua kolom di seluler, yang Anda butuhkan hanyalah potongan kecil CSS khusus. Saya berharap bahwa tata letak bagan perbandingan ini dapat digunakan dalam berbagai cara. Jangan ragu untuk berbagi beberapa ide dengan Divi Nation.

Saya berharap untuk mendengar dari Anda di komentar.

Bersulang!