6.1حالات ملموسة
الأساسي في 30 ثانية
- التجميع: قالب خفيف + Elementor، حاويات Flexbox نظيفة، دليل أسلوب عامّ (ألوان/خطوط)، ترويسة وتذييل عامّان (Theme Builder)، نموذج عرض سعر، ثم تحسين (صور، كاش) واختبار على الجوّال.
- إعادة التشغيل: يصل زبون جديد — ننطلق من الطقم المُصدَّر، نطبّق دليل أسلوبه، نستبدل النصوص والصور: موقع مُسلَّم في جزء من الوقت.
- الإثبات: مسار مُختبَر على هاتف حقيقيّ، نموذج مُستلَم، Core Web Vitals في الأخضر، روابط مُتحقَّق منها — ما لا يُختبَر لا يوجد.
الخيط الناظم — تسليمتان في وهران
نادية، مصمّمة ويب مستقلّة في وهران، تراجع مشروعَيها البارزَين: الموقع التعريفي للنجّار بن علي (ترويسة عامّة، معرض أعمال في Loop، نموذج عرض سعر، أداء) ثم المتجر الصغير المُضاف لاحقًا (WooCommerce، بطاقة منتج، مسار شراء). تُعيد الحالتان أدناه تسلسلها: بنية نظيفة، دليل أسلوب عامّ، أجزاء عامّة، محتوى ديناميكيّ، تحسين، اختبار.
كل حالة تتبع السياق → الخطوات → النتيجة: أعِد تشغيلها على مشروعك الخاصّ.
لماذا حالات ملموسة
المستويات السابقة وضعت اللبنات؛ هنا نجمّعها من الطرف إلى الطرف. تسلسل العادات الجيّدة — بنية بسيطة، دليل أسلوب عامّ، أجزاء عامّة، اختبار جوّال — هو ما يميّز موقعًا مُسلَّمًا بنظافة عن ترقيع صعب الصيانة.
الحالة 1 — موقع تعريفي، من الألف إلى الياء
السياق: يريد النجّار موقعًا تعريفيًا (رئيسية، أعمال، تواصل) قابلًا للإيجاد على Google، مُسلَّمًا بنظافة.
Déroulé :
- تثبيت Elementor Free + قالب خفيف (Hello Elementor)، كل شيء محدَّث، نسخة احتياطية مأخوذة.
- البناء بحاويات Flexbox بسيطة؛ تعريف دليل الأسلوب العامّ (لونان، خطّ أو اثنان) في إعدادات الموقع.
- إنشاء ترويسة وتذييل عامّين في Theme Builder (شعار، قائمة، زر «عرض سعر»؛ عنوان، مواعيد).
- وضع المحتوى: H1 واحد لكل صفحة، alt على كل صورة، شريط مقروء (overlay).
- إضافة نموذج عرض سعر (ودجة Pro) بإشعار بالبريد إلى الورشة.
- التحسين (ضغط الصور، كاش)، ضبط الاستجابة، ثم الاختبار على هاتف حقيقيّ.
النتيجة: موقع تعريفي واضح وسريع ومتّسق؛ يُضاف محتوى جديد دون إعادة التخطيط.
الحالة 2 — إضافة متجر صغير دون إعادة كل شيء
السياق: يريد النجّار بيع بعض المنتجات على الإنترنت، على الموقع نفسه، دون الانطلاق من الصفر.
Déroulé :
- تثبيت WooCommerce (محرّك التجارة) وإضافة بعض المنتجات.
- بـ WooCommerce Builder، تصميم بطاقة المنتج (معرض، سعر، «أضف إلى السلّة»).
- عرض المتجر في شبكة عبر Loop Builder، بهويّة الموقع.
- التحقّق من أن الترويسة/التذييل العامّين ودليل الأسلوب يُطبَّقان أيضًا على صفحات المتجر.
- العناية بالمسار: متجر → منتج → سلّة → دفع، بمعلومات واضحة.
- اختبار شراء من الطرف إلى الطرف، بما فيه على الجوّال.
النتيجة: متجر متّسق مع بقية الموقع، بمسار شراء مُختبَر وبلا احتكاك.
نصّ جاهز للقول — تأطير مشروع موقع (30 ث)
«حاجتنا: [تعريفي / تعريفي + متجر]. أساسنا: [قالب خفيف، دليل أسلوب عامّ]. أجزاؤنا العامّة: [ترويسة/تذييل في Theme Builder]. برهاننا: [نموذج مُستلَم، مسار مُختبَر على الجوّال، صفحات سريعة].»
قالب للنسخ واللصق — خطّة مشروع Elementor
التهيئة: قالب خفيف + Elementor + نسخة + تحديثات
البناء: حاويات Flexbox بسيطة + دليل أسلوب عامّ (ألوان/خطوط)
عامّ: ترويسة + تذييل (Theme Builder)، الشروط = كل الموقع
المحتوى: H1 واحد/صفحة، alt في كل مكان، overlay مقروء، نموذج (Pro)
التحسين: صور مضغوطة (WebP)، كاش، استجابة
الاختبار: مسار + نموذج + Core Web Vitals، على جوّال حقيقيّحرفيّ / ميزانية صغيرة
البقاء في Free لموقع تعريفي بسيط؛ الانتقال إلى Pro يوم نموذج حقيقيّ أو ترويسة عامّة.
مؤسّسة صغيرة بوهران
التكيّف مع الواقع المحلّي: زر «tel:» ظاهر، نصوص قصيرة، صور مُخفَّفة لشبكة جوّال متغيّرة.
متجر خفيف
بعض المنتجات: بطاقة مُعتنى بها، مسار بسيط جدًا، شراء مُختبَر على الجوّال.
متعدّد اللغات
التخطيط منذ البداية لاتّساق الأجزاء العامّة ودليل الأسلوب إن أتت لغات أخرى.
تحدّي 48 ساعة — طبّق غدًا
خذ صفحة حقيقية واحدة وأعِد تشغيل التسلسل: بنية بسيطة، دليل أسلوب عامّ مُطبَّق، جزء عامّ واحد (ترويسة أو تذييل)، اختبار جوّال واحد مُثبَت.
- أعرف تسلسل البنية ودليل الأسلوب والأجزاء العامّة والمحتوى والتحسين على مشروع حقيقيّ.
- لديّ مشروع قابل لإعادة التشغيل (طقم + دليل أسلوب مُعادان).
- أنجزتُ تحدّي 48 ساعة أو خطّطتُ تاريخه.
تُسلّم نادية الموقع التعريفي للنجّار. أي تسلسل يحترم الدليل؟