تحرير الصفحة الرئيسية باستخدام Elementor: إضافة وحدات (نصوص، وصور، وأزرار، وما إلى ذلك)

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

التحضير: الدخول إلى وضع تحرير العنصر

1. سجِّل الدخول إلى الواجهة الخلفية في ووردبريس، وانتقل إلى "الصفحات" ← ابحث عن "الصفحة الرئيسية" (أو الصفحة التي تريد تحريرها) وانقر على "تحرير".
2. انقر على زر "تحرير باستخدام Elementor" (أزرق مع أيقونة Elementor) في أعلى الصفحة للدخول إلى واجهة التحرير المرئية.

بمجرد الدخول، تنقسم الواجهة إلى ثلاثة أقسام:

• إلى اليسار: لوحة الوحدة النمطية(يحتوي على جميع العناصر التي يمكن إضافتها)
• المركز: منطقة التحرير(عرض تأثيرات الصفحة في الوقت الحقيقي)
• على اليمين: لوحة الأنماط(يمكن تعديل الأنماط التفصيلية عند تحديد عنصر ما)

الخطوة 1: إضافة وحدة "العنوان" (عنوان النص)

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

1. ابحث عن وحدة الرأسفي لوحة الوحدة النمطية اليسرى، حدد موقع الوحدة النمطية "العنوان" (الرمز "T") ضمن فئة "أساسي".
2. السحب والإفلات للإضافة إلى الصفحةاضغط مع الاستمرار على وحدة 'العنوان'، ثم اسحبها إلى الموضع '+ اسحب العنصر هنا' في منطقة التحرير المركزية ثم حرر الماوس. عند هذه النقطة ستظهر الصفحة بعنوان افتراضي 'هذا هو العنوان'.
3. تعديل محتوى العنوانحدد وحدة العنوان التي أضفتها للتو وستظهر لوحة تحرير على اليمين:
   • في "المحتوى" → "نص العنوان"، احذف النص الافتراضي وأدخل عنوانك (على سبيل المثال "مرحبًا بك في مدونتي الشخصية").
   • حدد المستوى في "مستوى العنوان" (H1 هو الأكبر، وهو مناسب للعناوين الرئيسية؛ H2 هو ثاني أكبر مستوى، وهو مناسب للعناوين الفرعية، ويتم تحديده وفقًا لمستوى المحتوى).
4. ضبط نمط العنوانانقر على علامة التبويب "الأنماط" في اللوحة اليمنى لتخصيصها:
   • أسلوب خطي: حدد الخط المفضل لديك (على سبيل المثال "Microsoft Black" "Arial") من المربع المنسدل "الخط".
   • الحجم: اسحب شريط تمرير "حجم الخط"، أو أدخل القيمة مباشرةً (حجم العنوان الموصى به بين 24-48 بكسل).
   • اللون: انقر على خانة "لون النص" لتحديد لون العنوان (على سبيل المثال أسود، أزرق داكن).
   • الاصطفاف بالترتيب الصحيح:: انقر على زر "محاذاة النص" لتعيين العنوان ليكون في الوسط أو اليسار أو اليمين (يوصى بأن يكون العنوان الرئيسي للصفحة الرئيسية في الوسط).

الخطوة 2: إضافة وحدة "الفقرة" (النص الأساسي)

تُستخدم الفقرات لإظهار التفاصيل، مثل الملخص والوصف وما إلى ذلك.

1. إضافة فقرة الوحدة النمطيةابحث عن وحدة الفقرة النمطية (الرمز هو رمز الفقرة) في الفئة "الأساسية" على اليسار، واسحبها وأفلتها أسفل وحدة العنوان.
2. تعديل محتوى الفقرةحدد وحدة الفقرة وأدخل المحتوى (على سبيل المثال "هنا أشارك دروس حياتي وملاحظاتي الدراسية، مرحبًا بك في التبادل كثيرًا!) مرحبًا بك في المشاركة!".
3. تحسين أنماط الفقراتقم بالتبديل إلى علامة التبويب الأنماط:
   • حجم الخط:: يوصى بإعداد 16-18 بكسل (لسهولة القراءة).
   • ارتفاع السطور.:: اضبطها على 1.5-1.8 مرة (لمزيد من التباعد المريح بين النصوص).
   • اللون:: اختر لونًا يمكن تمييزه عن العنوان (مثل الرمادي الداكن لتجنب أن يكون قريبًا جدًا من لون الخلفية).

الخطوة 3: إضافة وحدة "صورة" (إدراج صورة)

تبعث الصور الحياة في الصفحة ويوصى باختيار صور واضحة وذات صلة (مثل الصور الشخصية وصور المنتجات والمناظر الطبيعية).

1. تحميل أو تحديد الصورابحث عن وحدة "الصور" في فئة "أساسي" على اليسار واسحبها إلى أسفل الفقرة. حدد الوحدة النمطية "صورة" وانقر على "تحديد صورة" في "المحتوى" → "صورة" على الجانب الأيمن:
   • إذا كانت الصورة موجودة بالفعل على جهاز الكمبيوتر الخاص بك، انقر فوق "تحميل ملف" → حدد الصورة → انقر فوق "تحديد".
   • إذا قمت بالتحميل من قبل، يمكنك تحديد الصورة الموجودة في مكتبة الوسائط مباشرةً.
2. ضبط عرض الصورةقم بالتبديل إلى علامة التبويب الأنماط:
   • الأحجام: في "العرض"، قم بتعيين نسبة الصورة على الصفحة (على سبيل المثال 100% تعني عرض الشاشة الكامل، 80% تعني أضيق).
   • زاوية مستديرة: اسحب شريط تمرير نصف قطر الحدود لتقريب زوايا الصورة (كلما كانت القيمة أكبر، كلما كانت الزوايا المستديرة أكثر وضوحًا).
   • الظل.: قم بتشغيل "Box Shadow" لإضافة ظل خفيف إلى الصورة (لإضفاء مظهر أكثر طبقات).
3. إضافة وصف الصورة (اختياري)سيساعد إدخال وصف للصورة (على سبيل المثال "صوري أثناء السفر") في "المحتوى" → "النص البديل" محركات البحث على فهم محتوى الصورة وتحسين تحسين محركات البحث.

الخطوة 4: إضافة وحدة "الزر" (نقرة إرشادية)

غالبًا ما تُستخدم الأزرار لتوجيه الزوار لاتخاذ إجراءات، مثل "عرض المزيد"، "اتصل بي"، "اشترِ الآن"، إلخ.

1. إضافة وحدة زر الإضافةابحث عن وحدة "الأزرار" في فئة "أساسي" على اليسار، واسحبها وأفلتها أسفل الصورة.
2. إعداد محتوى الزر والروابطتحقق من وحدة الزر، على الجانب الأيمن في "المحتوى":
   • النسخ:: أدخل نص الزر (مثل "عرض مشاركاتي").
   • رابط: انقر على مربع الإدخال بجوار "ديناميكي" وأدخل عنوان الرابط (مثل عنوان صفحة مدونتك، أو رابط خارجي).
     • إذا كنت تقوم بالارتباط بصفحة في المحطة، يمكنك النقر على أيقونة "تحديد صفحة" على الجانب الأيمن من مربع الإدخال لتحديد الصفحة المستهدفة مباشرةً.
3. تصميم أنماط الأزرارانتقل إلى علامة التبويب "النمط" لإنشاء أزرار لافتة للنظر:
   • اللون: اختر اللون الأبيض لـ "لون النص" والألوان الزاهية لـ "لون الخلفية" (مثل الأزرق والبرتقالي للتنسيق مع اللون الرئيسي للصفحة).
   • الأحجام:: حدد "متوسط" أو "كبير" لـ "حجم الزر" لتسهيل النقر على الزر.
   • الهندسة:: اضبط "نصف قطر الحدود" على 5-10 بكسل (الزوايا المستديرة قليلاً أكثر إرضاءً من الناحية الجمالية).
   • ** hover 效果 **：点击「hover」选项卡，设置鼠标悬停时的颜色（如颜色加深），提升交互感。

الخطوة 5: ضبط تباعد الوحدات النمطية (للحصول على صفحة أكثر ترتيبًا)

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

1. وحدات مختارة: انقر على حافة الوحدة (تظهر حدود زرقاء).
2. ضبط الهوامش الخارجية: في اللوحة اليمنى "متقدم" -> "الهامش"، اضبط المسافة بين الوحدة النمطية والعناصر العلوية والسفلية (على سبيل المثال يتم ضبط "الهامش العلوي" على 30 بكسل لزيادة التباعد مع الوحدة النمطية العلوية).
3. الاصطفاف:: اضغط مع الاستمرار Ctrl مفتاح (أو Command مفتاح) حدد عدة وحدات نمطية في نفس الوقت وانقر على زر "محاذاة" في شريط الأدوات العلوي (على سبيل المثال "محاذاة مركزية") لمحاذاة العناصر بشكل أكثر دقة.

الخطوة 6: الحفظ والمعاينة

1. حفظ التغييرات: انقر على زر "تحديث" في الزاوية السفلية اليسرى من الصفحة (يوصى بحفظ التغييرات في الوقت المناسب بعد كل مراجعة).
2. تأثير المعاينة: انقر فوق الزر "معاينة" في الزاوية العلوية اليسرى وحدد "معاينة سطح المكتب" "معاينة الجهاز اللوحي" "معاينة الهاتف المحمول" للتحقق من تأثير العرض على الأجهزة المختلفة (تأكد من عدم تداخل النص وعدم تشويه الصورة على الهاتف المحمول).

نصائح للمبتدئين

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

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