Loncat ke Konten Utama

Cara menambahkan formulir kontak tarik-turun ke tajuk global Anda

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]

Saat Anda membuat tajuk khusus untuk situs web Anda, menggunakan generator tema Divi, Anda akan menemukan diri Anda mencari cara sempurna untuk menambahkan AAL (ajakan bertindak). Salah satu cara untuk melakukannya adalah dengan menambahkan formulir kontak drop-down. Ini akan membantu Anda menjaga keseluruhan tampilan header Anda tetap bersih sambil memberikan kemampuan untuk menghubungi Anda tanpa harus menggulir ke bawah. Dalam tutorial ini, kami akan menunjukkan kepada Anda cara membuat formulir kontak drop-down menggunakan kode Divi dan JQuery & CSS. Anda juga dapat mendownload file JSON secara gratis!

Mari kita pergi.

penelitian

Sebelum kita menyelami tutorialnya, mari kita lihat hasilnya pada ukuran layar yang berbeda.

Menu tarik-turun Divi

1. Buka Divi Theme Builder dan mulai membuat header global

Pergi ke Pembuat Tema Divi

Mulailah dengan membuka Divi Theme Builder di bagian belakang situs WordPress Anda.

Header divi global

Buat tajuk global

Klik "Tambahkan Global Header" dan pilih "Buat Global Header" untuk mulai membuat header global khusus.

Buat header divi global

2. Bangun desain header

Pengaturan bagian

Warna latar belakang

Setelah berada di dalam template header keseluruhan, Anda akan melihat sebuah bagian. Buka bagian ini dan gunakan warna latar belakang putih.

  • Warna Latar Belakang: #FFFFFF
Penyesuaian latar belakang

jarak

Kemudian hapus padding atas dan bawah default dari bagian.

  • Lapisan atas: 0px
  • Lapisan bawah: 0px
Konfigurasi padding

Kotak bayangan

Juga menerapkan naungan kotak halus.

  • Kekuatan Box Shadow Blur: 50px
  • Warna bayangan: rgba (0,0,0,0,15)
Konfigurasi bayangan Divi

Tambahkan baris baru

Struktur kolom

Lanjutkan menambahkan baris baru ke bagian menggunakan struktur kolom berikut:

Pilih tata letak

perekat

Tanpa menambahkan modul, buka parameter garis dan modifikasi parameter dimensi sebagai berikut:

  • Gunakan lebar selokan khusus: Ya
  • Lebar selokan: 1
  • Menyamakan ketinggian kolom: Ya
  • Lebar: 95%
  • Lebar maks: 100%
Konfigurasi dimensi garis divi

jarak

Kemudian tambahkan padding khusus atas dan bawah.

  • Lapisan atas: 1vw
  • Lapisan bawah: 1vw
Konfigurasi jarak bagian

Elemen utama

Dan sejajarkan semua konten kolom dengan menambahkan satu baris kode CSS ke elemen utama baris.

align-items: center;

CSS khusus

Kolom 2 Z Indeks

Kami juga memastikan bahwa kolom kedua memiliki nilai indeks-z yang lebih tinggi untuk tujuan reaktif.

  • Indeks Z: 12
Parameter kolom

Tambahkan modul gambar ke kolom 1

Unduh logo

Saatnya mulai menambahkan modul! Mulailah dengan modul gambar di kolom 1. Unggah logo.

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]

Modul gambar divi

penjajaran

Kemudian ubah perataan modul.

  • Perataan gambar: tengah
Modul gambar perataan

perekat

Juga ubah lebar.

  • Lebar: 3vw (desktop), 5vw (tablet), 7vw (telepon)
formulir kontak tarik-turun

Tambahkan modul menu ke kolom 2

Pilih menu

Di kolom kedua, kita akan menambahkan modul menu.

Personalisasi modul menu divi

ketentuan

Beralih ke tab desain modul dan ubah gaya tata letak.

  • Gaya: Berpusat
Gaya modul menu

Pengaturan teks menu

Kemudian ubah pengaturan teks dalam menu modul.

  • Font menu: Buka tanpa
  • Berat font menu: Semi tebal
  • Warna teks menu: # 000000
  • Ukuran teks menu: 0.8vw (desktop), 2vw (tablet), 3vw (telepon)
  • Penspasian huruf menu: 1px
Teks menu Divi

Pengaturan teks menu drop-down

Kemudian ubah warna garis di menu drop-down.

  • Warna garis menu drop-down: # 007dff
Menu tarik-turun Divi

ikon

Dengan warna ikon menu hamburger.

  • Warna ikon menu hamburger: # 007dff
Ikon menu divi

Tambahkan modul teks 1 ke kolom 3

Tambahkan salinan

Mari beralih ke modul ketiga! Tambahkan modul teks dengan salinan pilihan Anda.

Hubungi kami modul divi

Warna latar belakang

Kemudian tambahkan warna latar belakang.

  • Warna Latar Belakang: # 007dff
Latar belakang Divi

Pengaturan teks

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

  • Font teks: Buka Sans
  • Berat font teks: tebal
  • Warna teks: #ffffff
  • Ukuran teks: 0.8vw (desktop), 2vw (tablet), 3vw (telepon)
  • Penyelarasan teks: pusat
Warna font Divi

perekat

Kemudian modifikasi parameter ukuran modul.

  • Lebar: 33%
  • Penyelarasan modul: pusat
Mengubah ukuran teks bagian divi

jarak

Kemudian tambahkan padding khusus atas dan bawah.

  • Lapisan atas: 0.8vw (desktop), 2vw (tablet dan telepon)
  • Bantalan bawah: 0.8vw (meja), 2vw (tablet dan telepon)
Konfigurasi spasi modul teks

Batas

Dan lengkapi parameter modul dengan menambahkan radius batas.

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]

  • Semua sudut: 100px
Konfigurasi batas modul teks

Tambahkan modul teks 2 ke kolom 3

Tambahkan simbol ke area konten

Mari beralih ke modul berikutnya, yang merupakan modul teks lainnya. Tambahkan panah berikut di area konten: "▼".

Modul teks fleche Divi

Pengaturan teks

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

  • Font teks: Buka Sans
  • Warna teks: # 007fff
  • Ukuran teks: 3vw
  • Tinggi baris teks: 0em
  • Penyelarasan teks: pusat
Modul teks font divi

Indeks Z

Kami juga meningkatkan indeks z modul.

  • Indeks Z: 11
Posisi modul teks Divi

Tambahkan modul formulir kontak ke kolom 3

Anda sekarang dapat menambahkan formulir kontak tepat di bagian bawah modul teks yang berisi panah. Modul ini cukup mudah digunakan, jadi Anda harus menyesuaikan bidang yang ingin Anda buat terlihat.

Modul formulir kontak

3. Kustomisasi elemen untuk membuat formulir kontak dalam satu klik

Tambahkan tinggi kolom 3

Setelah semua mod terpasang, saatnya membuat efek. Langkah pertama untuk mencapai hasil yang diinginkan adalah membuka pengaturan di kolom 3 dan menambahkan ketinggian kustom yang responsif di tab lanjutan.

Office:

height: 3vw;

tablet:

height: 5vw;

Telepon:

height: 6vw;

Contoh formulir kontak selebaran

Tambahkan kelas CSS ke tombol dan panah

Selanjutnya, kita akan menambahkan kelas CSS yang sama ke dua modul teks pertama di kolom 3.

  • Kelas CSS: tampilkan-kontak
Tambahkan bagian acara kontak

Tambahkan kelas CSS ke formulir kontak

Kita juga membutuhkan kelas CSS khusus untuk modul Formulir Kontak.

  • Kelas CSS: contact-form-module
Tambahkan kelas ke formulir divi

Sembunyikan modul formulir Kontak

Lanjutkan dengan menambahkan baris tambahan kode CSS ke elemen utama modul Formulir Kontak. Ini akan memungkinkan kita menyembunyikan modul sebelum mengklik.

display: none;

Buat Toko Online Anda dengan mudah

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

Pembagian modul gaya css

Tambahkan modul kode ke kolom 3 dengan kode JQuery dan CSS

Dan untuk membuat fungsi klik, kita membutuhkan beberapa kode JQuery. Kami juga akan menggunakan kode CSS khusus. Tambahkan modul kode baru ke kolom 2 dengan kode. Pastikan untuk menempatkan kode JQuery di antara tag skrip dan kode CSS di antara tag gaya.

jQuery(function($){$(".show-contact").click(function() {$('.contact-form-module').slideToggle();});});

.show-contact {cursor: pointer;} .et-menu>li {padding-left: 0.7vw !important;padding-right: 0.7vw !important;}

Tambahkan kode javascript

penelitian

Sekarang setelah kita melalui semua langkah, mari kita lihat terakhir bagaimana tampilannya pada berbagai ukuran layar.

Biro

Contoh desain

Apa yang harus diingat?

Di artikel ini, kami telah menunjukkan cara menambahkan formulir kontak drop-down ke header kustom Anda. Ini cara yang bagus untuk memicu tindakan sejak dini. 

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