Tutorial Membuat Halaman Daftar Produk

Menggunakan Divi Builder
Dalam membuat halaman daftar harga produk, tentunya kita dapat menggunakan plugin Table Press. Namun jika per kategori produk dan anda ingin membuat dengan tampilan yang berbeda tanpa harus coding css-style, anda dapat membuat dengan Divi Builder.

Membuat Halaman Daftar Produk Menggunakan Divi Builder

Sebetulnya, teknik ini lebih cocok untuk perusahaan agen perjalanan wisata atau tour travel, katering, dan sebagainya. Jika anda memiliki daftar produk yang cukup panjang, sebaiknya gunakan plugin Table Press. Dalam tutorial ini kami berikan contoh pada salah satu website penjual kabel jaringan yang berlokasi di Harco Mangga Dua, Jakarta.

Berikut cara membuat halaman daftar produk menggunakan Divi Builder.

Buat Layout Halaman

Ini merupakan hal yang pertama kali dilakukan untuk membuat halaman daftar produk dan halaman apa saja (termasuk luxury content article). Dengan Divi Builder, kita dapat membuat setiap halaman atau posting dengan tampilan yang berbeda-beda, dinamis dan menarik. Tentunya dengan cara yang sangat mudah.

Isi judul halaman dan klik tombol ungu "Gunakan Divi Builder"

Isi judul halaman dan klik tombol ungu “Gunakan Divi Builder” untuk mengaktifkan Divi Builder pada halaman yang dibuat.

Tips:

Masukan judul halaman dengan gunakan sekitar 60 character.

Sisipkan kolom

Pilih layout kolom yang paling sesuai (dalam contoh ini: 1/4 – 2/4 – 1/4) agar dapat memuat 3 kolom dengan lebar kolom 1/3 di kiri dan kanan.

Setiap baris dapat berbeda-beda layout kolom. Dan tiap kotak tersebut (elemen) dapat diberikan modul yang berbeda juga, sesuai kebutuhan.

 

Sisipkan kolom dan pilih layout
Masukan Elemen Modul

Masukkan elemen modul ke masing-masing kolom, seperti:

  • Modul Gambar/Image
  • Modul Text
  • Modul Tombol

Tips:

Jika ada kesalahan dalam mengerjakan halaman menggunakan divi builder, kita bisa selalu tekan Ctr+Z untuk mengembalikannya.

Sebaiknya gunakan gambar atau foto yang tidak terlalu besar. Anda dapat mengatur ukuran tersebut dengan cara ini.

Klik pengaturan modul, klik Desain, dan sesuaikan ukuran maksimum modul.

Tips:

Anda dapat mengatur setiap modul dengan klik lambang 3 baris di pojok kiri atas tiap-tiap modul.

Atur ukuran lebar gambar produk
Atur jarak atas dan bawah elemen teks

Atur jarak atas dan bawah elemen teks agar tidak terlalu rapat dengan garis batas kolom. Anda juga dapat mengatur batas jarak kiri dan kanan per tiap-tiap modul dan kolom.

Tips:

Selain menggunakan divi builder, anda juga dapat menggunakan pembangunan visual untuk mengatur jarak konten dengan batas kolom.

Hasil dari cara membuat daftar halaman produk

Hasil dari cara membuat daftar halaman produk
Berikut cara untuk memodifikasi Tombol “Call” dan menambahkan fungsi untuk memanggil nomor telepon tersebut jika di klik oleh pengunjung website anda.
Sisipkan modul tombol
Sisipkan modul tombol,  dan kemudian mulailah:

  • Masukkan teks untuk di tampilkan di tombol
  • Masukkan link panggilan telepon
  • Modifikasi warna latar belakang tombol
  • Modifikasi warna teks tombol
  • Modifikasi icon telepon.
Isi teks tombol dan nomor telepon
Pilih custom tombol
Perataan tombol
Berikan warna latar belakang
Pilih warna teks untuk di tombol
Pilih icon telepon
Demikian cara membuat halaman daftar produk menggunakan divi builder. Sangat mudah bukan ? dapat dilakukan dengan cepat dan memberikan hasil tampilan yang profesional selain terdapat fungsi Call-to-Action yang dapat memberikan kontribusi langsung ke bisnis anda. Semoga bermanfaat 🙂

Hosting WP + Divi License

1 GB, Server VPS Hi-Spec, SSL, Support via WhatsApp sampai bisa. 

Hanya Rp. 100.000,- per bulan

GRATIS!! Divi License senilai Rp. 1.200.000,- per tahun.

Pin It on Pinterest

Share This