هل ترغب في معرفة كيفية استخدام Elementor على WordPress؟ لذا استمر في قراءة المزيد.

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

بفضل واجهته البديهية وخيارات التخصيص الشاملة وإمكانيات التكامل المتقدمة، يُحدث منشئ الصفحات المرئية هذا ثورة في الطريقة التي يقوم بها مستخدمو WordPress بتصميم المحتوى الخاص بهم وتحريره ونشره.

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

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

محتويات


ما هو العنصر؟

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

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

ساهم هذا البرنامج الإضافي أيضًا في نمو نظام WordPress البيئي من خلال تسهيل إنشاء مواقع جذابة من الناحية الجمالية وقوية من الناحية الفنية.

الإصدارات والتحديثات الرئيسية:
منذ إطلاقه، شهد Elementor العديد من الإصدارات الرئيسية، كل منها يجلب ميزات مبتكرة. من بين أبرز الإضافات هو Theme Builder، الذي يسمح لك بالتصميم وورد المواضيع Complete، وPopup Builder، لإنشاء نوافذ منبثقة مخصصة.

كان كل تحديث لـ Elementor مصحوبًا بتحسينات في الأداء والتوافق والأمان، مما يعزز مكانتها كشركة رائدة في سوق إنشاء الصفحات.

إصدارات مختلفة من Elementor

النسخة المجانية مقابل النسخة الاحترافية:
يتوفر Elementor في نسختين: نسخة مجانية ونسخة Pro. يقدم الإصدار المجاني مجموعة أساسية من الميزات التي تتيح لك إنشاء صفحات ويب بسيطة ولكنها جذابة. يتضمن عناصر واجهة مستخدم أساسية مثل الصور ومقاطع الفيديو والأزرار وأقسام النص.

من ناحية أخرى، يفتح الإصدار الاحترافي ميزات متقدمة مثل Theme Builder وWooCommerce Builder والأدوات المتميزة والرسوم المتحركة المخصصة. بالنسبة للمستخدمين المحترفين أو أولئك الذين يريدون خيارات تخصيص أعمق، يعد Elementor Pro استثمارًا مفيدًا.

خطط التسعير الأخرى المتاحة:
يقدم Elementor Pro العديد من خطط التسعير حسب احتياجات المستخدم. تعتبر الخطة "Essential" مثالية لموقع واحد، بينما تم تصميم الخطة "Expert" للعاملين لحسابهم الخاص أو الوكالات الصغيرة التي تدير مواقع متعددة.

هناك أيضًا خطط "Studio" و"Agency" للشركات التي تحتاج إلى المزيد من الميزات المتقدمة والدعم ذي الأولوية. تسمح هذه الخيارات لكل مستخدم باختيار الخطة التي تناسب احتياجاته وميزانيته، مع الاستمرار في الاستمتاع بالميزات الكاملة لـ Elementor Pro.


كيف يعمل منشئ الصفحة Elementor؟

استخدم Elementor على ووردبريس

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

واجهة مستخدم العنصر

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

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

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

تتيح لك منطقة العمل المرئية الموجودة على اليمين رؤية التغييرات التي تجريها على الفور. يوفر شريط الأدوات العلوي خيارات إضافية مثل إدارة إعدادات الصفحة، وحفظ الإجراءات ونشرها، والقدرة على معاينة الصفحة على أنواع مختلفة من الأجهزة (سطح المكتب، الجهاز اللوحي، الهاتف المحمول).

مفهوم السحب والإفلات

شرح كيفية عمل السحب والإفلات:
يعتمد Elementor على مفهوم السحب والإفلات، مما يعني أنه يمكنك تحديد أي عنصر واجهة مستخدم أو عنصر من اللوحة اليمنى وسحبه مباشرة إلى صفحتك.

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

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

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

الحاجيات والعناصر

قائمة الحاجيات الأساسية المتاحة:
يقدم Elementor مجموعة واسعة من الأدوات الأساسية في نسخته المجانية، والتي تغطي غالبية احتياجات التصميم الشائعة. ومن بين هذه الأدوات عناصر مثل:

  • لقب : لإضافة رؤوس أو ترجمات.
  • صورة : لإدراج الصور مع خيارات التخصيص.
  • نص : لإضافة فقرات من النص.
  • فيديو : لتضمين مقاطع فيديو من YouTube أو Vimeo أو الملفات المحلية.
  • زر : لإنشاء أزرار الحث على اتخاذ إجراء.
  • أعمدة : لتنظيم المحتوى الخاص بك في عدة أعمدة.

الأدوات المتقدمة في الإصدار Pro:
يفتح الإصدار Pro من Elementor مجموعة من الأدوات المتقدمة التي تتيح لك إنشاء صفحات أكثر تعقيدًا. ومن بين الأدوات المتقدمة المتاحة، يمكننا أن نذكر:

  • شكل : لإنشاء نماذج اتصال قابلة للتخصيص بالكامل.
  • عرض الشرائح : لإضافة عروض شرائح تفاعلية.
  • معرض أعمالي : لعرض المشاريع أو الصور بتنسيق الشبكة.
  • التسعير : إنشاء جداول تسعير للخدمات أو المنتجات.
  • منبثق : لتصميم وإدارة النوافذ المنبثقة المخصصة.
  • أدوات WooCommerce : لدمج وتخصيص عناصر متجرك عبر الإنترنت.

نظام الأقسام والأعمدة والوحدات

شرح الأقسام والأعمدة والوحدات:
يعتمد نظام بنية Elementor على ثلاثة مكونات رئيسية: الأقسام والأعمدة والوحدات النمطية (أو عناصر واجهة المستخدم). ال أقسام تشكل البنية الأساسية للصفحة، وتعمل كحاويات للأعمدة.

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

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

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


كم تكلفة العنصر؟

يقدم Elementor إصدارًا مجانيًا قويًا، بالإضافة إلى إصدار Pro مدفوع مع ميزات متقدمة. يستكشف هذا القسم التكاليف المرتبطة بـ Elementor، ومقارنة الميزات المتوفرة في الإصدار المجاني وخطط التسعير المختلفة لـ Elementor Pro، مع تقديم تقييم للقيمة مقابل المال.

النسخة المجانية من Elementor

ما هي الميزات المضمنة:
يقدم الإصدار المجاني من Elementor مجموعة أساسية من الميزات التي تتيح للمستخدمين تصميم صفحات ويب وظيفية وممتعة من الناحية الجمالية. فيما يلي الميزات الرئيسية المضمنة:

  • محرر السحب والإفلات: محرر مرئي سهل الاستخدام لتصميم الصفحات دون الحاجة إلى البرمجة.
  • الحاجيات الأساسية: يتضمن عناصر مثل العناوين والصور ومقاطع الفيديو والأزرار والقوائم والأيقونات.
  • قوالب الصفحة: الوصول إلى مكتبة القوالب المحددة مسبقًا والتي يمكنك تخصيصها وفقًا لاحتياجاتك.
  • استجابة الهاتف المحمول: أدوات لضبط مظهر الصفحات على الأجهزة المحمولة والأجهزة اللوحية.
  • القسم والأعمدة: إنشاء وتخصيص الأقسام والأعمدة لهيكل الصفحات.

حدود النسخة المجانية:
على الرغم من أن الإصدار المجاني من Elementor قوي، إلا أنه يحتوي على بعض القيود التي قد تجعل المستخدمين يفكرون في الإصدار Pro:

  • الحاجيات المتقدمة: لا يتضمن الإصدار المجاني عناصر واجهة مستخدم متقدمة مثل النماذج أو عروض الشرائح أو عمليات تكامل WooCommerce.
  • منشئ الموضوع: لا يمكن لمستخدمي الإصدار المجاني تخصيص الرؤوس أو التذييلات أو صفحات أرشيف الموقع الشاملة.
  • النوافذ المنبثقة المخصصة: إنشاء النوافذ المنبثقة محجوز للإصدار Pro.
  • دعم الأولوية: دعم العملاء محدود في الإصدار المجاني، وغالبًا ما يتعين على المستخدمين اللجوء إلى المجتمع للحصول على المساعدة.
  • الوصول المقيد إلى النماذج الاحترافية: تتوفر القوالب الأساسية فقط في الإصدار المجاني، مع وجود قوالب متميزة مخصصة للإصدار الاحترافي.

خطط تسعير Elementor Pro

وصف الخطط المختلفة (Essentials، Expert، Studio، Agency):
يقدم Elementor Pro العديد من خطط التسعير المصممة خصيصًا لتلبية احتياجات المستخدمين المختلفة. وفيما يلي نظرة عامة على هذه الخطط:

  • الأساسيات:
    • السعر: حوالي 59 دولارًا سنويًا.
    • المواقع: موقع 1 .
    • الميزات: الوصول إلى جميع ميزات Pro، بما في ذلك Theme Builder وWooCommerce Builder والنوافذ المنبثقة وجميع الأدوات المتقدمة.
  • متقدم :
    • السعر: حوالي 99 دولارًا سنويًا.
    • المواقع: ما يصل إلى 3 مواقع.
    • الميزات: نفس ميزات خطة Essentials، ولكن لمواقع متعددة.
  • خبير :
    • السعر: حوالي 199 دولارًا سنويًا.
    • المواقع: ما يصل إلى 25 مواقع.
    • الميزات: مثالية للعاملين لحسابهم الخاص أو الوكالات الصغيرة، تتضمن هذه الخطة أدوات إضافية مثل أولوية دعم العملاء والتحديثات الحصرية.
  • الاستوديو:
    • السعر: حوالي 499 دولارًا سنويًا.
    • المواقع: ما يصل إلى 100 مواقع.
    • الميزات: بالإضافة إلى ميزات الخطط السابقة، تتضمن هذه الخطة أولوية الوصول إلى التحديثات والدعم الفني، مع خيارات متقدمة لـ Teams.
  • وكالة:
    • السعر: حوالي 999 دولارًا سنويًا.
    • المواقع: ما يصل إلى 1000 مواقع.
    • الميزات: تستهدف هذه الخطة الوكالات والمؤسسات الكبيرة، حيث تقدم دعمًا وميزات متميزة، مع إعطاء أولوية قصوى لخدمة العملاء.

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

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

نسبة الجودة / السعر

القيمة المضافة للميزات المدفوعة:
يوفر الإصدار Pro من Elementor قيمة كبيرة للمستخدمين الذين يتطلعون إلى زيادة إمكانيات موقع WordPress الخاص بهم. تسمح الميزات مثل Theme Builder وPopup Builder والأدوات المتقدمة بزيادة التخصيص والمرونة غير المتوفرة في الإصدار المجاني.

بالإضافة إلى ذلك، فإن أولوية دعم العملاء والوصول إلى التحديثات المنتظمة تبرر الاستثمار، خاصة لمحترفي الويب والوكالات.

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

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


كيفية تثبيت Elementor

يعد تثبيت Elementor على موقع WordPress الخاص بك خطوة بسيطة، ولكن من المهم التأكد من أن بيئتك جاهزة للتشغيل الأمثل.

المتطلبات الأساسية للتثبيت

توافق ووردبريس:
قبل تثبيت Elementor، تأكد من أن موقع WordPress الخاص بك يلبي الحد الأدنى من المتطلبات. Elementor متوافق مع إصدارات WordPress 5.0 وما فوق. يوصى دائمًا باستخدام أحدث إصدار من WordPress للاستفادة من أحدث الميزات والإصلاحات الأمنية.

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

  • PHP : الإصدار 7.4 أو أعلى.
  • MySQL : الإصدار 5.6 أو أعلى، أو إصدار MariaDB 10.0 أو أعلى.
  • ذاكرة PHP : 128 ميجابايت على الأقل، على الرغم من أنه يوصى بـ 256 ميجابايت أو أكثر للمواقع الأكثر تعقيدًا.
  • سيرفر ويب : Apache مع تمكين وحدة mod_rewrite، أو NGINX.

Utiliser الأمم المتحدة يدير استضافة WordPress أو يمكن لمضيف معروف بأدائه، مثل SiteGround أو WP Engine، تحسين تجربة المستخدم وسرعة موقعك.

التثبيت عبر لوحة تحكم WordPress

خطوات تثبيت النسخة المجانية:

  1. قم بالوصول إلى لوحة معلومات WordPress : قم بتسجيل الدخول إلى موقع ووردبريس الخاص بك.
  2. انتقل إلى قائمة "الامتدادات". : اضغط على "الامتدادات" ثم "إضافة".
  3. بحث عن "العنصر" : اكتب "Elementor" في شريط البحث الموجود في أعلى اليمين.
  4. قم بتثبيت البرنامج المساعد : عندما يظهر Elementor في نتائج البحث، انقر فوق "التثبيت الآن".
  5. تفعيل البرنامج المساعد : بمجرد اكتمال التثبيت، انقر فوق "تنشيط" لبدء استخدام Elementor.
التثبيت عبر لوحة تحكم WordPress

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

تثبيت وتفعيل Elementor Pro

تنزيل وتثبيت النسخة الاحترافية:

  1. شراء العنصر برو : انتقل إلى موقع Elementor الرسمي واختر الخطة الاحترافية التي تناسبك. بعد الشراء سوف تتلقى رابط التحميل لل العنصر المساعد طليعة.
  2. قم بتنزيل الملف المضغوط : قم بتنزيل ملف Elementor Pro المضغوط على جهاز الكمبيوتر الخاص بك.
  3. قم بالوصول إلى لوحة معلومات WordPress : قم بتسجيل الدخول إلى موقع ووردبريس الخاص بك.
  4. انتقل إلى قائمة "الامتدادات" > "إضافة" > "تحميل ملحق" : انقر فوق "اختيار ملف"، وحدد الملف المضغوط الذي تم تنزيله، ثم انقر فوق "التثبيت الآن".
  5. تفعيل البرنامج المساعد : بمجرد اكتمال التثبيت، انقر فوق "تنشيط".
تثبيت وتفعيل Elementor Pro

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

تثبيت وتفعيل Elementor Pro

الإعداد الأولي للعنصر

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

  • إعدادات الموقع : اذهب إلى العنصر> الإعدادات لتكوين خيارات مثل التخطيط الافتراضي، وتمكين ميزات الصيانة، وتحرير سلوكيات معينة للمحرر.
  • النمط العام : أقل عنصر> أدوات، يمكنك تكوين الأنماط العامة التي سيتم تطبيقها على الموقع بأكمله، مثل الخطوط والألوان الافتراضية.

تعديلات الأداء الموصى بها:
لضمان الأداء الأمثل مع Elementor، يُنصح بما يلي:

  • تمكين وضع التحميل البطيء : يسمح لك هذا الوضع بتحميل البرامج النصية الضرورية فقط، مما يحسن سرعة تحميل الصفحة.
  • تحسين ذاكرة PHP : إذا كنت تعمل على مشاريع معقدة، فتأكد من أن خادمك لديه ذاكرة PHP كافية مخصصة.
  • استخدم البرنامج المساعد لذاكرة التخزين المؤقت : الإضافات مثل WP Rocket ou W3 المشاركات الكاش يمكن أن تساعد في تسريع موقعك عن طريق تحسين الموارد وتقليل وقت تحميل الصفحة.
  • مراقبة الأداء : يقدم Elementor أداة لتحليل الأداء في العنصر> الأدوات> الأداء. يتيح لك ذلك تحديد الأشياء التي تؤدي إلى إبطاء موقعك وتعديلها وفقًا لذلك.

كيفية استخدام Elementor في ووردبريس

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

قم بإنشاء صفحة باستخدام Elementor

خطوات إنشاء صفحة جديدة:

  1. قم بالوصول إلى لوحة معلومات WordPress : قم بتسجيل الدخول إلى موقع ووردبريس الخاص بك.
  2. انتقل إلى "الصفحات" > "إضافة" : انقر فوق "إضافة" لإنشاء صفحة جديدة.
  3. قم بتسمية الصفحة : قم بتسمية صفحتك بعنوان، مثل "الصفحة الرئيسية" أو "حول".
  4. إطلاق العنصر : انقر فوق الزر "تحرير باستخدام Elementor". ستتم إعادة توجيهك إلى المحرر المرئي لـ Elementor.

إضافة أقسام وعناصر واجهة المستخدم:

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

تخصيص الصفحات

تغيير الأنماط والألوان والطباعة:

  1. انتقل إلى إعدادات النمط : لكل عنصر واجهة مستخدم أو قسم أو عمود، يمكنك النقر فوق علامة التبويب "النمط" في لوحة التحكم الموجودة على اليسار لتعديل الألوان والخطوط والجوانب المرئية الأخرى.
  1. تطبيق الأنماط العالمية : أقل " إعدادات الموقع » في القائمة الرئيسية لـ Elementor (أعلى اليسار)، يمكنك تعيين أنماط عامة للألوان والطباعة والأزرار وما إلى ذلك، والتي سيتم تطبيقها على الصفحة بأكملها أو الموقع بأكمله.

استخدام القوالب المصممة مسبقًا:

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

الحفظ والنشر

كيفية معاينة الصفحة:

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

حفظ المسودات والنشر:

  1. احفظ عملك : إذا كنت تريد حفظ تقدمك دون نشر الصفحة، فانقر على "حفظ المسودة".
  2. انشر الصفحة : بمجرد أن تكون راضيًا عن التصميم، انقر فوق الزر "نشر" لجعل الصفحة مرئية على موقعك.
  3. التحديثات المستقبلية : إذا كنت بحاجة إلى العودة لاحقًا لإجراء تغييرات، فيمكنك تحرير الصفحة باستخدام Elementor في أي وقت وإعادة نشر التغييرات.

الأمثل للجوال

استخدام أدوات الاستجابة:

  1. تمكين وضع الاستجابة : في القائمة العلوية لمحرر Elementor، انقر فوق أيقونة الشاشة للتبديل بين طرق عرض سطح المكتب والجهاز اللوحي والجوال.
  2. تغيير إعدادات محددة : في كل عرض، يمكنك ضبط الهوامش والمحاذاة وحجم العناصر لضمان تجربة مستخدم مثالية على كل جهاز. ستؤثر التغييرات التي يتم إجراؤها في هذا الوضع على طريقة العرض المحددة فقط.

تعديلات محددة للأجهزة المحمولة:

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

كيفية استخدام الميزات المتقدمة في Elementor

يقدم Elementor Pro مجموعة متنوعة من الميزات المتقدمة التي تساعد في الارتقاء بتخصيص وتصميم موقع الويب الخاص بك إلى المستوى التالي. في هذا القسم، نستكشف كيفية استخدام Theme Builder وإنشاء النوافذ المنبثقة ودمج WooCommerce واستخدام عناصر واجهة المستخدم المتقدمة وإدارة الإعدادات العامة وإضافة تأثيرات CSS وتأثيرات الحركة المخصصة.

باستخدام منشئ الموضوع

إنشاء الرؤوس والتذييلات والقوالب العامة:
يتضمن Elementor Pro أداة إنشاء السمات التي تتيح لك تصميم عناصر عامة مثل الرؤوس والتذييلات وصفحات الأرشيف وصفحات النشر. وإليك كيف يمكنك استخدامه:

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

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

  1. تحديد شروط العرض: عندما تقوم بنشر قالب، يسألك Elementor عن مكان عرضه. يمكنك اختيار "على مستوى الموقع" أو "على صفحات محددة" أو "على أنواع منشورات محددة".
  2. إضافة القواعد الشرطية: للحصول على تخصيص أفضل، أضف شروطًا متعددة لتحديد متى وأين سيتم تطبيق القالب بدقة.

إنشاء النوافذ المنبثقة

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

  1. الوصول إلى منشئ النوافذ المنبثقة: اذهب القوالب> النوافذ المنبثقة وانقر على "إضافة جديد".
  2. اختر قالبًا أو أنشئ من البداية: يقدم Elementor العديد من القوالب المنبثقة التي يمكنك تخصيصها أو يمكنك إنشاء نافذة منبثقة فريدة من البداية.
  3. تخصيص التصميم: استخدم محرر السحب والإفلات الخاص بـ Elementor لتصميم النافذة المنبثقة الخاصة بك عن طريق إضافة الصور والنصوص والنماذج وما إلى ذلك.

تحديد قواعد التشغيل:
بمجرد تصميم النافذة المنبثقة، من الضروري تحديد قواعد التشغيل لضمان ظهورها في الوقت المناسب للزائرين:

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

التكامل مع WooCommerce

استخدم Elementor لتخصيص صفحات المتجر:
يتيح لك Elementor Pro تخصيص صفحات متجر WooCommerce الخاصة بك دون لمس الرمز. وإليك الطريقة:

  1. إنشاء قوالب WooCommerce: اذهب القوالب > منشئ السمات، ثم حدد "إضافة جديد". اختر نوع قالب WooCommerce الذي تريد إنشاءه، مثل صفحة المنتج أو صفحة الفئة أو صفحة سلة التسوق.
  2. التخصيص باستخدام أدوات WooCommerce: يقدم Elementor Pro أدوات محددة لـ WooCommerce، مثل "المنتجات"، و"إضافة إلى سلة التسوق"، و"صورة المنتج"، و"وصف المنتج"، وما إلى ذلك. استخدمها لتصميم صفحات منتج فريدة.
  3. حفظ ونشر: كما هو الحال مع القوالب الأخرى، بمجرد اكتمال التصميم، يمكنك الحفظ والنشر بشروط عرض محددة.

إضافة وتخصيص المنتجات:
باستخدام Elementor، يمكنك أيضًا تخصيص تخطيط كل منتج على حدة:

  1. تحرير صفحة المنتج باستخدام Elementor: من صفحة منتج WooCommerce، انقر فوق "تحرير باستخدام Elementor".
  2. تخصيص التخطيط: استخدم أدوات WooCommerce لتغيير مظهر المنتج وإضافة علامات تبويب مخصصة وعرض المنتجات ذات الصلة والمزيد.
  3. تعديلات الجوال: تأكد من تحسين تخطيط المنتج للجوال باستخدام أدوات Elementor المستجيبة.

القطعة النموذج

إنشاء النماذج وتخصيصها:
تتيح لك أداة نموذج Elementor Pro إنشاء نماذج اتصال والتقاط العملاء المحتملين ونماذج الاشتراك في الرسائل الإخبارية والمزيد:

  1. إضافة نموذج: اسحب عنصر واجهة المستخدم "النموذج" إلى صفحتك.
  2. تخصيص الحقول: قم بإضافة الحقول أو إزالتها، وتعيين قواعد التحقق من الصحة، وتكوين الاستجابات التلقائية أو عمليات إعادة التوجيه بعد الإرسال.
  3. التكامل مع خدمات الطرف الثالث: يمكنك دمج النموذج مع خدمات التسويق عبر البريد الإلكتروني مثل Mailchimpأو أرسل البيانات إلى خطاف ويب للمعالجة المخصصة.

اقرأ أيضا: كيفية إنشاء نموذج باستخدام Free Elementor

المعلمات العالمية

تكوين الإعدادات العامة:
تتيح لك الإعدادات العامة تحديد الأنماط والإعدادات التي تنطبق على الموقع بأكمله:

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

CSS المخصصة وتأثيرات الحركة

إضافة CSS مخصص في Elementor:
بالنسبة للمستخدمين المتقدمين، يتيح لك Elementor إضافة CSS مخصصًا للتحكم بشكل أفضل في التصميم:

  1. إضافة CSS العالمية: اذهب إعدادات الموقع > CSS المخصص لإضافة CSS الذي سيتم تطبيقه على الموقع بأكمله.
إضافة CSS العالمية
  1. إضافة CSS محدد إلى عنصر واجهة المستخدم: تحتوي كل أداة في Elementor Pro على علامة تبويب "خيارات متقدمة" حيث يمكنك إضافة CSS مخصص لتلك الأداة المحددة.
أضف CSS محددًا إلى عنصر واجهة المستخدم

اقرأ أيضا: Elementor: كيفية إضافة CSS مخصص إلى الإصدار المجاني

استخدام الرسوم المتحركة وتأثيرات الحركة:
يقدم Elementor Pro رسومًا متحركة وتأثيرات حركة لجعل صفحاتك أكثر ديناميكية:

  1. إضافة رسوم متحركة للدخول: في علامة التبويب " متقدم » لعنصر واجهة مستخدم أو قسم أو عمود، يمكنك تعيين الرسوم المتحركة للإدخال بحيث تتحرك العناصر عند ظهورها على الشاشة.
  2. تأثيرات التمرير والتفاعل: استخدم تأثيرات التمرير لإنشاء المنظر أو الرسوم المتحركة لتمرير الصفحة أو تأثيرات التمرير لتحسين التفاعل البصري.
استخدام الرسوم المتحركة وتأثيرات الحركة

الأسئلة الشائعة حول كيفية استخدام Elementor

هل Elementor متوافق مع جميع سمات WordPress؟

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

هل يمكنني استخدام Elementor مع منشئي الصفحات الآخرين؟

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

كيفية حل مشكلات التوافق مع Elementor؟

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

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

هل يؤثر Elementor على أداء موقعي؟

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

  • استخدم استضافة فعالة لدعم احتياجات موقعك.
  • تحسين الصور الخاصة بك قبل تنزيلها.
  • استخدم البرنامج المساعد لذاكرة التخزين المؤقت لتسريع تحميل الصفحة.
  • تجنب الاستخدام المفرط للأدوات والرسوم المتحركة، مما قد يجعل الصفحات أثقل.

ما هي أفضل الممارسات لاستخدام Elementor؟

لتحقيق أقصى استفادة من Elementor مع الحفاظ على الأداء الجيد وتجربة المستخدم المثالية:

  • استخدام الأقسام والأعمدة بشكل استراتيجي لتنظيم المحتوى الخاص بك.
  • تطبيق الأنماط العالمية لضمان الاتساق البصري في جميع أنحاء الموقع.
  • تعديلات الخطة لاستجابة الهاتف المحمولباستخدام أدوات Elementor المضمنة لتحسين العرض عبر الأجهزة المختلفة.
  • الحفاظ على النظام عملك واختبار الصفحات قبل نشرها.

ماذا تفعل إذا كانت هناك مشكلة مع Elementor Pro؟

إذا كانت لديك مشكلات مع Elementor Pro:

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

كيف يمكنني تحسين الصفحة التي تم إنشاؤها باستخدام Elementor لتحسين محركات البحث؟

لتحسين صفحة Elementor لتحسين محركات البحث:

  • استخدم العناوين H1، H2، H3 بشكل هرمي لتنظيم المحتوى الخاص بك.
  • تحسين العلامات الوصفية والوصف لكل صفحة.
  • إضافة علامات بديلة إلى الصور لتحسين SEO للصور.
  • استخدم ملحقات SEO مثل Yoast SEO أو Rank Math، المتوافقة تمامًا مع Elementor.
  • تأكد من تحميل صفحتك بسرعة باتباع الممارسات الجيدة المذكورة أعلاه.

هل من الممكن تصدير قوالب Elementor إلى مواقع أخرى؟

نعم، Elementor يجعل من السهل تصدير القوالب لاستخدامها على مواقع أخرى. وإليك كيفية القيام بذلك:

  • احفظ النموذج الخاص بك : انتقل إلى "القوالب" > "حفظ كقالب" لحفظ قالب محدد.
  • تصدير النموذج : انتقل إلى "القوالب" > "القوالب الخاصة بي"، ثم انقر على "تصدير" لتنزيل ملف القالب .json.
  • قم باستيراد النموذج على موقع آخر: في الموقع الوجهة، انتقل إلى "القوالب" > "استيراد"، ثم قم بتنزيل ملف .json الذي قمت بتصديره.

اقرأ أيضًا الموارد المرتبطة بهذه المقالة

وفي الختام

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

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

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

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

...

يعلقون عليه على موقع Pinterest