Cara Mendesain Bagian Berlangganan yang Menarik untuk Semua Jenis Situs Web Dengan Divi

Salah satu alasan utama orang membuat situs web adalah untuk menemukan cara baru untuk mendekati audiens target mereka. Setelah Anda mengambil langkah pertama dan mulai membangun situs web, Anda mulai bertanya-tanya bagaimana tepatnya Anda dapat berhubungan dengan klien potensial Anda. Salah satu hal yang telah terbukti membantu banyak pemilik situs web adalah pembuatan daftar. Ini semua tentang mengumpulkan alamat email dari pengunjung, mengubahnya menjadi prospek (dan akhirnya pelanggan) dengan pemasaran email.

Dan dengan pembuatan daftar hadir membuat bagian berlangganan yang menarik di situs web Anda. Anda ingin bagian berlangganan Anda menarik perhatian dan yang lebih penting, Anda ingin bagian berlangganan Anda berkonversi. Untuk tutorial ini, kami telah membuat bagian berlangganan yang menakjubkan yang pasti akan menarik perhatian pengunjung Anda. Kami menggabungkan desain yang apik dengan argumen tentang mengapa mendaftar ke daftar email. Selain itu, kami juga akan membagikan tiga palet warna yang dapat Anda pilih saat membuat desain.

Mari kita lakukan!

Berlangganan Saluran Youtube Kami

Pratinjau

Sebelum kita masuk ke tutorial, mari kita lihat hasilnya pada ukuran layar yang berbeda.

Palet Warna #1

• Warna #1: rgba(79,35,255,0.88)
• Warna #2: #e09900
• Warna #3: #4f23ff

Palet Warna #2

• Warna #1: rgba(255,35,97,0.75)
• Warna #2: #e09900
• Warna #3: #d80e00

Palet Warna #3

• Warna #1: rgba(41,17,147.0.75)
• Warna #2: #00ffd8
• Warna #3: #291193

Mendekati

Pilih salah satu palet warna di atas (atau buat sendiri) dan gunakan warna ini di sepanjang tutorial. Kami akan merujuk ke warna #1, #2 atau #3 saat kami menggunakan warna dalam pengaturan kami. Kami juga membuat Modul Berlangganan tumpang tindih dua kolom dan kami menekankan manfaat mendaftar untuk daftar email.

Buat Ulang Bagian Berlangganan

Tambahkan Bagian Baru

Pembagi Atas

Buka halaman tempat Anda ingin menambahkan bagian langganan dan tambahkan bagian standar baru. Buka pengaturan bagian Anda segera dan tambahkan pembagi atas berikut:

• Gaya Pembagi: Temukan di Daftar
• Warna Pembagi: #FFFFFF
• Tinggi Pembagi: 200px
• Flip Pembagi: Vertikal

Pembagi Bawah

Tambahkan jenis pembagi yang sama ke bagian bawah bagian Anda:

• Gaya Pembagi: Temukan di Daftar
• Warna Pembagi: #FFFFFF
• Tinggi Pembagi: 200px
• Flip Pembagi: Vertikal

Jarak

Buka pengaturan Spasi berikutnya dan hapus semua padding default bagian Anda dengan menambahkan '0px' ke padding atas dan bawah.

Tambahkan Baris Baru

Struktur Kolom

Sekarang setelah kita selesai dengan semua pengaturan bagian, kita dapat menambahkan baris baru. Pilih struktur kolom berikut untuk itu

Latar Belakang Gradien

Buka pengaturan baris Anda dan lanjutkan dengan menambahkan latar belakang gradien berikut:

• Warna Gradien Pertama: Warna #1
• Warna Gradien Kedua: Warna #2
• Arah Gradien: 123 derajat
• Tempatkan Gradien Di Atas Gambar Latar Belakang: Ya

Gambar latar belakang

Lanjutkan dengan menambahkan gambar latar belakang pilihan. Gambar latar belakang ini hanya akan terlihat sedikit. Pilih 'Sampul' sebagai Ukuran Gambar Latar Belakang juga.

Warna Latar Kolom 2

Selanjutnya, tambahkan 'rgba(255,255,255,0.87)' sebagai Warna Latar Kolom 2.

Perekat

Kami juga akan mengurangi ruang di antara kedua kolom dan membuat baris memenuhi seluruh lebar layar dengan menerapkan pengaturan Ukuran berikut:

• Jadikan Baris Ini Lebar Penuh: Ya
• Gunakan Lebar Talang Kustom: Ya
• Lebar Talang: 1
• Samakan Tinggi Kolom: Ya

Jarak

Hal terakhir yang perlu Anda lakukan dalam pengaturan baris adalah menambahkan beberapa bantalan khusus:

• Padding Atas & Bawah: 0px
• Kolom 1 Padding Atas: 200px
• Kolom 1 Padding Bawah: 100px
• Kolom 2 Padding Atas: 300px (Desktop) 50px (Tablet & Ponsel)
• Kolom 2 Padding Bawah: 100px (Tablet & Ponsel)
• Kolom 2 Padding Kiri & Kanan: 50px

Tambahkan Modul Blurb #1 ke Kolom 1

Tambahkan Judul Blurb

Sekarang mari kita mulai menambahkan modul kita! Kita akan mulai dengan kolom pertama dengan menambahkan Modul Blurb. Setelah kami selesai memodifikasi Modul Blurb itu, kami juga akan menggunakan kembali pengaturannya untuk dua lainnya. Setelah Anda menambahkan Modul Blurb, beri judul.

Tambahkan Ikon Blurb

Tambahkan ikon ke Modul Blurb Anda selanjutnya. Kami telah menggunakan ikon berikut untuk modul pertama:

Pengaturan Ikon

Ubah tampilan ikon dengan menambahkan pengaturan berikut:

• Warna Ikon: #FFFFFF
• Penempatan Ikon: Atas
• Gunakan Ukuran Font Ikon: Ya
• Ukuran Font Ikon: 43px

Pengaturan Teks Judul

Kami hanya menggunakan judul uraian. Itu sebabnya kita perlu mengubah pengaturan teks dari H4 saja:

• Judul Font: Yeseva One
• Perataan Teks Judul: Tengah
• Warna Teks Judul: #FFFFFF
• Spasi Huruf Judul: -1px

Perekat

Kami juga akan memodifikasi lebar Modul Blurb kami sesuai dengan ukuran layar yang berbeda:

• Lebar Konten: 150px
• Lebar: 33% (Desktop), 40% (Tablet), 60% (Ponsel)
• Penyelarasan Modul: Pusat

Jarak

Terakhir, tambahkan padding khusus berikut ke Modul Blurb Anda juga:

• Padding Atas & Bawah: 50px

Modul Blurb Klon Dua Kali & Ubah Modul Blurb Unggulan

Ubah Ikon & Konten

Anda sekarang dapat melanjutkan dan mengkloning Modul Blurb dua kali. Simpan semuanya di kolom pertama. Untuk setiap Modul Blurb baru, lanjutkan dan ubah ikon dan judul agar sesuai dengan pesan yang ingin Anda kirim.

Tambahkan Warna Latar Belakang

Kami akan menyorot Modul Blurb tengah. Untuk melakukannya, kita akan mulai dengan menambahkan warna latar belakang putih.

Ubah Ikon & Warna Teks Judul

Kami juga akan mengubah warna ikon dan judul H4 menjadi '#000000.'

Tambahkan Sudut Bulat

Selanjutnya, kita akan menambahkan '5px' ke setiap sudut di pengaturan Border.

Bayangan Kotak

Last but not least, kami akan menambahkan sedikit kedalaman dengan menggunakan opsi bayangan kotak pertama.

Tambahkan Modul Teks #1 ke Kolom 2

Pengaturan Teks

Mari kita beralih ke kolom kedua! Modul pertama yang kita perlukan adalah Modul Teks. Setelah Anda menambahkan konten Anda, terapkan pengaturan teks berikut ke dalamnya:

• Font Teks: Yeseva One
• Warna Teks: #000000
• Ukuran Teks: 54px
• Tinggi Baris Teks: 1em

Tambahkan Modul Teks #2 ke Kolom 2

Jarak

Tepat di bawah Modul Teks itu, kita akan menambahkan Modul Teks lain untuk deskripsinya. Setelah Anda menambahkan konten Anda, tambahkan '20px' ke margin atas.

Tambahkan Modul Optin Email ke Kolom 2

Warna latar belakang

Modul berikutnya yang perlu kita tambahkan adalah Modul Email Optin. Setelah Anda menambahkannya, lanjutkan dan ubah warna latar belakang menjadi 'rgba(255,255,255,0).'

Akun email

Tambahkan Akun Email Anda selanjutnya memilih penyedia layanan pilihan Anda.

bidang

Lanjutkan dengan membuka pengaturan Bidang dan nonaktifkan bidang Nama Depan dan Nama Belakang.

Pengaturan Lapangan

Kami juga akan mengubah pengaturan Bidang. Hapus sudut membulat dengan menambahkan '0px' ke masing-masing sudut. Tambahkan opsi bayangan kotak pertama juga.

Pengaturan Tombol

Selanjutnya, ubah tampilan tombol Anda:

• Warna Teks Tombol: #FFFFFF
• Warna Latar Tombol: Warna #3
• Lebar Batas Tombol: 0px
• Radius Perbatasan Tombol: 0px
• Font Tombol: Yeseva One
• Tampilkan Ikon Tombol: Ya
• Warna Ikon Tombol: #FFFFFF
• Penempatan Ikon Tombol: Kiri
• Hanya Tampilkan Ikon di Arahkan untuk Tombol: Tidak
• Box Shadow: Pilih opsi pertama

Jarak

Terakhir, buat Modul Berlangganan tumpang tindih kedua kolom menggunakan pengaturan Spasi berikut:

• Margin Atas: 20px (Desktop), 0px (Tablet & Ponsel)
• Margin Kiri: -60% (Desktop & Tablet), 0px (Telepon)
• Margin Kanan: 60% (Desktop), 50% (Tablet), 0px (Ponsel)

Tambahkan Modul Ikuti Media Sosial ke Kolom 2

Tambahkan Jejaring Sosial sebanyak yang Diinginkan

Terakhir, kami akan menambahkan Modul Ikuti Media Sosial. Silakan dan tambahkan jejaring sosial yang ingin Anda tampilkan.

Sudut Bulat

Setelah Anda menambahkan semua jejaring sosial, tambahkan '50px' ke setiap sudut di pengaturan Perbatasan.

Jarak

Kami juga akan menekan modul dengan menambahkan '50px' ke margin atas.

Ubah Warna Latar Belakang Setiap Jejaring Sosial Secara Individual

Last but not least, ubah warna latar belakang masing-masing jejaring sosial satu per satu menjadi '#000000.'

Pratinjau

Sekarang kita telah melalui semua langkah, mari kita lihat hasil akhir pada ukuran layar yang berbeda.

Pikiran Akhir

Bagian berlangganan adalah bagian penting dari situs web Anda. Mereka membantu Anda membuat daftar email, mengaktifkan pemasaran email, dan mengubah prospek menjadi pengunjung hanya dalam hitungan waktu. Dalam posting ini, kami telah menunjukkan kepada Anda cara membuat bagian berlangganan yang menakjubkan yang akan cocok dengan semua jenis situs web di luar sana. Kami telah menggabungkan menggunakan desain cantik dengan menempatkan keuntungan pendaftaran di luar sana. Jika Anda memiliki pertanyaan atau saran, pastikan Anda meninggalkan komentar di bagian komentar di bawah!