ووردبريس

كيفية استخدام إضافة Elementor لبناء مواقع ووردبريس باحترافية

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

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

إضافة Elementor

مقدمة تعريفية عن Elementor

إن إضافة Elementor من أشهر إضافات ووردبريس لإنشاء وتصميم الصفحات بسهولة عن طريق السحب والإفلات، أو ما يسمى باللغة الإنكليزية Drag and Drop. في عام 2016 تم إطلاق Elementor وكسرعة النار في الهشيم أصبحت من أشهر وأقوى إضافات بناء الصفحات لمواقع ووردبريس والتي لها العديد من الميزات والتي سوف نتطرق لها قبل شرح الجانب العملي في مقالتنا.

نقاط القوة والمميزات في Elementor

  • لن تحتاج إلى أي مهارات برمجية لاستخدام إضافة Elementor حيث يمكن القيام بكل شيء من خلال واجهة متطورة سهلة الاستخدام والتي تحقق مبدأ يسمى “WYSIWYG” والذي يعني بلغتنا العربية “ما تراه هو ما تحصل عليه” أي صمم بيدك دون كتابة أي تعليمات برمجية.
  • كما يمكنك Elementor من تصميم وبناء صفحات ومقالات ذات مظهر مميز ومختلف مقارنة بالصفحات الافتراضية التي تأتي مع قوالب ووردبريس.
  • ويقدم لك Elementor واجهة خاصة ومنفصلة للعمل على بناء موقعك بمنعزل عن محرر القوالب الافتراضي الخاص بوورد بريس والذي يدعى” Gutenberg “.
  • كما يقدم Elementor توافقية كاملة مع جميع قوالب ووردبريس لذلك لا تقلق سوف يمكنك متابعة عملك بقالبك الحالي والاستمرار في الحصول على جميع مميزات Elementor.
  • توفر أكثر من 90 عنصر محتوى للاختيار من بينها في إنشاء وتصميم الصفحات.
  • كل ما سوف يتم تصميمه في Elementor متوافق مع جميع الأجهزة بكافة مقاسات الشاشات ويحقق مبدأ Responsive.
  • تعتبر إضافة Elementor هي صديقة للسيو SEO Friendly أي تدعم القواعد والخاصيات المفيدة في رفع الترتيب ضمن محركات البحث أو ما يسمى SEO: Search Engine Optimization
  • كما يوفر Elementor لك مكتبة ضخمة من قوالب الصفحات الجاهزة والتي يمكنك استخدامها وحتى تعديلها لتناسب احتياجاتك حيث توفر تقريبا أكثر من 200 نموذج مجاني وأكثر من 300 قالب احترافي.
  • يقدم لك Elementor في النسخة المدفوعة المزيد من الميزات الاحترافية مثل ما يسمى مصمم القوالب ” Theme Builder ” حيث يمكنك تعديل جميع العناصر الأساسية في القالب مثل الترويسة Header – التذييل Footer وحتى قالب المقالات والمدونات نفسها.
  • كما يدعم إنشاء وتعديل صفحات مواقع التجارة الإلكترونية مثل صفحة المنتج الفردية أو أرشيف المنتجات.
  • يدعم المعاينة المباشرة وتعني أنك تستطيع الاطلاع على نتائج عملك في الوقت الفعلي، أي أنك لست مضطر للتساؤل عن الشكل الذي ستبدو عليه صفحتك عند نشرها.

أسعار وأنواع إضافة Elementor

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

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

أسعار إضافة Elementor من الموقع الرسمي

كيفية تنصيب وتفعيل Elementor

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

من ثم نختار من القائمة الجانبية خيار ” إضافات” ومن ثم نختار “أضف جديد” كما هو موضح في الصورة:

بعد ذلك سيظهر لك مستودع الإضافات الخاص ب وورد بريس كما هو موضح بالصورة،

  1.  اكتب ضمن مربع البحث اسم الإضافة “Elementor“.
  2. اضغط زر ” التنصيب الآن“.

قم بالإنتظار قليلا ريثما يتم تحميل الإضافة، وبعد نجاح التنزيل ستظهر نافذة كالتالي، اضغط “تفعيل“.

الآن حتى نقوم باستخدام مميزات محرر Elementor Editor، سنقوم ببناء أول صفحة لنا، ولنفرض أننا سنقوم ببناء صفحة اسمها “اتصل بنا”، لذلك فمن اللوحة الرئيسية نقوم باختيار “صفحات” ومن ثم نقوم باختيار “أضف جديد“.

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

وكما بالشكل فإن الواجهة التي ستظهر هي واجهتك المفضلة من الآن فصاعدا. لأنك ستقضي معظم وقتك عندها تقوم بالإبداع وإضافة لمساتك الجميلة لتظهر الصفحة بأوج جمالها. الآن تمعن الصورة بالأسفل

قائمة عناصر التحكم بالمحتوى

قائمة عناصر التحكم بالمحتوى
  1. كما بالشكل هذا هو المكان الذي يمكنك فيه الوصول إلى إعدادات Elementor  أو الخروج من المحرر.
  2. هذه هي الطريقة التي تعود بها لعرض عناصر المحتوى.
  3. تلك هي الإعدادات العامة للصفحة التي تعمل عليها.
  4. هذه قائمة Navigator تسمح لك بتصفح محتوى الصفحة بنافذة مصغرة.
  5. تاريخ مراجعة الصفحة (الأحداث).
  6. تبديل جهاز العرض لاختبار مقاسات التصميم على جميع الأجهزة (سطح المكتب، الجهاز اللوحي، الهاتف المحمول).
  7. معاينة التغييرات في نافذة متصفح جديدة.
  8. كما هو واضح بالشكل فهذا زر حفظ أو تعديل ثم نشر الصفحة.

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

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

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

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

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

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


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

بعد ذلك قم باختيار مخطط الصفحة أو الهيكل المناسب للتصميم الذي كنت قد وضعته سابقاً من الخيارات المتاحة التي يقدمها Elementor.

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

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

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

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


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

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

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

هل استخدام إضافة Elementor هي الأفضل؟! أم منافسيه؟!

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

لنلقي نظرة سريعة عن مميزات وعيوب كل منهما:

نظرة سريعة على إضافة Divi

تم إطلاق قالب Divi لأول مرة في عام 2013. ولكن تم تحديثه وتحسينه حتى يظل منافسا في سوق قوالب ووردبريس متعددة الأغراض.

إليك نظرة عامة موجزة على بعض النقاط الهامة في هذه المراجعة لقالب Divi سوف تمنحك فكرة سريعة عما إذا كان هو القالب المناسب لك أم لا.

  • يوجد مجموعة كبيرة من النماذج عالية الجودة: يأتي قالب Divi مع عشرات النماذج الجاهزة القابلة للتحرير والتي تناسب جميع أنواع مواقع الويب.
  • كما تأتي الإضافة بمحرر محتوى قوي: تعد أداة Divi Builder واحدة من أكثر إضافات إنشاء الصفحات بخاصية السحب والإفلات وفرة في المميزات في ووردبريس.
  • أداة تحسين المحتوى عن طريق خاصية الإختبار: حيث تمنحك ميزة Divi Leads القدرة على تحسين المحتوى لأعلى معدلات التحويل الممكنة عن طريق إجراء إختبارات (A / B testing)
  • كما يأتي بقوالب ومكونات إضافية: يأتي قالب Divi مع قالب إضافي وبعض الإضافات المميزة الأخري.

نظرة سريعة على إضافة Beaver

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

  • قالب Astra المجاني الذي يتسم بالخفة والسرعة ويلبي جميع الأغراض، ويأتي مع دعم مدمج لـ Beaver Builder.
  • StudioPress الذي يتوافق مع Beaver Builder حيث سيعمل بشكل رائع مع المكون الإضافي المذكور.
  • قالب OeanWP المجاني المعروف بتعدد أغراضه، ويأتي مع دعم منشئ الصفحة بالكامل.

الخاتمة

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

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

ما هي المميزات في Elementor ؟

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

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

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

هل اليمينتور Elementor أفضل الحلول وهل هو مجاني ؟

به ادوات كثيرة مجانية وهو الاول على مثيلاته ولكن ايضا له خطط مدفوعة مع مميزات اخرى كثيرة

إقراء أيضًا 

كيفية عمل موقع تجارة إلكترونية متعدد البائعين

كيفية استخدام ووردبريس متعدد المواقع MultiSite وفوائده

رعد قاسم

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

مقالات ذات صلة

اترك تعليقاً

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

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