ده مسار عملي لتعلم تصميم المواقع من الصفر باستخدام WordPress وElementor. هتفهم الأول الموقع بيتكون من إيه، يعني إيه دومين وهوستينج، وبعدها تثبت WordPress وتبني صفحة كاملة وتشوف طريقة إعداد الهيدر والفوتر.
الكورس مناسب لو لسه مبتدئ وعايز تشوف Workflow حقيقية قريبة من شغل العملاء. التنفيذ لا يعتمد على AI أو نسخ Template جاهز. الهدف إنك تفهم الأدوات وتبني بإيدك.
قبل WordPress: افهم عالم الويب
الدومين هو عنوان الموقع، والهوستينج هو البيئة التي تحفظ ملفات الموقع وقاعدة البيانات وتشغلهما. WordPress هو نظام إدارة المحتوى الذي ستبني وتدير من خلاله الصفحات والمقالات والمستخدمين.
WordPress.com أم WordPress.org؟
WordPress.org هو النظام المفتوح الذي تثبته على هوستينج تختاره، ويعطيك مرونة كاملة في القوالب والإضافات والكود. WordPress.com خدمة مستضافة بخطط وحدود تختلف حسب الاشتراك. أغلب شغل العملاء الذي يحتاج تحكمًا كاملًا يعتمد على WordPress.org.
إنشاء السيرفر وتثبيت WordPress
في الكورس استخدمت Cloudways لتجهيز السيرفر وتثبيت WordPress. تقدر تبدأ من Cloudways بتجربة مجانية 3 أيام من غير بطاقة، وتستخدم كود NOURMANSOUR للحصول على خصم 25% لأول شهرين حسب العرض المذكور في الفيديو.
لو تفضل Hostinger، استخدم رابط Hostinger وكود NOUR لخصم 10%.
جولة داخل لوحة WordPress
قبل التصميم، تعرف على الصفحات والمقالات والميديا والقوالب والإضافات والمستخدمين والإعدادات. افهم الفرق بين Page وPost، ومكان رفع الصور، وكيف تختار Permalink مناسبًا.
لماذا نستخدم Elementor؟
Elementor Page Builder يسمح لك ببناء الصفحة بصريًا مع تحكم في الـLayout والـTypography والـResponsive. النسخة المجانية كافية للتعلم وصفحات أساسية، بينما Elementor Pro يضيف Theme Builder وForms وPopups وWidgets إضافية.
لو احتجت Pro، استخدم رابط Elementor وكود NOUR لخصم 5% على خطط Elementor One حسب العرض المذكور.
إعداد Elementor قبل التصميم
- حدد عرض الـContainer والـBreakpoints.
- جهز Global Colors وGlobal Fonts.
- اضبط القالب على عرض مناسب للصفحة.
- احذف المحتوى الافتراضي غير المطلوب.
- راجع إعدادات الموبايل من البداية.
بناء Section كامل
ابدأ بالـContainer، ثم حدد اتجاه العناصر والمسافات والمحاذاة. أضف العنوان والنص والزر والصورة حسب Hierarchy واضحة. بعد إنهاء Desktop، راجع Tablet وMobile وعدل المقاسات بدل الاعتماد على التحويل التلقائي فقط.
الهيدر والفوتر والثيم
بعد بناء الصفحة، جهز القالب وحدد الشعار والقائمة وأجزاء الهيدر والفوتر. لو تستخدم Elementor Pro، تقدر تبني Templates بشروط عرض مختلفة. في النسخة المجانية تعتمد على خيارات القالب أو إضافة مخصصة عند الحاجة.
بعد الكورس تعمل إيه؟
- أعد بناء الصفحة بنفسك من غير مشاهدة الخطوات.
- صمم صفحة ثانية من Reference مختلف.
- تعلم أساسيات التصميم والـHierarchy والاتساق.
- ابنِ ثلاثة مشروعات للبورتفوليو.
- تعلم السرعة والحماية والنسخ الاحتياطية قبل شغل العملاء.
لخريطة أوسع للمجال اقرأ دليلك الكامل لتعلم تطوير المواقع. الفيديو نفسه مدته أكثر من ساعة ويحتوي على التنفيذ الكامل من أول إعداد السيرفر لحد الهيدر والفوتر.