Cara Mudah Memasukkan Formulir Kontak Kolom Slide-In di Bagian Divi Hero Anda

Saat memikirkan cara untuk memasukkan CTA dalam desain halaman Anda, Anda dapat mempertimbangkan untuk memasukkan formulir kontak di bagian pahlawan Anda. Pendekatan ini memungkinkan orang untuk segera menghubungi Anda tanpa harus menavigasi lebih jauh di situs web Anda. Jika Anda mencari cara yang mulus untuk membuat ini berfungsi di dalam Divi, Anda akan menyukai posting ini. Dalam tutorial ini, kami akan menunjukkan cara menambahkan formulir kontak kolom slide-in ke bagian pahlawan Anda menggunakan opsi bawaan Divi saja. Anda juga dapat mengunduh file JSON secara gratis!

Mari kita lakukan.

Pratinjau

Sebelum kita masuk ke tutorial, mari kita lihat sekilas hasilnya di berbagai ukuran layar.

Desktop

Seluler

Unduh Tata Letak Bagian Pahlawan Formulir Kontak Kolom GRATIS

Untuk mendapatkan tata letak bagian pahlawan formulir kontak kolom gratis, Anda harus mengunduhnya terlebih dahulu menggunakan tombol di bawah ini. Untuk mendapatkan akses ke unduhan, Anda harus berlangganan daftar email Divi Daily kami dengan menggunakan formulir di bawah ini. Sebagai pelanggan baru, Anda akan menerima lebih banyak kebaikan Divi dan paket Tata Letak Divi gratis setiap hari Senin! Jika Anda sudah ada dalam daftar, cukup masukkan alamat email Anda di bawah ini dan klik unduh. Anda tidak akan "berlangganan ulang" atau menerima email tambahan.

Unduh File

Unduh Gratis

Bergabunglah dengan Divi Newsletter dan kami akan mengirimkan email kepada Anda salinan Paket Tata Letak Halaman Arahan Divi terbaik, ditambah banyak sumber daya, tip, dan trik Divi yang luar biasa dan gratis. Ikuti dan Anda akan menjadi master Divi dalam waktu singkat. Jika Anda sudah berlangganan cukup ketik alamat email Anda di bawah ini dan klik unduh untuk mengakses paket tata letak.

UNDUH

Anda telah berhasil berlangganan. Silakan periksa alamat email Anda untuk mengonfirmasi langganan Anda dan dapatkan akses ke paket tata letak Divi mingguan gratis!

Mari Mulai Berkreasi

Tambahkan Bagian Baru

Warna latar belakang

Mulailah dengan menambahkan bagian baru ke halaman yang sedang Anda kerjakan. Buka pengaturan bagian dan ubah warna latar belakang.

• Warna Latar Belakang: #ff8949

Gambar latar belakang

Kami mengunggah pola latar belakang yang merupakan bagian dari Paket Tata Letak Penasihat Keuangan berikutnya. Anda dapat menemukan gambar latar belakang ini di folder yang dapat Anda unduh di awal posting ini.

• Ukuran Gambar Latar Belakang: Sesuai
• Posisi Gambar Latar Belakang: Tengah

Jarak

Pindah ke tab desain bagian dan hapus semua padding atas dan bawah default.

• Padding Atas: 0px
• Padding Bawah: 0px

Meluap

Selesaikan pengaturan bagian dengan menyembunyikan kelebihan di tab lanjutan. Ini akan memastikan animasi yang kita tambahkan nanti tidak akan melampaui penampung bagian.

• Luapan Horisontal: Tersembunyi
• Overflow Vertikal: Tersembunyi

Tambahkan Baris Baru

Struktur Kolom

Lanjutkan dengan menambahkan baris baru ke bagian menggunakan struktur kolom berikut:

Perekat

Tanpa menambahkan modul apa pun, buka pengaturan baris dan ubah pengaturan ukuran sebagai berikut:

• Samakan Tinggi Kolom: Ya
• Lebar: 80% (Desktop), 100% (Tablet & Ponsel)
• Lebar Maks: 1380px
• Penjajaran Baris: Kanan

Jarak

Hapus semua padding atas dan bawah default berikutnya.

• Padding Atas: 0px
• Padding Bawah: 0px

Pengaturan Kolom 1

Jarak

Kemudian, buka pengaturan kolom 1 dan ubah pengaturan spasi di berbagai ukuran layar.

• Padding Atas: 22%
• Padding Bawah: 22%
• Padding Kiri: 10% (Hanya Tablet & Ponsel)
• Padding Kanan: 10% (Hanya Tablet & Ponsel)

Pengaturan Kolom 2

Warna latar belakang

Selanjutnya kita buka pengaturan kolom 2 dan gunakan warna background putih.

• Warna Latar Belakang: #ffffff

Animasi

Kami akan menyelesaikan pengaturan kolom 2 dengan menerapkan pengaturan animasi berikut:

• Arah Animasi: Kiri (Desktop), Atas (Tablet & Ponsel)
• Durasi Animasi: 1500ms
• Intensitas Animasi: 70%
• Animasi Mulai Opacity: 100%

Tambahkan Modul Teks #1 ke Kolom 1

Tambahkan Konten H1

Saatnya menambahkan modul, dimulai dengan Modul Teks pertama di kolom 1. Tambahkan beberapa konten H1 pilihan Anda.

Pengaturan Teks H1

Pindah ke tab desain modul dan ubah pengaturan teks H1 sebagai berikut:

• Font Judul: Oswald
• Gaya Font Judul: Huruf Besar
• Warna Teks Judul: #ffffff
• Ukuran Teks Judul: 120px (Desktop), 70px (Tablet), 60px (Telepon)

Perekat

Kami juga mengubah pengaturan ukuran modul.

• Lebar: 75% (Desktop), 100% (Tablet & Ponsel)
• Penyelarasan Modul: Kiri

Tambahkan Modul Teks #2 ke Kolom 1

Tambahkan Konten Deskripsi

Ke modul berikutnya, yang merupakan Modul Teks lainnya. Tambahkan beberapa konten deskripsi pilihan Anda.

Pengaturan Teks

Pindah ke tab desain modul dan ubah pengaturan teks yang sesuai:

• Font Teks: Buka Sans
• Warna Teks: #ffffff
• Tinggi Baris Teks: 1.9em

Perekat

Ubah juga pengaturan ukuran.

• Lebar: 75% (Desktop), 100% (Tablet & Ponsel)
• Penyelarasan Modul: Kiri

Tambahkan Modul Tombol ke Kolom 1

Tambahkan Salinan

Modul terakhir yang kita butuhkan di kolom 1 adalah Modul Tombol. Tambahkan beberapa salinan pilihan Anda.

Pengaturan Tombol

Pindah ke tab desain modul dan ubah pengaturan tombol sebagai berikut:

• Gunakan Gaya Kustom Untuk Tombol: Ya
• Warna Teks Tombol: #ffffff
• Radius Perbatasan Tombol: 1px

• Font Tombol: Oswald
• Gaya Font Tombol: Huruf Besar

Tambahkan Modul Blurb ke Kolom 2

Tambah isi

Ke kolom kedua. Di sana, modul pertama yang kita butuhkan adalah Modul Blurb. Tambahkan judul pilihan Anda.

Pilih Ikon

Selanjutnya, pilih ikon.

Pengaturan Ikon

Pindah ke tab desain modul dan ubah pengaturan ikon sebagai berikut:

• Warna Ikon: #ffd8c6
• Penempatan Ikon: Atas
• Penjajaran Ikon: Pusat
• Gunakan Ukuran Font Ikon: Ya
• Ikon Ukuran Font: 250px (Desktop), 150px (Tablet & Ponsel)

Pengaturan Teks Judul

Ubah pengaturan teks judul berikutnya.

• Judul Judul Tingkat: H2
• Judul Font: Oswald
• Judul Font Style: Huruf Besar
• Perataan Teks Judul: Tengah
• Warna Teks Judul: #ff8949
• Ukuran Teks Judul: 38px

Jarak

Tambahkan beberapa bantalan kiri dan kanan juga.

• Padding Kiri: 11%
• Padding Kanan: 11%

Animasi

Dan lengkapi modul dengan menambahkan pengaturan animasi berikut:

• Arah Animasi: Bawah
• Durasi Animasi: 1100ms
• Penundaan Animasi: 400ms
• Animasi Mulai Opacity: 100%

Tambahkan Modul Formulir Kontak ke Kolom 2

Putar Bidang Lebar Penuh

Ke modul terakhir, yaitu Modul Formulir Kontak. Buka bidang nama dan email satu per satu dan buat lebar penuh dalam pengaturan tata letak.

• Buat Lebar Penuh: Ya

Warna latar belakang

Kemudian, kembali ke pengaturan umum Modul Formulir Kontak dan tambahkan warna latar belakang.

• Warna Latar Belakang: #f7f7f7

Pengaturan Bidang

Pindah ke tab desain dan buat beberapa perubahan pada pengaturan bidang berikutnya.

• Warna Latar Belakang Bidang: #ffffff
• Warna Teks Bidang: #ff8949
• Margin Teratas Bidang: 15px
• Margin Bawah Bidang: 15px
• Bidang Atas Padding: 20px
• Bidang Bawah Padding: 20px

• Font Bidang: Oswald
• Gaya Font Bidang: Huruf Besar
• Perataan Teks Bidang: Tengah
• Ukuran Teks Bidang: 21px

Pengaturan Tombol

Kemudian, gaya tombol yang sesuai:

• Gunakan Gaya Kustom Untuk Tombol: Ya
• Warna Teks Tombol: #ff8949
• Radius Perbatasan Tombol: 1px

• Font Tombol: Oswald
• Gaya Font Tombol: Huruf Besar

Perekat

Kami juga memastikan lebarnya '100%' dalam pengaturan ukuran.

• Lebar: 100%

Jarak

Pindah ke pengaturan spasi berikutnya dan terapkan beberapa nilai padding khusus.

• Padding Atas: 14%
• Padding Bawah: 14%
• Padding Kiri: 12%
• Padding Kanan: 12%

Animasi

Kemudian, gunakan pengaturan animasi berikut:

• Gaya Animasi: Slide
• Arah Animasi: Atas
• Durasi Animasi: 1100ms
• Penundaan Animasi: 400ms
• Animasi Mulai Opacity: 100%

Posisi

Dan selesaikan pengaturan modul (dan tutorial) dengan memposisikan ulang modul di desktop saja:

• Posisi: Absolute (Desktop), Default (Tablet & Phone)
• Lokasi: Bawah Tengah

Pratinjau

Sekarang setelah kita melalui semua langkah, mari kita lihat hasil akhir di berbagai ukuran layar.

Desktop

Seluler

Pikiran Akhir

Dalam posting ini, kami telah menunjukkan kepada Anda cara memasukkan formulir kontak dengan mulus di bagian pahlawan Anda. Lebih khusus lagi, kami telah membuat formulir kontak kolom slide-in yang terlihat bagus di semua ukuran layar. Anda juga dapat mengunduh file JSON secara gratis! Jika Anda memiliki pertanyaan, jangan ragu untuk meninggalkan komentar di bagian komentar di bawah.

Jika Anda ingin mempelajari lebih lanjut tentang Divi dan mendapatkan lebih banyak gratisan Divi, pastikan Anda berlangganan buletin email dan saluran YouTube kami sehingga Anda akan selalu menjadi salah satu orang pertama yang mengetahui dan mendapatkan manfaat dari konten gratis ini.