لمصممي القوالب

إذا كان لقالبك تجربة تحرير رائعة على 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 لتتعرف على قواعدهما الخاصة.