• Beranda
  • Artikel
  • Tema
  • Cara Membuat Halaman Daftar Hadiah untuk Pernikahan Anda dengan Divi

Cara Membuat Halaman Daftar Hadiah untuk Pernikahan Anda dengan Divi

Diterbitkan: 2017-05-18

Posting ini adalah bagian 3 dari 5 dalam miniseri kami Cara Membuat Situs Web Pernikahan yang Elegan dengan Divi. Dalam seri ini, kami akan memandu Anda melalui bagian terpenting dalam membuat situs web pernikahan untuk diri sendiri atau klien dengan Divi.

Di dua bagian pertama dari miniseri kami, kami menunjukkan cara membuat halaman pengumuman pernikahan yang elegan dan halaman galeri dengan Divi. Bagian ketiga ini akan didedikasikan untuk membuat halaman daftar hadiah dalam situs web pernikahan Anda.

Kami akan menunjukkan kepada Anda langkah demi langkah bagaimana Anda dapat membuat tata letak berikut dengan Visual Builder of Divi:

Tata letak memiliki lima bagian dan masing-masing memberikan kontribusi nilainya sendiri untuk keseluruhan. Mari selami yang pertama!

Bagian Pahlawan

Bagian pahlawan sangat sederhana tetapi itulah yang kami cari di miniseri ini; kesederhanaan dan keanggunan. Kami menggunakan palet warna yang sama seperti pada dua tutorial pernikahan sebelumnya, jadi jika Anda mengikutinya, Anda dapat dengan mudah menambahkan halaman ini ke situs web pernikahan yang sudah Anda buat.

Memulai

Mulailah dengan menambahkan halaman baru ke situs WordPress Anda dan beri nama. Aktifkan Divi Builder setelah itu dan segera pindah ke Visual Builder.

Tambahkan bagian baru ke halaman yang baru saja Anda buat. Buka pengaturan bagian dan ubah gambar latar belakang di subkategori Latar Belakang pada tab Konten. Dalam contoh ini, kami mengambil gambar simetris untuk latar belakang bagian untuk memberikan efek ekstra itu.

Lanjutkan dengan menambahkan baris lebar penuh ke bagian tersebut. Buka pengaturan baris dan ubah Warna Latar menjadi 'rgba(122.122.122.0.56)' di dalam subkategori Latar Belakang pada tab Konten.

Selanjutnya, buka tab Desain. Buka subkategori Sizing, buat baris fullwidth dan masukkan '1' untuk Gutter Width.

Gulir ke bawah dan buka subkategori Spasi. Kita perlu menambahkan '200px' ke padding atas dan bawah untuk desktop dan '150px' ke padding atas dan bawah untuk tablet dan ponsel.

Dalam subkategori yang sama, tambahkan '-50px' ke margin atas dan bawah untuk tablet dan ponsel.

Modul Teks Pertama

Pindah, tambahkan Modul Teks baru ke baris. Tambahkan teks Anda dalam subkategori Teks pada tab Konten. Setelah itu, buka tab Desain dan buat perubahan berikut pada subkategori Teks:

  • Orientasi Teks: Tengah
  • Font Teks: Tangerine
  • Ukuran Font Teks: 100 (Desktop & Tablet), 68 (Telepon)
  • Warna Teks: #ffff6
  • Tinggi Baris Teks: 1.5em

Modul Teks Kedua

Buat modul teks lain tepat di bawahnya. Buka tab Konten dan masukkan teks Anda di subkategori Teks. Selanjutnya, buka tab Desain dan buat perubahan berikut pada subkategori Teks:

  • Orientasi Teks: Tengah
  • Font Teks: Raleway Light
  • Gaya Font Teks: Tebal
  • Ukuran font teks: 20px (Desktop), 14px (Tablet & Ponsel)
  • Warna Teks: #ffff6
  • Tinggi Baris Teks: 1.5em

Header Anda akan terlihat seperti ini sejauh ini:

Bagian Pendahuluan

Dalam tata letak ini, kami ingin memberi orang pilihan. Mereka dapat memilih apakah mereka ingin membeli sesuatu untuk pengantin, pengantin pria atau untuk keduanya.

Mulailah dengan membuat bagian baru dan tambahkan baris dengan satu kolom. Ubah warna latar belakang menjadi '#fffaf6' di dalam subkategori Latar Belakang pada tab Konten. Setelah itu, buka pengaturan baris dan buka tab Desain. Tambahkan '5%' ke margin atas dan bawah hanya untuk desktop.

Judul Bagian

Di baris ini. satu-satunya hal yang harus kita tambahkan adalah Modul Teks. Ketikkan judul yang ingin Anda tampilkan di subkategori Teks pada tab Konten. Pindah ke tab Desain dan buat perubahan berikut pada subkategori Teks:

  • Orientasi Teks: Tengah
  • Font Teks: Tangerine
  • Gaya Font Teks: Tebal
  • Ukuran font teks: 60px (Desktop), 50px (Tablet & Ponsel)
  • Warna Teks: #9b857b
  • Tinggi Baris Teks: 1.7em

Sekarang, buka subkategori Sizing dan ubah Max Width menjadi '500px'.

Lanjutkan dengan membuka subkategori Spasi di tab yang sama dan tambahkan '3%' ke padding atas dan bawah.

Selanjutnya, buka tab Advanced dan tambahkan kode berikut ke Elemen Utama di subkategori CSS Kustom: 

background: #fae4de;
-webkit-clip-path: polygon(13% 0, 88% 0, 100% 100%, 0% 100%);
clip-path: polygon(13% 0, 88% 0, 100% 100%, 0% 100%);
border-top: 1px solid #9b857b;
border-bottom: 1px solid #9b857b;

Sekarang, tambahkan baris lain dengan satu kolom ke bagian yang sama. Kami tidak perlu mengubah apa pun dalam pengaturan baris ini.

Modul Gambar

Tambahkan Modul Gambar ke baris dan unggah gambar di subkategori Gambar pada tab Konten. Lalu, buka tab Desain, hapus ruang di bawah gambar, pilih 'Tengah' untuk Perataan Gambar dan selalu pusatkan gambar di ponsel.

Selanjutnya, buka tab Advanced dan tambahkan kode berikut ke bidang Elemen Utama dalam subkategori CSS Kustom: 

height: 100px;
width: 150px;

Modul Teks Pertama

Di bawah Modul Gambar, tambahkan Modul Teks pertama dari bagian tersebut. Masukkan teks dalam kotak teks di dalam subkategori Teks dari tab Konten dan lanjutkan ke tab Desain. Dalam subkategori Teks, buat penyesuaian berikut:

  • Orientasi Teks: Tengah
  • Font Teks: Raleway Light
  • Ukuran font teks: 24px
  • Warna Teks: #9b857b
  • Tinggi Baris Teks: 1.5em

Gulir ke bawah tab yang sama dan tambahkan '30px' ke margin atas dalam subkategori Spasi.

Last but not least, buka tab Advanced dari Modul Teks yang sama dan tambahkan kode berikut ke Elemen Utama dalam subkategori CSS Kustom: 

font-weight:400;

Modul Teks Kedua

Tambahkan Modul Teks lain ke bagian dan ketik teks di kotak teks di dalam subkategori Teks pada tab Konten. Kemudian, pindah ke tab Desain dan buat modifikasi berikut:

  • Orientasi Teks: Tengah
  • Font Teks: Raleway Light
  • Gaya Font Teks: Tebal
  • Ukuran font teks: 16px
  • Warna Teks: #9b857b
  • Tinggi Baris Teks: 1.5em

Gulir ke bawah tab yang sama dan ubah Max Width menjadi '300px' di dalam subkategori Sizing. Ubah margin atas menjadi '5%' di subkategori Spasi juga.

Selanjutnya, buka tab Advanced dan tambahkan kode berikut ke Elemen Utama dalam subkategori CSS Kustom: 

font-weight: 300;

Modul Gambar & Modul Teks Klon

Tambahkan baris lain, tetapi kali ini dengan tiga kolom, ke bagian yang sama.

Kolom pertama dan kolom terakhir dari baris membutuhkan modul yang sama seperti baris sebelumnya; sebuah Modul Gambar dan dua Modul Teks. Modul-modul ini harus memiliki pengaturan yang sama seperti yang telah kita buat sebelumnya, jadi satu-satunya hal yang akan kita lakukan adalah mengkloningnya. Setelah mengkloning setiap modul dua kali, letakkan di kolom kiri dan kanan dari baris baru dan ubah gambar dan teks.

Selanjutnya, buka tab Desain pada baris dan tambahkan '5%' ke margin bawah dalam subkategori Spasi.

Modul Gambar Pengantin

Sekarang, tambahkan Modul Gambar ke kolom kedua dari baris. Unggah gambar dan buka tab Desain. Pastikan Anda menempatkan Perataan Gambar ke 'Kiri' dan mengaktifkan opsi 'Selalu Pusatkan Gambar di Seluler' dalam subkategori Perataan.

Gulir ke bawah tab yang sama dan tambahkan '5%' ke margin atas dalam subkategori Spasi.

Lalu, buka tab Advanced dan tambahkan kode berikut ke Elemen Utama dalam subkategori CSS Kustom: 

height: 200px;
width: 200px;
-webkit-clip-path: circle(48.2% at 50% 50%);
clip-path: circle(48.2% at 50% 50%);

Terakhir, nonaktifkan Modul Gambar di ponsel dan tablet.

Modul Gambar Pengantin Pria

Kloning Modul Gambar sebelumnya dan letakkan di kolom yang sama dengan yang sebelumnya. Ubah gambar yang diunggah dan lanjutkan ke tab Desain. Buka subkategori Alignment dan ubah Image Alignment menjadi 'Right'.

Selanjutnya, sesuaikan Margin Atas ke '-60%' dalam subkategori Spasi.

Kita sekarang dapat pindah ke bagian daftar hadiah dari tata letak. Tata letak Anda akan terlihat seperti ini sejauh ini:

Daftar Keinginan/Hadiah

Tambahkan bagian standar baru dan ubah warna latar belakang menjadi '#fae4de' di subkategori Latar Belakang pada tab Konten.

Modul Teks: Judul

Tambahkan baris lebar penuh ke bagian dan buat lebar penuh. Setelah itu, kloning Modul Teks yang kita buat di bagian kedua dan letakkan di Modul Baris ini. Ubah teks di posting teks dan ubah warna latar belakang menjadi '#fffaf6' di bidang Elemen Utama dalam subkategori CSS Kustom dari Lanjutan tab.

Daftar hadiah/Daftar Keinginan: Menggunakan Modul Slider

Tambahkan baris baru dengan 3 kolom ke bagian tersebut dan ubah Lebar Kustom '65%' dalam subkategori Ukuran pada tab Desain. Lanjutkan dengan menambahkan Modul Teks ke baris pertama dan buat penyesuaian berikut pada subkategori Teks dari tab Desain:

  • Orientasi Teks: Tengah
  • Font Teks: Raleway Light
  • Gaya Font Teks: Tebal
  • Ukuran Font Teks: 24px
  • Warna Teks: #9b857b
  • Tinggi Baris Teks: 1.5em

Gulir ke bawah tab yang sama dan tambahkan '30px' ke margin atas dalam subkategori Spasi.

Sekarang, kloning Modul Teks dua kali dan letakkan satu di setiap kolom.

Selanjutnya, tambahkan Modul Slider. Buka tab Advanced dari slider dan tambahkan kode berikut ke Elemen Utama dalam subkategori CSS Kustom: 

border: 2px solid #FFFFFF;
border-radius: 15px;
margin-left: 20px;

Pindah, tambahkan slide baru. Di dalam slide, unggah gambar latar belakang dari salah satu item yang ingin Anda tempatkan pada daftar hadiah dalam subkategori Latar Belakang pada tab Konten. Selanjutnya, masukkan nama item dan teks tombol di dalam subkategori Teks pada tab yang sama. Ubah juga URL di subkategori Tautan. Tambahkan slide sebanyak yang Anda butuhkan dalam satu kategori dan ulangi hal yang sama.

Lanjutkan dengan menambahkan baris baru, tetapi sekarang hanya dengan 2 kolom.

Ubah Lebar Kustom menjadi '55%' dalam subkategori Ukuran pada tab Desain dan ubah margin bawah menjadi '5%' dalam subkategori Spasi.

Modul Teks dan Modul Slider yang kita buat di Modul Baris sebelumnya memiliki pengaturan yang sama seperti yang kita butuhkan di semua Modul Teks dan Slider lainnya. Silakan dan klon keduanya empat kali dan letakkan di kolom yang tersisa dari setiap Modul Baris.

Tata letak Anda akan terlihat seperti ini sekarang:

Formulir Kontak (Desktop)

Tujuan Formulir Kontak dalam tata letak adalah untuk memungkinkan orang menyampaikan hadiah yang mereka beli untuk pasangan. Segera setelah hadiah diambil, itu dapat diganti dengan yang lain di situs web. Dengan melakukan itu, kecil kemungkinannya bahwa dua tamu membawa hadiah yang sama.

Buat bagian standar baru dan ubah warna latar belakang menjadi #fffaf6 di subkategori Latar Belakang pada tab Konten.

Baris pertama

Baris yang kita butuhkan di bagian ini sama dengan di bagian lain. Cukup klon Modul Baris yang digunakan sebelumnya dengan Modul Teks di dalamnya dan letakkan di dalam bagian. Satu-satunya hal yang harus Anda lakukan adalah membuat beberapa modifikasi pada pengaturan Modul Teks. Ubah teks dan warna latar belakang di Elemen Utama menjadi #fae4de.

Baris kedua

Sekarang, tambahkan baris dengan dua kolom dan sembunyikan baris di tablet dan ponsel dalam subkategori Visibilitas dari tab Lanjutan. Letakkan Modul Formulir Kontak di kolom pertama dan buat perubahan berikut pada subkategori yang berbeda dari tab Desain.

Teks Bidang Formulir:

  • Font Bidang Formulir: Raleway Light
  • Ukuran Font Bidang Formulir: 18px
  • Warna Teks Bidang Formulir: #9b857b
  • Bentuk Garis Bidang Tinggi: 1.7em

Berbatasan:

  • Radius Batas Masukan: 15
  • Gunakan Perbatasan: Ya
  • Warna Perbatasan: #d7dce1
  • Lebar Perbatasan: 1px
  • Gaya Perbatasan: Padat

Tombol:

  • Ukuran Teks Tombol: 15
  • Ukuran Teks Tombol: 15
  • Warna Teks Tombol: #fffaf6
  • Warna Latar Tombol: #9b857b
  • Lebar Perbatasan Tombol: 9
  • Warna Batas Tombol: #9b857b
  • Radius Perbatasan Tombol: 4

Di tab Konten Modul Formulir Kontak, Anda sekarang dapat menambahkan tiga bidang; Nama, Email dan Pesan.

Ubah warna latar belakang setiap bidang secara manual menjadi #fae4de.

Last but not least, kami akan menambahkan Modul Teks ke kolom kedua untuk memberi tahu tamu Anda tentang prosesnya. Buka tab Desain dan buat perubahan berikut pada kategori Teks:

  • Orientasi Teks: Tengah
  • Font Teks: Raleway Light
  • Gaya Font Tet: Tebal
  • Ukuran Font Teks: 16
  • Warna Teks: #9b857b
  • Tinggi Garis Huruf: 1.5em

Gulir ke bawah tab yang sama dan tambahkan '300 px' ke Max Width dalam subkategori Sizing.

Terakhir, ketik '5px' di margin atas dalam subkategori Spasi.

Formulir Kontak (Tablet & Telepon)

Kloning baris yang dibuat sebelumnya dan buat Modul Formulir Kontak dan Modul Teks berpindah tempat (dan kolom). Buka tab Advanced dan sembunyikan baris untuk desktop.

Tata letak Anda seharusnya sekarang, dan akhirnya, terlihat seperti ini:

Selanjutnya

Di bagian keempat dari miniseri ini, kami akan menunjukkan cara membuat buku tamu online untuk pernikahan Anda dengan Divi dan auto testimoni. Jika Anda memiliki komentar tentang tutorial ini, atau jika Anda memiliki permintaan untuk tutorial selanjutnya; pastikan Anda meninggalkan komentar di bagian komentar dari posting blog ini sehingga kami dapat membalas Anda!

Pastikan untuk berlangganan buletin email dan saluran YouTube kami sehingga Anda tidak akan pernah melewatkan pengumuman besar, tip bermanfaat, atau Divi freebie!