Setiap situs web memerlukan 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 berinteraksi dengan Anda formulir kontak. Dalam artikel ini, kami akan menunjukkan kepada Anda cara membuat bagian kontak mengambang dengan lebar penuh yang dapat Anda tambahkan ke halaman mana pun. Anda bahkan dapat menambahkannya ke bagian atas footer seluruh situs dengan Divi Theme Builder.
Di bawah ini Anda akan menemukan file yang dapat diunduh gratis dengan tata letak JSON untuk diunggah ke perpustakaan Divi Anda sendiri. Kami juga menyertakan templat PSD untuk membantu Anda membuat ulang latar belakang peta, serta pin peta SVG sehingga Anda dapat menyesuaikannya dengan warna Anda sendiri.
Buat struktur elemen
Dalam desain ini, kita akan menggunakan gambar latar belakang yang merupakan representasi di Google Map dari lokasi yang ingin Anda tampilkan. Anda dapat melakukannya dengan Photoshop atau editor gambar lainnya.
Tambahkan bagian baru
Sekarang saatnya untuk mulai membuat 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 modifikasi Anda
jarak
Selanjutnya, sesuaikan pengaturan penspasian bagian pada tab desain.
- Margin atas dan bawah: 50vh
- Lapisan bawah: 0vw
jarak penglihatan
Kemudian atur luapan menjadi terlihat.
- Overflow horisontal dan vertikal: terlihat
Posisi
Terakhir, setel indeks Z dari bagian tersebut menjadi 10.
- Indeks Z: 10
Tambahkan baris baru
Struktur kolom
Sekarang saatnya menambahkan beberapa hal. Pertama, tambahkan baris dengan 2 kolom.
perekat
Buka parameter garis dan sesuaikan ukurannya sebagai berikut.
- Lebar
- Kantor: 90%
- Tablet dan telepon: 80%
- Lebar maks: 90%
jarak penglihatan
Klik pada tab lanjutan dan kemudian sesuaikan luapannya.
- Overflow horisontal dan vertikal: terlihat
Posisi
Lengkapi pengaturan baris dengan mengubah pengaturan posisi.
- Posisi: Relatif
- Asal Offset: Kiri Atas
- Offset Vertikal
- Desktop: -8vw
Kolom 1 Pengaturan
Latar Belakang
Sebelum menambahkan modul, kita perlu memberi style pada masing-masing kolom. Tambahkan warna latar belakang ke kolom 1.
- Warna Solid: # 25274d
Jarak
Sesuaikan pengaturan jarak berikutnya.
- Bantalan Atas dan Bawah
- Desktop dan Tablet: 7vw
- Padding Kiri dan Kanan
- Desktop: 3vw
- Tablet dan Telepon: 6vw
Batas
Kemudian, tambahkan beberapa sudut bundar ke pengaturan perbatasan.
- Rounded Corners: 10px keempat sudut
Gulir Efek
Last but not least, gunakan beberapa gerakan vertikal dalam pengaturan efek gulir. Ini akan membantu kami membuat efek mengambang.
- Scroll Transform Effects: Gerak Vertikal
- Gerak Vertikal / Set Desktop
- Mulai Offset: 4
- Offset Tengah: 0 (pada 50%)
- Mengakhiri Offset: -4
- Gerak Vertikal / Tablet dan Perangkat Telepon
- Mulai Offset: 4
- Offset Tengah: 0 (pada 40% dan 60%)
- End offset: -3
- Pemicu Efek Gerak: Bagian Tengah Elemen
Pengaturan kolom 2
Posisi
Sekarang mari beralih ke parameter kolom kedua. Sesuaikan pengaturan posisi yang sesuai.
- Posisi: Relatif
- Asal offset: kiri atas
- Offset vertikal
- Kantor: 25vw
Gulir efek
Kami juga menambahkan gerakan vertikal ke kolom ini.
- Efek transformasi gulir: gerakan vertikal
- Tentukan gerakan vertikal / desktop
- Mulai offset: 2
- Offset rata-rata: 0 (50%)
- End offset: -2
- Tentukan gerakan vertikal / tablet dan telepon
- Mulai offset: 0
- Offset rata-rata: 0 (50%)
- End offset: -2
- Pemicu Efek Gerakan: Elemen Atas
Tambahkan modul teks ke kolom 1
Isi
Saatnya menambahkan modul, dimulai dengan modul teks di kolom 1. Tambahkan konten H2 yang Anda inginkan.
Teks judul
Buka tab desain dan beri gaya teks H2 sebagai berikut.
- Tingkat judul: H2
- Font: Tandu Gelap
- Berat font: tebal
- Gaya Fon: TT
- Warna: kuning # ffd868
- Ukuran
- Kantor: 5vw
- Tablet: 10vw
- Telepon: 12vw
- Penspasian surat: 4px
Tambahkan modul formulir kontak ke kolom 1
Isi
Di bawah modul teks, tambahkan a formulir kontak. Ini adalah bidang yang kami gunakan:
- nama
- material
- Sambutan dari Manajer Umum PT. LUHAI INDUSTRIAL
Perlindungan spam yang
Sebelum menata modul formulir kontak. aktifkan perlindungan spam dan hubungkan akun ReCaptcha Anda.
- Gunakan layanan perlindungan spam: Ya
- Penyedia Layanan: ReCaptcha
- Pilih satu akun
Bidang
Beralih ke tab desain dan beri gaya pada bidang sebagai berikut.
- Warna Latar Belakang: Biru Tua # 25274d
- Warna teks: abu-abu terang # d1d1d1
- Warna Latar Belakang Fokus: Biru Tua # 25274d
- Warna teks fokus: abu-abu terang # d1d1d1
- Font: Tandu
- Gaya: TT
- Ukuran teks
- Kantor: 0.9vw
- Tablet: 2vw
- Telepon: 3vw
- Penspasian surat: 1px
tombol
Kemudian, sesuaikan gaya tombolnya.
- Gaya khusus: Ya
- Ukuran teks: 20px
- Warna teks: biru tua # 25274d
- Warna Latar Belakang: Kuning # ffd868
- Jari-jari batas: 7px
- Warna Ikon: Biru Tua # 25274d
- Margin atas: 5px
perekat
Kami kemudian memodifikasi parameter ukuran.
- Lebar: 100%
- Lebar maks: 100%
jarak
Kami juga akan menambahkan padding atas.
- Lapisan atas: 4vw
Batas
Lengkapi parameter modul dengan menyesuaikan parameter batas.
- Pintu masuk dengan sudut bundar: 6px di empat sudut
- Entri gaya Perbatasan: keempat sisinya
- Lebar batas pintu masuk: 2px
- Entri warna Batas: kuning # ffd868
Tambahkan modul pelacakan media sosial ke kolom 2
Isi
Buka kolom 2 dan tambahkan modul media sosial. Gunakan semua jejaring sosial yang Anda butuhkan.
Hak gadai
Sebelum menata gaya, tambahkan tautan ke jaringan yang sesuai.
Konteks artikel
Sekarang buka jejaring sosial pertama dan ubah warna latar belakang.
- Warna: Biru Tua # 25274d
Ikon elemen
Di tab desain dari elemen yang sama, ubah pengaturan ikon sebagai berikut.
- Warna: kuning # ffd868
- Ukuran font ikon
- Meja dan tablet: 31 px
- Telepon: 26 px
Penempatan item
Kemudian tambahkan margin kecil untuk memisahkan ikon dari satu sama lain.
- Margin kanan: 1vw
Salin dan tempel gaya item
Untuk mengatur gaya jaringan sosial yang tersisa, kembali ke jendela konten utama dan salin gaya elemen dari ikon pertama. Kemudian tempel gaya elemen di jejaring sosial yang tersisa.
penjajaran
Beralih ke tab desain utama dan pastikan modul sejajar kiri.
- Perataan modul: kiri
perekat
Kemudian sesuaikan ukuran modul.
- Lebar: 100%
jarak
Hapus juga semua isian default.
- Lapisan atas, bawah, kiri dan kanan: 0vw
Batas
Terakhir, tambahkan sudut membulat di pengaturan perbatasan. Ini akan menyesuaikan batas semua ikon sekaligus.
- sudut dibulatkan
- Kiri atas dan kanan: 7 piksel
- Kiri bawah dan kanan: 0px
Tambahkan modul teks ke kolom 2
Isi
Di bawah modul media sosial, tambahkan modul teks lain. Tambahkan konten pilihan Anda. Kami menambahkan dua alamat, nomor telepon dan email. Gunakan cetak tebal pada judul setiap item dengan huruf kapital semua.
- Markas besar: 1587 Sukhumvit Soi 21, Bangkok, Thailand.
- Tempat penjualan : Emporium Mall, lantai 2
- telepon: (321) 564 2398
- Email: [email dilindungi]
konteks
Ubah warna latar belakang modul.
- Warna: Biru Tua # 25274d
teks
Beralih ke tab desain dan beri gaya teks.
- Font: Tandu
- Warna: kuning # ffd868
- Ukuran: 18px
jarak
Tambahkan juga nilai spasi kustom.
- Margin teratas
- Office: -60px
- Tablet dan ponsel: -50 piksel
- Padding atas, bawah, kiri dan kanan
- Kantor: 3vw
- Tablet: 6vw
- Telepon: 8vw
Batas
Dan selesaikan modul dengan menambahkan sudut membulat di pengaturan perbatasan. Itu dia!
- Sudut membulat: 10 piksel di kanan atas, kiri bawah dan kanan bawah.
penelitian
Sekarang setelah kita selesai membuat ulang bagian kontak mengambang, lihat hasilnya pada ukuran layar yang berbeda.
Sumber Daya Tambahan
Ini adalah ressources mungkin melengkapi apa yang baru saja Anda baca. Mereka dapat digunakan sebagai tambahan atau oleh mereka yang tidak memiliki Tema Divi.
- Cara menambahkan formulir kontak popup di Wordpress
- Cara menambahkan formulir drop-down di header global di Divi
- 5 plugin untuk membuat formulir kontak
Selesai
Menggunakan efek gulir Divi baru mengubah tata letak standar menjadi desain yang bagus. Dengan membuat latar belakang 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!
