كتل منشئ الصفحات

يقدم منشئ الصفحات مجموعة كتل يمكن دمجها لبناء موقعك.

كتل التخطيط

كتلة Hero

الانطباع الأول مهم—مناسبة لرأس الصفحة.

الخيارات:

• صورة أو لون خلفية
• عنوان وعنوان فرعي
• أزرار دعوة للإجراء
• الارتفاع والمحاذاة
• تراكبات

استخدامات:

• الصفحة الرئيسية
• صفحات هبوط
• إعلانات خاصة

كتلة الأعمدة

إنشاء تخطيطات متعددة الأعمدة للمحتوى المعقد.

الخيارات:

• 2، 3 أو 4 أعمدة
• عرض أعمدة مختلف
• سلوك الجوال (تكديس أو جنبًا لجنب)
• تباعد بين الأعمدة

كتلة التبويبات

تنظيم المحتوى في تبويبات.

الخيارات:

• تبويبات غير محدودة
• عنوان لكل تبويب
• محتوى مختلف لكل تبويب

استخدامات:

• أوقات الدوام حسب اليوم
• خدمات مختلفة
• فئات للأسئلة الشائعة

كتلة الأكورديون

أقسام قابلة للطي للأسئلة الشائعة أو المعلومات التفصيلية.

الخيارات:

• عدة عناصر
• عنوان ومحتوى
• مفتوح/مغلق افتراضيًا
• واحد أو أكثر مفتوح في نفس الوقت

استخدامات:

• صفحة الأسئلة الشائعة
• معلومات تفصيلية
• تنظيم نصوص طويلة

كتل النص

كتلة النص

منطقة نص كلاسيكية بتنسيق غني.

الخيارات:

• محرر نص منسق
• عناوين (H2–H4)
• عريض/مائل/تحته خط
• قوائم نقطية ورقمية
• روابط
• محاذاة النص

كتلة Callout

تنبيهات أو معلومات مهمة مميزة.

الخيارات:

• أنواع (معلومة، تحذير، نجاح)
• أيقونة
• لون خلفية
• عنوان ونص

استخدامات:

• إعلانات مهمة
• تنبيهات
• إبراز أوقات الصلاة

كتل الوسائط

كتلة الصورة

صورة واحدة مع شرح اختياري.

الخيارات:

• صورة من مكتبة الوسائط
• وصف
• نص بديل (وصول)
• رابط
• حجم ومحاذاة

كتلة نص وصورة

كتلة تجمع نصًا وصورة جنبًا لجنب.

الخيارات:

• الصورة يسار أو يمين
• نسبة نص/صورة
• لون الخلفية
• إضافة زر

استخدامات:

• قسم التعريف
• عرض الخدمات
• أعضاء الفريق

كتل تفاعلية

كتلة زر

أزرار دعوة للإجراء للروابط أو الأفعال.

الخيارات:

• نص الزر
• رابط داخلي/خارجي
• النمط (أساسي، ثانوي، إطار)
• الحجم
• المحاذاة

كتلة النشرة البريدية

نموذج اشتراك في النشرة.

الخيارات:

• عنوان ووصف
• حقل بريد إلكتروني
• نص تأكيد
• تكامل مع خدمة البريد

كتلة الروابط الاجتماعية

روابط قنوات التواصل.

الخيارات:

• المنصات المدعومة:
  • Facebook
  • Instagram
  • YouTube
  • Twitter/X
  • WhatsApp
  • Telegram
• نمط الأيقونة وحجمها
• المحاذاة

كتل ديناميكية

تعرض محتوى يتحدث تلقائيًا.

كتلة قائمة الأخبار

عرض تلقائي للأخبار.

الخيارات:

• عدد المقالات (1–10)
• تصفية بالفئة
• طريقة العرض (بطاقات، قائمة)
• رابط "عرض الكل"

السلوك:

• يعرض أحدث الأخبار دائمًا
• يُحدث تلقائيًا
• بلا صيانة يدوية

كتلة تقويم الفعاليات

عرض للفعاليات القادمة.

الخيارات:

• عدد الفعاليات
• عرض تقويم أو قائمة
• تصفية بالفئة
• نطاق زمني

السلوك:

• يعرض الفعاليات القادمة
• يُحدث تلقائيًا
• يخفي الفعاليات السابقة

كتل خاصة

كتلة البطاقات

بطاقات معلومات لتنظيم المحتوى.

الخيارات:

• عدد البطاقات
• أيقونة أو صورة
• عنوان ونص
• زر/رابط
• تأثيرات عند التمرير

استخدامات:

• عرض الخدمات
• تعداد المزايا
• عرض الفريق

كتلة التوصيات

اقتباسات وتوصيات.

الخيارات:

• عدة توصيات
• الاسم والدور
• صورة شخصية
• نص الاقتباس
• عرض شريط/شبكة

إعدادات الكتلة

إعدادات عامة

كل كتلة تشترك في إعدادات:

• مسافة أعلى/أسفل (Spacing): مسافة عمودية للكتلة التالية
• الخلفية (Background): لون أو صورة
• إظهار/إخفاء (Visibility): إخفاء على أجهزة محددة
• فئة CSS: لتخصيص متقدم

السلوك المتجاوب

جميع الكتل محسّنة لمختلف الشاشات:

• سطح المكتب: تخطيط كامل
• الجهاز اللوحي: تخطيط مضبوط
• الجوال: عرض محسن للجوال

ممارسات جيدة

الهيكلة

• ابدأ بكتلة Hero
• نوّع أنواع الكتل
• استخدم Callout للمعلومات المهمة

الاتساق

• ألوان متسقة
• حافظ على مسافات موحدة
• استخدم نفس أنماط الأزرار

الأداء

• حسّن الصور قبل الرفع
• تجنب كثرة الكتل في صفحة واحدة
• استخدم التحميل الكسول للصور

الخطوات التالية