Tutorial ini memberikan panduan terperinci tentang cara mengawal gaya visual dan susun atur borang carian dengan tepat melalui CSS tersuai di Elementor. Meliputi membuang sempadan lalai, latar belakang, garis besar fokus dan kesan klik, dan menyediakan kaedah untuk memusatkan borang. Melalui contoh kod tertentu, kami membantu pengguna melaksanakan borang carian yang sangat disesuaikan dan meningkatkan konsistensi reka bentuk laman web dan pengalaman pengguna.

Di Elementor Page Builder, walaupun komponen terbina dalam menyediakan pilihan konfigurasi yang kaya, kadang-kadang untuk mencapai kesan reka bentuk tertentu atau mengekalkan konsistensi jenama, kita mungkin memerlukan penyesuaian gaya yang lebih mendalam dari beberapa elemen. Widget Borang Carian Elementor adalah contoh yang sama, dan gaya lalai mungkin tidak sepadan dengan estetika keseluruhan tapak. Tutorial ini akan mengambil pandangan yang mendalam tentang cara menggunakan CSS tersuai untuk mengalih keluar sempadan lalai, latar belakang, garis besar fokus, dan klik kesan borang carian, dan memusatkan borang.

Analisis isu teras: Gaya lalai borang carian elemen

Widget Borang Carian Elementor biasanya dilengkapi dengan beberapa gaya lalai, termasuk:

• Warna Latar Belakang Kontena : Kontena luar bentuk carian mungkin mempunyai warna latar belakang.
• Sempadan Kotak Input : Kotak input carian biasanya mempunyai sempadan lalai.
• Outline Focus : Apabila kotak input diklik atau difokuskan, penyemak imbas memaparkan garis lalai, yang kadang -kadang memusnahkan estetika reka bentuk.
• Kesan klik : Selain memberi tumpuan garis besar, beberapa tema atau elemen itu sendiri boleh menambah gaya tambahan (seperti bayang -bayang atau perubahan warna latar belakang) pada klik.
• Isu Kedudukan : Borang boleh ditinggalkan sejajar secara lalai dan perlu diselaraskan secara manual untuk susun atur atau susun atur lain.

Untuk menyelesaikan masalah ini, cara yang paling berkesan ialah menggunakan CSS tersuai untuk mengatasi gaya lalai elemen atau tema.

Sapukan CSS tersuai: Keluarkan sempadan, latar belakang dan kesan fokus

Elementor membolehkan pengguna menambah CSS tersuai dalam widget, lajur, bahagian atau global. Untuk borang carian, cara yang paling mudah dan disyorkan ialah menambah CSS tersuai dalam tab lanjutan widget bentuk carian itu.

Berikut adalah contoh kod CSS untuk masalah di atas:

 /* 1. Keluarkan warna latar belakang bentuk carian carian*/
pemilih .elementor-search-form__container {
    latar belakang warna: telus! Penting; /* Tetapkan warna latar ke telus*/
}

/* 2. Kotak input carian bergaya: Keluarkan sempadan, garis besar dan tetapkan latar belakang*/
pemilih .elementor-search-form__input {
    latar belakang warna: #fff; /* Tetapkan warna latar belakang kotak input ke putih*/
    Sempadan: Tiada! Penting; /* Keluarkan semua sempadan*/
    Garis Besar: Tiada! Penting; /* Keluarkan garis besar fokus*/
    Box-shadow: Tiada! Penting; /* Keluarkan kemungkinan kesan bayangan*/
    Radius sempadan: 0px; /* Tetapkan jejari sempadan ke 0, yang merupakan sudut yang betul*/
    Padding: 10px 15px; /* Laraskan padding supaya terdapat jarak yang sesuai antara teks dan tepi*/
    Lebar: 100%; /* Pastikan lebar kotak input mengisi bekas induknya*/
}

/* 3. Keluarkan gaya tambahan pada klik/fokus*/
pemilih .elementor-search-form__input: fokus {
    Sempadan: Tiada! Penting; /* Pastikan tiada sempadan apabila fokus*/
    Garis Besar: Tiada! Penting; /* Pastikan tidak ada garis besar apabila fokus*/
    Box-shadow: Tiada! Penting; /* Pastikan tiada bayangan apabila fokus*/
    /* Kesan fokus tersuai boleh ditambah di sini, seperti perubahan warna latar belakang sedikit*/
    /* latar belakang warna: #f0f0f0; */
}

/ * 4. Butang carian bergaya (jika diperlukan) */
pemilih .elementor-search-form__submit {
    latar belakang warna: #007BFF; /* Contoh: Tetapkan warna latar belakang butang*/
    Warna: #FFF; /* Contoh: Tetapkan warna teks butang*/
    Sempadan: Tiada! Penting;
    Garis Besar: Tiada! Penting;
    Radius sempadan: 0px;
    Padding: 10px 15px;
    kursor: penunjuk;
}

pemilih .elementor-search-form__submit: hover {
    latar belakang warna: #0056B3; /* Contoh: kesan tetikus*/
}

Penjelasan kod:

• Pemilih: Di kawasan CSS tersuai widget Elementor, pemilih adalah pemegang tempat yang secara automatik menunjuk ke elemen html root widget semasa. Ini memastikan bahawa peraturan CSS hanya terpakai kepada widget semasa dan mengelakkan mempengaruhi elemen lain pada halaman.
• ! Penting: Kata kunci ini digunakan untuk memaksa permohonan peraturan CSS, mengatasi sebarang gaya lain yang mungkin wujud. Apabila menggunakan Elementor, kerana CSS ia menghasilkan mempunyai keutamaan yang lebih tinggi, kadang -kadang anda perlu menggunakan! Penting untuk memastikan gaya adat berkuatkuasa. Walau bagaimanapun, ia harus digunakan dengan berhati -hati kerana ia boleh menyebabkan kesukaran dengan pelarasan gaya berikutnya.
• .Elementor-Search-Form__container: Ini adalah nama kelas kontena luar bentuk carian.
• .elementor-Search-form__input: Ini adalah nama kelas elemen kotak input carian.
• .elementor-Search-form__input: Fokus: Ini adalah kelas pseudo apabila kotak input mendapat fokus (iaitu, diklik) dan digunakan untuk menyesuaikan kesan klik.
• .elementor-Search-form__submit: Ini adalah nama kelas butang carian.

Laraskan kedudukan borang carian

Untuk memusatkan borang carian, biasanya terdapat beberapa kaedah, bergantung kepada bekas induk bentuknya dan susun atur halaman. Kaedah yang paling biasa dan fleksibel ialah menggunakan susun atur Flexbox.

Tambahkan CSS berikut dalam tab lanjutan widget borang carian untuk memusatkan kandungan di dalam bekasnya:

 / * Pusat widget borang carian */
pemilih {
    Paparan: Flex; /* Tetapkan elemen akar widget ke bekas flex*/
    Justify-Content: Center; /* Memusatkan kandungannya secara mendatar*/
    Align-item: pusat; / * Secara menegak memusatkan kandungannya (jika widget mempunyai ketinggian tetap) */
    Lebar: 100%; /* Pastikan bahawa bekas Flex menduduki lebar yang ada supaya kandungan membenarkan boleh berkuatkuasa*/
}

/ * Jika borang carian itu sendiri perlu mempunyai lebar maksimum dan berpusat, anda boleh menetapkannya seperti ini */
pemilih. Elementor-Search-Form { / * menganggap ini adalah pembungkus sebenar di sekitar bentuk * /
    Max-Width: 400px; /* Tetapkan lebar maksimum borang*/
    margin-kiri: auto; / * margin kiri automatik */
    margin-kanan: auto; /* Margin kanan automatik, digabungkan dengan maksimum lebar untuk mencapai pusat mendatar*/
}

Penjelasan kod kedudukan:

• pemilih {paparan: flex; Justify-Content: Center; Align-item: pusat; Lebar: 100%; }:
  • Paparan: Flex;: Tukar elemen akar widget ke dalam bekas Flex.
  • Justify-Content: Center;: Centre-Align Items dalam bekas Flex (iaitu, bentuk carian itu sendiri) di sepanjang paksi utama (arah mendatar).
  • Align-items: Center;: Pusat-menyelaraskan item dalam bekas Flex di sepanjang paksi salib (arah menegak).
  • lebar: 100%;: Pastikan bekas Flex menduduki lebar penuh bekas induknya supaya membenarkan kandungan: pusat; boleh berfungsi dengan berkesan.
• Max-Width: 400px; Margin: 0 Auto;: Ini adalah kaedah pemusatan mendatar klasik untuk unsur-unsur peringkat blok. Apabila elemen peringkat blok ditetapkan ke lebar tetap atau maksimum, menetapkan margin kiri dan kanannya ke Auto akan memusatkannya secara mendatar dalam bekas induknya.

Cara Menambah Kod CSS ke Elementor

1. Pilih widget Sasaran : Dalam Editor Elementor, klik pada widget Borang Carian yang anda mahu menyesuaikan.
2. Masukkan Tab Lanjutan : Di Panel Elementor di sebelah kiri, beralih ke tab Lanjutan.
3. Cari CSS Custom : Tatal ke bawah dan cari kawasan "CSS Custom".
4. Tampal Kod : Tampalkan kod CSS yang disediakan di atas ke kawasan ini. Elemen secara automatik mengendalikan awalan pemilih.

Perkara yang perlu diperhatikan dan amalan terbaik

• Alat Pemaju Pelayar : Apabila membuat penyesuaian CSS, ambil kesempatan daripada alat pemaju pelayar anda (tekan F12) untuk memeriksa unsur -unsur, melihat gaya yang digunakan sekarang, dan menguji perubahan CSS. Ini membantu anda mencari nama kelas yang betul dan mengenal pasti gaya yang bercanggah.
• Prioriti Pemilih CSS : Memahami peraturan keutamaan pemilih CSS. Pemilih yang lebih spesifik (seperti pemilih ID, rantaian pemilih kelas) mengatasi pemilih yang kurang spesifik. Jika CSS anda tidak berkuatkuasa, mungkin kerana keutamaan tidak cukup tinggi, dan anda mungkin perlu menggunakan pemilih atau penggunaan yang lebih spesifik! Penting.
• Reka bentuk responsif : Pertimbangkan bagaimana gaya tersuai anda akan melihat pada peranti yang berbeza (desktop, tablet, telefon). Anda mungkin perlu menggunakan pertanyaan media untuk menyesuaikan gaya untuk saiz skrin yang berbeza.
• Global vs CSS Tempatan : Jika gaya tersuai anda perlu memohon kepada semua borang carian Elementor, pertimbangkan untuk menambahkannya ke tetapan tapak Elementor> CSS tersuai atau kawasan CSS tersuai tema, dan bukannya setiap widget.
• Backup : Sebelum membuat perubahan gaya utama, pastikan anda membuat sandaran laman web anda sekiranya berlaku.

Meringkaskan

Melalui tutorial ini, anda telah menguasai cara menggunakan fungsi CSS Custom Elementor untuk menyesuaikan borang carian dengan mendalam. Sama ada ia mengeluarkan sempadan lalai, latar belakang, dan garis besar fokus, atau mencapai kedudukan pusat yang tepat dalam bentuk, anda boleh melakukannya dengan menulis kod CSS ringkas dan berkesan. Keupayaan penyesuaian ini bukan sahaja membantu anda menyelesaikan cabaran reka bentuk tertentu, tetapi juga membolehkan laman web anda mencapai tahap perpaduan visual dan profesionalisme yang lebih tinggi. Ingat, amalan adalah kunci untuk belajar, terus mencuba dan tweaking, dan anda akan dapat membuat bentuk carian elemen yang sesuai dengan visi reka bentuk anda.

Atas ialah kandungan terperinci Tutorial mengenai gaya tersuai dan kedudukan borang carian elementor. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!