المجتمع

دليلك الشامل لإنشاء موقع ووردبريس احترافي وكسب المال عبر الإنترنت (بدون برمجة!)

صورة ouwayess1@gmail.com ouwayess1@gmail.com أرسل بريدا إلكترونيا منذ 4 أسابيع
0 17 18 دقائق
Capture.PNG1

جدول المحتويات التفاعلي:

  1. مقدمة: لماذا ووردبريس هو خيارك الأمثل؟
  2. ماذا ستتعلم في هذا الدليل؟ (نظرة على الموقع التجريبي)
  3. خارطة الطريق لإنشاء موقعك
  4. الخطوة الأولى: حجز اسم النطاق واستضافة الويب
  5. الخطوة الثانية: تثبيت ووردبريس
  6. الخطوة الثالثة: التعرف على لوحة تحكم ووردبريس
  7. الخطوة الرابعة: تثبيت القالب والإضافات الأساسية
  8. الخطوة الخامسة: إنشاء الصفحات الأساسية
  9. الخطوة السادسة: إنشاء قائمة التنقل (Menu)
  10. الخطوة السابعة: تصميم الصفحة الرئيسية باستخدام Elementor
  11. الخطوة الثامنة: تصميم صفحة اتصل بنا
  12. الخطوة التاسعة: تصميم تذييل الموقع (Footer)
  13. الخطوة العاشرة: تخصيص رأس الموقع (Header) وإضافة الشعار
  14. فرصتك لتطوير مهاراتك: دورة تحدي ووردبريس
  15. خاتمة: انطلق نحو النجاح!
  16. مراجع وروابط خارجية

1. مقدمة: لماذا ووردبريس هو خيارك الأمثل؟

هل شاهدت العديد من الطرق لكسب المال عبر الإنترنت؟ نعم، هناك طرق لا حصر لها. ولكن إذا سألتني ما هي الأفضل، ما هي الطريقة الصحيحة للحصول على منتج أصلي حقًا يمكنك بناء مهنة مستدامة من خلاله؟ سأخبرك بلا تردد: تعلم ووردبريس.

قصتي مع ووردبريس

لا أزال أتذكر ذلك بوضوح، في عام 2015، في الساعة الثانية صباحًا، كنت أجلس وأتساءل “ماذا أفعل؟”. بدأت رحلتي مع ووردبريس، ومن خلال تعلمه وتطوير مهاراتي فيه، تمكنت بفضل الله من إنشاء ستة مصادر دخل مختلفة. انظر، عليك أن تبدأ من مكان ما. إذا كان هدفك الأساسي في البداية هو “أريد فقط كسب المال”، فثق بي، قد لا تتمكن من كسب المال بشكل مستدام. أنت بحاجة إلى المهارات أولاً.

أهمية المهارات قبل الربح

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

لن أضيع وقتك. في النهاية، إذا شعرت أنني أهدرت وقتك، يمكنك تجاهل كل ما أقوله. ولكن إذا شعرت أن هذا المحتوى قد أفادك، فاعلم أن هذا هو الطريق الصحيح. قد تستغرق رحلتك بعض الوقت، تمامًا كما استغرقت رحلتي سبع سنوات للوصول إلى ما أنا عليه الآن، ولكن بالخطوات الصحيحة والمثابرة، يمكنك أيضًا تحويل نفسك إلى مصدر دخل متعدد.

Capture

2. ماذا ستتعلم في هذا الدليل؟ (نظرة على الموقع التجريبي)

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

عناصر الصفحة الرئيسية

  • الشعار (Logo): هويتك البصرية.
  • القائمة الرئيسية (Menu): لسهولة التنقل بين صفحات الموقع.
  • زر الدعوة لاتخاذ إجراء (Call to Action Button): لتوجيه الزوار.
  • عنوان رئيسي جذاب (Hero Section Title).
  • صور وأيقونات احترافية.
  • أقسام متعددة بتصاميم مختلفة.

الأقسام التفاعلية

  • عدادات الأرقام (Counters): لعرض إنجازاتك أو إحصائياتك بشكل ديناميكي، حيث تزداد الأرقام تلقائيًا عند تحميل الصفحة.
  • أقسام بنصفين (Split Sections): نصف يحتوي على نصوص وأزرار، والنصف الآخر يحتوي على صور بتأثيرات جذابة.
  • تنظيم المحتوى في أعمدة (Column Layouts): لعرض المعلومات بشكل منظم ومرتب (أيقونة، عنوان، نص).
  • قسم المحفظة/المشاريع (Portfolio): لعرض أعمالك السابقة مع صور وتفاصيل.
  • قسم بخلفية داكنة ونصوص بيضاء: لكسر روتين التصميم وإبراز محتوى معين، مع تأثيرات تحويم (hover effects) على الأزرار.
  • قسم شهادات العملاء (Testimonials): لعرض آراء عملائك الإيجابية.
  • قسم فريق العمل (Team Section): لعرض أعضاء فريقك مع صورهم وروابط حساباتهم على وسائل التواصل الاجتماعي.
  • نموذج الاتصال (Contact Form): لتمكين الزوار من التواصل معك بسهولة.

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

3. خارطة الطريق لإنشاء موقعك

لإنشاء موقع ووردبريس احترافي، سنتبع خارطة طريق واضحة ومحددة الخطوات:

  1. اسم النطاق (Domain Name): هو عنوان موقعك الفريد على الإنترنت (مثل www.example.com).
  2. استضافة الويب (Web Hosting): هي المساحة التي يتم فيها تخزين ملفات موقعك ليصبح متاحًا للزوار من جميع أنحاء العالم.
  3. ووردبريس (WordPress): هو نظام إدارة المحتوى (CMS) الذي سنستخدمه لبناء الموقع. إنه نظام قوي ومرن يتيح لك إنشاء وإدارة موقعك بسهولة بدون برمجة.
  4. القوالب والإضافات (Themes & Plugins):
    • القالب (Theme): يحدد المظهر العام وتصميم موقعك.
    • الإضافات (Plugins): برامج صغيرة تضيف وظائف وميزات محددة إلى موقعك (مثل إضافة Elementor لبناء الصفحات بشكل مرئي).
  5. إنشاء الصفحات: مثل الصفحة الرئيسية، من نحن، اتصل بنا، الخدمات، المعرض، إلخ.
  6. إنشاء القوائم (Menus): لتسهيل تنقل الزوار بين صفحات الموقع.
  7. تصميم الصفحة الرئيسية: الواجهة الأولى التي يراها الزائر.
  8. تصميم صفحة اتصل بنا: تتضمن نموذج اتصال وخريطة موقع.
  9. تصميم التذييل (Footer): الجزء السفلي من الموقع الذي يحتوي عادةً على معلومات حقوق النشر وروابط مهمة.

4. الخطوة الأولى: حجز اسم النطاق واستضافة الويب

اسم النطاق واستضافة الويب هما الأساس الذي ستبني عليه موقعك، ويتطلبان استثمارًا بسيطًا للحصول على نتائج جيدة.

لماذا أوصي بـ Hostinger؟

هناك العديد من شركات استضافة الويب، ولكني استخدمت العديد منها ووجدت أن Hostinger تقدم توازنًا ممتازًا بين السعر المنخفض والخدمة الجيدة. إنها خيار رائع للمبتدئين والمحترفين على حد سواء.

يمكنك استخدام رمز القسيمة SADDAM7 للحصول على خصم إضافي عند الشراء. هذا وضع مربح للجانبين!

شرح خطط Hostinger واختيار الأنسب

عند زيارة موقع Hostinger والذهاب إلى قائمة “WordPress Hosting”، ستجد عادةً ثلاث خطط رئيسية (قد تختلف المسميات قليلاً):

  • الخطة المميزة (Premium): مناسبة للمبتدئين، تتيح لك إنشاء ما يصل إلى 100 موقع، توفر أداءً قياسيًا، مساحة تخزين SSD جيدة (عادةً 100 جيجابايت)، نطاق مجاني للسنة الأولى، وبريد إلكتروني احترافي مجاني.
  • خطة الأعمال (Business): الخطة التي أوصي بها بشدة. تقدم أداءً أسرع (حتى 5 مرات)، مساحة تخزين SSD أكبر (عادةً 200 جيجابايت)، نطاق مجاني، بريد إلكتروني مجاني، شهادات SSL مجانية لجميع النطاقات، نسخ احتياطي يومي، وشبكة توصيل محتوى (CDN) مجانية لتحسين سرعة الموقع عالميًا.
  • خطة Cloud Startup: أكثر تكلفة وموجهة للمشاريع الكبيرة.

نصيحتي: اختر خطة الأعمال (Business Plan). قد تكون تكلفتها أعلى بقليل من الخطة المميزة، ولكن الميزات الإضافية مثل السرعة الأعلى، النسخ الاحتياطي اليومي، و CDN تستحق الاستثمار إذا كنت جادًا في بناء تواجد قوي عبر الإنترنت. لا تفكر في بضعة دراهم إضافية شهريًا عندما يتعلق الأمر ببناء حياتك المهنية.

عملية الشراء وتفعيل الخصم

  1. اذهب إلى Hostinger عبر هذا الرابط.
  2. اختر خطة “WordPress” ثم خطة “الأعمال” (Business) أو الخطة التي تناسبك.
  3. اختر مدة الاستضافة. أوصي بـ 12 شهرًا على الأقل، أو 24 شهرًا، أو حتى 48 شهرًا للحصول على أفضل سعر وتجنب ارتفاع الأسعار عند التجديد. كلما طالت المدة، قل السعر الشهري وحصلت على أشهر مجانية إضافية.
  4. أنشئ حسابك بإدخال بريدك الإلكتروني أو تسجيل الدخول عبر جوجل/فيسبوك.
  5. اختر طريقة الدفع المناسبة لك.
  6. قبل إتمام الدفع، ابحث عن قسم “هل لديك رمز قسيمة؟” وأدخل الكود SADDAM7 ثم اضغط “تطبيق” للحصول على خصم إضافي.
  7. أكمل عملية الدفع.

الحصول على إضافة Elementor Pro مجانًا

بعد إتمام عملية الشراء عبر رابطي الخاص، ستتلقى رسالة تأكيد من Hostinger عبر البريد الإلكتروني.

  1. التقط لقطة شاشة (screenshot) لرسالة التأكيد هذه.
  2. ستجد رابطًا لنموذج في وصف الفيديو التعليمي الأصلي الذي شاهدته (أو يمكنك التواصل معي إذا كنت تتابع هذه المقالة من مصدر آخر وسأوجهك).
  3. املأ النموذج وأرفق لقطة الشاشة.
  4. بعد التحقق، سيتم إرسال إضافة Elementor Pro إليك.

حجز اسم النطاق المجاني

بعد شراء الاستضافة، قم بتسجيل الدخول إلى لوحة تحكم Hostinger الخاصة بك.

  1. اذهب إلى قسم “النطاقات” (Domains) في القائمة العلوية.
  2. ابحث عن خيار “اطلب نطاقك المجاني” (Claim your free domain) أو ما شابه.
  3. ابحث عن اسم النطاق الذي ترغب به (مثلاً myawesomesite.com). يجب أن يكون الاسم فريدًا. يمكن أن يحتوي على أحرف وأرقام وشرطات (-).
  4. إذا كان النطاق متاحًا، قم بتأكيد الحجز. سيتم ربطه تلقائيًا بحساب الاستضافة الخاص بك.

5. الخطوة الثانية: تثبيت ووردبريس

تثبيت ووردبريس عبر لوحة تحكم Hostinger

  1. من لوحة تحكم Hostinger، اذهب إلى قسم “المواقع الإلكترونية” (Websites).
  2. انقر على “إنشاء أو ترحيل موقع ويب” (Create or migrate a website).
  3. اختر “إنشاء موقع ويب جديد” (Create a new website).
  4. اختر المنصة “ووردبريس” (WordPress).
  5. أنشئ تفاصيل تسجيل الدخول لموقع ووردبريس الخاص بك:
    • عنوان البريد الإلكتروني للمسؤول: بريدك الإلكتروني.
    • كلمة المرور للمسؤول: اختر كلمة مرور قوية.
  6. انقر “متابعة”. يمكنك تخطي أي إضافات أو قوالب يقترحها Hostinger في هذه المرحلة، سنقوم بذلك لاحقًا.
  7. اختر اسم النطاق الذي قمت بحجزه للتو لتثبيت ووردبريس عليه.
  8. انقر “تحديد” (Select) ثم “إنهاء الإعداد” (Finish setup) أو ما شابه.
  9. انتظر بضع دقائق حتى يكتمل تثبيت ووردبريس.

تفعيل شهادة SSL المجانية

شهادة SSL (طبقة المقابس الآمنة) ضرورية لأمان موقعك (تجعل عنوان موقعك يبدأ بـ https:// بدلاً من http:// وتظهر أيقونة قفل بجانبه).

  1. في لوحة تحكم Hostinger، ضمن إدارة موقعك، ابحث عن قسم “SSL”.
  2. تلقائيًا، يجب أن يقوم Hostinger بتثبيت وتفعيل شهادة SSL مجانية لنطاقك. يجب أن تظهر الحالة “نشط” (Active).
  3. إذا لم تكن نشطة، قد تجد خيارًا لتثبيتها أو إعادة تثبيتها. انقر عليه وانتظر التفعيل.

الآن، إذا فتحت اسم نطاقك في المتصفح (مثلاً www.yourdomain.com)، يجب أن ترى موقع ووردبريس افتراضيًا (عادةً قالب ووردبريس الافتراضي للسنة الحالية).

6. الخطوة الثالثة: التعرف على لوحة تحكم ووردبريس

للوصول إلى لوحة تحكم ووردبريس (الواجهة الخلفية)، أضف /wp-admin إلى نهاية رابط موقعك (مثلاً www.yourdomain.com/wp-admin). قم بتسجيل الدخول باستخدام بيانات اعتماد المسؤول التي أنشأتها أثناء تثبيت ووردبريس.

نظرة عامة على الواجهة

ستجد على الجانب الأيسر شريط التنقل الرئيسي الذي يحتوي على:

  • المقالات (Posts): لإنشاء وإدارة مقالات المدونة.
  • الوسائط (Media): مكتبة الصور والفيديوهات والملفات الأخرى.
  • الصفحات (Pages): لإنشاء وإدارة الصفحات الثابتة مثل “من نحن”، “اتصل بنا”.
  • التعليقات (Comments): لإدارة تعليقات الزوار.
  • المظهر (Appearance): لتخصيص القوالب، القوائم، الودجات، ومحرر القوالب.
  • الإضافات (Plugins): لتثبيت وإدارة الإضافات.
  • الأعضاء (Users): لإدارة حسابات المستخدمين.
  • الأدوات (Tools): أدوات للاستيراد والتصدير وفحص صحة الموقع.
  • الإعدادات (Settings): لضبط الإعدادات العامة للموقع (العنوان، الكتابة، القراءة، المناقشة، الوسائط، الروابط الدائمة، الخصوصية).

القوالب (Themes)

من المظهر > قوالب، يمكنك رؤية القوالب المثبتة وتفعيل القالب الذي تريده أو إضافة قوالب جديدة. قالب ووردبريس الافتراضي (مثل Twenty Twenty-Four) يكون مفعلًا.

الإضافات (Plugins)

من إضافات > أضف جديد، يمكنك البحث عن آلاف الإضافات المجانية والمدفوعة وتثبيتها. تقوم الإضافات بتوسيع وظائف موقعك. قد تجد بعض الإضافات مثبتة مسبقًا من Hostinger (مثل Hostinger AI Assistant أو LiteSpeed Cache). يمكنك إلغاء تنشيط أو حذف أي إضافات لا تحتاجها حاليًا للحفاظ على سرعة الموقع.

7. الخطوة الرابعة: تثبيت القالب والإضافات الأساسية

تثبيت قالب Astra

Astra هو قالب خفيف وسريع وقابل للتخصيص بدرجة عالية، ويعمل بشكل ممتاز مع منشئي الصفحات مثل Elementor.

  1. اذهب إلى المظهر > قوالب.
  2. انقر “أضف جديد”.
  3. في مربع البحث، اكتب “Astra”.
  4. عندما يظهر قالب Astra، انقر “تنصيب” ثم “تفعيل”.

تثبيت إضافة Elementor (المجانية والمدفوعة)

Elementor هو منشئ صفحات مرئي قوي يتيح لك تصميم صفحات مذهلة بالسحب والإفلات.

  1. النسخة المجانية:
    • اذهب إلى إضافات > أضف جديد.
    • في مربع البحث، اكتب “Elementor”.
    • عندما تظهر “Elementor Website Builder”، انقر “التنصيب الآن” ثم “تفعيل”. قد تظهر لك شاشة ترحيبية من Elementor، يمكنك إغلاقها والعودة إلى لوحة التحكم.
  2. النسخة المدفوعة (Elementor Pro):
    • إذا اتبعت الخطوات السابقة لشراء الاستضافة عبر رابطي وملأت النموذج، يجب أن تكون قد حصلت على ملف elementor-pro.zip.
    • اذهب إلى إضافات > أضف جديد.
    • انقر “رفع إضافة” في الأعلى.
    • انقر “Choose File”، وحدد ملف elementor-pro.zip من جهازك.
    • انقر “التنصيب الآن” ثم “تفعيل الإضافة”.

تثبيت إضافة تعطيل محرر Gutenberg

محرر Gutenberg هو محرر ووردبريس الافتراضي. بما أننا سنستخدم Elementor، قد نرغب في استخدام المحرر الكلاسيكي لبعض المهام أو تجنب أي تضارب.

  1. اذهب إلى إضافات > أضف جديد.
  2. في مربع البحث، اكتب “Disable Gutenberg”.
  3. ابحث عن إضافة تحمل اسمًا مشابهًا (مثل “Disable Gutenberg” أو “Classic Editor” إذا كنت تفضله). عادةً، “Disable Gutenberg” توفر خيارات أكثر للتحكم.
  4. قم بتنصيب وتفعيل الإضافة. بعد التفعيل، اذهب إلى الإعدادات > Disable Gutenberg وتأكد من تحديد خيار “Complete Disable” أو ما يعادله لحفظ التغييرات.

8. الخطوة الخامسة: إنشاء الصفحات الأساسية

إنشاء صفحة رئيسية، من نحن، خدماتنا، اتصل بنا

  1. اذهب إلى صفحات > أضف جديد.
  2. الصفحة الرئيسية (Home):
    • اكتب “Home” في حقل العنوان.
    • ضبط إعدادات الصفحة (تخطيط Astra): في الشريط الجانبي الأيمن (إذا كنت تستخدم المحرر الكلاسيكي بعد تعطيل Gutenberg) أو ضمن أيقونة إعدادات Astra (إذا ظهرت)، ابحث عن إعدادات Astra للتخطيط:
      • Sidebar: اختر “No Sidebar”.
      • Content Layout: اختر “Full Width / Stretched” أو “Full Width / Contained”. (عادةً “Full Width / Stretched” أفضل لـ Elementor).
      • Disable Elements: قم بتعطيل “Disable Title”، “Disable Breadcrumb”، “Disable Featured Image”.
    • انقر “نشر”.
  3. كرر الخطوات لإنشاء الصفحات التالية بنفس الإعدادات:
    • من نحن (About Us)
    • خدماتنا (Services)
    • اتصل بنا (Contact Us)

9. الخطوة السادسة: إنشاء قائمة التنقل (Menu)

القائمة تساعد الزوار على التنقل في موقعك.

  1. اذهب إلى المظهر > قوائم.
  2. في حقل “اسم القائمة”، اكتب اسمًا (مثلاً “القائمة الرئيسية” أو “Main Menu”).
  3. في “إعدادات القائمة” ضمن “موقع العرض”، حدد “القائمة الرئيسية” (Primary Menu) أو ما يعادلها حسب قالب Astra.
  4. انقر “إنشاء قائمة”.
  5. على اليسار، ستجد صندوق “صفحات”. انقر “إظهار الكل”.
  6. حدد الصفحات التي أنشأتها (Home, About Us, Services, Contact Us).
  7. انقر “أضف للقائمة”.
  8. ستظهر الصفحات في هيكل القائمة على اليمين. يمكنك سحبها وإفلاتها لترتيبها حسب رغبتك (مثلاً: Home أولاً، ثم About Us، إلخ).
  9. انقر “حفظ القائمة”.

الآن، عند زيارة موقعك، يجب أن ترى القائمة التي أنشأتها في رأس الموقع.

10. الخطوة السابعة: تصميم الصفحة الرئيسية باستخدام Elementor

حان وقت الإبداع!

  1. اذهب إلى صفحات > كل الصفحات.
  2. مرر الماوس فوق صفحة “Home” وانقر “تحرير بواسطة Elementor”.

فهم واجهة Elementor

ستفتح واجهة Elementor:

  • على اليسار: لوحة الأدوات (Widgets Panel) التي تحتوي على جميع عناصر التصميم (عناوين، صور، أزرار، إلخ).
  • على اليمين: منطقة التصميم المرئي حيث تبني صفحتك.

تفعيل ميزة “القسم الداخلي” (Inner Section)

في بعض تحديثات Elementor الحديثة، قد تحتاج لتفعيل عناصر قديمة مثل “القسم الداخلي” يدويًا إذا لم تجده في قائمة الأدوات.

  1. من لوحة تحكم ووردبريس، اذهب إلى Elementor > الإعدادات.
  2. اذهب إلى تبويب “الميزات” (Features).
  3. ابحث عن ميزات مثل “Flexbox Container” أو “Grid Container”. إذا كانت نشطة، قد يكون “Inner Section” مدمجًا بشكل مختلف أو قد تحتاج لتعطيل “Flexbox Container” مؤقتًا (أو البحث عن “Section” و “Columns” إذا كنت تستخدم Flexbox).
    • تحديث هام: Elementor يتجه نحو استخدام “Containers” بدلاً من “Sections” و “Inner Sections”. إذا كانت واجهتك تستخدم “Containers”، فالمفهوم مشابه: تضيف “Container” رئيسي، وبداخله يمكنك إضافة “Containers” فرعية لتقسيم الأعمدة. لأغراض هذا الدليل، سأشرح بالطريقة الكلاسيكية “Section” و “Inner Section” قدر الإمكان، ولكن كن على دراية بأن Elementor يتطور. إذا لم تجد “Inner Section”، فاستخدم “Container” واسحبه داخل “Container” آخر لإنشاء أعمدة.
  4. إذا قمت بتغيير أي شيء، انقر “حفظ التغييرات”. ثم عد لتحرير صفحتك الرئيسية بواسطة Elementor.

تصميم قسم الترويسة (Hero Section)

هذا هو أول قسم يراه الزائر.

  1. انقر على أيقونة + في منطقة التصميم لإضافة قسم جديد. اختر هيكلًا من عمودين.
  2. العمود الأيسر:
    • اسحب أداة “عنوان” (Heading) وأسقطها في العمود الأيسر.
      • المحتوى: اكتب نص العنوان (مثلاً “نحن شركة تسويق رقمي رائدة”). يمكنك استخدام وسم <br> في النص لإنشاء سطر جديد.
      • النمط (Style): غير لون النص، الخط (Font Family – مثل Montserrat أو Cairo)، الحجم (Size)، الوزن (Weight).
    • اسحب أداة “محرر النصوص” (Text Editor) تحت العنوان.
      • المحتوى: أضف نصًا وصفيًا.
      • النمط: غير لون النص، الخط، الحجم.
    • اسحب أداة “زر” (Button) تحت محرر النصوص.
      • المحتوى:
        • النص: (مثلاً “اكتشف المزيد”).
        • الأيقونة: اختر أيقونة (مثلاً سهم) من مكتبة الأيقونات واضبط موضعها (قبل أو بعد النص).
        • الرابط: يمكنك تركه فارغًا الآن أو ربطه بصفحة أخرى.
      • النمط:
        • عادي (Normal): غير لون الخلفية (Background Color) إلى لون مميز (مثلاً أرجواني). غير لون النص إذا لزم الأمر.
        • تحويم (Hover): غير لون الخلفية عند التحويم (مثلاً أسود).
        • نصف قطر الحدود (Border Radius): زد القيمة لجعل زوايا الزر مستديرة (مثلاً 25-30 بكسل).
        • الحشو (Padding): اضبط الحشو الداخلي للزر إذا لزم الأمر.
  3. العمود الأيمن:
    • اسحب أداة “صورة” (Image) وأسقطها في العمود الأيمن.
    • انقر “اختر صورة” وقم برفع صورة مناسبة أو اختر من مكتبة الوسائط.
  4. تعديلات القسم والعمود:
    • محاذاة عمودية للمحتوى: انقر على أيقونة تحرير العمود الأيسر. في تبويب “التخطيط” (Layout)، غير “المحاذاة العمودية” (Vertical Align) إلى “وسط” (Middle).
    • عرض الأعمدة: يمكنك سحب الخط الفاصل بين العمودين لتغيير عرض كل منهما (مثلاً 60% لليسار و 40% لليمين، أو العكس).
    • ارتفاع القسم: انقر على أيقونة تحرير القسم (النقاط الست في الأعلى).
      • في تبويب “التخطيط”، ضمن “الارتفاع” (Height)، اختر “أقل ارتفاع” (Min Height). اضبط القيمة (مثلاً 500-600 بكسل أو 80vh أي 80% من ارتفاع الشاشة).
    • الحشو (Padding) للقسم: في تبويب “متقدم” (Advanced) لإعدادات القسم، يمكنك إضافة حشو (padding) علوي وسفلي (مثلاً 50 بكسل لكل منهما) لإعطاء مساحة للمحتوى. قم بإلغاء ربط القيم (أيقونة السلسلة) لتطبيق قيم مختلفة لكل جانب.

تصميم قسم العدادات (Counters Section)

  1. أضف قسمًا جديدًا أسفل قسم الترويسة. اختر هيكلًا من أربعة أعمدة.
  2. إعدادات القسم:
    • النمط: غير لون الخلفية (Background Color) إلى لون داكن قليلاً أو لون مميز.
    • متقدم: أضف حشوًا علويًا وسفليًا (مثلاً 50-80 بكسل).
  3. العمود الأول:
    • اسحب أداة “عداد” (Counter) وأسقطها في العمود الأول.
    • المحتوى:
      • رقم البداية: (مثلاً 0).
      • رقم النهاية: (مثلاً 12000، ولكن اكتب 12).
      • بادئة الرقم (Number Prefix): اتركه فارغًا.
      • لاحقة الرقم (Number Suffix): (مثلاً “K+”).
      • العنوان (Title): (مثلاً “عميل سعيد”).
    • النمط:
      • الرقم: غير لون النص (مثلاً أبيض)، الخط، الحجم، الوزن.
      • العنوان: غير لون النص (مثلاً أبيض أو رمادي فاتح)، الخط، الحجم، الوزن.
  4. بقية الأعمدة:
    • انقر بزر الماوس الأيمن على أداة العداد التي أنشأتها واختر “تكرار” (Duplicate).
    • اسحب العداد المكرر إلى العمود الثاني. كرر العملية للأعمدة الثالث والرابع.
    • عدّل أرقام النهاية، اللواحق، والعناوين لكل عداد (مثلاً: “مشروع ناجح”، “معدل تحويل”، “جائزة فائزة”).

تصميم قسم الخدمات مع صور مخصصة

  1. أضف قسمًا جديدًا بهيكل من ثلاثة أعمدة.
  2. تعديل عرض الأعمدة (مثال):
    • اجعل العمود الأول أعرض (مثلاً 50%).
    • اجعل العمودين الثاني والثالث أضيق (مثلاً 25% لكل منهما). يمكنك ضبط هذا من إعدادات كل عمود > التخطيط > عرض العمود (%).
  3. العمود الأول (المحتوى النصي):
    • أضف أداة “عنوان” صغيرة كنص فرعي (مثلاً “خدماتنا”). قم بتصغير حجم الخط وتغيير لونه.
    • أضف “عنوان” رئيسي (مثلاً “نقدم حلول تسويق فعالة”).
    • أضف “محرر نصوص” لوصف الخدمات.
    • أضف “زر” (مثلاً “اعرف المزيد”).
  4. العمود الثاني والثالث (الصور):
    • اسحب أداة “صورة” لكل عمود.
    • اختر صورًا مناسبة.
    • تأثير الزوايا الدائرية المخصصة:
      • لصورة العمود الثاني: في إعدادات الصورة > النمط > نصف قطر الحدود. قم بإلغاء ربط القيم. زد قيمة “أعلى اليسار” (Top Left) و “أسفل اليسار” (Bottom Left) بشكل كبير (مثلاً 100-150 بكسل) لجعل تلك الزوايا مستديرة بشكل كبير، مع ترك الزوايا اليمنى حادة.
      • لصورة العمود الثالث: افعل العكس، اجعل “أعلى اليمين” (Top Right) و “أسفل اليمين” (Bottom Right) مستديرة.
  5. متقدم (للقسم): أضف حشوًا علويًا وسفليًا.

تصميم قسم تنظيم المحتوى في أعمدة (Icon Boxes)

  1. أضف قسمًا جديدًا بهيكل من ثلاثة أعمدة (أو أربعة حسب الحاجة).
  2. العمود الأول:
    • اسحب أداة “مربع أيقونة” (Icon Box) أو قم ببنائها يدويًا:
      • أداة “أيقونة” (Icon): اختر أيقونة، غير حجمها ولونها. اجعل المحاذاة “وسط”.
      • أداة “عنوان” (Heading) تحت الأيقونة: اكتب عنوان الخدمة/الميزة. اجعل المحاذاة “وسط”.
      • أداة “محرر نصوص” (Text Editor) تحت العنوان: أضف وصفًا موجزًا. اجعل المحاذاة “وسط”.
  3. بقية الأعمدة: كرر محتويات العمود الأول (بالنقر بزر الماوس الأيمن على كل عنصر واختيار “تكرار” ثم سحبه للعمود التالي) أو كرر العمود بأكمله (انقر بزر الماوس الأيمن على أيقونة تحرير العمود واختر “تكرار”). ثم غير الأيقونات والنصوص.
  4. متقدم (للقسم): أضف حشوًا علويًا وسفليًا. قد ترغب في إضافة خط فاصل رفيع أعلى هذا القسم: إعدادات القسم > النمط > الحدود (Border) > نوع الحد: “صلب” (Solid)، قم بإلغاء ربط القيم، واجعل عرض الحد العلوي 1 أو 2 بكسل، واختر لونًا رماديًا فاتحًا.

تصميم قسم المحفظة/المشاريع (Portfolio/Projects)

  1. القسم الأول (العنوان وزر “عرض الكل”):
    • أضف قسمًا جديدًا بعمودين. اجعل العمود الأيسر أعرض (مثلاً 70%) والأيمن أضيق (30%).
    • العمود الأيسر: أضف عنوانًا فرعيًا (مثلاً “مشاريعنا الناجحة”) وعنوانًا رئيسيًا (مثلاً “دراسات حالة تلهمك”).
    • العمود الأيمن: أضف “زر” (مثلاً “عرض كل المشاريع”). اجعل محاذاة الزر إلى اليمين. قم بمحاذاة محتوى هذا العمود عموديًا إلى “الوسط”.
  2. القسم الثاني (عرض المشاريع):
    • أضف قسمًا جديدًا أسفله، بهيكل من ثلاثة أعمدة.
    • كل عمود:
      • أداة “صورة”: اختر صورة للمشروع. في النمط، أضف “نصف قطر حدود” صغير (مثلاً 5-10 بكسل) لجميع الزوايا لجعلها مستديرة قليلاً.
      • أداة “عنوان” تحت الصورة: اسم الفئة/الصناعة (خط صغير).
      • أداة “عنوان” أخرى تحتها: اسم المشروع (خط أكبر).
    • كرر هذا الهيكل لعدة صفوف إذا لزم الأمر (يمكنك تكرار القسم بأكمله).
  3. متقدم (لكلا القسمين): أضف حشوًا مناسبًا. للقسم الثاني، قد ترغب في إضافة “هامش” (Margin) علوي صغير لفصله عن قسم العنوان.

تصميم قسم الدعوة لاتخاذ إجراء (Call to Action) بخلفية داكنة

  1. أضف قسمًا جديدًا بعمودين.
  2. إعدادات القسم:
    • النمط: غير لون الخلفية إلى لون داكن.
    • متقدم: أضف حشوًا علويًا وسفليًا كبيرًا (مثلاً 80-100 بكسل).
  3. العمود الأيسر:
    • أضف “عنوان” (نص أبيض أو فاتح).
    • أضف “محرر نصوص” (نص أبيض أو فاتح).
    • أضف “زر” (بتصميم يتناسب مع الخلفية الداكنة).
  4. العمود الأيمن:
    • أضف “صورة” (يفضل أن تكون صورة ذات خلفية شفافة أو صورة تتناسب مع التصميم الدائري إذا كنت ستجعلها دائرية).
    • لجعل الصورة دائرية: إعدادات الصورة > النمط > نصف قطر الحدود. زد القيمة بشكل كبير (مثلاً 500 بكسل أو 50% إذا كان الخيار متاحًا كنسبة مئوية، وتأكد أن القيم مربوطة).
  5. محاذاة عمودية: اجعل محاذاة المحتوى في كلا العمودين “وسط”.

لا تنسَ النقر على زر “تحديث” (Update) الأخضر أسفل لوحة Elementor بشكل متكرر لحفظ تقدمك.

11. الخطوة الثامنة: تصميم صفحة اتصل بنا

  1. اذهب إلى صفحات > كل الصفحات.
  2. مرر الماوس فوق صفحة “Contact Us” وانقر “تحرير بواسطة Elementor”.
  3. أضف قسمًا جديدًا بهيكل من عمودين (أو عمود واحد إذا كنت تفضل الخريطة فوق النموذج). سأفترض عمودين متجاورين.

إضافة خريطة جوجل (Google Maps)

  1. اذهب إلى Google Maps.
  2. ابحث عن عنوانك أو عملك.
  3. انقر على أيقونة “مشاركة” (Share).
  4. اختر تبويب “تضمين خريطة” (Embed a map).
  5. انقر “نسخ HTML” (Copy HTML).
  6. عد إلى Elementor. في أحد الأعمدة (مثلاً الأيمن)، اسحب أداة “HTML” وأسقطها.
  7. في مربع “كود HTML” على اليسار، الصق الكود الذي نسخته من جوجل. ستظهر الخريطة.

إنشاء وتخصيص نموذج الاتصال

  1. في العمود الآخر (مثلاً الأيسر)، اسحب أداة “نموذج” (Form) وأسقطها.
  2. حقول النموذج (Form Fields):
    • بشكل افتراضي، ستحصل على حقول الاسم، البريد الإلكتروني، والرسالة.
    • إضافة حقل: انقر “أضف عنصر” (Add Item).
      • النوع (Type): اختر “Tel” لرقم الهاتف.
      • التسمية (Label): اكتب “رقم الهاتف”.
      • العنصر النائب (Placeholder): اكتب “أدخل رقم هاتفك”.
      • مطلوب (Required): فعّله إذا أردت.
    • يمكنك إعادة ترتيب الحقول بالسحب والإفلات.
  3. الأزرار (Buttons):
    • يمكنك تغيير نص زر الإرسال (مثلاً “أرسل الآن”).
  4. الإجراءات بعد الإرسال (Actions After Submit):
    • تأكد من وجود “Email” كإجراء. يمكنك إضافة إجراءات أخرى مثل “Redirect” إذا أردت توجيه المستخدم لصفحة شكر بعد الإرسال.
  5. البريد الإلكتروني (Email):
    • إلى (To): أدخل عنوان بريدك الإلكتروني الذي تريد استقبال الرسائل عليه.
    • الموضوع (Subject): يمكنك تخصيص سطر الموضوع (مثلاً “رسالة جديدة من موقع الويب”).
    • من البريد الإلكتروني (From Email) و اسم المرسل (From Name): يمكن تركها بالإعدادات الافتراضية أو تخصيصها.
  6. النمط (Style):
    • خصص ألوان الحقول، الحدود، الأزرار، والخطوط لتتناسب مع تصميم موقعك.
  7. انقر “تحديث”.

12. الخطوة التاسعة: تصميم تذييل الموقع (Footer)

يتطلب تصميم تذييل مخصص بالكامل استخدام Elementor Pro.

استخدام منشئ القوالب في Elementor Pro

  1. من لوحة تحكم ووردبريس، اذهب إلى القوالب (Templates) > منشئ القوالب (Theme Builder).
  2. انقر على تبويب “التذييل” (Footer)، ثم انقر “أضف جديد” (Add New).
  3. أعطِ التذييل اسمًا (مثلاً “My Custom Footer”) وانقر “إنشاء قالب” (Create Template).
  4. يمكنك إغلاق نافذة مكتبة القوالب الجاهزة إذا ظهرت.

تصميم تذييل مخصص متعدد الأعمدة

  1. أضف قسمًا جديدًا بهيكل من أربعة أعمدة (أو حسب حاجتك).
  2. إعدادات القسم:
    • النمط: غير لون الخلفية (مثلاً لون داكن جدًا).
    • متقدم: أضف حشوًا علويًا وسفليًا (مثلاً 50 بكسل).
  3. العمود الأول (الشعار ونبذة):
    • أداة “صورة”: ضع شعارك (يفضل نسخة بيضاء أو فاتحة إذا كانت الخلفية داكنة). اضبط حجم الشعار ومحاذاته لليسار.
    • أداة “محرر نصوص”: أضف نبذة قصيرة عن شركتك.
    • أداة “أيقونات اجتماعية” (Social Icons): أضف روابط حساباتك. في النمط، اختر “مخصص” للألوان واجعلها تتناسب (مثلاً أيقونات بيضاء أو بلون ثانوي من هويتك).
  4. العمود الثاني (روابط سريعة):
    • أداة “عنوان”: (مثلاً “روابط هامة”). اجعل لونه فاتحًا.
    • أداة “قائمة أيقونات” (Icon List) أو “قائمة التنقل في ووردبريس” (WordPress Menu) إذا كنت قد أنشأت قائمة مخصصة للتذييل:
      • إذا استخدمت “قائمة أيقونات”: أضف عناصر للقائمة (مثل الرئيسية، من نحن، خدماتنا). قم بإزالة الأيقونات إذا لم تكن بحاجة إليها. اربط كل عنصر بالصفحة المناسبة. غير لون النص إلى فاتح.
  5. العمود الثالث (معلومات الاتصال):
    • أداة “عنوان”: (مثلاً “تواصل معنا”).
    • أداة “قائمة أيقونات”:
      • عنصر 1: أيقونة هاتف + رقم الهاتف.
      • عنصر 2: أيقونة بريد + عنوان البريد الإلكتروني.
      • عنصر 3: أيقونة موقع + عنوانك.
  6. العمود الرابع (حقوق النشر):
    • أداة “محرر نصوص”: اكتب نص حقوق النشر (مثلاً “© 2024 [اسم موقعك]. جميع الحقوق محفوظة. تم التطوير بواسطة [اسمك/شركتك]”). اجعل المحاذاة “وسط” أو “يسار” ولون النص فاتحًا.
  7. نشر التذييل:
    • انقر “نشر” (Publish).
    • انقر “إضافة شرط” (Add Condition).
    • تأكد من أنه محدد على “الموقع بأكمله” (Entire Site).
    • انقر “حفظ وإغلاق” (Save & Close).

13. الخطوة العاشرة: تخصيص رأس الموقع (Header) وإضافة الشعار

يمكن تخصيص رأس الموقع (Header) الذي يأتي مع قالب Astra.

  1. من لوحة تحكم ووردبريس، اذهب إلى المظهر > تخصيص (Customize).
  2. ستفتح واجهة تخصيص القالب. ابحث عن خيارات “الرأس” (Header) أو “Header Builder”.
  3. هوية الموقع (Site Identity) / الشعار (Logo):
    • ابحث عن خيار “شعار الموقع” (Site Logo) أو ما شابه.
    • قم برفع شعارك.
    • قد تحتاج لضبط عرض الشعار.
    • يمكنك تعطيل “عرض عنوان الموقع” (Display Site Title) و “عرض شعار الموقع” (Display Tagline) إذا كان شعارك يحتوي على هذه المعلومات أو إذا كنت لا تريدها.
  4. القائمة الرئيسية (Primary Menu): تأكد من أن القائمة التي أنشأتها سابقًا معروضة في المكان المخصص لها في الرأس. يمكنك عادةً سحب وإفلات عناصر الرأس في “Header Builder” الخاص بـ Astra.
  5. استكشف الخيارات الأخرى لتغيير ألوان الرأس، الخطوط، إلخ.
  6. انقر “نشر” (Publish) لحفظ التغييرات.

14. فرصتك لتطوير مهاراتك: دورة تحدي ووردبريس

إذا كنت ترغب في تعميق فهمك لووردبريس وتطوير مهاراتك بشكل احترافي ومنظم خطوة بخطوة، أدعوك للانضمام إلى دورة تحدي ووردبريس لمدة 14 يومًا. يمكنك زيارة موقعي wpclass.com (أو أي رابط آخر قد أشار إليه المتحدث في الفيديو الأصلي) لمعرفة المزيد. ستجد في الدورة محاضرات مفصلة تغطي كل جانب من جوانب ووردبريس، مع دعم فني لمساعدتك في حال واجهتك أي صعوبات.

15. خاتمة: انطلق نحو النجاح!

تهانينا! لقد قطعت شوطًا كبيرًا في تعلم كيفية إنشاء موقع ووردبريس احترافي. لقد رأيت بنفسك كيف يمكنك تصميم وتطوير موقع ويب مذهل دون الحاجة لمعرفة البرمجة، باستخدام قوة ووردبريس و Elementor.
تذكر، الممارسة هي مفتاح الإتقان. لا تتردد في تجربة الأدوات المختلفة، استكشاف الإمكانيات، وتطبيق ما تعلمته على مشاريعك الخاصة.

عالم الإنترنت مليء بالفرص، وموقعك الإلكتروني هو بوابتك للاستفادة منها. سواء كنت ترغب في إنشاء مدونة شخصية، موقع لشركتك، متجر إلكتروني، أو تقديم خدماتك كمستقل، فإن المهارات التي اكتسبتها اليوم هي الأساس الذي ستبني عليه نجاحك.

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

نتمنى لك كل التوفيق في رحلتك مع ووردبريس!

16. مراجع وروابط خارجية

آمل أن تكون هذه المقالة شاملة ومفيدة لك! لقد حاولت تغطية جميع النقاط المذكورة في النص الأصلي مع الحفاظ على تسلسل منطقي وتعليمي.

صورة ouwayess1@gmail.com ouwayess1@gmail.com أرسل بريدا إلكترونيا منذ 4 أسابيع
0 17 18 دقائق
صورة ouwayess1@gmail.com

ouwayess1@gmail.com

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *

زر الذهاب إلى الأعلى