أساسيات التخطيط

Last updated on 10/29/2024@mrbirddev

هيكل صفحة ويب slidde

تستخدم Slidde.co هيكلًا بسيطًا من أربع طبقات:

  • userCompName.Page (أنماط عالمية)
  • userCompName.Slide (تقسيم المحتوى)
  • userCompName.Container (عرض متجاوب، أعمدة متعددة)
  • عناصر مدمجة (محتوى محدد)

userCompName.Page

طبقة userCompName.Page هي في الأعلى وتستخدم لتعيين الأنماط العالمية مثل الخطوط والألوان وأنماط الروابط، حيث أن خصائص CSS قابلة للتوريث.

يمكنك استخدام متغيرات CSS لجعل القالب الخاص بك أكثر سهولة للمستخدم.

إذا لم تتمكن من تحديد عنصر userCompName.Page مباشرة، استخدم خيار userCompOption.Select page في شريط الأدوات.

ميزة userCompOption.hashSection يمكن أن تحاكي موقع ويب متعدد الصفحات. تحقق من هذا العرض التوضيحي: رابط العرض التوضيحي

userCompName.Slide

يعتبر userCompName.Slide العنصر الأول تحت userCompName.Page، ويستخدم لتقسيم المحتوى.

  • الصفحات البسيطة، مثل صفحات "الرابط في السيرة الذاتية"، قد تحتوي على شريحة واحدة فقط.
  • صفحات الهبوط المعقدة قد تتضمن أقسامًا متعددة مثل #header، #hero، #works، #contact، #footer.

يعتبر userCompOption.htmlId في الأساس معرف HTML. قم بتسميتها بناءً على المحتوى داخل userCompName.Slide لسهولة التنقل باستخدام روابط مثل "#ID". تعرف على المزيد حول روابط التخطي.

لإخفاء userCompName.Slide من الموقع النهائي ولكن الاحتفاظ بها محفوظة، تحقق من السمة userCompOption.hidden. هذا مشابه للشرائح المخفية في PowerPoint ويمكن استخدامه أيضًا للدروس التعليمية.

الميزة userCompOption.sticky مخصصة لأشرطة التنقل العائمة أو أي عناصر أخرى. انظر مثال هنا: Sticky Demo

userCompName.Container

يدير userCompName.Container عرضًا متجاوبًا وعروضًا متعددة الأعمدة.

  • عادةً ما تختلف العروض بين الأجهزة المحمولة وأجهزة سطح المكتب. استخدم السمة userCompOption.width في userCompName.Container للحصول على عروض متكيفة عبر الأجهزة.
  • تحدد الأعمدة عدد الأعمدة في الحاوية. يمكنك تعيين العروض مثل x/12 (على سبيل المثال، عمودان 6/12 لكل منهما عرض 50%).

يمكن أن يحتوي كل عمود أيضًا على إعدادات محاذاة أفقية وعمودية.

أخرى

العناصر الأخرى هي عناصر مضمنة، يمكن وضعها داخل الحاوية.

باتباع هذا النهج المنظم، يمكنك إنشاء صفحات ويب جذابة ومتجاوبة بسهولة باستخدام Slidde.co.

Loading...