Loncat ke Konten Utama

Buat bagian kontak mengambang dengan efek gulir pada Divi

Divi: tema WordPress termudah untuk digunakan

Divi: Tema WordPress terbaik sepanjang masa!

lebih 901.000 unduhan, Divi adalah tema WordPress paling populer di dunia. Sudah lengkap, mudah digunakan dan dilengkapi dengan lebih dari 62 template gratis. [Direkomendasikan]

Setiap 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 gulir vertikal yang akan mengundang pengunjung untuk berinteraksi dengan formulir kontak Anda. Di artikel ini, kami akan menunjukkan 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, kami akan menggunakan gambar latar belakang yang merupakan representasi di Google Map dari lokasi yang ingin Anda sorot. Anda dapat melakukan ini 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
Gambar latar belakang Divi

jarak

Selanjutnya, sesuaikan pengaturan penspasian bagian pada tab desain.

  • Margin atas dan bawah: 50vh
  • Lapisan bawah: 0vw
Konfigurasi jarak bagian Divi 1

jarak penglihatan

Kemudian atur luapan menjadi terlihat.

  • Overflow horisontal dan vertikal: terlihat
bagian kontak mengambang

Posisi

Terakhir, setel indeks Z dari bagian tersebut menjadi 10.

  • Indeks Z: 10
Posisi bagian Divi

Tambahkan baris baru

Struktur kolom

Sekarang saatnya menambahkan beberapa hal. Pertama, tambahkan baris dengan 2 kolom.

Baris memiliki dua kolom divi

perekat

Buka parameter garis dan sesuaikan ukurannya sebagai berikut.

  • Lebar
    • Kantor: 90%
    • Tablet dan telepon: 80%
  • Lebar maks: 90%
Parameter garis Divi

jarak penglihatan

Klik pada tab lanjutan dan kemudian sesuaikan luapannya.

  • Overflow horisontal dan vertikal: terlihat
Konfigurasi overflow garis Divi

Posisi

Lengkapi pengaturan baris dengan mengubah pengaturan posisi.

  • Posisi: Relatif
  • Asal Offset: Kiri Atas
  • Offset Vertikal
    • Desktop: -8vw
Konfigurasikan posisi garis divi

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
Warna kolom 1 divi

Jarak

Sesuaikan pengaturan jarak berikutnya.

Buat situs web Anda dengan Elementor dengan mudah

Elementor memungkinkan Anda untuk dengan mudah membuat desain situs web apa pun dengan tampilan profesional. Berhentilah membayar mahal untuk apa yang dapat Anda lakukan sendiri. [Gratis]

  • Bantalan Atas dan Bawah
    • Desktop dan Tablet: 7vw
  • Padding Kiri dan Kanan
    • Desktop: 3vw
    • Tablet dan Telepon: 6vw
Konfigurasi jarak bagian dua kolom

Batas

Kemudian, tambahkan beberapa sudut bundar ke pengaturan perbatasan.

  • Rounded Corners: 10px keempat sudut
Bagian tepi membulat divi

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
Sesuaikan efek gulir bagian divi

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
Kustomisasi kolom Divi

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
Efek gulir Divi

Tambahkan modul teks ke kolom 1

Isi

Saatnya menambahkan modul, dimulai dengan modul teks di kolom 1. Tambahkan konten H2 yang Anda inginkan.

Modul konten kolom 1

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
Kustomisasi font Divi di bagian atas

Tambahkan modul formulir kontak ke kolom 1

Isi

Di bawah modul teks, tambahkan formulir kontak. Ini adalah bidang yang kami gunakan:

  • nama
  • Surel
  • material
  • Pesan
Tambahkan formulir kontak divi

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
Perlindungan spam formulir kontak Divi

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
Sesuaikan bidang warna 1

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
Sesuaikan gaya tombol divi 1
Konfigurasi warna tombol Divi

perekat

Kami kemudian memodifikasi parameter ukuran.

  • Lebar: 100%
  • Lebar maks: 100%
Konfigurasi ukuran Divi

jarak

Kami juga akan menambahkan padding atas.

Apakah Anda mencari tema dan plugin WordPress terbaik?

Unduh plugin terbaik dan tema WordPress di Envato dan buat situs web Anda dengan mudah. Sudah lebih dari 49.720.000 unduhan. [EKSKLUSIF]

  • Lapisan atas: 4vw
Jarak Divi

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
Konfigurasi perbatasan Divi

Tambahkan modul pelacakan media sosial ke kolom 2

Isi

Buka kolom 2 dan tambahkan modul media sosial. Gunakan semua jejaring sosial yang Anda butuhkan.

  • Facebook
  • Twitter
  • Linkedin
Modul ikuti kami di jejaring sosial

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
Ubah latar belakang divi 1

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
Sesuaikan divi warna

Penempatan item

Kemudian tambahkan margin kecil untuk memisahkan ikon dari satu sama lain.

  • Margin kanan: 1vw
Konfigurasi spasi berbagi sosial

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.

Salin elemen gaya
Tempel elemen gaya divi

penjajaran

Beralih ke tab desain utama dan pastikan modul sejajar kiri.

  • Perataan modul: kiri
Pilih perataan

perekat

Kemudian sesuaikan ukuran modul.

  • Lebar: 100%
Konfigurasikan ukuran divi

jarak

Hapus juga semua isian default.

  • Lapisan atas, bawah, kiri dan kanan: 0vw
Konfigurasi jarak divi

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
Konfigurasi perbatasan modul Divi

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]
Konfigurasi alamat modul teks Divi

konteks

Ubah warna latar belakang modul.

  • Warna: Biru Tua # 25274d
Konfigurasi latar belakang modul teks

teks

Beralih ke tab desain dan beri gaya teks.

Buat Toko Online Anda dengan mudah

Unduh WooCommerce gratis, plugin e-commerce terbaik untuk menjual produk fisik dan digital Anda di WordPress. [Rekomendasi]

  • Font: Tandu
  • Warna: kuning # ffd868
  • Ukuran: 18px
Font teks modul Divi

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
Margin jarak Divi

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.
Modul teks divi perbatasan bulat

penelitian

Sekarang setelah kita selesai membuat ulang bagian kontak mengambang, lihat hasilnya pada ukuran layar yang berbeda.

bagian kontak mengambang

Sumber Daya Tambahan

Sumbernya bisa melengkapi apa yang baru saja Anda baca. Mereka harus digunakan sebagai tambahan atau oleh mereka yang tidak memiliki tema Divi.

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!

Artikel ini berisi komentar 0

Tinggalkan komentar

Alamat email Anda tidak akan dipublikasikan. Bidang yang harus diisi ditandai *

Situs ini menggunakan Akismet untuk mengurangi yang tidak diinginkan. Pelajari lebih lanjut tentang bagaimana data komentar Anda digunakan.

Kembali ke atas
0 saham
saham
menciak
Register