Tutorial ini memperincikan cara menggunakan keupayaan CSS Custom Custom Elementor untuk mengawal gaya dan susun atur borang carian anda dengan tepat. Liputan termasuk mengeluarkan sempadan lalai, garis besar, dan fokus (klik), serta mendatar memusatkan borang dengan CSS. Melalui contoh kod tertentu dan langkah -langkah operasi, kami membantu pengguna mencapai fungsi carian yang sempurna diintegrasikan dengan gaya reka bentuk laman web.

Di Elementor Page Builder, walaupun widget menyediakan pilihan gaya yang kaya, kadang -kadang untuk mencapai kesan reka bentuk tertentu, kita mungkin memerlukan penyesuaian yang lebih mendalam, terutama ketika berurusan dengan widget seperti borang carian yang mempunyai pelayar lalai dan gaya tema. Tutorial ini akan membimbing anda bagaimana untuk mengawal prestasi visual borang carian elementor melalui kod CSS tersuai, termasuk membuang sempadan dan garis besar yang tidak perlu, membatalkan kesan menonjolkan lalai apabila diklik, dan mencapai pusat mendatar borang.

Fahami isu gaya lalai Borang Carian Elementor

Widget Borang Carian Elementor biasanya mewarisi beberapa gaya lalai tema atau penyemak imbas, seperti sempadan kotak input, garis biru atau kesan kotak bayang-bayang apabila diklik. Gaya lalai ini mungkin tidak sepadan dengan reka bentuk keseluruhan laman web anda, menyebabkan ketidakharmonian visual. Di samping itu, meletakkan borang dengan tepat di tengah halaman mungkin memerlukan pelarasan susun atur tambahan.

Kaedah Penyesuaian Teras: Menggunakan CSS tersuai

Elementor membolehkan anda menambah kod CSS tersuai dalam tab lanjutan setiap widget. Ini adalah cara yang paling langsung dan berkesan untuk mencapai kawalan yang baik. Dengan menulis peraturan CSS untuk unsur -unsur tertentu di dalam widget (seperti kotak input, bekas, butang), kita boleh mengatasi gaya lalainya.

Langkah Operasi:

1. Cari widget borang carian: Dalam editor Elementor, pilih widget Borang Carian yang anda mahu menyesuaikan.
2. Akses pilihan CSS tersuai: Di ??panel Elementor di sebelah kiri, beralih ke tab Lanjutan dan mengembangkan bahagian CSS tersuai.
3. Tulis dan gunakan kod CSS: Masukkan kod CSS anda di kawasan teks yang disediakan. Sila ambil perhatian bahawa dalam persekitaran CSS Custom Elementor, kata kunci pemilih secara automatik menunjuk kepada elemen akar widget yang sedang anda edit.

Kod penyesuaian gaya terperinci dan penjelasan

Berikut adalah blok kod CSS untuk keperluan penyesuaian umum untuk borang carian (membuang sempadan, garis besar, gaya fokus, dan berpusat).

 /* 1. Keluarkan latar belakang lalai bentuk carian carian*/
/* 
   Borang carian elemen biasanya mempunyai elemen kontena, mungkin dengan warna latar belakang.
   Peraturan ini menjadikan latar belakangnya telus untuk menggabungkan ke latar belakang bekas induk.
*/
pemilih .elementor-search-form__container {
    latar belakang warna: telus! Penting;
}

/* 2. Sesuaikan gaya kotak input carian*/
/* 
   Peraturan ini menetapkan semula dan mencantikkan kotak input carian (input [type = "carian"]).
   - Latar Belakang warna: Tetapkan warna latar belakang kotak input.
   - Sempadan: Tiada; membuang sempadan lalai.
   - Garis besar: Tiada; Mengeluarkan garis lalai yang dipaparkan oleh penyemak imbas apabila elemen mempunyai tumpuan.
   - Radius sempadan: 0px; Mengeluarkan sudut bulat dan menjadikan kotak input kelihatan betul-betul.
   - Padding: Meningkatkan jarak antara teks di dalam kotak input dan sempadan.
   - Lebar: 100%; Membuat kotak input mengisi lebar yang tersedia dari bekas induknya.
   -Box-Sizing: Border-box; Memastikan padding dan sempadan tidak meningkatkan lebar keseluruhan elemen.
*/
input pemilih [type = "carian"] {
    latar belakang warna: #fff; /* Warna latar belakang kotak input*/
    Sempadan: Tiada; /* Keluarkan sempadan lalai*/
    Garis besar: Tiada; /* Keluarkan garis besar fokus lalai*/
    Radius sempadan: 0px; /* Keluarkan sudut bulat*/
    Padding: 10px 15px; /* Meningkatkan padding*/
    Lebar: 100%; /* isi lebar yang ada*/
    saiz kotak: kotak sempadan; /* Pelarasan model kotak*/
    /* margin-kanan: 20px; *// *Jika terdapat jurang antara kotak input dan butang, anda boleh mengosongkannya */
}

/ * 3. Keluarkan gaya kotak input apabila difokuskan (diklik) */
/* 
   Peraturan ini secara khusus mengendalikan gaya kotak input apabila ia diklik atau fokus.
   Pastikan anda menghapuskan sempadan lalai, garis besar, atau kesan bayangan untuk mengekalkan konsistensi gaya.
*/
input pemilih [type = "carian"]: fokus {
    Sempadan: Tiada; / * Pastikan lagi bahawa tidak ada sempadan ketika fokus */
    Garis besar: Tiada; /* Pastikan tidak ada garis besar ketika memfokuskan lagi*/
    Box-shadow: Tiada; /* Keluarkan kemungkinan kesan bayangan*/
}

/* 4. (Pilihan) Sesuaikan gaya butang carian*/
/* 
   Jika borang carian anda mengandungi butang hantar, peraturan ini boleh menggayakannya.
   Anda boleh menyesuaikan warna latar belakang, warna teks, sempadan, dan lain -lain seperti yang diperlukan.
*/
pemilih .elementor-search-form__submit {
    latar belakang warna: #4CAF50; /* Warna latar belakang butang*/
    Warna: Putih; /* warna teks butang*/
    Sempadan: Tiada;
    Radius sempadan: 0px;
    Padding: 10px 15px;
    kursor: penunjuk;
    / * Gaya lain seperti saiz fon, kesan hover, dan lain -lain */
}

/* 5. (Advanced) Pusat keseluruhan bentuk carian widget secara mendatar*/
/* 
   Secara umumnya terdapat dua cara untuk memusatkan widget itu sendiri:
   a) Jika widget adalah elemen peringkat blok dan mempunyai lebar tetap, anda boleh menggunakan margin: 0 auto;
   b) Kaedah yang lebih fleksibel adalah menjadikannya bekas flex dan menggunakan atribut kandungan Justify.

   Nota: Kesan kaedah ini bergantung kepada tingkah laku lalai widget dan susun atur bekas induknya (elemen lajur).
   Dalam sesetengah kes, anda mungkin perlu menyesuaikan penjajaran dalam tetapan lajur.
*/
pemilih {
    /* Kaedah 1: Jika widget mempunyai lebar tetap dan merupakan elemen tahap blok*/
    /* max-width: 400px; *//*Tetapkan lebar maksimum*/
    /* margin: 0 auto; *// *Berpusat secara mendatar */

    / * Kaedah 2: Tetapkan bekas widget ke bekas flex untuk memusatkan kandungan dalamannya (kotak input dan butang) */
    Paparan: Flex; /* Tetapkan bekas widget ke bekas flex*/
    Justify-Content: Center; /* mendatar memusatkan kandungan dalamannya*/
    Align-item: pusat; / * Berpusat secara menegak (jika perlu, seperti ketika kotak input dan butang adalah ketinggian yang berbeza) */
    Lebar: 100%; /* Pastikan bekas flex menduduki lebar yang cukup*/
}

Nota dan ringkasan

• Kata kunci pemilih: Di kawasan CSS Custom Elementor, pemilih secara automatik digantikan dengan kelas atau ID CSS unik widget semasa, memastikan gaya yang anda tulis hanya memohon kepada widget tertentu.
• Penggunaan! Penting: Pengisytiharan penting digunakan untuk meningkatkan keutamaan peraturan CSS dan memaksa mengatasi gaya lain yang mungkin. Walaupun ia dapat menyelesaikan masalah keutamaan, berlebihan boleh membuat CSS sukar untuk dijaga. Adalah disyorkan untuk hanya menggunakannya jika anda benar-benar perlu mengatasi gaya pihak ketiga atau gaya lalai tema.
• Ujian dan Debugging: Selepas menambah kod CSS, pastikan anda menyimpan halaman dan pratontonnya. Jika ia tidak berfungsi seperti yang diharapkan, anda boleh menggunakan alat pemaju penyemak imbas (tekan F12) untuk memeriksa elemen untuk melihat peraturan CSS yang berkuatkuasa dan debug kod anda.
• Reka bentuk responsif: Pertimbangkan bagaimana borang akan muncul pada saiz skrin yang berbeza. Anda boleh menggunakan pertanyaan media (@media peraturan) untuk gaya gaya yang berbeza untuk peranti mudah alih, tablet, dll.
• Isu -isu yang berpusat: Memusatkan widget kadang -kadang boleh menjadi rumit kerana ia tidak hanya bergantung pada css widget itu sendiri, tetapi juga pada tetapan susun atur bekas induknya (seperti lajur Elementor). Jika CSS yang berpusat di atas tidak berfungsi, periksa tetapan susun atur untuk lajur yang mengandungi borang carian dan cuba menyesuaikan pilihan penjajaran mendatar.

Dengan kod CSS terperinci di atas dan panduan cara, anda harus dapat mengawal gaya dan kedudukan borang carian elemen anda supaya ia menyatu dengan sempurna ke dalam reka bentuk laman web anda dan memberikan pengalaman pengguna yang lancar. Custom CSS adalah alat yang berkuasa untuk penyesuaian lanjutan Elementor. Menguasai ia boleh mengambil reka bentuk laman web anda ke peringkat seterusnya.

Atas ialah kandungan terperinci Panduan penyesuaian dan kedudukan yang mendalam untuk borang carian elemen. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!