Buat Bagian Kontak Mengambang dengan Divi Scroll Motion Effects
Diterbitkan: 2020-04-19Setiap situs web membutuhkan bagian kontak, tetapi itu tidak berarti Anda harus menggunakan desain standar. Dengan efek gulir Divi, Anda dapat membuat bagian kontak mengambang yang menonjol. Tingkatkan interaksi pengguna Anda dengan tata letak bagian kontak bergulir vertikal yang akan mengundang pengunjung untuk terlibat dengan formulir kontak Anda. Dalam posting ini, kami akan menunjukkan cara membuat bagian kontak mengambang lebar penuh yang dapat Anda tambahkan ke halaman mana pun. Anda bahkan dapat menambahkannya di bagian atas footer seluruh situs dengan Divi Theme Builder.
Di bawah ini, Anda akan menemukan folder yang dapat diunduh gratis dengan tata letak JSON untuk diunggah ke Perpustakaan Divi Anda sendiri. Kami juga menyertakan template PSD untuk membantu Anda membuat ulang latar belakang peta, ditambah SVG dari pin peta sehingga Anda dapat mempersonalisasikannya dengan warna Anda sendiri.
Mari kita lakukan!
Pratinjau
Sebelum kita mulai membangun tata letak formulir kontak, lihat hasilnya pada ukuran layar yang berbeda.
Desktop
Seluler
Unduh Bagian Kontak Mengambang GRATIS
Untuk meletakkan tangan Anda pada tata letak bagian kontak mengambang 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 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.
Anda telah berhasil berlangganan. Silakan periksa alamat email Anda untuk mengonfirmasi langganan Anda dan dapatkan akses ke paket tata letak Divi mingguan gratis!
1. Buat Latar Belakang Peta Untuk Bagian Kontak Mengambang
Buka Google Maps
Langkah pertama untuk tutorial ini adalah membuat latar belakang peta hitam putih. Untuk membuatnya sendiri, ikuti langkah-langkah di bawah ini:
- Pertama, buka Google Maps dan cari alamat Anda.
- Saat memuat, perkecil sehingga Anda dapat melihat sebagian besar kota atau jalan di sekitar alamat Anda.
- Selanjutnya, posisikan peta sehingga lokasi Anda berada di kuadran kanan atas peta.
- Kemudian, lepaskan pin lokasi.
- Terakhir, screenshot peta menghindari tab di sudut.
Personalisasi Pin
Dalam file yang dapat diunduh di atas, kami telah menyertakan file SVG dari pin yang kami gunakan dalam desain. Anda dipersilakan untuk menggunakannya dan mengubah warna dengan editor grafis vektor Anda. Kami juga menyertakan PNG transparan jika Anda ingin mengubah warna di Photoshop.
Ikuti langkah-langkah berikut untuk pin SVG:
- Pertama, unduh file gratis di awal tutorial ini dan unzip foldernya.
- Kedua, buka grafik pin SVG dengan Illustrator, Inkscape atau editor vektor favorit Anda.
- Ketiga, ubah warnanya agar sesuai dengan merek atau situs web Anda.
- Terakhir, simpan sebagai PNG transparan.
Edit di Photoshop
Sekarang saatnya untuk menyatukan semuanya. Pertama, buka peta di editor grafis favorit Anda untuk menghilangkan warna. Kedua, tambahkan pin.
Jika Anda memiliki Photoshop, Anda dapat menggunakan file PSD yang kami sertakan dan cukup tambahkan tangkapan layar peta Anda ke objek pintar di lapisan kedua.
Untuk menggunakan objek pintar, ikuti langkah-langkah ini
- Buka file PSD-nya.
- Klik dua kali pada layer dengan warna oranye. Sebuah jendela baru akan terbuka.
- Ganti peta kami dengan peta Anda.
- Jangan lupa klik simpan.
- Kembali ke jendela pengeditan utama dan klik simpan di sana juga.
- Ekspor untuk web sebagai .jpg.
Jika Anda tidak memiliki Photoshop, ikuti langkah-langkah ini:
- Pertama, buat proyek baru pada 1920 px x 700 px.
- Kedua, letakkan tangkapan layar peta ke kanvas. Pastikan untuk menjaga lokasi Anda di kuadran kanan atas, sedikit lebih tinggi dari tengah.
- Ketiga, menggunakan penyesuaian gambar mengubah gambar menjadi hitam putih.
- Juga, tambahkan beberapa kontras.
- Kecerahan: -25
- Kontras: -50
- Kemudian, klik pada layer gambar, dan tambahkan transparansi sekitar 55%.
- Jika Anda akan membuat desain ini pada halaman web yang memiliki latar belakang non-putih, tambahkan lapisan putih di bawah gambar untuk menjaga warna dasar tetap putih, apa pun warna latar belakang yang dimiliki situs web.
- Lanjutkan dengan menempatkan pin di lokasi Anda. Ukuran itu sekitar 90px tinggi. Biarkan di lapisan paling atas.
- Terakhir, unduh sebagai .jpg.
2. Buat Struktur Elemen
Tambahkan Bagian Baru
Latar belakang
Sekarang saatnya untuk mulai membangun bagian kontak mengambang dengan Divi Builder! Hal pertama yang akan kita lakukan adalah membuka halaman baru atau yang sudah ada dan menambahkan bagian baru.
Di tab konten, tambahkan latar belakang peta yang Anda buat di Photoshop.
- Gambar Latar Belakang: Peta Anda yang telah diedit
Jarak
Kemudian, sesuaikan pengaturan spasi bagian di tab desain.
- Margin Atas dan Bawah: 50vh
- Padding Bawah: 0vw
Visibilitas
Selanjutnya, sesuaikan luapan menjadi terlihat.
- Luapan Horisontal dan Vertikal: Terlihat
Posisi
Terakhir, atur indeks Z bagian ke 10.
- Indeks Z: 10
Tambahkan Baris Baru
Struktur Kolom
Sekarang saatnya menambahkan beberapa elemen. Pertama, tambahkan baris dengan 2 kolom.
Perekat
Buka pengaturan baris dan sesuaikan ukurannya sebagai berikut.
- Lebar
- Desktop: 90%
- Tablet dan Telepon: 80%
- Lebar Maks: 90%
Visibilitas
Klik pada tab lanjutan, dan sesuaikan luapan berikutnya.
- Luapan Horisontal dan Vertikal: Terlihat
Posisi
Selesaikan pengaturan baris dengan mengubah pengaturan posisi.
- Posisi: Relatif
- Asal Offset: Kiri Atas
- Offset Vertikal
- Desktop: -8vw
Pengaturan Kolom 1
Latar belakang
Sebelum menambahkan modul, kita perlu menata kolom individual. Tambahkan warna latar belakang ke kolom 1.
- Warna Solid: #25274d
Jarak
Sesuaikan pengaturan spasi berikutnya.
- Padding Atas dan Bawah
- Desktop dan Tablet: 7vw
- Padding Kiri dan Kanan
- Desktop: 3vw
- Tablet dan Telepon: 6vw
Berbatasan
Kemudian, tambahkan beberapa sudut membulat ke pengaturan perbatasan.
- Sudut Bulat: 10px keempat sudut
Efek Gulir
Last but not least, gunakan beberapa gerakan vertikal dalam pengaturan efek gulir. Ini akan membantu kita menciptakan efek mengambang.
- Efek Transformasi Gulir: Gerakan Vertikal
- Atur Gerak Vertikal / Desktop
- Mulai Offset: 4
- Offset Tengah: 0 (pada 50%)
- Offset Akhir: -4
- Atur Gerak Vertikal / Tablet dan Telepon
- Mulai Offset: 4
- Mid Offset: 0 (pada 40% dan 60%)
- Offset Akhir: -3
- Pemicu Efek Gerak: Elemen Tengah
Pengaturan Kolom 2
Posisi
Sekarang, ke pengaturan kolom kedua. Sesuaikan pengaturan posisi yang sesuai.
- Posisi: Relatif
- Asal Offset: Kiri Atas
- Offset Vertikal
- Desktop: 25vw
Efek Gulir
Kami juga menambahkan beberapa gerakan vertikal ke kolom ini.
- Efek Transformasi Gulir: Gerakan Vertikal
- Atur Gerak Vertikal / Desktop
- Mulai Offset: 2
- Offset Tengah: 0 (pada 50%)
- Offset Akhir: -2
- Atur Gerak Vertikal / Tablet dan Telepon
- Mulai Offset: 0
- Offset Tengah: 0 (pada 50%)
- Offset Akhir: -2
- Pemicu Efek Gerak: Elemen Atas
Tambahkan Modul Teks ke Kolom 1
Isi
Saatnya menambahkan modul, dimulai dengan modul teks di kolom 1. Tambahkan beberapa konten H2 pilihan Anda.
Teks Judul
Pindah ke tab desain dan gaya teks H2 sebagai berikut.
- Tingkat Pos: H2
- Font: Tandu Gelap
- Berat Huruf: Tebal
- Gaya Huruf: TT
- Warna: Kuning #ffd868
- Ukuran
- Desktop: 5vw
- Tablet: 10vw
- Telepon: 12vw
- Spasi Huruf: 4px
Tambahkan Modul Formulir Kontak ke Kolom 1
Isi
Di bawah modul teks, tambahkan formulir kontak. Ini adalah bidang yang kami gunakan:
- Nama
- Surel
- Subjek
- Pesan
Proteksi spam
Sebelum menata modul formulir kontak. aktifkan perlindungan spam dan hubungkan akun ReCaptcha Anda.
- Gunakan Layanan Perlindungan Spam: Ya
- Penyedia Layanan: ReCaptcha
- Pilih Akun
bidang
Pindah ke tab desain dan gaya bidang sebagai berikut.
- Warna Latar Belakang: Biru Tua #25274d
- Warna Teks: Abu-abu Pucat #d1d1d1
- Warna Latar Belakang Fokus: Biru Tua #25274d
- Warna Teks Fokus: Abu-abu Pucat #d1d1d1
- Font: Palanquin
- Gaya: TT
- Ukuran teks
- Desktop: 0.9vw
- Tablet: 2vw
- Telepon: 3vw
- Spasi Huruf: 1px
Tombol
Kemudian, gaya tombol.
- Gaya Kustom: Ya
- Ukuran Teks: 20px
- Warna Teks: Biru Tua #25274d
- Warna Latar Belakang: Kuning #ffd868
- Radius Perbatasan: 7px
- Warna Ikon: Biru Tua #25274d
- Margin Atas: 5px
Perekat
Kami memodifikasi pengaturan ukuran selanjutnya.
- Lebar: 100%
- Lebar Maks: 100%
Jarak
Kami akan menambahkan beberapa padding atas juga.
- Padding Atas: 4vw
Berbatasan
Selesaikan pengaturan modul dengan menyesuaikan pengaturan perbatasan.
- Masukan Sudut Bulat: 6px keempat sudut
- Masukan Gaya Perbatasan: Keempat sisi
- Lebar Batas Masukan: 2px
- Warna Batas Masukan: Kuning #ffd868
Tambahkan Modul Ikuti Media Sosial ke Kolom 2
Isi
Pindah ke kolom 2 dan tambahkan modul media sosial. Gunakan semua jaringan media sosial yang Anda butuhkan.
- Indonesia
Tautan
Sebelum menata gaya, tambahkan tautan ke jaringan yang sesuai.
Latar Belakang Barang
Sekarang, buka jejaring sosial pertama dan ubah warna latar belakang.
- Warna: Biru Tua#25274d
Ikon Barang
Di tab desain elemen yang sama, ubah pengaturan ikon sebagai berikut.
- Warna: Kuning #ffd868
- Ukuran Font Ikon
- Desktop dan Tablet: 31px
- Telepon: 26px
Spasi Item
Kemudian, tambahkan margin kecil untuk memisahkan ikon satu sama lain.
- Margin Kanan: 1vw
Salin dan Tempel Gaya Item
Untuk menata jaringan sosial yang tersisa, kembali ke jendela konten utama dan salin gaya item dari ikon pertama. Kemudian, tempel gaya item di jejaring sosial yang tersisa.
Penyelarasan
Pindah ke tab desain utama dan pastikan modul sejajar ke kiri.
- Penyelarasan Modul: Kiri
Perekat
Kemudian, sesuaikan ukuran modul.
- Lebar: 100%
Jarak
Hapus semua padding default juga.
- Padding Atas, Bawah, Kiri dan Kanan: 0vw
Berbatasan
Terakhir, tambahkan beberapa sudut membulat di pengaturan perbatasan. Ini akan menyesuaikan batas untuk semua ikon sekaligus.
- Sudut Bulat
- Kiri dan Kanan Atas: 7px
- Kiri dan Kanan Bawah: 0px
Tambahkan Modul Teks ke Kolom 2
Isi
Di bawah modul media sosial, tambahkan modul teks lain. Tambahkan beberapa konten pilihan Anda. Kami telah menambahkan dua alamat, nomor telepon, dan email. Gunakan huruf tebal pada judul setiap item dalam huruf kapital semua.
- KANTOR PUSAT : 1587 Sukhumvit Soi 21, Bangkok, Thailand.
- LOKASI ECERAN : Emporium Mall, Lantai 2
- TELEPON : (321) 564 2398
- EMAIL : [dilindungi email]
Latar belakang
Ubah warna latar belakang modul.
- Warna: Biru Tua #25274d
Teks
Pindah ke tab desain dan gaya teks.
- Font: Palanquin
- Warna: Kuning #ffd868
- Ukuran: 18px
Jarak
Tambahkan beberapa nilai spasi kustom juga.
- Batas atas
- Desktop: -60px
- Tablet dan Ponsel: -50px
- Padding Atas, Bawah, Kiri, dan Kanan
- Desktop: 3vw
- Tablet: 6vw
- Telepon: 8vw
Berbatasan
Dan lengkapi modul dengan menambahkan sudut membulat di pengaturan perbatasan. Itu dia!
- Sudut Bulat: Kanan Atas 10px, Kiri Bawah, dan Kanan Bawah.
Pratinjau
Sekarang setelah kita selesai membuat ulang bagian kontak mengambang, lihat hasil akhir di berbagai ukuran layar.
Desktop
Seluler
Anda Selesai Membuat Ulang Tata Letak Bagian Kontak Mengambang!
Menggunakan efek gulir Divi baru membantu mengubah tata letak standar apa pun menjadi desain yang luar biasa. Dengan membuat latar belakang peta Anda sendiri, Anda memiliki kontrol lebih besar atas tampilan desain yang sudah jadi. Jika Anda memiliki pertanyaan atau saran, tinggalkan komentar di bagian komentar di bawah!