Mengubah Kolom Menjadi Paket Harga dengan Divi

Opsi kolom baru Divi telah menghadirkan banyak kemungkinan desain baru ke alur kerja kami. Mereka membantu menyatukan beberapa modul tanpa harus menyentuh satu baris kode CSS pun. Dalam posting ini, kami akan mengubah kolom menjadi paket harga menggunakan opsi bawaan Divi saja. Kami juga akan bermain-main dengan opsi transformasi hover kolom untuk mencapai beberapa efek hover yang menakjubkan. Anda juga dapat mengunduh JSON secara gratis!

Mari kita lakukan.

Pratinjau

Sebelum kita masuk ke tutorial, mari kita lihat sekilas hasilnya di berbagai ukuran layar.

Desktop

Seluler

Unduh Tata Letak Paket Harga Kolom GRATIS

Untuk mendapatkan tata letak paket harga kolom gratis, Anda harus mengunduhnya terlebih dahulu menggunakan tombol di bawah. Untuk mendapatkan akses ke unduhan, Anda harus berlangganan daftar email Divi Daily kami dengan menggunakan formulir di bawah ini. Sebagai pelanggan baru, Anda akan menerima lebih banyak kebaikan Divi dan paket Tata Letak Divi gratis setiap hari Senin! Jika Anda sudah ada dalam daftar, cukup masukkan alamat email Anda di bawah ini dan klik unduh. Anda tidak akan "berlangganan ulang" atau menerima email tambahan.

Unduh File

Unduh Gratis

Bergabunglah dengan Divi Newsletter dan kami akan mengirimkan email kepada Anda salinan Paket Tata Letak Halaman Arahan Divi terbaik, ditambah banyak sumber daya, tip, dan trik Divi yang luar biasa dan gratis. Ikuti dan Anda akan menjadi master Divi dalam waktu singkat. Jika Anda sudah berlangganan cukup ketik alamat email Anda di bawah ini dan klik unduh untuk mengakses paket tata letak.

UNDUH

Anda telah berhasil berlangganan. Silakan periksa alamat email Anda untuk mengonfirmasi langganan Anda dan dapatkan akses ke paket tata letak Divi mingguan gratis!

Mari Mulai Berkreasi!

Berlangganan Saluran Youtube Kami

Tambahkan Bagian Baru

Latar Belakang Gradien

Tambahkan bagian reguler baru ke halaman yang sedang Anda kerjakan dan buka pengaturan bagian. Buka pengaturan latar belakang dan tambahkan latar belakang gradien linier:

• Warna 1: #ededed
• Warna 2: #ffffff
• Posisi Awal: 30%
• Posisi Akhir: 30%

Jarak

Kami juga menambahkan beberapa bantalan atas dan bawah ke bagian tersebut.

• Padding Atas: 200px
• Padding Bawah: 200px

Tambahkan Baris Baru

Struktur Kolom

Lanjutkan dengan menambahkan baris baru ke bagian menggunakan struktur kolom berikut:

Perekat

Tanpa menambahkan modul apa pun, buka pengaturan baris, buka tab lanjutan dan ubah pengaturan ukuran yang sesuai:

• Gunakan Lebar Talang Kustom: Ya
• Lebar Talang: 1
• Lebar: 80% (Desktop & Tablet), 90% (Telepon)
• Lebar Maks: 1400px (Desktop), 90% (Tablet), 100% (Ponsel)

Pengaturan Kolom 1

Kita juga perlu mengubah pengaturan kolom, dimulai dengan yang pertama. Buka pengaturan kolom 1.

Latar Belakang Gradien

Terapkan latar belakang gradien berikut ke kolom 1:

• Warna 1: #f7f7f7
• Warna 2: #ffffff
• Tipe Gradien: Radial
• Arah Radial: Bawah
• Posisi Awal: 31%
• Posisi Akhir: 31%

Berbatasan

Tambahkan radius batas '20px' ke kolom juga.

Bayangan Kotak

Dan untuk membuat beberapa kedalaman pada halaman, kita juga akan menambahkan bayangan kotak yang halus.

• Kekuatan Buram Bayangan Kotak: 80px
• Warna Bayangan: rgba (0,0,0,0.11)

Skala Transformasi Default

Seperti yang Anda lihat di pratinjau posting ini, kolomnya sedikit berubah. Buka pengaturan transformasi dan pastikan opsi skala transformasi tetap '100%' dalam status default.

• Bawah: 100%
• Kanan: 100%

Arahkan Skala Transformasi

Ubah nilai skala transformasi saat mengarahkan kursor.

• Bawah: 120%
• Kanan: 120%

Terjemahan Default Transform

Kami juga sedikit mendorong kolom ke kanan di desktop menggunakan pengaturan transformasi terjemahan. Tambahkan input berikut:

• Bawah: 34px (Desktop), 0px (Tablet & Ponsel)
• Kanan: 0px

Arahkan Arahkan Transformasi Terjemahan

Kembalikan nilai transform translate ke normal saat mengarahkan kursor.

• Bawah: 0px
• Kanan: 0px

Putar Transformasi Default

Pindah ke pengaturan putar transformasi dan tambahkan nilai berikut ke kiri:

• Kiri: 352deg (Desktop), 0deg (Tablet & Ponsel)

Arahkan Transform Putar

Kembalikan nilainya ke '0deg' saat mengarahkan kursor.

• Kiri: 0deg

Meluap

Nanti di postingan ini, kita akan menambahkan tombol di bagian bawah kolom. Tombol itu akan tumpang tindih dengan batas bawah kolom. Untuk memungkinkan ini, kita perlu membuat luapan kolom kita terlihat.

• Luapan Horisontal: Terlihat
• Luapan Vertikal: Terlihat

Indeks Z Default

Ubah indeks z kolom di berbagai ukuran layar berikutnya. Ini akan membantu kita menjaga susunan agar tetap teratur.

• Indeks Z: 9 (Desktop), 11 (Tablet & Ponsel)

Arahkan ke Indeks Z

Saat mengarahkan kursor, kami ingin kolom muncul di atas yang lain. Untuk mewujudkannya, kami akan meningkatkan indeks z saat mengarahkan kursor.

• Indeks Z: 11

Transisi

Kami juga membuat transisi yang mulus dengan meningkatkan durasi transisi di pengaturan transisi.

• Durasi Transisi: 500ms

Pengaturan Kolom 2

Ke kolom kedua! Silakan dan buka pengaturan kolom.

Latar Belakang Gradien

Terapkan pengaturan latar belakang gradien berikut:

• Warna 1: #fff200
• Warna 2: #ffffff
• Tipe Gradien: Radial
• Arah Radial: Bawah
• Posisi Awal: 31%
• Posisi Akhir: 31%

Berbatasan

Tambahkan '20px' radius perbatasan berikutnya.

Bayangan Kotak

Seiring dengan bayangan kotak halus.

• Kekuatan Buram Bayangan Kotak: 50px
• Warna Bayangan: rgba (0,0,0,0.14)

Skala Transformasi Default

Kolom kedua adalah paket harga unggulan kami. Untuk memastikan ini tidak luput dari perhatian, kami akan meningkatkan ukuran kolom dalam pengaturan skala transformasi.

• Bawah: 112% (Desktop), 100% (Tablet & Ponsel)
• Kanan: 112% (Desktop), 100% (Tablet & Ponsel)

Arahkan Skala Transformasi

Ubah nilai skala transformasi saat mengarahkan kursor.

• Bawah: 120%
• Kanan: 120%

Meluap

Ubah overflow horizontal dan vertikal berikutnya.

• Luapan Horisontal: Terlihat
• Luapan Vertikal: Terlihat

Indeks Z Default

Kemudian, buka pengaturan visibilitas dan tingkatkan indeks z kolom.

• Indeks Z: 10

Arahkan ke Indeks Z

Ubah indeks z saat mengarahkan kursor.

• Indeks Z: 12

Transisi

Dan tingkatkan durasi transisi dalam pengaturan transisi.

• Durasi Transisi: 500ms

Pengaturan Kolom 3

Ke kolom ketiga dan terakhir! Buka pengaturan kolom.

Latar Belakang Gradien

Buka pengaturan latar belakang dan tambahkan latar belakang gradien berikut:

• Warna 1: #f7f7f7
• Warna 2: #ffffff
• Tipe Gradien: Radial
• Arah Radial: Bawah
• Posisi Awal: 31%
• Posisi Akhir: 31%

Berbatasan

Tambahkan radius batas '20px' berikutnya.

Bayangan Kotak

Bersamaan dengan bayangan kotak yang halus.

• Kekuatan Buram Bayangan Kotak: 80px
• Warna Bayangan: rgba (0,0,0,0.11)

Skala Transformasi Default

Saatnya mengubah kolom! Pastikan nilai skala transformasi default tetap '100%'.

• Bawah: 100%
• Kanan: 100%

Arahkan Skala Transformasi

Ubah nilai-nilai ini saat mengarahkan kursor.

• Bawah: 120%
• Kanan: 120%

Terjemahan Default Transform

Kami juga mendorong kolom ke kiri di desktop dengan menerapkan beberapa nilai terjemahan transformasi kustom.

• Bawah: -34px (Desktop), 0px (Tablet & Ponsel)
• Kanan: 0px

Arahkan Arahkan Transformasi Terjemahan

Kembalikan nilai ke '0px' saat mengarahkan kursor.

• Bawah: 0px
• Kanan: 0px

Putar Transformasi Default

Lanjutkan dengan memutar kolom dalam keadaan default.

• Kiri: 8 derajat (Desktop), 0 derajat (Tablet & Ponsel)

Arahkan Transform Putar

Ubah nilai putar transformasi kiri kembali ke '0px' saat mengarahkan kursor.

• Kiri: 0deg

Meluap

Pastikan luapan terlihat berikutnya.

• Luapan Horisontal: Terlihat
• Luapan Vertikal: Terlihat

Indeks Z Default

Kemudian, buka pengaturan visibilitas dan pastikan indeks z default adalah 9.

• Indeks Z: 9

Arahkan ke Indeks Z

Ubah indeks z saat mengarahkan kursor.

• Indeks Z: 11

Transisi

Dan tingkatkan durasi transisi dalam pengaturan transisi.

• Durasi Transisi: 500ms

Tambahkan Modul Blurb ke Kolom 1

Tambahkan judul

Saatnya mulai menambahkan modul ke kolom pertama! Tambahkan Modul Blurb baru dan masukkan judul.

Pilih Ikon

Pilih ikon berikutnya.

Pengaturan Ikon

Pindah ke tab desain dan ubah pengaturan ikon yang sesuai:

• Warna Ikon: #000000
• Penempatan Ikon: Atas
• Gunakan Ukuran Font Ikon: Ya
• Ukuran Font Ikon: 50px

Pengaturan Judul

Ubah pengaturan teks judul berikutnya.

• Judul Font: Poppins
• Perataan Teks Judul: Tengah
• Warna Teks Judul: #000000
• Ukuran Teks Judul: 27px

Jarak

Dan tambahkan beberapa margin atas juga.

• Margin Atas: 80px

Tambahkan Modul Pembagi ke Kolom 1

Visibilitas

Ke modul kedua, yaitu modul pembagi. Pastikan opsi 'Tampilkan Pembagi' diaktifkan.

• Tampilkan Pembagi: Ya

Garis

Pindah ke tab desain dan ubah warna pembagi menjadi hitam.

• Warna Garis: #000000

Perekat

Ubah juga pengaturan ukuran.

• Berat Pembagi: 6px
• Lebar: 14%
• Penyelarasan Modul: Pusat
• Tinggi: 0px

Jarak

Terakhir, tambahkan beberapa margin atas.

• Margin Atas: 50px

Tambahkan Modul Teks #1 ke Kolom 1

Tambah isi

Lanjutkan dengan menambahkan Modul Teks tepat di bawah Modul Pembagi dan masukkan beberapa konten pilihan Anda.

Pengaturan Teks

Pindah ke tab desain dan ubah pengaturan teks yang sesuai:

• Font Teks: Poppins
• Berat Font Teks: Ringan
• Perataan Teks: Tengah
• Warna Teks: #4f4f4f
• Tinggi Baris Teks: 2.3em

Jarak

Tambahkan beberapa margin kustom dan nilai padding juga.

• Margin Atas: 50px
• Padding Atas: 10px
• Padding Bawah: 10px

Tambahkan Modul Teks #2 ke Kolom 1

Tambah isi

Tepat di bawah Modul Teks sebelumnya, kita membutuhkan Modul Teks lainnya. Masukkan beberapa konten pilihan Anda.

Pengaturan Teks

Pindah ke tab desain dan ubah pengaturan teks yang sesuai:

• Font Teks: Poppins
• Berat Font Teks: Berat
• Perataan Teks: Tengah
• Warna Teks: #000000
• Ukuran Teks: 47px
• Tinggi Baris Teks: 1em

Jarak

Tambahkan beberapa margin atas dan bawah kustom juga.

• Margin Atas: 50px
• Margin Bawah: 80px

Tambahkan Modul Tombol ke Kolom 1

Tambahkan Salinan

Modul berikutnya dan terakhir yang kita butuhkan di kolom 1 adalah Modul Tombol. Masukkan beberapa salinan pilihan Anda.

Penyelarasan

Buka tab desain dan ubah perataan tombol ke tengah.

• Penjajaran Tombol: Tengah

Pengaturan Tombol

Gaya tombol juga.

• Gunakan Gaya Kustom Untuk Tombol: Ya
• Ukuran Teks Tombol: 17px
• Warna Teks Tombol: #000000
• Warna Latar Tombol: #FFFFFF
• Lebar Batas Tombol: 0px
• Radius Batas Tombol: 100px
• Font Tombol: Poppins
• Berat Huruf Tombol: Tebal

Jarak

Kami juga akan menambahkan beberapa nilai margin dan padding kustom.

• Margin Atas: 50px
• Margin Bawah: -40px
• Padding Atas: 23px
• Padding Bawah: 23px
• Padding Kiri: 70px
• Padding Kanan: 70px

Bayangan Kotak

Dan kita akan melengkapinya dengan memberikan Button Module bayangan kotak yang halus.

• Kekuatan Buram Bayangan Kotak: 50px
• Warna Bayangan: rgba(0,0,0,0.3)

Klon Semua Modul Dua Kali & Tempatkan Duplikat di Kolom Tersisa

Setelah Anda menyelesaikan semua modul di kolom 1, Anda dapat mengkloningnya dua kali dan menempatkan duplikatnya di dua kolom baris yang tersisa.

Ubah Ikon & Judul Blurb

Pastikan Anda mengubah ikon dan judul uraian untuk setiap duplikat.

Ubah Konten Modul Teks

Seiring dengan isi modul teks.

Ubah Tombol #2

Last but not least, buka tombol di kolom 2 dan ubah pengaturan tombol. Setelah Anda menyelesaikan langkah ini, Anda selesai!

• Warna Teks Tombol: #FFFFFF
• Warna Latar Tombol: #8300E9

Pratinjau

Sekarang setelah kita melalui semua langkah, mari kita lihat hasil akhir di berbagai ukuran layar.

Desktop

Seluler

Pikiran Akhir

Dalam posting ini, kami telah menunjukkan kepada Anda cara mengubah kolom menjadi paket harga menggunakan opsi kolom baru Divi. Anda dapat menyesuaikan paket harga tanpa harus menyentuh satu baris kode CSS pun! Tutorial ini hanya menunjukkan bagaimana opsi kolom baru membantu Anda menyatukan modul yang berbeda dalam desain yang indah. Jika Anda memiliki pertanyaan atau saran, jangan ragu untuk meninggalkannya di bagian komentar di bawah!

Jika Anda ingin mempelajari lebih lanjut tentang Divi dan mendapatkan lebih banyak gratisan Divi, pastikan Anda berlangganan buletin email dan saluran YouTube kami sehingga Anda akan selalu menjadi salah satu orang pertama yang mengetahui dan mendapatkan manfaat dari konten gratis ini.