Baru-baru ini salah satu pembaca kami yang tidak memiliki Elementor versi Pro menantang kami tentang cara menambahkan CSS khusus ke situs webnya.
Karena masalahnya sedikit lebih rumit, kami pikir beberapa pengguna mungkin menghadapi masalah ini. Jadi kami memutuskan untuk memberikan artikel terperinci tentang cara menuju ke sana.
Pada artikel ini, kami akan menunjukkan cara mudah menambahkan CSS khusus ke halaman atau situs Elementor.
Tiga cara untuk menambahkan CSS khusus ke halaman atau situs Elementor adalah sebagai berikut:
- Tambahkan kode CSS melalui elemen HTML.
- Melalui plugin Kode cuplikan.
- Menggunakan Penyesuai Tema Elementor
Metode 1: Tambahkan kode CSS dari elemen HTML Elementor
Gunakan metode ini jika Anda ingin menambahkan CSS hanya ke satu halaman.
Langkah 1: Seret dan lepas elemen HTML Elementor
Anda dapat menempatkan elemen HTML ini di mana saja pada halaman, dan itu akan berfungsi dengan baik.
Langkah 2: Klik ikon Edit HTML
Klik pada ikon Sunting html di sebelah kanan elemen HTML Elementor. Mengkliknya akan memunculkan kotak alat pengeditan HTML di sisi kiri layar.
Langkah 3: Tambahkan kode CSS Anda
- Klik pada tab Isi dan buka daftar tarik-turun Kode HTML.
- Tempatkan kode CSS Anda di suar.
Metode 2: CSS Kustom untuk Elementor melalui plugin Cuplikan Kode
Manfaat menggunakan plugin Cuplikan Kode:
- Jika Anda ingin mengubah atau memperbarui tema WordPress Anda, CSS akan selalu diterapkan.
- Ini adalah cara yang paling nyaman dan efisien untuk menambahkan kode CSS karena Anda dapat mengaktifkan atau menonaktifkan kode CSS seperti plugin.
Langkah 1: Buka menu ekstensi di dasbor Anda
Langkah 2: Tambahkan plugin baru
Klik pada tombol Tambahan »Untuk mengakses halaman penambahan plugin baru.
- Cari pluginnya" code Snippets ".
- Instal dengan mengklik tombol install sekarang setelah hasil penelitian positif.
Langkah 3: Aktifkan plugin
Klik pada tombol mengaktifkan »Setelah instalasi selesai untuk mengaktifkan plugin Cuplikan Kode.
Langkah 4: Buka halaman plugin dan tambahkan potongan kode
- Buka menu Ekstrak dari dasbor Anda
- Klik tombol Nouveau untuk menambahkan cuplikan kode baru
Langkah 5: Buat cuplikan dan aktifkan
- Beri nama cuplikan kode Anda.
- Di dalam tag, tulis kode Anda. Kode ini tersedia di bawah untuk disalin.
- Klik pada tombol Simpan Perubahan Untuk menyimpan cuplikan kode.
- Setelah menyimpan CSS, klik " mengaktifkan Untuk mengaktifkan kode CSS.
Salin kode
add_action( 'wp_head', function () { ?>
<style>
//VOTRE CODE ICI
</style>
<?php } );Metode 3: Gunakan Penyesuai Tema Elementor
Catatan: Berhati-hatilah sebelum menggunakan metode ini karena jika Anda mengubah tema, Anda akan kehilangan CSS khusus ini.
Langkah 1: Buka penyesuai tema
Buka situs web Anda dan klik opsi penyesuaian di bilah navigasi atas. Ini akan membuka jendela kustomisasi tema.
Langkah 2: Klik pada tab CSS tambahan
Ini akan membuka halaman entri CSS.
Langkah 3: Tambahkan kode CSS Anda
Bagus! Sekarang Anda tahu cara mudah menambahkan CSS khusus ke halaman atau situs web Elementor. Ini akan membuat desain halaman web unik di Elementor Free lebih fleksibel.
Dapatkan Elementor Pro Sekarang!
Temukan juga beberapa plugin WordPress premium
Anda dapat menggunakan yang lain plugin WordPress untuk memberikan tampilan yang modern dan untuk mengoptimalkan penanganan blog atau website Anda.
Kami menawarkan kepada Anda beberapa plugin WordPress premium yang akan membantu Anda melakukannya.
1. FileBird
Pernahkah Anda kesulitan mengelola ribuan file gambar, video, atau dokumen yang Anda unggah ke FTP WordPress Anda? ya atau tidak, tidak masalah, yang penting adalah mengetahui bahwa WordPress Plugin FileBird akan membantu Anda mengelola file media dengan mudah dan membawa lebih banyak kekuatan ke perpustakaan Anda.
Antarmuka pengguna yang mulus dan menu konteks memungkinkan pengguna untuk menyeret dan meletakkan file ke folder atau memiliki hak yang diperlukan untuk dengan cepat membuat, mengganti nama atau menghapus folder dengan cara yang sama seperti yang Anda lakukan pada komputer Anda.
Dengan plugin ini di tangan, file media Anda akan diatur secara sistematis dan Anda dapat dengan mudah memilih gambar untuk dimasukkan ke halaman atau menerbitkannya. Selain itu, plugin ini sepenuhnya kompatibel dengan plugin paling populer, terutama dengan WooCommerce, dan juga mendukung sejumlah besar bahasa.
Untuk mengetahui lebih lanjut, temukan Bagaimana mengelola file dan folder WordPress
Jadi jika Anda ingin memberi dorongan kepada mengelola perpustakaan media Anda, yang WordPress Plugin FileBird bisa menjadi senjata rahasia Anda.
Download | Demo | Hébergement Web
2. Kategori Peningkatan Ultimate WooCommerce
Ce WordPress Plugin memungkinkan Anda untuk dengan mudah memodifikasi daftar panjang kategori WooCommerce yang membosankan, dan menggantinya dengan berbagai tingkat sub-item dalam menu akordeon.
Fungsi utamanya adalah: kemungkinan untuk mengaktifkannya dan akhirnya berfungsi secara otomatis (tidak perlu parameter!), Dukungan untuk berbagai tingkat kategori (kategori, sub-kategori, dll.), Penyorotan kategori aktif, membuka semua kategori induk jika kategori saat ini ada di dalam, kompatibilitas dengan apa pun Tema WooCommerce, responsif terhadap keinginan, pembaruan gratis dan dukungan pelanggan yang sangat aktif.
Download | Demo | Hébergement Web
3. WavePlayer
Seperti yang bisa Anda tebak dari namanya, WavePlayer adalah plugin pemutar audio yang mengambil bentuk gelombang dari file audio yang diputar. Dengan plugin ini, Anda dapat menghosting trek atau sekadar mengintegrasikannya dengan layanan lain.hosting awan, seperti SoundCloud.
Itu juga dapat digunakan untuk tujuan podcasting dan menawarkan fitur-fitur lain seperti: dukungan HTML5, tata letak responsif, integrasi WooCommerce, dll ...
Anda juga akan dapat membuat playlist secara visual sebelum menerbitkannya. Fitur penting lainnya adalah kecepatan dan efisiensinya.
Download | Demo | Hébergement Web
Sumber Daya yang Direkomendasikan
Cari tahu tentang sumber daya lain yang direkomendasikan untuk membantu Anda membangun dan mengelola situs web Anda.
- Cara kompres dan mengubah ukuran gambar pada WordPress
- Bagaimana untuk memiliki alamat email dengan WordPress hosting
- Cara mengubah nama gambar pada blog WordPress
- Bagaimana menemukan link ke halaman login WordPress
Kesimpulan
Di sini! Itu saja untuk tutorial ini, kami harap ini membantu Anda menambahkan CSS khusus ke Elementor secara gratis. Jangan ragu untuk berbagi dengan teman-teman Anda di jejaring sosial favorit Anda.
Namun, Anda juga akan dapat berkonsultasi dengan kami ressources, jika Anda memerlukan lebih banyak elemen untuk melaksanakan proyek pembuatan situs Internet Anda, dengan membaca panduan kami di Pembuatan blog WordPress.
Jika Anda memiliki saran atau komentar, tinggalkan di bagian kami komentar.
...
