Şablon Tasarımcılarına

Eğer şablonunuz slidde.co üzerinde harika bir düzenleme deneyimi sunuyorsa, müşteriler tasarımı değiştirmek veya tasarımı birden fazla sayfaya genişletmek istediklerinde size ulaşacaktır.

Kodlama veya tasarım deneyimi olmayan bir kullanıcı, zengin metin düzenleyiciyi kullanarak kendi resimlerini değiştirebilir. Ancak bazen güzel bir şablon, ihtiyaçlarına kolayca uyum sağlamak için çok karmaşık olabilir.

İşte birkaç ipucu.

Eğitim Yazma

Şablonlarınızı nasıl kullanacağınız hakkında bir eğitim yazmak için Gizli öğesini Slayt içinde kullanın. İşte bir örnek

Animasyonlu Gizli Öğeleri Düzenleme

Belirli metinleri/görüntüleri gizleyen animasyonlarınız varsa, örneğin opacity: 0 veya display: none, CSS stil adının üzerine gelerek düzenleme simgesine tıklayabilirsiniz. Ardından, gerçek bir web sitesi dışa aktarılırken yalnızca bunu uygulamak için "tuvalde gizli" seçeneğini seçin. Böylece kullanıcılarınız editörde öğeleri kolayca düzenleyebilir.

Değişkenleri Kullanma

Müşterilerinizin şablonlarınızın renklerini veya diğer özelliklerini kolayca değiştirmesine olanak tanımak için CSS değişkenleri ayarlayabilirsiniz.

--primary-fg: #000
--primary-bg: #fff

Ve bunu, kendisi de dahil olmak üzere, öğenin tüm alt öğelerinde uygulayabilirsiniz.

color: var(--primary-fg)
background-color: var(--primary-bg)

Daha ayrıntılı bir kılavuz için resmi belgeler burada.

Öğeler Listesini Stilize Etme

Öğeler listesini stilize ederken, kullanıcı deneyimini geliştirmek için gelişmiş seçiciler uygulanabilir.

Eğer bir düğme listesini color:red, color:blue, color:green ile stilize ederseniz, kullanıcı 3'ten farklı sayıda düğmeye sahip olduğunda veya yanlışlıkla bazı düğmeleri sildiğinde, düğmeleri tekrar kendileri stilize etmeleri gerekecektir.

Ancak, bir Düğme listesi üzerinde aşağıdakileri yaparsanız,

&>*:nth-child(3n+1).color: red
&>*:nth-child(3n+2).color: green
&>*:nth-child(3n+3).color: blue

Kullanıcının kaç düğmesi olursa olsun, her zaman alternatif renklerde bir düğme dizisi ile sonuçlanırlar.

Aynı ilke, bir dizi resim için de uygulanabilir.

Ve nth-child ve nth-of-type hakkında daha fazla okuyarak, bunların özel dil bilgilerini öğrenebilirsiniz.