Salah satu nilai jual terbesar dari menggunakan page builder seperti Elementor adalah Anda mendapatkan akses ke elemen halaman yang dibuat sebelumnya, atau “widget”. Widget elemen menyertakan banyak opsi penyesuaian dan gaya. Namun, terkadang satu-satunya cara untuk menerapkan gaya tertentu adalah dengan Cascading Style Sheets (CSS).
CSS memberi Anda tingkat kontrol yang luar biasa atas setiap komponen situs web Anda. Menambahkannya ke WordPress sangatlah mudah jika Anda terbiasa dengan bahasanya. Elementor juga menawarkan beberapa opsi untuk menambahkan CSS khusus.
Dalam artikel ini, kita akan berbicara tentang apa itu CSS dan bagaimana Anda dapat menambahkan gaya kustom ke Elementor. Terakhir, kita akan membahas beberapa praktik terbaik untuk menggunakan CSS di WordPress. Mari kita mulai!
Apa itu CSS?
CSS adalah apa yang kami sebut bahasa “stylesheet”. Anda dapat menggunakan stylesheet CSS untuk menambahkan gaya kustom ke HTML atau XML dokumen. Dengan menggunakan CSS, Anda dapat mengambil halaman HTML dasar dan mengubahnya menjadi desain tampak modern.
Pikirkan tentang CSS sebagai bahasa yang menjelaskan bagaimana elemen akan muncul di browser. Ia bekerja di semua browser dan merupakan salah satu bahasa inti internet.
Misalnya, ini adalah kode CSS yang akan Anda gunakan untuk menetapkan warna latar belakang ke badan dokumen HTML:
body {
background-color: red;
}Anda dapat menggunakan CSS untuk menerapkan gaya ke komponen, kelas, dan ID tertentu dalam HTML. Misalnya, cuplikan berikut akan menerapkan warna dan perataan teks tertentu ke semua H2 di halaman:
h2 {
color: black;
text-align: left;
}Biasanya, saat Anda memuat halaman HTML, itu juga akan memuat lembar gaya terpisah yang menyertakan semua kode CSS. Ini berarti Anda dapat menggunakan kembali stylesheet di beberapa halaman.
Anda bebas menerapkan kode CSS langsung ke mana saja halaman HTML. Anda juga dapat menggunakannya “sebaris”. Ini adalah istilah yang mengacu pada kode CSS yang berlaku untuk satu elemen HTML dan berada di dalam file itu.
Berikut adalah contoh CSS sebaris untuk header H2 tertentu:
<h2 style="color:black;text-align:center;">This is where the heading text goes</h1>Ini dianggap sebagai praktik terbaik untuk tambahkan CSS ke lembar gaya terpisah. Namun, salah satu dari banyak keuntungan menggunakan WordPress dan Elemen adalah Anda dapat menambahkan CSS tanpa mengedit file secara manual. Mari kita lihat lebih dekat cara kerjanya.
Opsi CSS Kustom di Elementor
Jika Anda terbiasa dengan Elementor, Anda akan tahu bahwa pembuatnya menggunakan bagian, kolom, dan widget untuk membantu Anda menyusun halaman. Bagian berisi satu atau beberapa kolom, dan setiap kolom dapat memiliki beberapa modul:
Salah satu bagian terbaik menggunakan Elementor adalah Anda dapat menambahkan kode CSS terpisah di tingkat bagian, kolom, dan widget. Saat Anda mengarahkan kursor ke bagian, Anda dapat memilih ikon enam titik untuk membuka Sunting Bagian menu di sisi kiri layar:
Jika Anda pindah ke Canggih tab di dalam Sunting Bagian menu, Anda akan melihat CSS khusus bagian. Di dalam, Anda akan menemukan bidang yang memungkinkan Anda menambahkan kode untuk bagian tertentu itu:
Saat Anda mengedit kolom dan widget, Anda akan melihat bahwa Anda memiliki akses ke tiga tab yang sama di masing-masing menu pengaturan. Bagian, kolom, dan widget semuanya menyertakan tata letak, gaya, dan pengaturan lanjutan.
Untuk menambahkan CSS khusus ke kolom, arahkan kursor ke atasnya dan pilih ikon dua kolom di sudut kanan atas elemen. Kemudian, navigasikan ke Canggih opsi dan buka CSS khusus bagian:
Anda dapat mengikuti proses yang sama untuk menambahkan CSS khusus ke widget Elementor. Cukup pilih widget yang ingin Anda sesuaikan dan pindahkan langsung ke Lanjutan > CSS Khusus tab:
Menambahkan CSS khusus ke elemen tertentu dalam pembuat halaman Elementor sangat mudah. Namun, perlu diingat bahwa gaya hanya akan berlaku untuk elemen tersebut. Jika Anda ingin menambahkan CSS khusus yang memengaruhi seluruh situs Anda, Anda harus menggunakan pendekatan yang berbeda.
Cara Menambahkan CSS Kustom Menggunakan Elementor (5 Metode)
Di bagian ini, kita akan mengeksplorasi cara lain untuk menambahkan CSS kustom Elementor. Kami akan membahas metode yang menerapkan CSS di seluruh situs web Anda, ke halaman tertentu, dan ke widget Elementor.
Metode 1: Gunakan Widget Elementor HTML
Elementor memungkinkan Anda menambahkan CSS khusus ke salah satu widgetnya. Namun, dalam beberapa kasus, Anda mungkin ingin menambahkan elemen secara manual menggunakan HTML dan CSS. Dalam kasus tersebut, Anda harus menggunakan HTML widget:
Itu HTML widget dapat mengurai HTML, CSS, dan JavaScript. Anda dapat menambahkan kode apa pun yang Anda inginkan di dalam Kode HTML bidang dan jika valid, Elementor akan menampilkannya sebagai widget:
Itu HTML widget mendukung CSS inline dan standalone. Kode apa pun yang Anda tambahkan menggunakan widget hanya akan memengaruhi elemen tunggal itu.
Metode 2: Gunakan Menu Pengaturan Situs Elementor
Elementor menyertakan kumpulan pengaturan global yang menyerupai opsi yang dapat Anda temukan di WordPress Customizer. Untuk mengakses Elementor Pengaturan Situs menu, buka editor dan klik menu hamburger di sudut kiri atas layar:
Di halaman berikutnya, pilih Pengaturan Situs pilihan:
Di dalamnya Anda akan melihat kumpulan pengaturan yang memungkinkan Anda untuk menyesuaikan gaya situs Anda. Setiap perubahan yang Anda buat dalam menu ini akan diterapkan ke seluruh situs Anda, meskipun secara teknis Anda hanya mengedit satu halaman.
Anda dapat membaca tentang caranya menggunakan Pengaturan Situs Tidak bisa untuk menyesuaikan halaman Anda di situs Elementor resmi. Untuk saat ini, satu-satunya bagian yang kami pedulikan adalah CSS khusus tab. Buka dan Anda akan melihat bidang yang terlihat seperti opsi CSS khusus untuk bagian, widget, dan kolom:
Setiap CSS khusus yang Anda tambahkan di sini akan memengaruhi seluruh situs web Anda. Jika Anda hanya ingin menyesuaikan elemen tertentu, sebaiknya gunakan pendekatan yang lebih bertarget (seperti menambahkan CSS langsung ke widget).
Metode 3: Gunakan Penyesuai WordPress
Penyesuai WordPress juga memungkinkan Anda menambahkan CSS khusus di seluruh situs. Untuk melakukannya, buka Penampilan > Sesuaikan dan pilih CSS tambahan pilihan di menu sebelah kiri:
Namun, perlu dicatat bahwa bidang kode Elementor lebih ramah pengguna daripada yang tersedia di Penyesuai. Jika Anda sudah menggunakan Elementor untuk pembuatan situs, tidak ada alasan untuk menambahkan CSS khusus melalui Customizer.
Metode 4: Enqueue File CSS Kustom
Jika Anda nyaman mengedit file WordPress dan mengakses situs web Anda melalui a Protokol Transfer File (FTP) klien, Anda dapat mengantrekan stylesheet CSS untuk dimuat dengan Elementor. Pendekatan ini mengharuskan Anda untuk menambahkan kode ke WordPress function.php mengajukan.
Untuk mengakses function.php file, sambungkan ke situs web Anda melalui FTP dan buka WordPress akar map. Buka foldernya, temukan function.php file, dan mengeditnya.
Berikut ini contoh kode yang ingin Anda tambahkan ke file:
add_action( 'elementor/frontend/before_enqueue_scripts', function() {
wp_enqueue_script(
'custom-stylesheet',
get_stylesheet_uri()
);
} );Kode itu menggunakan sebelum_enqueue_scriptskait untuk memuat lembar gaya yang disebut lembar gaya khusus. Kami juga menggunakan get_stylesheet_uriberfungsi untuk menunjuk ke arah lokasi stylesheet di server.
Idealnya, Anda akan menambahkan lembar gaya khusus di dalam direktori tema anak Anda atau di Tema foldernya sendiri. Stylesheet dapat berisi kode Elementor CSS apa pun yang Anda inginkan. Cuplikan yang Anda tambahkan ke function.php memastikan bahwa kode hanya dimuat saat Elementor aktif di situs web Anda.
Metode 5: Gunakan Plugin CSS
Ada beberapa plugin yang memungkinkan Anda menambahkan CSS khusus ke situs web Anda tanpa menggunakan Customizer atau pembuat halaman. Salah satu alat favorit kami untuk pekerjaan itu disebut CSS dan JS Kustom Sederhana:
Dengan CSS dan JS Kustom Sederhana, Anda mendapatkan opsi untuk menambahkan kode langsung ke elemen header dan footer tema Anda. Untuk memulai, buka CSS & JS Kustom > Tambahkan CSS Kustom dan klik Tambahkan Kode CSS.
Editor CSS dasar akan muncul di sebelah kiri. Di sebelah kanan, Anda dapat mengonfigurasi apakah akan memuat kode CSS dalam lembar gaya eksternal atau secara internal. Anda juga dapat memutuskan apakah kode harus diletakkan di header atau footer:
Setelah selesai mengedit kode CSS, tekan tombol Menerbitkan tombol. Anda mungkin perlu beralih ke tampilan front-end untuk melihat kode beraksi.
Praktik Terbaik untuk Membuat CSS Kustom Dengan Elementor
Setiap kali Anda berurusan dengan CSS khusus atau menambahkan jenis kode apa pun ke situs web Anda, sebaiknya Anda mengingat praktik terbaik berikut. Mari kita mulai dengan menggunakan tema anak.
Gunakan Tema Anak WordPress
Jika Anda ingin mengubah bagian mana pun dari tema Anda gaya menggunakan CSS, kami menyarankan Anda gunakan tema anak. Tema “anak” adalah templat yang mewarisi semua gaya tema yang ditentukan.
Dengan cara ini, jika Anda membuat perubahan apa pun pada tema asli, perubahan tersebut tidak akan memengaruhi penyesuaian yang Anda tambahkan ke turunan. Selain itu, ketika Anda memperbarui tema Anda, itu akan mempertahankan perubahan ini.
Gunakan Preprocessor Kode untuk Menulis Lebih Mudah
Salah satu tantangan terbesar dalam menambahkan kode di WordPress atau menggunakan Elementor adalah Anda tidak mendapatkan akses ke semua fungsi yang ditawarkan editor kode modern. Alih-alih mempermasalahkan kode menggunakan editor dasar di tempat, kami sarankan Anda gunakan preprosesor favorit Anda. Kemudian, Anda cukup menyalin dan menempelkan kode Anda ke WordPress.
Ringkasan
Menambahkan CSS kustom Elementor lebih mudah dari yang Anda bayangkan. Pembuat halaman menawarkan beberapa metode untuk menambahkan kode ke bagian, kolom, widget, dan untuk seluruh situs web Anda.
Untuk rekap, berikut adalah lima cara utama untuk menambahkan CSS khusus ke Elementor (atau situs web Anda secara umum):
- Gunakan Widget HTML Elementor.
- Gunakan menu Pengaturan Situs Elementor.
- Gunakan Penyesuai WordPress.
- Buat antrean file CSS khusus.
- Gunakan plugin CSS.