Cara Membuat Halaman Arahan Giving Tuesday dengan Divi dan GiveWP

Jika Anda belum pernah mendengarnya, kami sedang bersiap untuk memulai kampanye Black Friday dan Cyber ​​Monday besar-besaran di sini di Elegant Themes. Tapi ada hal keren lain yang terjadi sepanjang tahun ini. Ini disebut Giving Tuesday (tahun ini jatuh pada tanggal 28 November) dan merupakan upaya oleh organisasi nirlaba di dunia untuk mengingatkan semua orang bahwa sementara mereka mengeluarkan dompet untuk belanja pribadi, mereka mungkin ingin mempertimbangkan untuk menyumbang kepada orang-orang di perlu juga. Ide yang keren! Dan karena kami berkecimpung dalam bisnis pemberdayaan komunitas kami, kami pikir itu akan menjadi ide yang baik untuk membantu mereka yang menggunakan Divi (atau Ekstra) dan bekerja untuk nirlaba untuk membuat halaman arahan sumbangan Give Tuesday terbaik mereka mampu.

Berikut ini sekilas tentang apa yang akan kita buat hari ini.

Pratinjau Hasil Akhir

Dalam posting hari ini kita akan membuat halaman arahan Giving Tuesday yang indah lengkap dengan formulir donasi yang menakjubkan secara visual (dan tentu saja fungsional).

Instal Plugin GiveWP & Buat Formulir Baru

Formulir donasi yang akan kita gunakan dalam tutorial ini dibuat oleh plugin GiveWP. Untuk menginstalnya, navigasikan di Admin WordPress Anda ke Plugins > Add New . Di sana, gunakan fitur pencarian untuk menemukan plugin Give. Klik tombol "Instal Sekarang" dan kemudian aktifkan.

Selanjutnya, buka Donasi > Tambahkan Formulir . Masukkan judul formulir. Saya memilih “Dukung Petani Lokal Anda & Pertanian Berkelanjutan”.

Selanjutnya, Anda akan melihat Opsi Formulir Donasi. Mari kita jalankan tab demi tab.

Di tab pertama, yang disebut Opsi Donasi, konfigurasikan pengaturan berikut di bagian atas.

Opsi donasi: Donasi Multi-level

Tampilan Donasi: Tombol

Jumlah Kustom: Diaktifkan

Di bagian Level Donasi, atur level donasi berikut: $1, $5, $10, $25, $50, $100. Pastikan untuk menetapkan tingkat donasi $5,00 sebagai default baru Anda.

Sekarang pindah ke tab Tampilan Formulir. Satu-satunya hal yang perlu Anda lakukan di sini adalah mengubah pengaturan Opsi Tampilan ke Modal.

Di tab Sasaran Donasi, aktifkan opsi Sasaran Donasi terlebih dahulu. Setelah Anda selesai melakukannya, tetapkan jumlah tujuan Anda. Saya telah menetapkan milik saya menjadi $1.000. Saya juga telah mengatur Format Sasaran ke persentase. Ini akan membuat pemirsa mengetahui persentase tujuan kami yang telah kami capai, bukan jumlah uang sebenarnya yang telah kami kumpulkan. Dan akhirnya, saya telah mengubah sedikit warna bilah kemajuan agar sesuai dengan warna hijau yang sama yang digunakan di seluruh situs web saya (#07c907).

Terakhir, kita perlu menambahkan beberapa konten formulir. Di tab Konten Formulir, aktifkan Konten Tampilan. Kemudian, tambahkan beberapa teks ke area konten.

Untuk keperluan tutorial ini, itu semua adalah pengaturan Give form yang perlu kita konfigurasi. Klik tombol Terbitkan dan perhatikan fakta bahwa Anda akan memerlukan kode pendek formulir donasi ini nanti.

Saat mengatur formulir ini secara nyata, Anda juga harus membuka Donasi > Pengaturan dan mengonfigurasi hal-hal seperti Gerbang Pembayaran, Email, dll.

Siapkan Aset Gambar Anda

Kami juga akan membutuhkan gambar latar belakang khusus untuk bagian formulir kami. Ini tentu saja opsional, tidak mempengaruhi cara kerja formulir. Tapi itu terlihat keren dan menambahkan desain yang bagus untuk contoh pasar petani kami.

Untuk membuat gambar ini saya menggunakan Photoshop tetapi Anda mungkin juga dapat menggunakan perangkat lunak gratis bernama Gimp. Ini adalah alat open source yang memiliki banyak fitur yang sama.

Berikut cara membuatnya.

Pertama, temukan diri Anda gambar dengan elemen yang terkait dengan nirlaba Anda. Karena contoh yang saya gunakan adalah untuk pasar petani, saya memutuskan untuk menggunakan sayuran. Saya mencari di situs web stok gambar untuk "sayuran terisolasi". Biasanya, istilah "terisolasi" di situs web stok gambar mengacu pada item dengan latar belakang putih. Ini membuat mereka mudah diisolasi dengan menghapus latar belakang. Yang persis apa yang saya lakukan.

Berikut adalah gambar yang saya temukan.

Saya kemudian membuka gambar itu di photoshop.

Karena lapisan awal dikunci secara default, duplikat dengan mengklik kanan padanya dan memilih "Lapisan Duplikat". Kemudian, sembunyikan layer pertama dengan mengklik ikon mata di sebelahnya.

Selanjutnya, gunakan alat tongkat ajaib untuk memilih semua ruang putih di sekitar dan di dalam elemen sayuran. Tekan tombol backspace untuk menghapusnya.

Selanjutnya, navigasikan di menu atas Anda ke Image > Canvas Size dan ubah ukuran kanvas Anda menjadi 1920x1080. Saat Anda melakukan ini, elemen Anda kemungkinan akan sangat besar dibandingkan dengan kanvas baru Anda yang lebih kecil.

Pada keyboard Anda tekan command+T atau pergi ke Edit > Transform > Scale . Ubah ukuran lapisan elemen terisolasi Anda agar sesuai dengan ukuran kanvas baru.

Ini sejauh yang akan kita lakukan pada gambar ini untuk saat ini. Cukup pastikan Anda telah menyimpan file photoshop baru ini. Kami akan melanjutkan di bawah setelah kami memiliki formulir donasi baru sebagai referensi ukuran.

Membuat Desain di Divi

Jika Anda belum melakukannya, Anda dapat mengunduh dan menginstal Paket Tata Letak Pasar Petani (gratis) kami yang baru. Ikuti instruksi di pos itu untuk menginstal paket tata letak. Setelah terinstal, ikuti petunjuk dalam posting blog ini untuk menyiapkan situs Anda untuk tahap penyesuaian berikutnya, yang akan kami bahas di sini.

Saat Anda siap, navigasikan ke halaman Donasi Anda dan gunakan botton di bagian atas halaman untuk mengaktifkan pembuat visual. Saya akan membawa Anda bagian demi bagian ke bawah halaman, membuat penyesuaian seiring berjalannya waktu.

Karena kami sedang menyiapkan halaman ini untuk kampanye Giving Tuesday, kami mungkin harus menyebutkannya tepat di atas. Jadi arahkan kursor ke bagian pahlawan Anda dan buka pengaturan modul dengan mengklik ikon roda gigi di kontrol modul abu-abu.

Kemudian, saat masih di tab Konten, gulir ke bawah dan buka pengaturan tautan. Di kolom judul Tombol #1 URL tempatkan teks "#donasi". Ini akan berfungsi sebagai tautan jangkar ke formulir yang akan kita buat di bawah.

Terakhir, navigasikan ke tab Design dan buka pengaturan SubHead Text. Atur Subhead Font Weight menjadi bold.

Bagian pertama sekarang selesai. Gulir ke bawah ke bagian ketiga (yang menampilkan kutipan besar) dan klik ikon roda gigi di kontrol bagian biru. Atur warna latar belakang ke #F6F6F6.

Selanjutnya, buka pengaturan modul untuk modul teks kutipan. Ubah latar belakangnya menjadi #F6F6F6 juga.

Bagian ini sekarang lengkap juga. Pindah ke bagian keempat tepat di bawahnya. Ini adalah bagian formulir donasi kami.

Karena bagian ini ada di paket tata letak, ini lebih merupakan bagian "janji" di mana orang dapat menggunakan formulir kontak untuk mengirimi Anda janji berapa banyak yang ingin mereka berikan. Tapi kami akan mengubahnya menjadi bentuk donasi yang sebenarnya di mana kami dapat menerima uang secara langsung.

Mari kita mulai dengan pengaturan bagian dan bekerja. Pertama, kita perlu mengubah warna latar belakang. Setel ke #F6F6F6 yang sama seperti bagian di atas.

Kemudian, di bagian tab Desain, buka opsi Spasi. Tambahkan padding khusus berikut:

Atas: 250px

Kanan: 40px

Bawah: 250px

Kiri: 40px

Terakhir, saat masih dalam pengaturan bagian, navigasikan ke tab Advanced dan buka kontrol ID & Kelas CSS. Di bawah CSS ID tulis kata "donasi".

Simpan pengaturan baru Anda.

Kita sekarang perlu menyingkirkan formulir janji kita. Ini terdiri dari dua modul teks dan modul formulir kontak. Silakan dan hapus. Sebagai gantinya, tambahkan modul teks.

Di dalam modul pengujian baru, tempatkan kode pendek untuk formulir Donasi yang kita buat sebelumnya. Atur latar belakang menjadi putih solid (#ffffff).

Sekarang, navigasikan ke tab Desain. Sedikit rahasia yang diketahui adalah bahwa elemen yang dihasilkan oleh kode pendek pihak ketiga dapat disesuaikan sampai batas tertentu menggunakan pengaturan desain modul teks.

Di bawah opsi teks, konfigurasikan pengaturan berikut:

Ukuran Teks Teks: 18px

Tinggi Baris Teks: 1.8em

Di bawah opsi teks Judul untuk H2, konfigurasikan pengaturan berikut:

Judul 2 Ukuran Teks: 36px

Pos 2 Tinggi Baris: 1.5em

Di bawah opsi Spasi, konfigurasikan pengaturan berikut:

Padding Kustom: 50xp (untuk semua bidang)

Di bawah opsi Box Shadow, pilih opsi terakhir di baris atas (di paling kanan). Kemudian konfigurasikan opsi ini:

Kekuatan Penyebaran Bayangan Kotak: -2px

Terakhir, di bawah opsi Animasi, konfigurasikan pengaturan ini:

Gaya Animasi: Bounce

Arah Animasi: Atas

Durasi Animasi: 800ms

Penundaan Animasi: 400ms

Animasi Mulai Opacity: 100%

Setelah Anda mengonfigurasi semua pengaturan desain ini, simpan. Formulir donasi Anda sekarang akan terlihat seperti ini.

Tentu saja ini adalah bentuk yang sangat dapat diterima. Tapi menurut saya itu agak membosankan. Ada dua hal yang ingin saya lakukan untuk membumbuinya. Pertama, kita akan mencocokkan gaya tombol Donasi Sekarang untuk mencocokkan tombol Donasi lainnya di seluruh situs web.

Arahkan ke opsi tema Anda dengan masuk ke Divi > Divi Library > General Gulir ke bawah ke kotak Custom CSS dan tempel gaya tombol ikuti di sana:

/*Give Plugin Styles*/

.give-btn.give-btn-modal {
    background: #07C907;
    border: none;
    border-radius: 0px;
    color: #fff;
    padding: 20px;
    cursor: pointer;
    line-height: 1.2em;
    font-size: 18px;
    font-weight: bold;
}

#give-purchase-button.give-submit.give-btn {
    background: #07C907;
    border: none;
    border-radius: 0px;
    color: #fff;
    padding: 20px;
    cursor: pointer;
    line-height: 1.2em;
    font-size: 18px;
    font-weight: bold;
}

Simpan perubahan Anda dan kembali ke halaman donasi Anda. Segarkan dan lihat formulir Anda. Sekarang seharusnya terlihat seperti ini.

Sekarang kita menuju suatu tempat! Mari tambahkan sentuhan akhir. Gambar background bagian yang mulai kita buat tadi.

Untuk menyelesaikannya, ubah ukuran jendela browser Anda menjadi 1920×1120. Anda dapat menggunakan situs web seperti whatsmybrowsersize.com.

Kemudian, ambil tangkapan layar halaman donasi Anda dengan formulir baru kami di tengahnya. Seharusnya terlihat seperti ini.

Buka screenshot baru ini di Photoshop bersama dengan file photoshop yang kita buat sebelumnya.

Gunakan alat Rectangle Marquee untuk memilih formulir Anda. Lalu, buka Select > Inverse untuk memilih semuanya kecuali formulir Anda. Hapus pilihan baru Anda. Anda sekarang harus memiliki kanvas yang terlihat seperti ini.

Anda sekarang memiliki "bentuk mockup" berukuran benar yang dapat Anda gunakan sebagai referensi untuk gambar latar belakang Anda. Dengan kedua file photoshop terbuka, seret lapisan photoshop yang berisi formulir terisolasi Anda ke dalam file gambar latar belakang Anda.

Di panel layer Anda, sesuaikan opacity layer formulir Anda menjadi 50%. Kemudian, dengan formulir nanti masih dipilih, klik ikon kunci dan kunci. Sekarang seharusnya terlihat seperti ini.

Anda sekarang dapat memilih lapisan sayuran Anda di panel lapisan. Gunakan alat laso untuk memilih elemen individual dan menghapusnya atau mengaturnya kembali hingga Anda mendapatkan konfigurasi yang Anda suka. Konfigurasi terakhir saya terlihat seperti ini.

Setelah Anda memiliki konfigurasi akhir Anda sendiri, Anda akan pergi ke File > Export > Export As dan pilih PNG untuk mempertahankan latar belakang transparan.

Sekarang kita dapat menambahkan gambar itu ke bagian Formulir Donasi di halaman Donasi kami, kembali ke situs web Divi kami.

Buka pengaturan bagian. Di bawah Background biarkan warna yang kita atur sebelumnya saja dan pilih opsi gambar. Tambahkan gambar latar belakang baru Anda di sini. Kemudian konfigurasikan pengaturan berikut:

Ukuran Gambar Latar Belakang: Ukuran Sebenarnya

Posisi Gambar Latar Belakang: Tengah

Simpan pengaturan ini. Bagian formulir Anda sekarang harus lengkap.

Untuk menyelesaikan desain Anda sepenuhnya (agar sesuai dengan pratinjau halaman penuh kami dari awal posting) cukup ubah warna latar belakang bagian halaman yang tersisa agar sesuai dengan yang ada di tangkapan layar. Anda akan menggunakan abu-abu (#F6F6F6) atau putih (#ffffff).

Selamat Penggalangan Dana!

Dengan Divi dan plugin sekuat Give, kami yakin upaya Giving Tuesday Anda pasti akan sukses besar. Terima kasih telah mengikuti. Jika Anda masih membutuhkan bantuan dengan apa pun yang tercakup dalam tutorial ini, saya akan melakukan streaming langsung hari ini pukul 3 sore di halaman Facebook dan Saluran YouTube kami di mana saya akan menunjukkan seluruh proses ini dalam sekali pengambilan. Saya juga akan mengajukan pertanyaan sambil berjalan. Berharap untuk melihat Anda di sana!