Bu Sayfa Nedir

Style Manager, herhangi bir kod yazmadan web sitenizin görünümünü ve hissini özelleştirmenize izin verir. Sitenizde gördüğünüz herhangi bir elemente tıklayın ve renklerini, fontlarını, spacing, gölgeleri ve daha fazlasını değiştirirsiniz. Işık modu ve karanlık mod için farklı stilleri oluşturabilirsiniz, şeylerin mobil cihazlarda nasıl göründüğünü test edebilirsiniz ve belirli sayfalara veya tüm sitenize değişiklikler uygulayabilirsiniz.

Sitenizin tepesinde oturan görsel bir editör gibi düşünün, size işaret ve tasarım değişiklikleri anında yapmak için tıklayın.

[Screenshot: page-overview]

Nasıl oynanır Here

Navigate to Admin Panel > Şablonlar > Style Manager

Sayfayı Anlayın

Stil Manager'ı ilk açıldığında, iki ana alanı yan yana göreceksiniz:

Sol Panel: Style Editor

Bu, farklı stil seçenekleri için yedi sekme ile kontrol panelinizdir:

• Renkler - Text Color and backgrounds (gradients dahil)
• Typography - Fonts, boyutlar ve metin formatı
• Spacing Spacing - Padding ve marjlar
• Sınırlar - Sınır stilleri, genişlikler, renkler ve gölgeler
• Layoutout Ekran ayarları, konumlandırma ve flexbox
• Etkileri - Opakity, dönüşümler ve filtreler
• Boyut Boyutu - Genişlik, yükseklik ve yön oranı

Sitenizde bir element seçtiğinizde, bu panel mevcut stilleri gösterir ve onları değiştirmenize izin verir.

Doğru Panel: Canlı Preview

Bu, gerçek web sitenizi bir önizleme penceresinde gösterir. Yapabilirsiniz:

• Farklı sayfalara Navigate
• Seçme ve stilize etmek için öğeleri tıklayın
• masaüstü, tablet ve mobil görüş arasında çıkmak
• Işık ve karanlık modlar arasında geçiş
• Değişikliklerinizi anında onları yaptığınız gibi görün

Top Controls

Başlık çubuğu şunları içerir:

• Işık Modu / Dark Mode düğmeler - Hangi modu düzenlemediğinizi seçin
• Tüm Kaydet - Tüm stilinizi kurtarın
• Bütünleşme - Tüm özel stilleri çıkarın ve taze başlayın

Ortak Görevler

Nasıl Stil An Element

Bu, tüm stil görevleri için kullanacağınız temel iş akışıdır.

1. Click the Click the Edit Mode Ekran çubuğunda düğme (cursor icon).
2. Yeşil "Edit Mode Active" göstergesi ekranınızın başında görünür.
3. Mouse'ı önizlemedeki elementler üzerinde hareket edin - mavi bir taslakla vurgulanacaktır.
4. Bunu seçmek için bir element tıklayın.
5. Sol panelin tepesinde seçilmiş element hakkında bilgi göreceksiniz.
6. Nasıl göründüğünü değiştirmek için sekmeleri (Renkler, Typography vs.) kullanın.
7. Değişikliklerinizi izleyin önizlemede anında görünüyor.
8. Değişikliklerle mutlu olduğunuzda, tıklayın Save Changes Sol panelinin dibinde.

[Screenshot: seçme-ve-editing-element]

Renkleri Nasıl Değiştirilir

Bir element seçtikten sonra:

1. Click the Click the Renkler Sol panelde sekme.
2. genişletin Text Color metin rengini değiştirmek için bölüm.
3. Bir renkli seçici açmak için renkli swatch (colored square) tıklayın.
4. Bir renk veya metin alanında bir hex kodu seçin.
5. Karakter hemen önizlemede güncellemektedir.

Arkasını değiştirmek için:

1. İçinde Renkler sekme, genişletin Arka plan arka plan arka plan Bölüm.
2. seçin Katı Tek bir renk veya Gradient Bir renk karışımı için.
3. Katı arka planlar için, renk saatine tıklayın ve rengini seçin.
4. Check Check Check Check Lütfen Eğer hiç arka plan istemiyorsan.

[Screenshot: color-picker-interface]

Bir Gradient Arka Plan Nasıl Oluşturulur

Gradients birlikte birden fazla renk birleştirir.

1. elementinizi seçin ve gidin Renkler sekme.
2. Genişletilmiş Genişleme Arka plan arka plan arka plan ve tıklayın Gradient düğme.
3. 8 yön düğmelerinden birine tıklayarak bir yön seçin (veya özel bir açı girin).
4. En az 2 renk durak göreceksiniz. Renkleri seçmek için her renk saati tıklayın.
5. Her rengin nerede göründüğünü kontrol etmek için pozisyon kaydırıcıları (0-%100) ayarlayın.
6. Click Click Click Click Click + Add Stop Stop gradientinize daha fazla renk eklemek.
7. X düğmesine bir renk durdurmanın ardından tıklayın (en azından 2).
8. Değişiklikler yaptığınızda gradient önizleme çubuğu güncellemesini izleyin.

[Screenshot: gradient-builder]

Fonts ve Text Nasıl Değiştirilir

metin veya metin ile herhangi bir element seçtikten sonra:

1. Click the Click the Typography sekme.
2. Genişletilmiş Genişleme Font Family & Dimension.
3. Bir font seçin Font Family (Roboto, Inter, Montserrat, vb.).
4. Set the Set the Set the Set Font Boyut Sayı girişi kullanarak ve üniteyi (px, rem, em veya%) seçin.
5. Select a Select a Select Font Kilo Metin ince veya cesur (400 normal, 700 cesur).

Metin formatı için:

1. genişletin Text Formattingtingting Bölüm.
2. Sol, merkez, sağ veya haklı olarak hizalama düğmeleri tıklayın.
3. seçin Text Dönüşümü Metin UPPERCASE, daha düşük veya Sermayeli olmak.
4. seçin Text Dekorasyon Altları eklemek, grevleri veya aşırılıkları.

[Screenshot: tipografi-options]

Spacing Ekle Nasıl

Spacing boş alanı ve elementlerin etrafındaki kontrol eder.

1. elementinizi seçin ve tıklayın Spacing Spacing sekme.
2. Genişletilmiş Genişleme Padding Ve elementin içinde yer eklemek için bir numara girin.
3. Genişletilmiş Genişleme Margin Ve elementin dışında yer eklemek için bir numara girin.

Sınırları ve Gölgeleri Nasıl Ekleyebilirsiniz

Bir element seçtikten sonra:

1. Click the Click the Sınırlar sekme.
2. Genişletilmiş Genişleme Sınır Sınır Sınırı Sınırı özelleştirmek için.
3. Bir seçin Sınır Stil (Solid, Dashed, Dotted, vs.).
4. Set the Set the Set the Set Sınır genişliği pikselde.
5. Click the Click the Sınır Renkleri Bir renk seçmek için gözlem.
6. Set Set Set Set Sınır Radius köşeleri yuvarlak.

Bir gölge eklemek için:

1. genişletin Box Shadow Box Bölüm.
2. Bir gölge başlangıç düğmesine tıklayın (None, SM, MD, LG, XL) ortak gölge stilleri için.
3. Ya da özel bir gölge değeri yazın Özel Gölge Alan.

[Screenshot: sınır ve gölge kontrolleri]

Stil Hover Effects Nasıl Yapılır

Hover etkileri bir element üzerinde farelerini hareket ettiğinde tetiklenir ( düğmeler gibi).

1. Yakın etkileri eklemek istediğiniz elementi seçin.
2. Bak, State Selector element bilgilerinin altında bar.
3. Click the Click the : düğme.
4. Ayarlama stilleri size göstermek için güncelleştirmeler gösterir.
5. Değişikliklerinizi yapın - arka rengini değiştirmeye veya bir dönüştürme eklemeyi deneyin.
6. Arka etkisini görmek için önizlemedeki element üzerinde farenizi hareket edin.
7. Click Click Click Click Click Save Changes Ne zaman yapılır?

[Screenshot: state-selector-hover]

Işık ve Karanlık Mode için Stil nasıl ayrı ayrı ayrı ayrı

Siteniz karanlık modlara karşı farklı görünebilir.

1. Click Click Click Click Click Işık Modu Başlıkta ışık mod stilleri düzenlemek.
2. elementleri seçin ve onları istenen şekilde özelleştirin.
3. Click Click Click Click Click Save Changes Her element için.
4. Click Click Click Click Click Dark Mode Başlıkta karanlık mod düzenlemeye geçmek.
5. Ekran otomatik olarak karanlık moda geçer, böylece düzenlemenin ne olduğunu görebilirsiniz.
6. Aynı elementleri seçin ve onları karanlık mod için özelleştirin.
7. Karanlık mod değişikliklerinizi kurtarın.

Stilleri Özel Sayfalara Nasıl Uygulanır

Varsayılan olarak, stilleri tüm sitenize uygulanır. Ama sadece bazı sayfalarda görünen stilleri yapabilirsiniz.

Style Manager otomatik olarak hangi sayfayı görüyorsunuz:

Sayfaya özgü stilleri uygulamak:

1. özelleştirmek istediğiniz sayfaya gitmek için önizleme navigasyonunu kullanın.
2. Click Click Click Click Click Edit Mode Ve bu sayfada elementleri seçin.
3. Tarzınızı değiştirin.
4. Click Click Click Click Click Save Changes.
5. Bu stilleri sadece bu özel sayfaya uygulanır.

Nasıl Yenilenilir

Tek bir Elementi Sıfırlayın:

1. sıfırlamak istediğiniz elementi seçin.
2. Click Click Click Click Click Element Sol panelinin dibinde.
3. Takip Et Tarafından Onay Tamam tamam Popup'da.
4. Bu element için tüm özel stilleri kaldırıldı.
5. element orijinal görünümüne geri döner.

Her şeyi unutun:

1. Click Click Click Click Click Bütünleşme Başlarda.
2. Uyarıyı dikkatlice okuyun - bu tüm özel stillerinizi silir.
3. Click Click Click Click Click Tamam tamam Onaylamak için.
4. Tüm sitenizdeki tüm özel stilleri kaldırıldı.
5. Siteniz varsayılan görünüme geri döner.

Preview Controls

Navigation Toolbar

Ekranın en üst kısmındaki araç çubuğu, önizlemeyi ve kontrol etmenizi sağlar:

Device Preview

Stillerinizin bu düğmeleri önizleme başlığına tıklayarak farklı ekran boyutlarda nasıl göründüğünü test edin:

Tercih edilen boyuta bir gölge sınırı ile kıvrımlar, böylece mobil kullanıcıların sitenizin nasıl göreceğini tam olarak görebilirsiniz.

[Screenshot: duyarlı-pgang-modes]

Dark Mode Toggle

Arkadaki ay ikonu ışık ve karanlık mod arasındaki önizlemeyi göze almak için. Bu ana başlıktaki mod düğmelerinden ayrıdır:

• Header mod düğmeleri - SAVING hangi stillerin (ışık veya karanlık)
• Preview Ay düğmesine - Hangi modu görüntülendiğini kontrol edin

Style Tabs'ı Anlamak

Sol paneldeki her sekme farklı görsel özelliklere odaklanır.

Renkler Tab

• Text Color - Karakterin içindeki metin rengi
• Arka plan arka plan arka plan - Solid color, gradient veya şeffaf arka plan
• Gradient Builder - Birden fazla renk durakları ile pürüzsüz renk karışımları yaratın

Typography Tab

• Font Family - Profesyonel web fontlarından seçin
• Font Boyut - Esnek birimlerle metin boyutu (px, rem, em, %)
• Font Kilo - Metin ne kadar ince veya cesur görünüyor
• Line Yükseklik - metin hatları arasındaki uzay
• Mektup Spacing - Bireysel mektuplar arasındaki Uzay
• Text Formattingtingting - uyum, sermayelendirme, altlar, vb.

Spacing Tab

• Padding Uzay elementin içinde ( içerik ve sınır arasında)
• Margin - element ve komşular arasında uzay

Sınırlar Tab

• Sınır Stil - Solid, dashed, dotted, veya dekoratif çizgiler
• Sınır genişliği - Sınırın ne kadar kalın olduğu
• Sınır Renkleri - Sınır hattının rengi
• Sınır Radius - köşeleri nasıl yuvarlanır
• Box Shadow Box - Derin gölgeler oluşturmak için

Layout Tab

• Ekran görüntüsü - element nasıl davranır (block, inline, flex, grid, vb.)
• Pozisyon pozisyonu - element nasıl konumlandırılır (statik, göreceli, mutlak, vs.)
• Flexbox - Sıralarda veya sütunlarda çocuk elementlerini düzenlemek için kontroller

Effects Tab

• Opakity - elementin ne kadar şeffaf olduğu (%0 = görünmez,% 100 = sağlam)
• Dönüşüm Dönüşüm Dönüşümü - Scale, döndürmek veya elementi hareket ettirin
• Filtreler - Blur, parlaklık, kontrast ve gri ölçekli etkiler

Boyut Tab

• Genişlik genişliği Genişlik genişliği - elementin ne kadar geniş olduğu
• Yükseklik - elementin ne kadar yüksek olduğu
• Min/Max Genişlik & Height - Boyut kısıtlamaları
• Object Fit - Nasıl görüntüler ve videolar konteynerlerinin içine sığıyor
• Aspect - Oranları koruyun (square, 16:9, vs.)

Yeni Kullanıcılar için ipuçları

Sorun Giderme

önizleme yüklemez veya boş bir sayfa gösterir

Ne görüyorsunuz: Doğru panel boş, beyaz veya bir hata gösteriyor.

Nasıl düzeltilir:

1. Click the Click the Yenileme Ekran çubuğunda düğme.
2. Siteniz yeni bir tarayıcı sekmesinde açarak çalışıyorsa kontrol edin.
3. Site çalışırsa, ancak önizleme çalışmazsa, site yöneticisine ulaşın - bu bir yapılandırma konusu olabilir.

Onlara tıkladığımda elementleri seçemem

Ne görüyorsunuz: önizlemedeki elementleri tıklayın hiçbir şey yapmaz.

Nasıl düzeltilir:

1. Emin olun Edit Mode düğme (cursor i) yeşilde vurgulanır.
2. Yenileme düğmesine basmayı deneyin.
3. Bazı çok küçük elementler ( 5x5 pikselden küçük) seçilebilir - yakındaki elementlere ulaşmaya çalışın.

Değişikliklerim canlı sitede görünmüyor

Ne görüyorsunuz: Değişiklikler önizlemede gösteriyor ama gerçek sitede değil.

Nasıl düzeltilir:

1. tıkladığınızdan emin olun Save Changes Sol panelinin alt kısmında (sadece Tüm Kurtarmayın).
2. Tarayıcı önbelleğinizi açın ve canlı siteyi yenileyin.
3. Siteyi farklı bir modda izliyorsanız (mavi vs karanlık), değişiklikleriniz orada geçerli olup olmadığını görmek için modları değiştirin.

Hover etkileri çalışmıyor

Ne görüyorsunuz: Siz şu şekilde dekore ettiniz, ancak ne zaman yürüdüğünüzde hiçbir şey olmaz.

Nasıl düzeltilir:

1. Size tıkladığınızdan emin olun : Değişim yapmadan önce Devlet Selector'daki düğme.
2. Hover etkileri sadece bir fare ile çalışır - mobil kullanıcılar onları görmeyecek.
3. Orijinal site stillerinizin sizinkileri aşırılaştıran derin etkilere sahip olup olmadığını kontrol edin.

Renkler yanlış görünüyor ya da seçtiğim şeyi eşleştirmiyorum

Ne görüyorsunuz: Renkli seçici bir renk gösterir ancak element başka gösterir.

Nasıl düzeltilir:

1. Tekrar elemente tıklayın ve mevcut renk değerlerini yenilemek için.
2. Doğru mülkiyeti düzenlemenizden emin olun - Text Color arka plandan ayrıdır.
3. Son sonucu görmek için önizlemeyi kurtar ve yenileyin.

Değişikliklerimi kurtaramam (Kaynak düğmesi grileştirildi)

Ne görüyorsunuz: The Save All and reset All düğmeler devre dışı bırakılır ve grileşir.

Nasıl düzeltilir:
Sayfanın üst kısmında bir portakal bayrağı demo modunun etkinleştirildiğini gösteriyor. Demo modu tasarruf değişikliklerini önler. Değişiklikleri kurtarmanız gerekiyorsa, site yöneticisine demo modunu devre dışı bırakmak için ulaşın.

Benim gradient ortaya çıkmıyor

Ne görüyorsunuz: Bir gradient yarattınız ama element hala sağlam bir renk gösteriyor.

Nasıl düzeltilir:

1. Size tıkladığınızdan emin olun Gradient Sayfa (Politika değil) arka plan bölümünde.
2. Farklı renklerle en az 2 renk durduğunu kontrol edin.
3. Değişikliklerinizi kurtar ve önizlemeyi tazeleyin.

İlgili Pages

Bu kılavuz ComusThumbz site sahipleri ve operatörleri içindir. Sitenizin görünümünü kodlama olmadan özelleştirmek için Style Manager arayüzü kullanmaya odaklanır.