دليل الـBuilder

1البداية

الـBuilder هو المكان اللي بتصمّم فيه صفحة متجرك. افتح لوحة التحكم، اختار صفحة، وبعدين اختار Builder عشان تبدأ.

شغلك محفوظ كمسودة في المتصفح ده. استخدم «حفظ» عشان تخزّنه، و«نشر» عشان يبقى مباشر.

المعاينة الحية جنب الإعدادات وبتتحدّث فورًا مع أي تغيير. تقدر تبدّل بين الكمبيوتر والموبايل من شريط المعاينة.

في أول زيارة بتظهر لك جولة قصيرة تشرح الأجزاء الأساسية في المحرر. تقدر تتخطاها، وما هتظهر تاني.

1. 1افتح لوحة التحكم ← الصفحات واختار الصفحة اللي عايز تعدّلها.
2. 2اختار Builder (أو زر التعديل) عشان تفتح المحرر المرئي.
3. 3استخدم شريط الخطوات للتنقّل بين التصميم والأقسام والمحتوى والخيارات المتقدمة.
4. 4احفظ مسودتك باستمرار، وبعدين انشر لما تكون راضي.

التغييرات غير المحفوظة بيظهر لها مؤشر في الشريط العلوي، وهتنبّه قبل ما تسيب الصفحة.

2النشر والزيارات

النشر بيخلّي صفحتك مباشرة على لينك خاص بيها عشان الزوّار يفتحوها.

كل مرة زائر يفتح صفحتك المنشورة بتُحسب زيارة واحدة؛ إعادة التحميل أو فتح الصفحة تاني بتُحسب تاني.

كل حساب عنده رصيد زيارات. لما يخلص، بيتوقف متجرك مؤقتًا ويشوف الزوّار رسالة مؤقتة بدل صفحتك.

وأنت متوقف، تقدر تعزّز بباقة، أو تختار «المتابعة الآن» عشان تكمّل شوية كمان لحد تجاوز بسيط.

• الزيارات بتُحسب على الصفحة المباشرة فقط، وما بتُحسبش في المحرر أو المعاينة.
• بيوصلك بريد وإشعار داخل التطبيق لما رصيدك يوصل لمستويات مهمة.
• لما توصل لحد التجاوز، بيفضل المتجر متوقف لحد ما تضيف زيارات.

ضيف باقة في أي وقت من صفحة الاستخدام؛ ومتجرك بيرجع يشتغل أول ما رصيدك يبقى موجب تاني.

3الأقسام

الأقسام هي مكوّنات صفحتك، زي شريط التطبيق والهيرو والمنتجات ومن نحن والفئات ومعرض الصور والتواصل والسوشيال والفوتر.

كل صفحة بتبدأ بتصميم منطقي وتقدر ترتّبه بحرية.

1. 1إضافة قسم: اختار نوع من شبكة «أضف قسم».
2. 2الترتيب: استخدم أسهم فوق وتحت على القسم.
3. 3التكرار: انسخ قسم عشان تعيد استخدام القالب والمحتوى بتاعه.
4. 4الإخفاء: شيل قسم مؤقتًا من الصفحة من غير ما تمسحه.
5. 5الحذف: امسح القسم نهائيًا.

اضغط على أي قسم في القائمة أو في المعاينة عشان تحدّده؛ في المعاينة بتظهر قائمة بخطوات التخصيص المتاحة (المحتوى، التخطيط، الألوان، الخطوط، الشكل، التباعد، المكوّنات، ومتقدم).

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

معظم الأقسام بتوفّر أكتر من قالب تصميم — تركيبات مختلفة لنفس المحتوى، زي مقسّم أو في الوسط أو بينتو أو تحريري أو مكدّس.

القوالب بتغيّر الترتيب مش الألوان بس، عشان تقدر تناسب أساليب شغل مختلفة جدًا.

1. 1اختار القسم اللي عايز تغيّر شكله.
2. 2في اختيار القالب، شوف كل خيار كصورة مصغّرة.
3. 3اضغط على القالب عشان يتطبّق فورًا؛ ومحتواك بيفضل زي ما هو.

5المحتوى

خطوة المحتوى بتعدّل الكلام والروابط والصور في القسم المختار.

الحقول بتعرض القيمة الحالية، وأي تغيير بيتحفظ في مسودتك.

بيظهر هنا بس الحقول اللي شكل القسم الحالي بيعرضها فعلًا في المعاينة، والأقسام المخفية مش بتظهر.

• حقول النص بتعرض عدّاد أحرف.
• حقول الصورة بترفع الصورة مباشرة وبتعرض معاينة، وتقدر تستبدلها أو تشيلها في أي وقت.
• حقول إجراء الزر بتحدّد الزر بيعمل إيه لما المستخدم يضغط عليه؛ والإجراءات السريعة بتعبّي الإجراءات الشائعة حسب صفحتك.
• نقطة «معدّل» بتعلّم الحقول اللي غيّرتها؛ استخدم «استرجاع الافتراضي» عشان ترجّع النص الأصلي.
• روابط شريط التطبيق ديناميكية بالكامل: أضف واحذف ورتّب، وحدّد لكل رابط نصّه وإجراءه وظهوره.
• تنقّل بين الأقسام من الشرائح في أعلى الخطوة.
• أقسام المنتجات بتعرض منتجاتك الحقيقية دايمًا في المعاينة، من مسودتك ومن غير نشر؛ ولو الصفحة مفيش فيها منتجات بتظهر حالة فاضية بدل عناصر تجريبية.

إجراء الزر يقدر يفتح صفحة أو رابط خارجي أو واتساب أو اتصال أو بريد، أو يمرّر لقسم، أو يضيف للسلة.

6الألوان

اختار مجموعة ألوان بتحدّد لوحة الصفحة كلها، وبعدين اختار المظهر فاتح أو غامق أو تلقائي.

التلقائي بيتبع إعداد جهاز الزائر.

7الخطوط

اختار توليفة خطوط للعناوين والنص، وبعدين اضبط الحجم والوزن والتباعد وظل النص.

العناوين في كل الأقسام بتتحدّث مع بعض عشان الصفحة تفضل متناسقة.

8الشكل

الشكل بيتحكّم في استدارة الحواف للأسطح (الكروت والحقول) والأزرار والشارات والصور.

ابدأ من قالب جاهز وعدّل كل عنصر لوحده لما تحتاج شكل معيّن.

9المسافات

المسافات بتحدّد إيقاع الصفحة: حشو الأقسام وفراغات الشبكة وحشو الكروت وغيرها.

اختار كثافة جاهزة، وبعدين كبّر أو صغّر عناصر معيّنة لو القسم محتاج مساحة أكتر أو أقل.

10المكوّنات

المكوّنات بتنسّق العناصر نفسها — الحدود والخلفيات والظلال للكروت والشارات والحقول وشريط التنقّل، وكمان تحكّم مخصص لأزرار الصفحة.

استخدم القوالب الجاهزة لمظهر سريع ومتناسق، أو عدّل كل نوع عنصر لوحده.

مجموعة الأزرار بتتحكّم في نمط الزر (معبّأ أو محدّد أو خفيف أو شفاف) وحجمه وعرضه في كل الأقسام مرة واحدة.

11السلة والدفع

خطوة السلة والدفع بتتحكّم في إزاي العملاء يطلبوا ويستلموا ويدفعوا. بتتحفظ مع المسودة وبتظهر بس بعد ما تنشر.

زر أضف للسلة والسلة بيعتمدوا على الإعدادات دي، فالعملاء يقدروا يختاروا الخيارات ويضيفوا منتجات ويبعتوا الطلب.

• قنوات الطلب: اقبل الطلبات من متجرك وتديرها من لوحة التحكم، أو وجّهها لواتساب أو مكالمة أو البريد أو رابط خارجي. فعّل اللي تحبّه وحدّد القناة المفضّلة.
• التوصيل والعملة: اختار عملة المتجر وأقل قيمة للطلب وخيارات التوصيل والاستلام والطلب داخل المكان، مع رسوم وحد للتوصيل المجاني.
• الدفع: طرق يدوية زي الدفع عند التوصيل أو عند الاستلام أو التحويل البنكي/المحفظة. حالة الطلب وحالة الدفع منفصلين، والطلب مابيتحسبش مدفوع تلقائيًا.
• نموذج الدفع: اختار بيانات العميل المطلوبة وأضف حقول إضافية براحتك.

سلة المعاينة معزولة، فمهما جرّبت في المصمم مش هيتكوّن طلب حقيقي.

12إعدادات الصفحة

خطوة إعدادات الصفحة بتسمّي صفحتك وبتحدّد شكلها في نتائج البحث والمشاركة على السوشيال ميديا. فيها أربع تبويبات: عام، SEO، المشاركة، ومتقدم.

كل حاجة هنا بتتحفظ مع المسودة، فالتغييرات بتظهر في صفحتك العامة بس بعد ما تنشر.

المعاينات في كل تبويب بتستخدم البيانات اللي بتدخلها، والمعاينة المباشرة بتعرض اسم صفحتك وبيانات النشاط وصورة المشاركة بدل النصوص التجريبية.

• عام: اسم الصفحة بيظهرلك إنت بس في لوحة التحكم، أما العنوان والوصف فهما البدائل العامة للبحث والمشاركة؛ اسم النشاط بيبقى العلامة بتاعة المتجر في صفحة المتجر وصفحة المنتج والدفع، وباقي بيانات النشاط بتُستخدم في SEO والبيانات المهيكلة؛ ارفع شعار المتجر (PNG أو JPEG أو WebP حتى 5 ميجا) بيستبدل أيقونة المتجر الافتراضية في نافبار المتجر والفوتر وصفحتي المنتج والدفع؛ واتجاه الصفحة (تلقائي أو من اليسار لليمين أو من اليمين لليسار) بيحدّد اتجاه التخطيط بشكل مستقل عن اللغة.
• SEO: حدّد عنوان ووصف الميتا والكلمات المفتاحية والرابط الأساسي، واختار إذا محركات البحث تقدر تفهرس الصفحة. وفيه معاينة مباشرة لشكل النتيجة.
• المشاركة: حدّد العنوان والوصف والصورة اللي بتظهر لما حد يشارك صفحتك؛ والحقول الفاضية بترجع لعنوان الصفحة ووصفها.
• متقدم: CSS مخصص للصفحة كلها؛ وكل المحدّدات مقيّدة بصفحتك.

عدّادات الحروف بتوضّح إنت قربت قد إيه من الطول اللي بتوصي بيه محركات البحث ومنصّات التواصل.

13الحركات

خطوة الحركات بتضيف حركات دخول بسيطة لأقسامك. فعّل الحركات مرة واحدة، واختار مدتها ووقت تشغيلها، وبعدين اختار حركة لكل قسم.

كل حاجة بتتحفظ مع المسودة، فالتغييرات بتظهر في صفحتك العامة بس بعد ما تنشر.

• الحركات الجاهزة: بدون، تلاشي، انزلاق لأعلى، انزلاق لأسفل، انزلاق لليسار، انزلاق لليمين، وتكبير.
• المدة: 11 قيمة جاهزة من 100 إلى 1200 مللي ثانية، أو قيمة مخصصة بين 50 و3000 مللي ثانية (الافتراضي 400 مللي ثانية).
• وقت التشغيل: عند التحميل بتشتغل أول ما الصفحة تفتح؛ وعند التمرير بتشتغل أول مرة يظهر فيها القسم في الشاشة — مرة واحدة، مش بتتكرر مع كل تمرير.
• تتابع العناصر (مع خيار «عند التمرير»): الكروت والصور والنصوص جوه القسم بتظهر ورا بعض بفاصل زمني صغير — ومحدود عشان الشبكات الكبيرة تفضل سريعة.
• الأقسام اللي حركتها «بدون»، والأقسام المخفية، مش بتتحرّك أبدًا.

الزوار اللي بيفعّلوا تقليل الحركة في إعدادات أجهزتهم هيشفوا صفحتك بدون حركات.

14متقدم

المتقدم بيديك إضافات اختيارية للأقسام لما الإعدادات الجاهزة مش كفاية. أما CSS المخصص للصفحة فدلوقتي موجود في إعدادات الصفحة ← متقدم. كل حاجة هنا مقيّدة عشان ما تأثّرش على تطبيق داش نفسه.

• CSS مخصص (للصفحة): بينسّق المعاينة كلها، ومكانه في إعدادات الصفحة ← متقدم. المحدّدات مقيّدة بصفحتك، و body { } بتتطبّق على حاوية الصفحة كـ .dash-page-preview { }.
• ظهور القسم: اعرض القسم في كل مكان، أو على الكمبيوتر بس، أو على الموبايل بس.
• كلاس مخصص: أضف أسماء كلاسات عشان تستهدف قسم بـCSS بتاعتك.
• CSS للقسم: تنسيقات بتتطبّق على القسم المختار بس.

استخدم زر النسخ لإعادة استخدام كود، وزر إعادة الضبط لمسح البلوك ده لوحده. وتقدر تفتح الدليل ده من أعلى خطوة «متقدم».

15متقدم: دليل المطوّر

الدليل ده لأي حد عايز يخصّص الصفحة بـCSS بتاعه. بيشرح إزاي تستهدف العنصر الصح وإزاي الكود يفضل مقيّد بأمان على الصفحة دي.

الكود المخصص مقيّد: يقدر ينسّق الصفحة وأقسامها، لكن مستحيل يأثّر على تطبيق داش أو أي صفحة تانية.

1. 1تنسيق الصفحة كلها: أضف قواعد في «CSS مخصص (للصفحة)» من إعدادات الصفحة ← متقدم. كل محدّد بيتقيّد بالصفحة دي تلقائيًا.
2. 2تنسيق قسم واحد: أضف اسم كلاس في «كلاس مخصص» (بيتطبّق على عنصر القسم نفسه)، وبعدين استهدفه من «CSS للقسم» أو «CSS الصفحة».
3. 3استهدف قسم معيّن من غير كلاس باستخدام السمة [data-dash-section].
4. 4تحكّم في مكان ظهور القسم من «ظهور القسم» (كل مكان، كمبيوتر بس، موبايل بس).
5. 5أعد استخدام الكود أو امسحه من زرّي النسخ وإعادة الضبط في كل بلوك.

• CSS الصفحة مقيّد جوه .dash-page-preview: محدّدات body وhtml و:root بتتطبّق على حاوية الصفحة نفسها، وباقي المحدّدات بتتسبق بالـscope.
• CSS القسم وCSS الصفحة بيتحمّلوا بعد الثيم، فقواعدك تقدر تتجاوز خلفية القسم ولونه وحشوه.
• محدّد كلاس زي .my-banner بيتطابق بس لما تضيف «my-banner» في «كلاس مخصص» لقسم؛ واستخدم body { } لتنسيق الصفحة كلها.
• في حقول الـCSS اكتب CSS عادي؛ و@apply و@tailwind و@theme و@import مش بيتعالجوا. وكلاسات Tailwind مدعومة في «كلاس مخصص» لقسم (زي bg-primary أو p-8 أو md:flex)، جنب رموز التصميم.
• قواعد @ المدعومة: @media و@supports و@container و@layer و@document.
• قواعد @ المتجاهلة: @import و@charset و@namespace و@keyframes و@font-face و@scope. استخدم خطوة «الخطوط» لتحميل الخطوط أو تغييرها.
• CSS القسم مقيّد بالقسم المختار من خلال السمة [data-dash-section]؛ ومعرّف القسم بيستخدم حروف وأرقام وشرطات وسفلية بس.
• أسماء الكلاسات بتحتفظ بالحروف والأرقام والشرطات والسفلية بس، بحد أقصى 6 أسماء و120 حرف.
• CSS محدود بـ20,000 حرف والتعليقات بتتشال.
• الأقسام المخصّصة لسطح المكتب بتتعرض بـ hidden md:block، والموبايل بـ block md:hidden.

.my-banner {
  background: linear-gradient(135deg, #111111 0%, #333333 100%);
  color: #ffffff;
  padding: 2rem;
}

@media (min-width: 768px) {
  .my-banner { padding: 4rem; }
}

/* Custom class: my-hero */
/* Section CSS */
.my-hero {
  background: var(--color-base-200);
}

.my-hero h1 {
  letter-spacing: 0.02em;
}

فضّل أسماء الكلاسات على معرّفات الأقسام الثابتة، عشان تنسيقاتك تفضل شغّالة لو كرّرت الأقسام أو رتّبتها من جديد.

16متغيّرات التصميم: كل اسم بيغيّر إيه

دي متغيّرات CSS اللي الكود المخصص بتاعك يقدر يستخدمها. بتتحدّد من الثيم وبتكون متاحة على الصفحة وكل قسم، عشان تنسيقاتك تتماشى دايمًا مع التصميم الحالي.

استخدم المتغيّر بـvar(--name)، مثال: background: var(--color-primary).

.my-banner {
  background: var(--color-base-200);
  border: 1px solid var(--color-base-300);
  border-radius: var(--builder-radius-card);
  padding: var(--builder-spacing-card);
}

فضّل المتغيّرات دي على الألوان والمقاسات الثابتة عشان صفحتك تفضل متناسقة لما الثيم يتغيّر.

17الحفظ والنشر

مسودتك محفوظة على حسابك، فهي متاحة على كل جهاز بتسجّل الدخول منه. وكمان بنحتفظ بنسخة في المتصفح ده للعمل بدون إنترنت.

«حفظ» بيخزّن مسودتك؛ و«نشر» بيخلّي آخر نسخة مباشرة للزوار.

1. 1اضغط «حفظ» لتخزين المسودة الحالية.
2. 2اضغط «نشر» لما تكون جاهز للبث المباشر.
3. 3تابع الشريط العلوي لمعرفة حالة الحفظ أو عدم الحفظ.