What This Page Does

Manajer Gaya memungkinkan Anda menyesuaikan tampilan dan rasa website Anda tanpa menulis kode apapun. Klik pada setiap elemen yang Anda lihat di situs Anda dan ubah warnanya, fonta, jarak, bayangan, dan banyak lagi. Anda dapat membuat gaya yang berbeda untuk mode cahaya dan mode gelap, menguji bagaimana hal-hal terlihat pada perangkat bergerak, dan menerapkan perubahan ke halaman tertentu atau seluruh situs Anda.

Anggap saja seperti editor visual yang duduk di atas situs Anda, membiarkan Anda menunjuk dan klik untuk membuat perubahan desain seketika.

[Cuplikan Layar: kontes-overview]

Bagaimana mendapatkan sini

Navigasi ke Panel Admin > Templat > Manajer Gaya

Memahami Halaman

Ketika Anda pertama kali membuka Manajer Gaya, Anda akan melihat dua area utama berdampingan:

Panel Kiri: Penyunting Gaya

Ini adalah panel kendali Anda dengan tujuh tab untuk pilihan gaya yang berbeda:

• Warna - Warna dan latar belakang teks (termasuk gradien)
• Typografi - Fonta, ukuran, dan pemformatan teks
• Jarak - Padding dan margin
• Batas - Gaya batas, widget, warna, dan bayangan
• Tata Letak - Tampilan pengaturan, posisi, dan flexbox
• Efek - Opasitas, transformasi, dan filter
• Ukuran - Lebar, tinggi, dan rasio aspek

Ketika Anda memilih elemen pada situs Anda, panel ini menunjukkan gaya saat ini dan memungkinkan Anda mengubahnya.

Panel Kanan: Pratilik Langsung

Ini menunjukkan situs web Anda yang sebenarnya di jendela pratilik. Anda bisa:

• Navigasi ke halaman yang berbeda
• Klik elemen untuk memilih dan gaya mereka
• Jungkitkan antar desktop, tablet, dan tilikan mobile
• Berpindah antara mode cahaya dan gelap
• Lihat perubahan Anda seketika seperti yang Anda buat mereka

Kontrol Atas

Bilah header termasuk:

• Mode Cahaya / Mode Gelap tombol - pilih mode mana yang sedang anda sunting
• Simpan Semua - Simpan semua perubahan gaya Anda
• Reset Semua - Hapus semua gaya gubahan dan mulai segar

Tugas Umum

Cara Menggaya Elemen

Ini adalah alur kerja dasar yang akan Anda gunakan untuk semua tugas styling.

1. Klik Mode Sunting tombol (ikon kursor) dalam bilah alat pratilik.
2. Indikator "Edit Mode Aktif" hijau muncul di bagian atas layar Anda.
3. Pindahkan tetikus Anda ke atas elemen dalam pratilik - mereka akan menyoroti dengan garis biru.
4. Klik suatu elemen untuk memilihnya.
5. Anda akan melihat informasi tentang elemen yang dipilih di bagian atas panel kiri.
6. Gunakan tab (Warna, Typografi, dsb.) untuk mengubah bagaimana tampilannya.
7. Perhatikan perubahan Anda muncul seketika di pratinjau.
8. Ketika Anda senang dengan perubahan, klik Simpan Perubahan di bagian bawah panel kiri.

[Cuplikan layar: memilih -dan -editing -elemen]

Cara Mengubah Warna

Setelah memilih suatu elemen:

1. Klik Warna tab di panel kiri.
2. Memperluas Warna Teks bagian untuk mengubah warna teks.
3. Klik warna swatch (warna persegi) untuk membuka pemetik warna.
4. Pilih warna atau ketik kode hex di bidang teks.
5. Pemutakhiran elemen segera dalam pratinjau.

Untuk mengubah latar belakang:

1. Di Warna tab, memperluas Latar Belakang bagian.
2. Pilih Solid untuk satu warna atau Gradien untuk campuran warna.
3. Untuk latar belakang yang solid, klik warna dan pilih warnamu.
4. Periksa Transparan jika Anda ingin tidak ada latar belakang sama sekali.

[Cuplikan layar: warna -pecker -interface]

Cara Membuat Gradien Latar Belakang

Gradiasi berbaur beberapa warna bersama-sama lancar.

1. Pilih elemen Anda dan pergi ke Warna tab.
2. Ekspansi Latar Belakang dan klik Gradien Tombol.
3. Pilih suatu arah dengan mengklik salah satu dari 8 tombol arah (atau masukkan suatu sudut gubahan).
4. Anda akan melihat setidaknya 2 warna berhenti. Klik setiap warna swatch untuk memilih warna.
5. Atur slider posisi (0-100%) untuk mengontrol dimana setiap warna muncul.
6. Klik + Tambah Stop untuk menambahkan lebih banyak warna untuk gradien Anda.
7. Klik tombol X di sebelah stop warna untuk menghapusnya (Anda harus menyimpan setidaknya 2).
8. Perhatikan gradien pratinjau bar update saat Anda membuat perubahan.

[Cuplikan: Gradient- pembangun]

Cara Ubah Fonta dan Teks

Setelah memilih teks atau elemen lain dengan teks:

1. Klik Typografi tab.
2. Ekspansi & Ukuran Keluarga Fonta.
3. Pilih fonta dari Keluarga Fonta dropdown (Roboto, Inter, Montserrat, dll).
4. Set Ukuran Fonta menggunakan masukan nomor dan pilih satuan (px, rem, em, atau%).
5. Pilih Berat Fonta untuk membuat tipis teks atau lebih berani (400 adalah normal, 700 adalah tebal).

Untuk format teks:

1. Memperluas Memformat Teks bagian.
2. Klik tombol alignmen untuk menyelaraskan kiri, tengah, kanan, atau benar.
3. Pilih Transformasi Teks untuk membuat teks UPPERCASE, huruf kecil, atau capitalisasi.
4. Pilih Dekorasi Teks untuk menambahkan garis bawah, garis-garis, atau garis-garis.

[Cuplikan layar: opsi typographi]

Cara Tambah Jarak

Ruang kontrol ruang kosong di sekitar dan di dalam elemen.

1. Pilih elemen Anda dan klik Jarak tab.
2. Ekspansi Isian dan masukkan sebuah angka untuk menambah ruang di dalam elemen.
3. Ekspansi Marjin dan masukkan sebuah nomor untuk menambahkan ruang di luar elemen.

Bagaimana cara menambah Batas dan Bayangan

Setelah memilih suatu elemen:

1. Klik Batas tab.
2. Ekspansi Batas untuk menyesuaikan perbatasan.
3. Pilih Gaya Batas (Solid, Dashed, Dotted, dll)
4. Set Lebar Batas dalam piksel.
5. Klik Warna Batas swatch untuk memilih warna.
6. Set Radius Batas untuk putaran sudut.

Untuk menambahkan bayangan:

1. Memperluas Bayangan Kotak bagian.
2. Klik tombol preset bayangan (None, SM, MD, LG, XL) untuk gaya bayangan umum.
3. Atau ketik nilai bayangan gubahan di Bayangan Kustom lapangan.

[Cuplikan layar: Border- dan- bayangan - kontrol]

Bagaimana Efek Gaya Hover

Efek samping memicu ketika seseorang menggerakkan mouse mereka melalui elemen (seperti tombol).

1. Pilih elemen yang ingin Anda tambahkan efek hover.
2. Carilah Pemilih Negara batang di bawah informasi elemen.
3. Klik : hover Tombol.
4. Pemilih menampilkan pemutakhiran untuk menampilkan gaya hover penyuntingan.
5. Buat perubahan - coba ubah warna latar belakang atau tambah transformasi.
6. Pindahkan tetikus Anda ke atas elemen dalam pratilik untuk melihat efek hover.
7. Klik Simpan Perubahan ketika dilakukan.

[Cuplikan layar: state-selector- hover]

Bagaimana Gaya Untuk Mode Cahaya dan Gelap Terpisah

Situs Anda dapat terlihat berbeda dalam mode cahaya versus mode gelap.

1. Klik Mode Cahaya dalam header untuk menyunting gaya mode cahaya.
2. Pilih elemen dan ubah sesuai yang diinginkan.
3. Klik Simpan Perubahan untuk setiap elemen.
4. Klik Mode Gelap dalam header untuk beralih ke mode gelap penyuntingan.
5. Pratilik secara otomatis beralih ke mode gelap sehingga Anda dapat melihat apa yang Anda edit.
6. Pilih elemen yang sama dan gubahan mereka untuk mode gelap.
7. Simpan mode gelap Anda perubahan.

Bagaimana menerapkan Styles ke Halaman Khusus

Secara baku, gaya berlaku untuk seluruh situs Anda. Tapi Anda dapat membuat gaya yang hanya muncul di halaman tertentu.

Manajer Gaya secara otomatis mendeteksi halaman mana yang Anda lihat:

Untuk menerapkan pawai-gaya spesifik:

1. Gunakan navigasi pratinjau untuk pergi ke halaman yang ingin Anda gubahan.
2. Klik Mode Sunting dan memilih elemen pada halaman itu.
3. Membuat perubahan gaya Anda.
4. Klik Simpan Perubahan.
5. Gaya-gaya ini hanya akan berlaku untuk halaman tertentu.

Bagaimana cara Reset Styles

Reset Elemen Tunggal:

1. Pilih elemen yang ingin Anda reset.
2. Klik Reset Elemen di bagian bawah panel kiri.
3. Konfirmasi dengan mengklik OK di popup.
4. Semua gaya kustom untuk elemen yang dihapus.
5. Elemen kembali ke penampilan aslinya.

Reset Semuanya:

1. Klik Reset Semua di header.
2. Baca peringatan dengan hati-hati - ini menghapus SEMUA gaya custom Anda.
3. Klik OK untuk mengkonfirmasi.
4. Semua gaya kustom di seluruh situs Anda dihapus.
5. Situs Anda kembali ke penampilan standar.

Kontrol Pratilik

Batang Alat Navigasi

toolbar di bagian atas pratinjau memungkinkan Anda menavigasi dan mengontrol pratinjau:

Pratilik Perangkat

Uji bagaimana gaya Anda terlihat pada ukuran layar yang berbeda dengan mengklik tombol-tombol ini dalam tajuk pratinjau:

Pratilik menyusut ke ukuran yang dipilih dengan batas bayangan sehingga Anda dapat melihat bagaimana pengguna seluler akan melihat situs Anda.

[Cuplikan: responsive- preview- mode]

Jungkit Mode Gelap

Ikon bulan pada tajuk pratilik menjungkitkan pratinjau antara mode cahaya dan gelap. Ini terpisah dari tombol mode pada header utama:

• Tombol mode header - Kontrol gaya yang Anda Saving (cahaya atau gelap)
• Tampilkan tombol bulan - Kontrol mode mana Anda VIEWING

Memahami Tab Gaya

Setiap tab di panel kiri berfokus pada sifat visual yang berbeda.

Tab Warna

• Warna Teks - Warna teks di dalam elemen
• Latar Belakang - Warna, gradien, atau latar belakang transparan
• Gradien Builder - Buat warna halus menyatu dengan beberapa warna berhenti

Tab Typografi

• Keluarga Fonta - Pilih dari fonta web profesional
• Ukuran Fonta - Ukuran teks dengan satuan fleksibel (px, rem, em,%)
• Berat Fonta - Bagaimana tipis atau tebal teks muncul
• Tinggi Baris - Ruang antara baris teks
• Spasi Huruf - Ruang antara huruf individu
• Memformat Teks - Perataan, kapitalisasi, garis bawah, dll.

Tab Spasi

• Isian - Ruang di dalam elemen (antara isi dan perbatasan)
• Marjin - Ruang di luar elemen (antara elemen dan tetangga)

Tab Batas

• Gaya Batas - Solid, berlari, bertitik, atau garis dekoratif
• Lebar Batas - Bagaimana tebal perbatasan
• Warna Batas - Warna garis batas
• Radius Batas - Bagaimana putaran sudut adalah
• Bayangan Kotak - Jatuhkan bayangan untuk membuat kedalaman

Tab Tata Letak

• Tampilan - Bagaimana elemen berperilaku (block, inline, flex, grid, dll)
• Posisi - Bagaimana elemen diposisikan (statis, relatif, mutlak, dll)
• Flexbox - Kontrol untuk mengatur elemen anak dalam baris atau kolom

Tab Efek

• Opasitas - Bagaimana transparan elemen (0% = tak terlihat, 100% = solid)
• Ubah - Skala, putar, atau pindahkan elemen
• Filter - Blur, kecerahan, kontras, dan efek skala abu-abu

Ukuran Tab

• Lebar - Seberapa lebar elemennya
• Tinggi - Seberapa tinggi elemennya
• Lebar Min / Max & Tinggi - Batas ukuran
• Fit Objek - Bagaimana gambar dan video cocok dalam kontainer mereka
• Rasio Aspek - Pertahankan proporsi (persegi, 16: 9, dll)

Tips untuk Pengguna Baru

Penelusuran masalah

Pratilik tidak memuat atau menampilkan halaman kosong

Apa yang kau lihat: Panel kanan kosong, putih, atau menunjukkan kesalahan.

Bagaimana memperbaikinya:

1. Klik Segarkan tombol dalam bilah alat pratilik.
2. Periksa apakah situs Anda bekerja dengan membukanya di tab peramban baru.
3. Jika situs bekerja tapi pratinjau tidak, hubungi administrator situs Anda - ini mungkin masalah konfigurasi.

Saya tidak dapat memilih elemen ketika saya klik mereka

Apa yang kau lihat: Klik elemen di preview tidak melakukan apa-apa.

Bagaimana memperbaikinya:

1. Pastikan Mode Sunting tombol (ikon kursor) disorot dalam warna hijau.
2. Cobalah menyegarkan preview menggunakan tombol penyegaran.
3. Beberapa elemen yang sangat kecil (lebih kecil dari 5x5 piksel) tidak dapat dipilih - coba klik elemen terdekat.

Perubahan saya tidak muncul di situs hidup

Apa yang kau lihat: Perubahan ditampilkan di pratinjau tapi tidak di situs sebenarnya.

Bagaimana memperbaikinya:

1. Pastikan Anda mengklik Simpan Perubahan di bagian bawah panel kiri (tidak hanya Simpan Semua).
2. Bersihkan singgahan peramban dan segarkan situs langsung.
3. Jika Anda melihat situs dalam mode berbeda (cahaya vs gelap), beralih mode untuk melihat apakah perubahan Anda berlaku di sana.

Efek hever tidak bekerja

Apa yang kau lihat: Anda styled negara hover: tapi tidak ada yang terjadi ketika Anda hover.

Bagaimana memperbaikinya:

1. Pastikan Anda mengklik : hover tombol dalam Pemilih Negara sebelum membuat perubahan.
2. Efek samping hanya bekerja dengan mouse - pengguna mobile tidak akan melihat mereka.
3. Periksa apakah gaya situs asli Anda memiliki efek hover yang bertentangan yang menimpa Anda.

Warna terlihat salah atau tidak sesuai apa yang saya pilih

Apa yang kau lihat: Picker warna menunjukkan satu warna tetapi elemen menunjukkan yang lain.

Bagaimana memperbaikinya:

1. Klik elemen lagi untuk memilihnya kembali dan segarkan nilai warna saat ini.
2. Pastikan Anda mengedit properti yang tepat - Warna teks terpisah dari Latar Belakang.
3. Simpan dan segarkan pratinjau untuk melihat hasil akhir.

I can 't save my changes (Save button is grayed out)

Apa yang kau lihat: Simpan Semua dan Reset Semua tombol dinonaktifkan dan tergores keluar.

Bagaimana memperbaikinya:
Panji oranye di bagian atas halaman menunjukkan mode demo diaktifkan. Mode demo mencegah menyimpan perubahan. Jika Anda perlu menyimpan perubahan, hubungi administrator situs Anda untuk menonaktifkan mode demo.

Gradien saya tidak muncul

Apa yang kau lihat: Anda membuat gradien tetapi elemen masih menunjukkan warna padat.

Bagaimana memperbaikinya:

1. Pastikan Anda mengklik Gradien tombol (tidak Solid) dalam daerah Latar Belakang.
2. Periksa bahwa Anda memiliki setidaknya 2 warna berhenti dengan warna yang berbeda.
3. Simpan perubahan dan segarkan pratinjau.

Halaman Terkait

Pemandu ini untuk pemilik situs ComusThumtz dan operator. Ini berfokus pada penggunaan antar muka Manajer Gaya untuk menyesuaikan penampilan situs Anda tanpa coding.