Cara Menambahkan Info Produk Slide-In ke Halaman Produk Divi Anda

Cara Anda mendesain halaman produk menunjukkan banyak hal tentang toko Anda secara umum. Desain halaman produk Anda adalah bagian penting dari pengalaman pembelian, jadi bekerja lebih keras sering kali sepadan. Jika Anda ingin membuat halaman produk yang sedikit lebih interaktif, Anda akan menyukai posting ini. Dalam tutorial ini, kami akan menunjukkan cara menambahkan info produk slide-in di dalam tata letak halaman produk yang dibuat dengan indah. Kami juga akan mengubah tata letak ini menjadi templat halaman produk dan Anda dapat mengunduh file JSON secara gratis!

Mari kita lakukan.

Pratinjau

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

Desktop

Seluler

Unduh Template Halaman Produk Slide-In GRATIS

Untuk meletakkan tangan Anda pada templat halaman produk slide-in, Anda harus mengunduhnya terlebih dahulu menggunakan tombol di bawah ini. 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!

1. Tambahkan/Buka Produk WooCommerce

Rincian Produk

Mulailah dengan membuat produk baru atau membuka yang sudah ada. Untuk mencapai hasil yang sama persis dalam desain, Anda harus menambahkan detail berikut ke produk Anda:

• Nama
• Keterangan
• Gambar produk dengan latar belakang transparan
• Harga
• Kategori

Aktifkan Divi Builder & Ubah Pengaturan Halaman Produk

Aktifkan Divi Builder dan ubah tata letak halaman di sudut kanan atas.

• Tata Letak Halaman: Lebar Penuh

Beralih ke Visual Builder

Setelah Anda mengubah tata letak halaman, Anda dapat beralih ke Divi's Visual Builder dengan mengklik 'Build On The Front End'.

2. Buat Slide-In Product Info Product Page Layout

Hapus Beberapa Baris di Halaman

Di dalam editor halaman produk, Anda akan melihat berbagai elemen yang relevan dengan produk Anda. Kami hanya membutuhkan elemen baris kedua jadi lanjutkan dan hapus baris pertama dan terakhir di dalam bagian.

Ubah Pengaturan Bagian

Warna latar belakang

Saatnya untuk mulai memodifikasi elemen yang berbeda untuk membuat tata letak info produk slide-in kami! Buka pengaturan bagian dan ubah warna latar belakang.

• Warna Latar Belakang: #ffe4a5

Perekat

Tambahkan tinggi minimum ke pengaturan ukuran juga. Langkah ini akan memungkinkan bagian untuk mengambil seluruh ketinggian browser Anda.

• Tinggi Min: 100vh

Jarak

Kemudian, buka pengaturan spasi dan hapus semua padding atas dan bawah default.

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

Visibilitas

Sembunyikan juga bagian yang meluap. Ini akan membantu memastikan tidak ada bilah horizontal yang muncul saat animasi sedang berlangsung.

• Luapan Horisontal: Tersembunyi
• Overflow Vertikal: Tersembunyi

Ubah Pengaturan Baris

Perekat

Selanjutnya, buka pengaturan baris dan ubah pengaturan ukuran di berbagai ukuran layar.

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

Jarak

Hapus juga padding atas dan bawah default baris.

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

Posisi

Kemudian, buka pengaturan posisi dan pastikan baris tetap berada di bagian bawah dengan mengubah pengaturan yang sesuai:

• Posisi: Absolute (Desktop), Default (Tablet & Phone)
• Lokasi: Bawah Tengah

Ubah Pengaturan Kolom 2

Warna latar belakang

Selanjutnya, kita akan membuat beberapa perubahan pada kolom kedua. Gunakan warna latar belakang putih.

• Warna Latar Belakang: #FFFFFF

Jarak

Kemudian, tambahkan beberapa nilai padding kustom ke pengaturan spasi.

• Padding Atas: 10vw
• Padding Bawah: 10vw
• Padding Kiri: 8vw
• Padding Kanan: 8vw

Filter Bawaan

Pindah ke pengaturan filter kolom dan pastikan filter kecerahan, invert, dan sepia mempertahankan nilai defaultnya dalam keadaan normal.

• Kecerahan: 100%
• Balikkan: 0%
• Sepi: 0%

Filter Arahkan

Namun, saat mengarahkan kursor, kami akan mengubah nilainya:

• Kecerahan: 49%
• Balikkan: 100%
• Sepi: 100%

Posisi

Kami juga memastikan kolom ditempatkan di sudut kanan bawah wadah baris dengan menerapkan pengaturan posisi berikut:

• Posisi: Absolute (Desktop), Default (Tablet & Phone)
• Lokasi: Kanan Bawah

Ubah Modul Judul Woo di Kolom 2

Pengaturan Teks Judul

Saatnya untuk mulai menyesuaikan modul yang berbeda di kolom 2! Buka Modul Judul Woo dan ubah pengaturan teks H1 sebagai berikut:

• Judul Font: Tampilan Playfair
• Warna Teks Judul: #000000
• Judul Teks Ukuran: 3vw (Desktop), 5vw (Tablet), 7vw (Telepon)

Modifikasi Modul Harga Woo di Kolom 2

Pengaturan Teks Harga

Buka pengaturan Modul Harga Woo selanjutnya dan ubah pengaturan teks harga.

• Harga Font: Poppins
• Warna Teks Harga: #e5bc87
• Harga Teks Ukuran: 1.4vw (Desktop), 3vw (Tablet), 4vw (Telepon)

Jarak

Tambahkan beberapa margin atas dan bawah khusus di berbagai ukuran layar juga.

• Margin Atas: 2vw (Desktop), 4vw (Tablet & Ponsel)
• Margin Bawah: 3vw (Desktop), 5vw (Tablet & Ponsel)

Ubah Modul Deskripsi Woo di Kolom 2

Pengaturan Teks

Ke Modul Deskripsi Woo. Ubah pengaturan teks modul yang sesuai:

• Font Teks: Poppins
• Berat Font Teks: Ringan
• Ukuran Teks: 0.8vw (Desktop), 1.8vw (Tablet), 2.7vw (Telepon)
• Tinggi Baris Teks: 2.1em

Jarak

Tambahkan beberapa margin bawah responsif juga.

• Margin Bawah: 3vw (Desktop), 5vw (Tablet & Ponsel)

Modifikasi Woo Add to Cart Module di Kolom 2

Pengaturan Bidang

Selanjutnya kita memiliki Modul Woo Add to Cart. Ubah pengaturan bidang modul.

• Warna Latar Belakang Bidang: rgba(255,255,255,0)
• Warna Teks Bidang: #000000
• Bidang Font: Poppins
• Ukuran Teks Bidang: 0.9vw (Desktop), 2vw (Tablet), 3vw (Telepon)

• Semua Sudut: 0px
• Lebar Batas Bawah Bidang: 1px
• Warna Batas Bawah Bidang: #e5bc87

Pengaturan Tombol

Pindah ke pengaturan tombol dan gaya tombol yang sesuai:

• Gunakan Gaya Kustom Untuk Tombol: Ya
• Ukuran Teks Tombol: 0.9vw (Desktop), 2vw (Tablet), 3vw (Telepon)
• Warna Teks Tombol: #ffffff
• Warna Gradien 1: #e5bd89
• Warna Gradien 2: #e5bc87
• Tipe Gradien: Linier
• Arah Gradien: 153 derajat
• Lebar Batas Tombol: 0px

• Radius Perbatasan Tombol: 1px
• Font Tombol: Poppins

• Padding Atas: 1vw (Desktop), 2vw (Tablet), 3vw (Telepon)
• Padding Bawah: 1vw (Desktop), 2vw (Tablet), 3vw (Telepon)
• Padding Kiri: 3vw (Desktop), 6vw (Tablet), 9vw (Telepon)
• Padding Kanan: 3vw (Desktop), 6vw (Tablet), 9vw (Telepon)

Jarak

Selesaikan pengaturan modul dengan menambahkan beberapa margin tombol di berbagai ukuran layar.

• Margin Bawah: 2vw (Destkop), 4vw (Tablet & Telepon)

Ubah Modul Meta Woo di Kolom 2

Pengaturan Teks

Lanjutkan dengan membuka Modul Meta Woo dan ubah pengaturan teks.

• Meta Font: Poppins
• Berat Font Meta: Ringan
• Ukuran Teks Meta: 0.8vw (Desktop), 1.8vw (Tablet), 3vw (Telepon)

Pengaturan Teks Tautan

Ubah juga warna teks tautan.

• Warna Teks Tautan: #e5bc87

Tambahkan Modul Kode ke Kolom 2

Untuk mengubah warna latar belakang zoom Modul Gambar Woo, kita memerlukan sedikit kode CSS yang akan kita tempatkan di Modul Kode baru di kolom 2.

Tambahkan Kode CSS untuk Mengubah Warna Latar Belakang Zoom Gambar Woo

Tambahkan baris kode CSS berikut ke Modul Kode:

<style>
.zoomImg {
background-color: #FFE4A5 !important;
}
</style>

3. Tambahkan Pengaturan Animasi yang Disinkronkan ke Wadah

Modul Gambar Woo

Sekarang kita telah menata elemen yang berbeda pada halaman produk kita, saatnya untuk membuat efek info produk slide-in terjadi! Untuk mencapai ini, kami akan menggunakan pengaturan animasi bawaan Divi. Buka Modul Gambar Woo di kolom 1 dan terapkan animasi berikut:

• Gaya Animasi: Slide
• Arah Animasi: Atas
• Opacity Mulai Animasi: 50%
• Kurva Kecepatan Animasi: Kemudahan

kolom 1

Buka pengaturan kolom 1 selanjutnya dan gunakan pengaturan animasi berikut:

• Gaya Animasi: Slide
• Arah Animasi: Kiri (Desktop), Atas (Tablet & Ponsel)
• Penundaan Animasi: 950ms (Desktop), 0vw (Tablet & Ponsel)
• Intensitas Animasi: 25%
• Animasi Mulai Opacity: 100%
• Kurva Kecepatan Animasi: Ease-In-Out

Kolom 2

Terakhir, terapkan pengaturan animasi berikut ke kolom 2:

• Gaya Animasi: Slide
• Arah Animasi: Kiri (Desktop), Atas (Tablet & Ponsel)
• Durasi Animasi: 1200ms
• Penundaan Animasi: 800ms (Desktop), 0ms (Tablet & Ponsel)
• Animasi Mulai Opacity: 100%
• Kurva Kecepatan Animasi: Ease-In-Out

4. Ubah Tata Letak Halaman Produk menjadi Template

Simpan Tata Letak ke Perpustakaan Divi

Setelah Anda menyelesaikan seluruh desain halaman produk, Anda dapat menyimpannya ke Perpustakaan Divi Anda. Kami akan menggunakan tata letak halaman produk yang disimpan ini untuk membuat templat halaman produk baru.

Buka Divi Theme Builder & Tambahkan Template Baru

Buka Divi Theme Builder dan tambahkan template baru.

Gunakan Template di Semua Produk

Gunakan template baru di semua produk.

• Gunakan Pada: Semua Produk

Unggah Tata Letak ke Tubuh Template Halaman Produk

Kemudian, klik 'Add Custom Body' dan klik 'Add From Library'.

Arahkan ke 'Tata Letak Tersimpan Anda' dan pilih tata letak halaman produk yang telah Anda unggah ke Perpustakaan Divi Anda.

5. Simpan Perubahan Pembuat Tema & Lihat Hasil

Setelah Anda mengunggah tata letak ke templat halaman produk baru Anda, satu-satunya yang tersisa untuk dilakukan adalah menyimpan semua perubahan Pembuat Tema dan melihat hasilnya di situs web Anda!

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 membumbui halaman produk Anda dengan menunjukkan cara mendesain tata letak info produk slide-in. Ini adalah cara yang bagus untuk menambahkan beberapa interaksi tambahan ke halaman produk Anda. Anda juga dapat mengunduh file JSON secara gratis! Jika Anda memiliki pertanyaan atau saran, jangan ragu untuk meninggalkan komentar 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.