recent
أخبار ساخنة

كيفية استخدام إضافة 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، ومن هذه الصفحة يمكنك الدخول والتحكم بكافة الصفحات والإضافات والقوالب في موقعك.



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



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

اكتب ضمن مربع البحث اسم الإضافة "Elementor".


اضغط زر " التنصيب الآن".



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



والآن حتى نقوم باستخدام مميزات محرر Elementor Editor، سنقوم ببناء أول صفحة لنا.

لنفرض أننا سنقوم ببناء صفحة اسمها "اتصل بنا".

من اللوحة الرئيسية نقوم باختيار "صفحات" ومن ثم نثوم باختيار "أضف جديد".



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



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



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






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

هذا هو المكان الذي يمكنك فيه الوصول إلى إعدادات Elementor أو الخروج من المحرر.


هذه هي الطريقة التي تعود بها لعرض عناصر المحتوى.


الإعدادات العامة للصفحة التي تعمل عليها.


قائمة Navigator تسمح لك بتصفح محتوى الصفحة بنافذة مصغرة.


تاريخ مراجعة الصفحة (الأحداث).


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


معاينة التغييرات في نافذة متصفح جديدة.


حفظ أو تعديل ثم نشر الصفحة.

عناصر المحتوى الرئيسية المتاحة تتضمن العناوين الرئيسية والصور والنصوص ومقاطع الفيديو والأزرار والفواصل ومعارض الصور والشهادات وأيقونات الوسائط الاجتماعية وخرائط جوجل وغيرها. أيضًا يمكنك استخدام عناصر واجهة المستخدم (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 أفضل الحلول وهل هو مجاني ؟

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

سجل للحصول على آخر الأخبار وكثير من الفوائد الأخرى

* indicates required

Intuit Mailchimp

google-playkhamsatmostaqltradent