למעצבי תבניות

אם לתבנית שלך יש חוויית עריכה נהדרת ב-slidde.co, לקוחות יפנו אליך כאשר ירצו לשנות את העיצוב או להרחיב את העיצוב למספר עמודים.

משתמש ללא ניסיון בקידוד או בעיצוב יכול להשתמש בעורך הטקסט העשיר, לשנות תמונות בעצמו. אבל לפעמים תבנית יפה עשויה להיות מורכבת מדי להתאמה לצרכיהם בקלות.

הנה כמה טיפים.

כתיבת מדריכים

השתמש ב-מוסתר ב-שקופית כדי לכתוב מדריך על איך להשתמש בתבניות שלך. הנה דוגמה

עריכת אלמנטים מוסתרים מונפשים

אם יש לך אנימציות שמסתירות טקסט/תמונות מסוימות, כמו opacity: 0 או display: none, תוכל לרחף על שם סגנון ה-CSS וללחוץ על סמל העריכה. לאחר מכן בחר באפשרות "מוסתר בקנבס" כדי להחיל זאת רק בעת ייצוא אתר אמיתי. כך המשתמש שלך יוכל לערוך את האלמנטים בעורך בקלות.

שימוש במשתנים

תוכל להגדיר משתני CSS כדי לאפשר ללקוחות שלך לשנות בקלות את הצבעים או תכונות אחרות של התבניות שלך.

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

ותוכל להחיל זאת על כל הצאצאים של האלמנט, כולל עצמו

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

הנה המסמכים הרשמיים למדריך מעמיק יותר.

עיצוב רשימת אלמנטים

כאשר אתה מעצב רשימת אלמנטים, ניתן להחיל בוררים מתקדמים כדי לשפר את חוויית המשתמש.

אם אתה מעצב רשימת כפתורים עם color:red, color:blue, color:green, כאשר למשתמש יש מספר כפתורים שונה מ-3, או בטעות הם מוחקים כפתור כלשהו, הם יצטרכו לעצב את הכפתורים שוב בעצמם.

עם זאת, אם תעשה את הפעולות הבאות ל-רשימת כפתורים,

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

לא משנה כמה כפתורים יש למשתמש, הם תמיד יסתיימו ברצף כפתורים בצבעים מתחלפים.

אותו עיקרון יכול לחול על רשימת תמונות.

אתם יכולים לקרוא עוד על nth-child ו-nth-of-type כדי ללמוד על התחביר הספציפי שלהם.