تخط وانتقل إلى المحتوى الرئيسي

دليل الـ CSS المخصَّص

تعلّم كيف يعمل الـ CSS ونسِّق واجهة متجر DZBuild بقوالب جاهزة للّصق — أزرار، بطاقات منتجات، خطوط، تعديلات الجوال، ألوان العلامة، والمزيد. باقة Enterprise.

بقلم: Support

يتيح لك الـ CSS المخصَّص ضبط مظهر واجهة متجرك بدقّة تتجاوز عناصر التحكّم المدمَجة في المخصِّص — أزرار أكثر استدارة، ظلال بطاقات أنعم، خطّ مخصَّص، رأس صفحة ثابت (sticky)، وأكثر من ذلك بكثير. هذا الدليل شرحٌ كامل وسهل للمبتدئين: كيف يعمل الـ CSS، وأين تلصقه، وقائمة محدِّدات DZBuild المختصرة، وعشرات القوالب الجاهزة للّصق.

📝 ملاحظة — ميزة Enterprise

الـ CSS المخصَّص متاح في باقة Enterprise. في الباقات الأخرى يظهر الحقل مقفلًا. انظر الباقات للترقية.

أين تلصقه

من القائمة الجانبية تخصيص المتجر ← تخصيص ← CSS مخصّص. اكتب أو الصق الـ CSS الخاص بك، وراقب تحدُّث المعاينة المباشرة بجانبه، ثم اضغط حفظ عندما يبدو الأمر صحيحًا. يُحمَّل الـ CSS الخاص بك بعد صفحة الأنماط الرئيسية للقالب، فتتغلّب قواعدك في أغلب الحالات. لكن بعض الأجزاء تأتي بأنماطها الخاصّة لاحقًا في الصفحة أو على العنصر نفسه: رأس الصفحة في كل الصفحات عدا صفحات المنتج، والتذييل، وزر WhatsApp العائم، وأنماط صفحة المنتج نفسها، والشريط الترويجي في بعض القوالب. والقاعدة التي تستهدف هذه الأجزاء تحتاج إلى !important لتتغلّب.

💡 نصيحة — لا يمكنك إفساد أي شيء بشكل دائم

الـ CSS المخصَّص يغيّر المظهر فقط — لا يمسّ منتجاتك أو طلباتك أو بياناتك أبدًا. إذا بدت الواجهة خاطئة، فرّغ الحقل واحفظ وستعود إلى وضعها الطبيعي. تحقّق دائمًا من المعاينة المباشرة قبل الحفظ.

⚠️ تنبيه — حدّ 50 كيلوبايت — اقتطاع صامت

الحقل محدود بـ 50,000 حرف: يتوقّف عن قبول النص عند هذا الحدّ، ويعرض العدّاد تحته عدد الأحرف المستعملة. كما تُقتطَع النسخة المحفوظة عند 50,000 بايت دون إظهار أي خطأ، وكل حرف عربي يُحسَب ببايتَين، لذا قد يفقد CSS فيه نص عربي آخرَه حتى لو كان العدّاد تحت الحدّ. والاقتطاع قد يترك قاعدة نصف مكتوبة ويُعطّل كل ما بعدها. أبقِ صفحة الأنماط صغيرة، وإذا توقّف آخر الـ CSS عن العمل فتحقّق من طوله أوّلًا.

أين يُطبَّق: الصفحة الرئيسية، وصفحات المنتجات، وصفحات التصنيفات وكل المنتجات، والسلة، والـ checkout، وتتبّع الطلب، وصفحة تأكيد الطلب. وهو لا يُطبَّق على صفحات الهبوط في /landing/{slug} — فهي تُعرَض خارج نظام القوالب.

ابحث عن مفتاح مدمج أوّلًا

عدّة قوالب أدناه تكرّر — بل قد تتصارع مع — أداة تحكُّم موجودة أصلًا في المخصِّص:

ما تريده

الأداة المدمجة

رأس صفحة ثابت، ظلّ الرأسية، حدّ الرأسية

التخصيص ← الرأسية والشعار

انحناء زوايا بطاقة المنتج (0 / 8 / 16 / 24 بكسل)

التخصيص ← بطاقة المنتج

إخفاء زر «أضف إلى السلة» في الشبكة أو إجراء الـ hover

التخصيص ← بطاقة المنتج

إظهار/إخفاء شريط الإعلان وألوانه

التخصيص ← شريط الإعلان (Pro)

إظهار/إخفاء شريط البحث

التخصيص ← شريط البحث

لون التذييل، إخفاء «Powered by DZBuild»

التخصيص ← التذييل

ألوان زرَّي «اشترِ الآن» و«الدفع السريع»

التخصيص ← صفحة المنتج (Pro)

استعمل المفتاح متى وُجد — فهو يصمد أمام تبديل القوالب ولن يتجاوزه تحديث مستقبلي لصفحة الأنماط.


كيف يعمل الـ CSS (شرح في 60 ثانية)

الـ CSS هو قائمة من القواعد. كل قاعدة لها محدِّد (ما الذي تستهدفه) وكتلة تصريح (ما الذي تغيّره):

.add-to-cart { color: white; background: #f59e0b; }
/* └─ المحدِّد ┘  └───── التصريحات: property: value; ─────┘ */

  • يشير المحدِّد إلى عناصر. أكثر الأنواع شيوعًا:

  • .classname — كل عنصر يحمل تلك الفئة (مثل .add-to-cart). هذا ما ستستخدمه في 95% من الحالات.

  • tag — كل عنصر من نوع معيّن (مثل button، h1، img).

  • #id — العنصر الوحيد الذي يحمل ذلك الـ id.

  • .a .b — عنصر .b داخل عنصر .a. أمّا .a > .b فهو عنصر .b ابن مباشر لعنصر .a.

  • .a:hover — عنصر .a بينما يمرّ مؤشّر الفأرة فوقه.

  • التصريح هو property: value;. خصائص شائعة: color، background، border، border-radius، padding، margin، font-size، box-shadow، display.

  • التتالي (cascade): عندما تمسّ قاعدتان الشيء نفسه، تفوز القاعدة الأكثر تحديدًا — أو تلك المُحمَّلة لاحقًا. ولأنّ الـ CSS الخاص بك يُحمَّل بعد القالب، فإنّ قاعدتك على .add-to-cart تتغلّب على قاعدة القالب.

  • !important يفرض فوز قيمة معيّنة. استخدمه باعتدال — فقط حين لا تستطيع قاعدة عاديّة التغلّب على القالب:

.add-to-cart { border-radius: 999px !important; }

هذا فعلًا معظم ما تحتاجه. كل ما يلي هو نسخ ولصق.


العثور على المحدِّد الصحيح

نادرًا ما تحتاج إلى التخمين. استخدم أداة الفحص في متصفّحك:

  1. افتح واجهة متجرك على متصفّح سطح مكتب (Chrome، Firefox، Edge).

  2. انقر بالزر الأيمن على العنصر الذي تريد تغييره ← Inspect.

  3. في اللوحة التي تُفتح، يُظهر السطر المُمَيَّز العنصر وقيمة class="…" الخاصّة به. اختر اسم فئة (مثل product-card) واستهدفه على شكل .product-card.

  4. الصق قاعدة تجريبية في حقل الـ CSS المخصَّص وراقب المعاينة المباشرة.

💡 نصيحة

تختلف المحدِّدات بين القوالب (Starter وDigital وBrico وStarted V2 وPrestige وPromobi وBloom) — وخصوصًا محدِّدات الـ hero وصناديق البحث. عند الشك، افحص واجهة متجرك أنت بدل نسخ فئة بشكل أعمى، ثم ضع القاعدة في المعاينة للتأكّد.


قائمة محدِّدات DZBuild المختصرة

أكثر المحدِّدات فائدةً وثباتًا عبر القوالب:

المحدِّد

يستهدف

.navbar-store

رأس الصفحة العلوي / شريط التنقّل، وهو مشترك في كل الصفحات (العنصر نفسه يحمل أيضًا id="navbar"، فيصلح #navbar كذلك). أما الصفحة الرئيسية لقالب Promobi فلها رأسها الخاص .pm-nav

.announcement-bar

الشريط الترويجي الرفيع فوق رأس الصفحة. في الصفحة الرئيسية لقالب Promobi يمرّ الإعلان بدلًا منه في شريط متحرّك .pm-marquee

.product-card

بطاقة منتج واحدة في أي شبكة منتجات

.product-image

الغلاف المحيط بصورة بطاقة المنتج — استهدف .product-image img للصورة نفسها

.product-price

نصّ السعر على بطاقة المنتج

.product-actions

أزرار الإجراءات التي تظهر عند المرور فوق بطاقة المنتج (مخفيّة على أجهزة اللمس — انظر أدناه)

.add-to-cart

أزرار "أضف إلى السلة" / الشراء في شبكات المنتجات

.whatsapp-float

زر WhatsApp العائم. بعد حفظ الإعدادات في التخصيص ← أداة المساعدة، يصبح الزر .dzhw-launcher بدلًا منه

.footer

تذييل الصفحة في كل الصفحات باستثناء الصفحة الرئيسية لقالب Brico التي تستعمل .brico-footer

ثلاثة محدِّدات تتداولها المقتطفات القديمة لا تعمل على متاجر DZBuild:

  • .btn-primary — لا يوجد إلا في صفحة تأكيد الطلب، ولا مكان غيرها. ولإعادة تلوين زرَّي «اشترِ الآن» و«الدفع السريع»، استعمل المنتقيات المدمجة (التخصيص ← صفحة المنتج) أو متغيّرات الـ CSS أدناه.

  • .header-search: لا يستعمله أي جزء من واجهة المتجر. فشريط التنقّل المشترك لا يحتوي على صندوق بحث أصلًا، وبالتالي لا يمكن لقاعدة تستهدف بحث الرأسية أن تعمل في صفحات المنتج أو السلة أو التصنيف أو الـ checkout. والبحث خاص بكل قالب وفي الصفحة الرئيسية فقط: .brico-search و.sc-search (لـ Started V2 وBloom) و.pr-search و.pm-search و.search-section (لـ Starter وDigital).

  • .hero — فئات الـ hero الحقيقية خاصّة بكل قالب أيضًا: .hero-section (Starter) و.dt-hero-section (Digital) و.sc-hero (Started V2 وBloom) و.pr-hero (Prestige) و.pm-hero (Promobi). أما Brico فلا يملك hero.

متغيّرات CSS للعلامة التجارية

تُصرِّح بها كل القوالب السبعة النشطة:

المتغيّر

يتحكّم في

--primary

لون العلامة الأساسي

--secondary

اللون الثانوي

--gradient

تدرّج الأساسي ← الثانوي (الأزرار، الـ hero)

--btn-radius

استدارة زوايا الأزرار

--card-border

حدّ بطاقة المنتج

--card-shadow

ظلّ بطاقة المنتج

تختلف خلفية الصفحة حسب القالب: Starter وDigital يستعملان --background ؛ أما Bloom وBrico وPrestige وPromobi وStarted V2 فتستعمل --bg (بالإضافة إلى --navbar-bg و--border-color، و--footer-bg فيها كلّها باستثناء Promobi). عند الشك، اضبط الاثنين.

ولأزرار صفحة المنتج متغيّراتها الخاصّة. عندما تختار اللون المقابل في التخصيص ← صفحة المنتج، تضبط الصفحة هذه المتغيّرات بنفسها بعد الـ CSS المخصَّص، فيتغلّب المنتقي ؛ والقيمة التي تضعها هنا لا تُطبَّق إلا ما دام ذلك المنتقي فارغًا:

المتغيّر

يتحكّم في

--pd-buynow

لون زر «اشترِ الآن» (و--pd-buynow-hover عند المرور)

--pd-fc-btn

لون زر إرسال الدفع السريع (و--pd-fc-btn-hover عند المرور)

لتغيير ألوان المتجر كلّه، استعمل منتقيَي اللون الأساسي والثانوي في التخصيص ← الألوان والخط: فهما يصلان إلى كل الصفحات، بما فيها صفحات المنتج. أما المتغيّرات أدناه فلا تصل إلا إلى الصفحات التي تقرؤها: الصفحات الرئيسية للقوالب، والسلة، والـ checkout، وصفحات التصنيفات وكل المنتجات وتتبّع الطلب. لصفحات المنتج متغيّرات ألوان خاصّة بها، والصفحة الرئيسية لقالب Promobi تقرأ --accent و--accent2، وعدّة صفحات تبني --gradient من الألوان المحفوظة، لذا اضبطه هو أيضًا.

/* إعادة تلوين الصفحات التي تقرأ هذه المتغيّرات */
:root {
  --primary: #6d28d9;
  --secondary: #a78bfa;
  --gradient: linear-gradient(135deg, #6d28d9 0%, #a78bfa 100%);
  --accent: #6d28d9;
  --accent2: #a78bfa;
  --btn-radius: 12px;
  --background: #faf7f2;
  --bg: #faf7f2;
}


القوالب

انسخ أي كتلة إلى حقل الـ CSS المخصَّص. امزج وطابق كما تشاء.

الأزرار

هذه القواعد تستهدف .add-to-cart، أي زر الشراء على بلاطات شبكة المنتجات. أما زرّا اشترِ الآن والدفع السريع في صفحة المنتج فاضبط لهما --pd-buynow / --pd-fc-btn (أو استعمل منتقيات الألوان في التخصيص ← صفحة المنتج) بدل مطاردة فئة.

/* أزرار على شكل حبّة دواء (مستديرة بالكامل) */
.add-to-cart { border-radius: 999px; }/* أزرار متدرّجة الألوان مع ارتفاع خفيف عند المرور */
.add-to-cart {
  background: linear-gradient(135deg, #f59e0b 0%, #f97316 100%);
  border: none;
  transition: transform .15s ease, box-shadow .15s ease;
}
.add-to-cart:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(245, 158, 11, .35);
}/* نمط الإطار (outline) */
.add-to-cart {
  background: transparent;
  color: #f59e0b;
  border: 2px solid #f59e0b;
}
.add-to-cart:hover { background: #f59e0b; color: #fff; }

بطاقات المنتجات

/* ظلّ ناعم + زوايا مستديرة */
.product-card {
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
  overflow: hidden;
}/* رفع البطاقة عند المرور فوقها */
.product-card {
  transition: transform .2s ease, box-shadow .2s ease;
}
.product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 32px rgba(0, 0, 0, .12);
}/* تكبير لطيف لصورة المنتج عند المرور */
.product-card:hover .product-image img { transform: scale(1.04); }
.product-image img { transition: transform .3s ease; }/* جعل السعر أكبر وأعرض */
.product-price { font-size: 1.15rem; font-weight: 800; }

⚠️ تنبيه — تأثيرات الـ hover مُعطَّلة على الهواتف — اتركها كذلك

كل القوالب تأتي بتجاوزات @media (hover: none) and (pointer: coarse) معلَّمة بـ !important تُبطِل تحويلات .product-card:hover وتُخفي .product-actions. وهذا مقصود: فالبطاقة كاملةً قابلة للنقر، وعلى iOS تلتهم حالة الـ hover النشطة أول لمسة للمتسوّق، فيتوقّف المنتج عن الفتح من اللمسة الأولى. لا تُعِد فرض أنماط الـ hover على أجهزة اللمس.

رأس الصفحة وشريط التنقّل

/* ظلّ رأس الصفحة */
.navbar-store {
  box-shadow: 0 2px 12px rgba(0, 0, 0, .06) !important;
}/* رأس صفحة بلون العلامة الصلب */
.navbar-store { background: #111827 !important; }

الرأس الثابت وظلّ الرأس وحدّ الرأس لها أصلًا مفاتيح في التخصيص ← الرأسية والشعار: استعملها أولًا، فهي تبقى بعد تغيير القالب. استعمل المفتاح للرأس الثابت: قاعدة position هنا لا تفعل شيئًا في معظم الصفحات، ومع !important قد تترك فراغًا تحت رأس الصفحة على الهواتف.

الشريط الترويجي

/* شريط ترويجي متدرّج لافت للنظر */
.announcement-bar {
  background: linear-gradient(90deg, #f59e0b, #ef4444) !important;
  color: #fff !important;
  font-weight: 600 !important;
  letter-spacing: .3px;
}

الخطوط والطباعة

يدعم الـ CSS المخصَّص @import، فيمكنك تحميل خطّ من Google Fonts وتطبيقه في كل مكان. ضع سطر @import في أعلى الحقل تمامًا. الخطوط من Google Fonts تُحمَّل، أما صفحات الأنماط والخطوط من معظم خدمات الخطوط الأخرى فتحجبها سياسة الأمان في واجهة المتجر.

/* تحميل خطوط من Google Fonts واستعمالها عبر المتجر */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@600;800&display=swap');body { font-family: 'Poppins', sans-serif; }/* خطّ مختلف وأثقل للعناوين فقط */
h1, h2 { font-family: 'Sora', sans-serif; letter-spacing: -.5px; }

تذكّر حدّ 50 كيلوبايت: قائمة طويلة من أسطر @import مع صفحة أنماط كبيرة قد تبلغه فتُقتطَع بصمت.

💡 نصيحة — المتاجر العربية

للواجهات العربية، اختر خطًّا بتغطية كاملة للحروف العربية — Cairo وTajawal وAlmarai كلّها تعمل جيّدًا: @import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;700&display=swap');

الـ Hero

لا توجد فئة .hero مشتركة — ضع بدلها محدِّد الـ hero الخاص بقالبك: .hero-section (Starter) و.dt-hero-section (Digital) و.sc-hero (Started V2 وBloom) و.pr-hero (Prestige) و.pm-hero (Promobi). والمثال أدناه يستعمل محدِّد Starter.

/* تعتيم الـ hero ليبقى النص المتراكب فوقه مقروءًا */
.hero-section::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .35);
}
.hero-section h1 { position: relative; z-index: 1; text-shadow: 0 2px 12px rgba(0,0,0,.4); }

التذييل

/* تذييل داكن مع تلوين الروابط بلون العلامة عند المرور */
.footer { background: #0f172a !important; color: #cbd5e1 !important; }
.footer a { color: #cbd5e1 !important; transition: color .15s ease; }
.footer a:hover { color: #f59e0b !important; }

📝 ملاحظة

.footer يغطّي كل الصفحات باستثناء الصفحة الرئيسية لقالب Brico التي تعرض تذييلها الخاص: استعمل .brico-footer هناك، إلى جانب .footer لبقيّة صفحات Brico. كما أن للون التذييل منتقيًا مدمجًا (التخصيص ← التذييل، Pro فما فوق).

تعديلات للجوال فقط

غلِّف القواعد داخل استعلام @media لتُطبَّق فقط على الشاشات الصغيرة:

@media (max-width: 768px) {
  /* أزرار أكبر وأسهل للنقر على الهواتف */
  .add-to-cart { padding: 14px 18px; font-size: 1rem; }  /* زوايا أنعم لبطاقة المنتج على الهواتف */
  .product-card { border-radius: 12px; }
}

أمران يحاولهما الناس هنا ولا ينجحان:

  • إخفاء صندوق البحث. لا توجد فئة بحث مشتركة ؛ فالبحث في الصفحة الرئيسية فقط وخاص بكل قالب (.brico-search و.sc-search و.pr-search و.pm-search و.search-section). ويوجد في المخصِّص مفتاح شريط البحث للإظهار/الإخفاء: استعمله بدلًا من ذلك.

  • فرض شبكة منتجات بعمودين. شبكات منتجات الصفحة الرئيسية أصلًا بعمودين على الجوال: أعمدة Bootstrap (col-6 col-md-4 col-lg-3) في معظم القوالب، و.pm-grid في Promobi. أما صفحات كل المنتجات والتصنيفات فتستعمل .products-grid. و.product-grid هو غلاف المعرض + المعلومات في صفحة تفاصيل المنتج: واستهدافه يضغط المعرض وعمود المعلومات جنبًا إلى جنب على الهواتف ولا يفعل شيئًا للصفحة الرئيسية.

إخفاء ما لا تريده

/* إخفاء زر WhatsApp العائم (أو أوقفه من التخصيص ← أداة المساعدة) */
.whatsapp-float, .dzhw-launcher { display: none !important; }/* إخفاء الشريط الترويجي */
.announcement-bar { display: none; }

⚠️ تنبيه

لا تُخفِ أبدًا أزرار اشترِ / أضف إلى السلة (.add-to-cart، وزرَّي «اشترِ الآن» و«الدفع السريع») — فذلك يمنع الزبائن من الطلب. استخدم المعاينة المباشرة للتأكّد من بقائها ظاهرة. وإذا كنت تريد فعلًا إخفاءها في بعض الصفحات، ففي المخصِّص مفاتيح مناسبة لذلك (التخصيص ← بطاقة المنتج، والتخصيص ← صفحة المنتج، Pro فما فوق).

حركات دقيقة وسلسة

/* إظهار كل شيء بتلاشٍ لطيف عند التحميل */
body { animation: dzfade .4s ease both; }
@keyframes dzfade { from { opacity: 0; } to { opacity: 1; } }/* انتقالات سلسة للألوان/الظلال في كل مكان */
a, button, .product-card { transition: all .15s ease; }


أفضل الممارسات

  • عايِن قبل أن تحفظ — تتحدّث لوحة المعاينة مباشرةً أثناء كتابتك. احفظ فقط عندما يبدو الأمر صحيحًا.

  • الجوال أولًا — معظم المتسوّقين الجزائريين على الهواتف. تحقّق دائمًا من معاينة الجوال ومن هاتف حقيقي.

  • لا تُخفِ عناصر الواجهة الحرجة — أبقِ زرّ اشترِ/أضف إلى السلة والسعر والدفع ظاهرين.

  • أبقِه صغيرًا — بضع قواعد مركّزة أفضل من صفحة أنماط ضخمة، كما أن الحقل محدود بصرامة بـ 50 كيلوبايت مع اقتطاع صامت لما بعدها.

  • استعمل المفتاح المدمج متى وُجد — انظر الجدول في أعلى هذه الصفحة. فإعداد المخصِّص لا يُلغيه تحديث قالب.

  • استعمل منتقيات الألوان لألوان العلامة (التخصيص ← الألوان والخط): تغيير واحد يعيد تصميم المتجر كاملًا. أما متغيّرات الـ CSS (--primary، --gradient، --pd-buynow) فلا تصل إلا إلى الصفحات التي تقرؤها، كما يشرح قسم المتغيّرات أعلاه.

  • تحقّق من اللغتين — إذا كنت تبيع بالعربية (RTL) وبالفرنسية/الإنجليزية (LTR)، فعايِن كليهما حتى لا يكسر تعديل margin-left الاتجاه الآخر.

  • @import يأتي أولًا — يجب أن تكون استيرادات الخطوط في أعلى الحقل تمامًا وإلّا تجاهلها المتصفّح.


استكشاف الأخطاء وإصلاحها

العَرَض

السبب المُحتمَل

الحلّ

قاعدتي لا تُطبَّق

قاعدة القالب أكثر تحديدًا

أضِف !important، أو استهدف بدقّة أكبر (مثل .product-card .add-to-cart)

قاعدتي لا تُطبَّق

المحدِّد غير موجود أصلًا في DZBuild

.btn-primary و.header-search و.hero هي المتّهم المعتاد — انظر قائمة المحدِّدات

لا يزال لا شيء

خطأ مطبعي في المحدِّد / فاصلة منقوطة أو قوس ناقص

أعِد فحص الكتلة ؛ قوس واحد مكسور قد يُعطّل البقيّة

آخر صفحة الأنماط لا يفعل شيئًا

تجاوزت حدّ 50 كيلوبايت فاقتُطِعت عند الحفظ

اختصر الـ CSS

التغيير يظهر في المعاينة لكن ليس على المتجر الحيّ

صفحات المتجر مخزّنة مؤقتاً لبضع دقائق

انتظر نحو خمس دقائق، ثم أعِد التحميل بقوّة (Ctrl/Cmd+Shift+R) أو افتح نافذة خاصّة. لا يوجد تفريغ يدوي للكاش، والصفحة التي حمّلها الزائر قبل التعديل تبقى على الـ CSS القديم حتى تنتهي صلاحية نسختها المخزّنة

خطّي لا يُحمَّل

@import ليس في الأعلى

انقل كل سطر @import إلى أعلى الحقل تمامًا

لا شيء يتغيّر في صفحة الهبوط

الـ CSS المخصَّص لا يُطبَّق على صفحات /landing/…

نسِّق صفحة الهبوط من محرِّر صفحات الهبوط

المتجر يبدو مكسورًا

قاعدة تجاوزت الحدّ

فرّغ الحقل واحفظ للتراجع فورًا — لا شيء دائم

📝 ملاحظة — وسم إغلاق شارد لا يمكنه كسر صفحتك

إذا انتهى نصّ مثل </style> أو </script> داخل الحقل، فإن DZBuild يُهرِّبه قبل وصوله إلى الصفحة، فلا يستطيع إنهاء صفحة الأنماط ولا حقن أي وسوم. وهو يُهرَّب لا يُحفَظ كما هو، فلا تتوقّع أن يُعرَض مثل هذا النص.


التراجع في أي وقت

الـ CSS المخصَّص ليس مدمِّرًا أبدًا. للتراجع عن كل شيء، فرّغ حقل الـ CSS المخصَّص واضغط حفظ، فتعود واجهة متجرك إلى إعدادات القالب الافتراضية عند أول تحميل جديد للصفحة. منتجاتك وطلباتك وإعداداتك تبقى دون مساس.

تريد تغيير التخطيط أو الألوان أو الخطوط أو الأقسام دون كتابة كود؟ معظم ذلك مدمَج في المحرّر المرئي — انظر تخصيص المتجر.

هل أجاب هذا عن سؤالك؟