5 Desain Keikutsertaan Email yang Dapat Anda Buat dengan Modul Keikutsertaan Email Divi

Kami semua menyukai pelanggan baru ke daftar email kami. Dan salah satu cara utama untuk mendapatkan pelanggan baru adalah dengan menyediakan formulir keikutsertaan email yang dirancang dengan baik kepada pengunjung Anda. Itu sebabnya dalam tutorial ini, saya akan menunjukkan kepada Anda bagaimana mencapai lima desain berbeda dengan modul opt-in email Divi untuk membantu memicu imajinasi Anda tentang apa yang mungkin dilakukan dengan modul yang kuat dan fleksibel ini.

Sneak Peek

Berikut adalah pratinjau dari lima desain Modul Keikutsertaan Email Divi yang akan kami tangani hari ini.

Keikutsertaan Shadow Stacks #1

Mulai Merancang #1

#2 Keikutsertaan Besar dan Minimal

Mulai Merancang #2

#3 Keikutsertaan Kurus

Mulai Merancang #3

#4 Keikutsertaan Penawaran Buku

Mulai Merancang #4

#5 Keikutsertaan Bingkai Pemotong

Mulai Merancang #5

Apa yang Anda Butuhkan untuk Memulai

Berlangganan Saluran Youtube Kami

Untuk tutorial ini, yang Anda perlukan hanyalah Divi. Kami akan membangun masing-masing dari awal sehingga tidak perlu tata letak yang dibuat sebelumnya. Namun, saya akan menggunakan beberapa gambar dari beberapa paket tata letak kami, tetapi Anda dapat menggunakan gambar Anda sendiri jika Anda mau.

Juga, penting untuk diketahui bahwa Anda tidak akan dapat melihat bidang formulir keikutsertaan di situs langsung sampai Anda menetapkan penyedia/daftar email ke modul keikutsertaan email Anda. Anda dapat melakukan ini di pengaturan optin email Anda di bawah Akun Email.

Sekarang mari kita ke desain itu!

Keikutsertaan Shadow Stacks #1

Desain ini menambahkan dua bayangan kotak ke modul keikutsertaan email Divi untuk efek susun unik yang membuat formulir menonjol. Bayangan kotak pertama ditambahkan ke modul keikutsertaan email dan bayangan kotak kedua ditambahkan ke baris yang memiliki ukuran dan batas khusus untuk membuatnya berfungsi.

Berikut adalah cara melakukannya.

Pertama buat bagian baru dengan baris satu kolom dan tambahkan modul keikutsertaan email ke baris.

Buka pengaturan keikutsertaan email dan perbarui yang berikut ini:

Warna Latar Belakang: #1a0a38
Tata Letak: Tubuh Di Atas, Bentuk Di bawah
Bidang Sudut Bulat: 0px
Orientasi Teks: Tengah
Judul Font Berat: Ringan
Ukuran Teks Judul: 36px
Warna Teks Tombol: #ffffff
Warna Latar Tombol: #00ac69
Lebar Batas Tombol: 0px
Radius Perbatasan Tombol: 0px
Padding Kustom: 3vw atas, 3vw bawah, 5vw kiri, 5vw kanan

Sekarang mari tambahkan layer bayangan kotak pertama kita di belakang modul opt-in email kita.

Bayangan Kotak: lihat tangkapan layar
Posisi Horizontal Bayangan Kotak: 25px
Posisi Vertikal Bayangan Kotak: -25px
Warna Bayangan: rgba (26,10,56,0.82)

Sekarang mari tambahkan potongan kecil CSS khusus untuk menghilangkan padding kiri yang ditambahkan ke formulir secara default. Buka tab lanjutan dan tambahkan CSS berikut di bawah Formulir Keikutsertaan.

padding-left: 0px !important;

Itu menangani pengaturan modul keikutsertaan email. Sekarang mari kita edit baris kita. Buka pengaturan baris dan perbarui yang berikut:

Lebar Kustom: 600px
Padding Kustom: 25px atas, 0px bawah, 25px kanan
Lebar Batas Bawah: 25px
Warna Batas Bawah: rgba(0,0,0,0)
Lebar Batas Kiri: 25px
Warna Batas Kiri: rgba(0,0,0,0)

Sekarang kita dapat menambahkan bayangan kotak ke baris.

Bayangan Kotak: lihat tangkapan layar
Posisi Horizontal Bayangan Kotak: 50px
Posisi Vertikal Bayangan Kotak: -50px
Kekuatan Penyebaran Bayangan Kotak: -25px
Warna Bayangan: rgba (26,10,56,0.55)

Sekarang mari kita periksa desain akhir.

#2 Keikutsertaan Besar dan Minimal

Desain keikutsertaan email ini minimal, bersih, dan besar. Skala bidang formulir dengan ukuran browser sehingga tampak hebat di semua perangkat. Dan itu tidak terlalu besar sehingga memaksa pengguna untuk menggulir.

Berikut cara melakukannya.

Pertama buat bagian baru dengan baris satu kolom dan tambahkan modul keikutsertaan email ke baris.

Buka pengaturan keikutsertaan email dan perbarui konten untuk menyertakan teks Judul dan Footer Anda.

Kemudian perbarui latar belakang dengan warna atau gambar gelap:

Warna latar belakang: #121212
Gambar Latar Belakang: Ini opsional. Saya menggunakan satu dari Paket Tata Letak Podcast

Sebelum kita melanjutkan ke tab desain untuk penyesuaian lebih lanjut, kita perlu memberi ruang untuk elemen formulir besar yang akan kita tambahkan. Untuk melakukannya, buka pengaturan baris dan perbarui yang berikut:

Lebar Kustom: 100%

Tip: Menggunakan lebar kustom 100% adalah cara yang bagus untuk memastikan desain Anda tidak mendapatkan margin kanan atau kiri di seluler. Jika Anda menggunakan opsi "Buat Lebar Penuh", lebar maksimum Anda akan menjadi 89% sehingga Anda masih memiliki margin di seluler.

Sekarang kembali ke Pengaturan Modul Keikutsertaan Email dan perbarui desain berikut:

Tata Letak: Tubuh Di Atas, Bentuk Di bawah

Warna Latar Belakang Bidang Formulir: rgba(0,0,0,0)
Bidang Sudut Bulat: 0px
Lebar Batas Bawah Bidang: 2px
Warna Batas Bawah Bidang: #ffffff

Orientasi Teks: Tengah

Judul Font: Lato
Judul Font Berat: Ringan
Judul Font Gaya: TT
Judul Teks Ukuran: 4vw
Tinggi Baris Judul: 1em

Warna Teks Bidang: #ffffff
Font Bidang: Lato
Berat Font Bidang: Ringan
Ukuran Teks Bidang: 3.5vw
Spasi Surat Bidang: 0.1em
Tinggi Garis Bidang: 1.3em

Jarak Huruf Tubuh: 0.5em

Ukuran Teks Tombol: 4vw
Radius Perbatasan Tombol: 0px
Jarak Huruf Tombol: 0.1em
Font Tombol: Lato
Berat Huruf: Ringan
Padding Kustom: 10vw atas, 10vw bawah, 10vw kiri, 10vw kanan

Perhatikan penggunaan satuan panjang vw untuk ukuran font yang dikombinasikan dengan satuan panjang em untuk tinggi baris dan spasi huruf. Ini memungkinkan teks dan desain untuk diskalakan dengan mulus saat menyesuaikan browser Anda.

Langkah terakhir adalah menyertakan beberapa cuplikan CSS khusus untuk memoles desain. Buka tab lanjutan dan tambahkan CSS Kustom berikut di bawah Bidang Formulir Keikutsertaan:

font-size: 3.5vw;

Ini akan memungkinkan ukuran teks saat mengetik untuk mencocokkan teks placeholder di bidang formulir Anda.

Kemudian mari tambahkan beberapa margin khusus di atas tombol untuk memberikan sedikit ruang untuk bernafas. Tambahkan yang berikut di bawah Tombol Berlangganan:

margin-top: 3.5vw;

Sekarang mari kita periksa desain akhir.

#3 Keikutsertaan Kurus

Desain berikutnya ini pasti akan menjadi solusi populer bagi perusahaan dan blog yang ingin menghemat ruang vertikal pada postingan atau halaman arahan mereka. Meskipun modul Keikutsertaan Email Divi adalah yang terbaik untuk bentuk vertikal yang lebih tradisional, Anda sebenarnya dapat mengonversi formulir menjadi bentuk horizontal tipis hanya dengan potongan kecil CSS.

Berikut cara melakukannya.

Buat bagian baru dengan baris satu kolom dan tambahkan modul keikutsertaan email ke baris.

Buka pengaturan keikutsertaan email dan perbarui konten untuk menyertakan Judul tetapi tidak ada yang lain.

Kemudian perbarui desain dengan latar belakang dan warna tombol sebagai berikut:

Warna Latar Belakang: #54677d
Tata Letak: Tubuh Di Atas, Bentuk Di Bawah
Orientasi Teks: Tengah
Warna Latar Tombol: #b0c94f
Lebar Batas Tombol: 0px

Sekarang saatnya untuk CSS khusus. Karena kami ingin desain formulir kurus hanya di desktop (dan bukan di seluler), kami akan menambahkan CSS ke halaman (di bawah pengaturan halaman) menggunakan ID CSS Kustom untuk menargetkan gaya formulir.

Untuk melakukan ini, buka tab lanjutan dan berikan modul keikutsertaan ID CSS khusus.

ID CSS: kurus

Ini akan digunakan untuk menargetkan formulir ini dengan CSS eksternal yang akan kita tambahkan ke halaman.

Sekarang buka pengaturan halaman Divi Builder dan tambahkan CSS berikut di bawah tab Advanced.

@media (min-width: 980px){
#skinny.et_pb_newsletter .et_pb_newsletter_fields {
  flex-wrap: nowrap !important;
}
#skinny.et_pb_newsletter .et_pb_newsletter_fields>* {
  flex-basis: 23%;
}
}

#skinny .et_pb_newsletter_form {
  padding-left: 0px;
} 

Karena Divi sudah menggunakan flex untuk menata formulir di backend, CSS ini mengeluarkan properti flex-wrap yang menyebabkan bidang formulir sejajar secara vertikal. Hasilnya adalah tata letak horizontal bidang formulir. Menyesuaikan properti flex-basis menjadi 23% pada dasarnya menetapkan lebar masing-masing bidang formulir. Dan karena kami menambahkan CSS di dalam kueri media, desain hanya akan terjadi di desktop dengan tata letak default formulir yang ditampilkan di seluler.

Berikut adalah desain akhir.

#4 Keikutsertaan Penawaran Buku

Desain ini menggabungkan beberapa gambar dalam modul keikutsertaan email untuk tujuan mempromosikan penawaran buku gratis untuk mendaftar. Untuk melakukan ini, yang perlu Anda lakukan hanyalah menambahkan gambar menggunakan editor wysiwyg bawaan untuk menambahkan deskripsi dan konten footer. Memang benar bahwa Anda dapat mencapai desain yang sama ini dengan menggabungkan modul keikutsertaan email dengan modul lain dalam dua baris kolom, tetapi saya pikir akan sangat membantu untuk menunjukkan bagaimana melakukan semuanya dalam modul yang sama.

Berikut cara melakukannya.

Buat bagian baru dengan baris satu kolom dan tambahkan modul keikutsertaan email ke baris.

Buka pengaturan keikutsertaan email dan tetap di tab konten.

Di bawah deskripsi, persingkat teks default menjadi hanya beberapa kalimat. Kemudian tambahkan gambar dari perpustakaan media Anda dengan mengklik tombol Tambahkan Media.

Anda ingin memastikan lebar gambar tidak lebih dari sekitar 200 piksel. Untuk contoh ini, saya menggunakan gambar berukuran sedang.

Di bawah Footer, tambahkan beberapa kalimat untuk konten teks footer lalu klik tombol Add Media untuk menambahkan gambar logo di bawah teks (tentu saja ini opsional).

Untuk memastikan gambar berada di tengah, atur opsi perataan ke tengah saat menambahkan gambar dari perpustakaan media.

Sekarang Anda siap untuk memperbarui sisa desain. Mulailah dengan memberi modul gambar latar belakang dan gradien latar belakang di atas gambar untuk membuat teks lebih mudah dibaca.

Gambar latar belakang: [tambahkan gambar]
Warna Kiri Gradien Latar Belakang: rgba(0,0,0,0.5)
Warna Kanan Gradien Latar Belakang: rgba(0,0,0,0.5)
Tempatkan Gradien Di Atas Gambar Latar Belakang: YA

Kemudian perbarui sisa desain sebagai berikut:

Warna Teks Tombol: #333333
Warna Latar Tombol: #ffcb7a
Lebar Batas Tombol: 0px
Jarak Huruf Tombol: 5px
Berat Huruf: Sangat Tebal
Gaya Huruf: TT
Lebar: 700 piksel
Penyelarasan Modul: tengah
Padding Kustom: 3vw atas, 3vw bawah, 3vw kiri, 3vw kanan

Berikut adalah desain akhir.

#5 Keikutsertaan Bingkai Pemotong

Teknik desain sederhana ini adalah cara yang bagus untuk memberikan tampilan unik keikutsertaan email Anda. Caranya adalah dengan menggunakan pembagi bagian yang memiliki warna yang sama dengan latar belakang bagian. Kemudian dengan menyesuaikan ketinggian pembagi, Anda dapat tumpang tindih dengan formulir keikutsertaan email untuk memotong tepinya dengan cara yang unik untuk efek pembingkaian yang bagus.

Berikut adalah cara melakukannya.

Buat bagian baru dengan baris satu kolom dan tambahkan modul keikutsertaan email ke baris.

Buka pengaturan keikutsertaan email dan berikan modul Anda gradien latar belakang.

Warna Kiri Gradien Latar Belakang: #8300e9
Warna Kanan Gradien Latar Belakang: #06c8ff
Tipe Gradien: Radial
Arah Radial: Kiri Atas

Kemudian perbarui sisa desain sebagai berikut:

Judul Font Berat: Tebal
Ukuran Teks Judul: 36px
Lebar: 70% (desktop), 100% (tablet dan smartphone)
Penyelarasan Modul: tengah
Padding Kustom: Atas 6vw, Bawah 6vw, Kiri 6vw, Kanan 6vw
Sudut Bulat: 50px kiri atas, 0px kanan atas, 50px kanan bawah, 0px kiri bawah

Simpan pengaturan Anda.

Kemudian perbarui pengaturan baris Anda dengan lebar khusus.

Lebar Kustom: 100%

Sekarang kami siap untuk menyesuaikan pengaturan bagian untuk menambahkan efek bingkai cut-out kami dengan pembagi bagian tersebut.

Buka pengaturan bagian dan perbarui yang berikut ini:

Warna Latar Belakang: #222222

Gaya Pembagi Atas: lihat tangkapan layar
Warna Pembagi Atas: #222222 (pastikan ini cocok dengan warna latar belakang bagian)
Tinggi Pembagi Atas: 12vw (desktop), 150px (tablet dan smartphone)
Pengaturan Pembagi Atas: Di Atas Konten Bagian

Gaya Pembagi Bawah: lihat tangkapan layar
Warna Pembagi Bawah: #222222 (pastikan ini cocok dengan warna latar belakang bagian)
Tinggi Pembagi Bawah: 12vw (desktop), 150px (tablet dan smartphone)
Pengulangan Horizontal Pembagi Bawah: 0.8x
Balik Pembagi Bawah: vertikal dan horizontal
Pengaturan Pembagi Bawah: Di Atas Konten Bagian

Sekarang mari kita periksa desain akhir.

Lihat posting tentang membuat desain bingkai unik untuk mengetahui lebih lanjut tentang teknik desain ini.

Pikiran Akhir

Desain keikutsertaan email ini benar-benar hanya puncak gunung es ketika Anda memikirkan semua opsi gaya yang tersedia di Divi. Saya sengaja membuat desainnya cukup sederhana untuk memberi Anda gambaran luas tentang apa yang dapat Anda lakukan. Jangan ragu untuk menjelajahi sendiri desain yang lebih halus dengan menambahkan font, warna, dan efek hover baru. Dan jangan lupa untuk bersenang-senang dalam prosesnya.

Saya berharap untuk mendengar dari Anda di komentar.

Bersulang!