هل ترغب في اكتشاف وفهم كيف تبدو واجهة Elementor؟ هذا الدليل هو لك.
لم يكن تصميم موقع ويب ذو مظهر احترافي مناسبًا للجميع، خاصة أنه كان لدينا جميعًا انطباع بأنه يتعين علينا بالتأكيد أن نكون محترفين في البرمجة وتصميم الويب.
في الوقت الحاضر، نرى أدوات جديدة ناشئة لنظام WordPress البيئي، من أجل توفير حل أبسط من أي وقت مضى لتصميم موقع ويب في متناول معظم المبتدئين.
فيما يتعلق بتصميم تخطيطات WordPress ، كان علينا بالفعل تقديم المكوّن الإضافي الملحن البصري، والتي تعد بالتأكيد واحدة من أفضل الأدوات عندما يتعلق الأمر بتصميم التخطيط.
ولكن تجدر الإشارة إلى أن هذا الحل لا يناسب الجميع. ولهذا السبب، سنقدم لك في هذا البرنامج التعليمي ملحق Elementor WordPress، وهو مكون إضافي لـ freemium WordPress (مجاني، ولكن قابل للتوسيع بموجب الاشتراك).
محتويات
أين يمكن الحصول على عنصر لبرنامج WordPress
نحن نفكر بجدية في جعلك ترى إمكانات المكون الإضافي ، وسوف يساعدك الحل المجاني في البدء دون دفع فلس. هذا الحل المجاني متاح في WordPress.org. نظرًا لكونه مكونًا إضافيًا لـ WordPress، فقد تم تثبيته مثل أي مكون إضافي البرنامج المساعد من لوحة القيادة.
إذا تمكن المكوّن الإضافي من إرضائك تمامًا ، فستتمكن من الحصول على الترخيص الكامل بجميع الوظائف على الموقع العنصر الرسمي.
الميزات الرئيسية للعنصر
يعد Elementor واحدًا من أكثر أدوات إنشاء الصفحات شهرةً في WordPress، وذلك لسبب وجيه. بفضل ميزاته القوية وواجهته البديهية، فإنه يوفر حلاً قويًا لإنشاء مواقع ويب احترافية دون الحاجة إلى مهارات البرمجة. فيما يلي نظرة عامة على الميزات الرئيسية لبرنامج Elementor التي تجعله لا غنى عنه لأي مستخدم WordPress:
قم بسحب وإسقاط المحرر المرئي : يقدم Elementor محررًا مرئيًا بديهيًا يسمح لك بتصميم الصفحات عن طريق سحب العناصر وإسقاطها. يمكنك رؤية التغييرات في الوقت الفعلي، مما يجعل تخصيص موقع الويب الخاص بك أسهل بكثير.
الحاجيات الغنية : مع مجموعة واسعة من الأدوات المتاحة، يتيح لك Elementor إضافة عناصر متنوعة إلى صفحاتك، مثل الأزرار والمعارض والدوائر والنماذج والمزيد. يعمل الإصدار الاحترافي على توسيع هذه الوظيفة باستخدام عناصر واجهة المستخدم المتقدمة مثل نماذج الاتصال وشرائح التمرير والمحافظ.
قوالب محددة مسبقا : يقدم Elementor مكتبة من القوالب المعدة مسبقًا والتي يمكن استخدامها كنقطة بداية لصفحاتك. تغطي هذه القوالب أنماطًا واحتياجاتًا مختلفة، مما يجعل من السهل إنشاء صفحات وظيفية وجذابة.
محرر الموضوع : باستخدام Elementor Pro، لا يمكنك تخصيص محتوى صفحاتك فحسب، بل يمكنك أيضًا تخصيص الرؤوس والتذييلات والأجزاء العامة الأخرى لموقعك بفضل محرر السمات المدمج. يتيح لك هذا إنشاء تناسق مرئي عبر موقعك بالكامل.
إنشاء قوالب المشاركات : تتيح لك ميزة إنشاء قوالب المنشورات تصميم تخطيطات لأنواع منشورات معينة، مثل منشورات المدونة أو منتجات WooCommerce. يعد هذا الخيار مفيدًا بشكل خاص لإنشاء تصميمات متسقة لأنواع مختلفة من المحتوى.
منشئ النوافذ المنبثقة : يشتمل Elementor Pro على أداة إنشاء النوافذ المنبثقة التي تتيح لك إنشاء نوافذ منبثقة مخصصة للإعلانات أو نماذج الاشتراك أو تفاعلات الزائرين الأخرى. يمكنك تحديد شروط العرض لاستهداف جمهورك بدقة.
ضوابط التخطيط المتقدمة : يوفر Elementor عناصر تحكم متقدمة للطباعة والهوامش والمسافات والتخطيط سريع الاستجابة. يمكنك ضبط تخطيط موقعك ليناسب أنواع الأجهزة المختلفة، مما يضمن تجربة مستخدم مثالية على الهاتف المحمول والكمبيوتر اللوحي وسطح المكتب.
الدعم والتوثيق : يوفر Elementor دعمًا شاملاً، مع وثائق مفصلة وبرامج تعليمية عبر الإنترنت ومجتمع نشط. يستفيد المستخدمون المحترفون من الدعم المتميز المباشر، مما يضمن مساعدة سريعة وفعالة في حل أي مشكلات.
الامتدادات والتكاملات : Elementor متوافق مع مجموعة متنوعة من المكونات الإضافية وعمليات التكامل، مما يجعل من الممكن إضافة وظائف إضافية إلى موقعك. سواء كنت ترغب في دمج أدوات التسويق، أو ملحقات تحسين محركات البحث (SEO)، أو حلول التجارة الإلكترونية، فإن Elementor يجعل من السهل توسيع إمكانيات موقعك.
فيما يلي جدول يلخص ميزات Elementor.
| المزايا | عنصر مجاني | إليمنتور برو |
| محرر الصفحة بالسحب والإفلات | نعم | نعم |
| قوالب محددة مسبقا | نعم | نعم |
| الحاجيات الأساسية | نعم | نعم |
| الحاجيات برو | ليس | نعم |
| محرر الرأس والتذييل | ليس | نعم |
| إنشاء قوالب المشاركات | ليس | نعم |
| إنشاء قوالب WooCommerce | ليس | نعم |
| منشئ النوافذ المنبثقة | ليس | نعم |
| دعم القطعة طرف ثالث | ليس | نعم |
| الدعم الفني | ليس | نعم |
| ميزات التسويق (النماذج | ليس | نعم |
| الوصول إلى مكتبة القوالب المتميزة | ليس | نعم |
| التأثيرات والرسوم المتحركة المتقدمة | ليس | نعم |
| أدوات المراجعة والنسخ الاحتياطي | ليس | نعم |
| خلق النماذج | ليس | نعم |
| التحكم المتقدم في الطباعة | ليس | نعم |
| التحكم في التخطيط المستجيب | ليس | نعم |
| إمكانية الوصول إلى التحديثات المنتظمة | نعم | نعم |
لاحظ أن هذه قائمة شاملة إلى حد ما من الميزات المختلفة التي يوفرها المكون الإضافي. ستجد المزيد من التفاصيل في استكشاف موقعه على الانترنت.
ابدأ مع Elementor
يعد بدء استخدام Elementor أمرًا سريعًا وسهلاً، حتى لو كنت جديدًا في إنشاء مواقع WordPress. اتبع هذه الخطوات لإعداد Elementor والبدء في تصميم صفحاتك كالمحترفين.
لن نغطي عملية التثبيت بأكملها هنا. نظرًا لأن هذا مكون إضافي لبرنامج WordPress ، فقد تم بالفعل شرح إجراء التثبيت بتنسيق تعليمي السابق.
تثبيت Elementor
- الوصول إلى لوحة تحكم WordPress الخاصة بك: قم بتسجيل الدخول إلى لوحة إدارة WordPress الخاصة بك.
- انتقل إلى الملحقات: انتقل إلى "الامتدادات" ثم انقر على "إضافة".
- البحث عن العنصر: اكتب "Elementor" في شريط البحث. ستجد Elementor (نسخة مجانية). للبدء، قم بتثبيت وتفعيل الإصدار المجاني.
- تثبيت العنصر: انقر فوق "التثبيت الآن" ثم "تنشيط" بمجرد اكتمال التثبيت.
ومع ذلك، بعد التثبيت، سيتم نقلك إلى الصفحة الرئيسية للمكون الإضافي.
إذا كانت لديك هذه الصفحة على شاشتك، فهذا يعني أنك قمت بتثبيت المكون الإضافي Elementor بنجاح. نحن نستخدم حاليًا الإصدار الكامل لهذا البرنامج التعليمي، ولكن يجب ألا تختلف الواجهة كثيرًا عن الإصدار المجاني.
قبل الانتقال إلى واجهة التحرير، سأدعوك لتسجيل الترخيص الخاص بك. هذا صالح فقط لأولئك الذين اختاروا الإصدار Pro.
إذا كان لديك الإصدار المجاني، يمكنك الوصول إلى القسم التالي. لتسجيل ترخيصك، ستلاحظ إشعارًا على WordPress يطالبك بتسجيل ترخيصك.
لذا فقط اضغط على تحديث الآن للدخول إلى صفحة التسجيل والضغط على تفعيل.
ستشاهد عادةً صفحة التأكيد الخاصة بك إذا كان ترخيصك كذلك النشطه.
إذا لم تصل إلى هذه الصفحة ، فأنا أدعوك إلى الاتصال بمطوري المكون الإضافي للمزيد المساعدة في حل المشكلة.
واجهة العنصر
تم تصميم واجهة Elementor لتوفير تجربة مستخدم سلسة وبديهية، مما يجعل من السهل إنشاء صفحات WordPress الخاصة بك وتخصيصها. فيما يلي نظرة عامة تفصيلية على الأقسام الرئيسية لواجهة Elementor، بالإضافة إلى أمثلة مرئية لمساعدتك على فهم كل عنصر بشكل أفضل.
منطقة العمل (منطقة المحتوى)
La منطقة العملأو منطقة المحتوى، هي المساحة المركزية التي يمكنك من خلالها إنشاء صفحتك وعرضها. هذا هو المكان الذي يمكنك فيه إضافة عناصر واجهة المستخدم والأقسام وتعديلها. يتم عرض التخطيط في الوقت الفعلي، مما يسمح لك برؤية التغييرات فور حدوثها.
لوحة الحاجيات
Le لوحة الحاجيات يقع على يسار الواجهة. يحتوي على عناصر مختلفة يمكنك سحبها وإسقاطها في منطقة العمل. يتم تنظيم الأدوات في فئات، مثل "عامة" و"أساسية" و"تخطيط" وما إلى ذلك، لتسهيل العثور على العناصر وإضافتها إلى صفحتك.
مجموعات القطعة Elementor
مجموعات Elementor Widget هي مجموعات من كتل الوظائف التي يقدمها Elementor. يعتمد عدد الأقسام على ما إذا كنت تستخدم الإصدار الكامل وما إذا كنت تستخدمه WooCommerceأو Yoast SEO أو أي مكونات إضافية متوافقة.
اعتمادًا على هذه الشروط، سيكون لديك أقسام أكثر أو أقل على الواجهة الخاصة بك. نظرًا لأننا نستخدم الإصدار الكامل مع تمكين المكون الإضافي WooCommerce، فهذا هو الشكل الذي تبدو عليه واجهتنا.
شريط الأدوات العلوي
La شريط الأدوات العلوي يتضمن خيارات أساسية مثل:
- شعار : يعرض في القائمة ميزات مثل: منشئ السمات، والسجل، وتفضيلات الحساب، واختصارات لوحة المفاتيح، وما إلى ذلك.
- زر لإضافة العناصر: يسمح لك بعرض لوحة الأدوات التي سيتم إدراجها في الصفحات
- زر إعدادات الموقع: يعرض العديد من إعدادات خيارات الموقع العالمية
- زر الهيكل: يتيح لك رؤية البنية العامة لصفحتك والتنقل خلالها دون قلق. إذا كانت صفحتك تحتوي على عدة أقسام متداخلة، فستساعدك هذه الوظيفة كثيرًا.
- عنوان الصفحة/ المقالة: يعرض عنوان الصفحة أو المقالة بالإضافة إلى حالتها (مسودة، منشورة، إلخ)
- قائمة التنقل عبر الهاتف المحمول : يتيح لك التبديل بين طرق عرض سطح المكتب والجهاز اللوحي والجوال. يعد هذا أمرًا ضروريًا لضمان استجابة تصميمك وتعديله بشكل جيد لجميع أنواع الأجهزة.
- إعدادات الصفحة : الوصول إلى إعدادات الصفحة، بما في ذلك خيارات التخطيط وإعدادات النمط.
- نشر/تحديث : يحفظ وينشر التغييرات التي تم إجراؤها على الصفحة.
- معاينة : يُرمز إليه بالعين ويسمح لك برؤية كيف تتصرف صفحتك في موقف حقيقي.
لذا، على اليسار لديك الأدوات المختلفة التي يقدمها البرنامج الإضافي وعلى اليمين لديك معاينة في الوقت الفعلي لتعديلاتك. في هذا البرنامج التعليمي، نستخدم سمة Hello المجانية من Elementor.
كيفية استخدام Elementor
إنشاء صفحتك الأولى
يعمل Elementor على صفحات ومنشورات WordPress. سواء كنت تستخدم الواجهة الكلاسيكية أو واجهة Gutenberg الجديدة، سترى زرًا يطالبك باستخدام Elementor builder.
- إنشاء صفحة جديدة: انتقل إلى "الصفحات" وانقر على "إضافة".
- قم بتسمية صفحتك: أعط صفحتك عنوانًا وانشرها.
- تحرير باستخدام العنصر: انقر فوق الزر "تحرير باستخدام Elementor" لتشغيل المحرر المرئي لـ Elementor.
من الناحية العملية، لن تحتاج دائمًا إلى تعديل منشوراتك باستخدام Elementor. لذلك أدعوك لاستخدام البرنامج المساعد فقط على الصفحات.
من خلال النقر على الزر، ستصل إلى واجهة تصميم Elementor التي تمنحك جوًا من déjà vu (لأولئك الذين يستخدمون WordPress Customizer).
كيفية إضافة الحاجيات إلى محرر Elementor
اسحب عناصر واجهة المستخدم مثل العناوين والصور والأزرار والمزيد من اللوحة اليمنى إلى منطقة المحتوى. يمكنك ضبط إعدادات كل عنصر واجهة مستخدم من خلال النقر عليها.
تخصيص الحاجيات: انقر على القطعة لفتح خيارات التخصيص الخاصة بها. يمكنك ضبط النص والصور والألوان والأحجام والمزيد.
استخدام القوالب: لتسريع العملية، استخدم القوالب المحددة مسبقًا. انقر على أيقونة المجلد للوصول إلى مكتبة النماذج، حيث يمكنك اختيار قالب واستيراده بنقرة واحدة.
حالات عملية
كيفية وضع كتلة Elementor
بمجرد توسيع القسم، ستجد عناصر واجهة المستخدم Elementor. يتم وضع عناصر واجهة المستخدم المختلفة عن طريق "السحب والإفلات" في المنطقة المميزة بخطوط متقطعة.
كيفية اختيار تخطيط القسم في Elementor
قبل إضافة عناصر واجهة المستخدم Elementor، يجب أن تفكر في اختيار تخطيط من خلال النقر على الزر "+" في القسم المميز.
اعتمادا على احتياجاتك، سوف تختار التصميم الذي يناسبك.
بمجرد اختيار تخطيط، يكون لديك تمثيل لهذا القسم في نفس المنطقة المميزة. سيعرض هذا القسم نفس عدد الأعمدة المقابلة لاختيارك. في حالتي اخترت عمودًا به عمودين.
الأعمدة المختلفة التي تحتوي على علامة "+" بالداخل هي المناطق التي يمكنها قبول عناصر واجهة المستخدم Elementor.
إذا قمت بإضافة كتلة Elementor دون اختيار تخطيط أولاً، فسيتم اختيار تخطيط العمود الفردي افتراضيًا.
يمكن إعادة ترتيب الأقسام العنصرية فيما بينها، باتباع نفس مبدأ " السحب والإفلات".
يمكنك أيضًا حذف قسم، إذا لم تعد ترغب في استخدامه.
فيما يلي مثال لقسم يحتوي على كتلتين هما كتلة العنوان وكتلة النص.
كيفية استخدام أدوات التصميم الأخرى
بعد الانتهاء من تصميمك ، فإن أحد الأشياء التي تريد القيام بها هو حفظ عملك. ستجد هذا الخيار في أسفل القسم الذي يعرض أقسام العنصر المختلفة.
يمكنك اختيار الحفظ مباشرة (نشر) ، والحفظ كمسودة أو كقالب. سوف نستكشف هذه النقاط المختلفة أكثر لاحقًا.
أثناء قيامك بالتصميم، قد ترغب أيضًا في معاينة التغييرات بدون واجهة Elementor الإضافية. كل ما عليك فعله هو النقر على أيقونة العين في الشريط العلوي لمحرر Elementor.
يحدث أنه أثناء التصميم يحدث خطأ (إجراء لا إرادي).
في هذه الحالة، يقدم لك Elementor سجلًا يسمح لك بالتنقل عبر جميع أفعالك.
احذف الإجراءات التي تريد التراجع عنها من القائمة
هذا سيسمح لك بالعودة بسهولة.
ال " تعديلاة » يسمح لك بتعديل خيارات معينة خاصة بالصفحة مثل العنوان أو الصورة المميزة أو الحالة وغيرها.
الأسئلة الشائعة
ما هو العنصر؟
Elementor عبارة عن أداة إنشاء صفحات بالسحب والإفلات لـ WordPress، مما يسمح للمستخدمين بتصميم مواقع الويب بشكل مرئي دون الحاجة إلى برمجة. فهو يوفر واجهة سهلة الاستخدام مع أدوات السحب والإفلات لإضافة العناصر وتخصيصها على صفحاتك.
هل العنصر مجاني؟
يقدم Elementor إصدارًا مجانيًا يحتوي على وظائف أساسية كافية لإنشاء صفحات ويب بسيطة. يوفر الإصدار الاحترافي، المتوفر عبر الاشتراك، ميزات متقدمة مثل عناصر واجهة المستخدم الإضافية والقوالب المتميزة وخيارات التخصيص الشاملة.
ما هي مزايا الإصدار Pro من Elementor؟
يوفر الإصدار Pro من Elementor أدوات متقدمة وقوالب احترافية وخيارات تصميم أعمق والقدرة على إنشاء رؤوس وتذييلات وأرشيفات مخصصة. كما يسمح أيضًا بالتكامل المعزز مع أدوات الطرف الثالث وميزات التسويق.
كيف أقوم بتثبيت Elementor على موقع WordPress الخاص بي؟
لتثبيت Elementor، انتقل إلى لوحة تحكم WordPress، وانقر على "المكونات الإضافية"، ثم "إضافة". ابحث عن "Elementor" في مربع البحث، ثم انقر فوق "التثبيت الآن" وأخيرًا "تنشيط". يمكنك أيضًا تثبيت Elementor Pro عن طريق تنزيل ملف ZIP من موقع Elementor واستيراده عبر "الامتدادات" > "إضافة" > "ملحق التحميل".
كيفية استخدام Elementor لإنشاء صفحة؟
بعد تثبيت Elementor، انتقل إلى صفحة أو منشور في لوحة تحكم WordPress الخاصة بك وانقر على "Edit with Elementor". سيتم نقلك إلى محرر Elementor حيث يمكنك سحب وإفلات عناصر واجهة المستخدم والأقسام لتصميم صفحتك. استخدم اللوحات اليسرى لإضافة عناصر إلى صفحتك وتخصيصها.
هل Elementor متوافق مع جميع سمات WordPress؟
نعم، تم تصميم Elementor ليكون متوافقًا مع معظم البرامج وورد المواضيع. ومع ذلك، لتحقيق التكامل الأمثل، يوصى باستخدام السمات المصممة خصيصًا لـ Elementor، والتي توفر المزيد من التوافق والمرونة.
هل يمكنني استخدام Elementor لإنشاء موقع للتجارة الإلكترونية؟
نعم، Elementor متوافق مع WooCommerce، مما يسمح لك بإنشاء وتخصيص صفحات المنتج وصفحات المتجر وقوالب صفحة الدفع. يقدم الإصدار الاحترافي عناصر واجهة مستخدم خاصة بـ WooCommerce لتحسين مظهر متجرك عبر الإنترنت.
كيف يمكنني معاينة التغييرات التي تم إجراؤها باستخدام Elementor؟
يمكنك معاينة تغييراتك بالنقر فوق الزر "معاينة" في محرر Elementor. يتيح لك هذا معرفة الشكل الذي ستبدو عليه صفحتك قبل نشر التغييرات مباشرة.
هل يقدم Elementor الدعم الفني؟
نعم، يقدم Elementor الدعم الفني عبر المنتديات وقاعدة المعرفة ونظام التذاكر لمستخدمي Pro. يمكنك أيضًا الوصول إلى البرامج التعليمية والأدلة التفصيلية على موقع Elementor الرسمي.
هل يمكنني استخدام ملحقات الطرف الثالث مع Elementor؟
نعم، Elementor متوافق مع العديد من ملحقات الجهات الخارجية التي تضيف ميزات وعناصر واجهة مستخدم إضافية. يمكنك تثبيتها كما الإضافات وورد العادية لتوسيع قدرات Elementor.
موارد مشابهة لهذه المقالة
- كيفية إنشاء نموذج باستخدام Elementor حراحصل على Elementor Pro الآن !!!
- كيفية إنشاء النوافذ المنبثقة باستخدام Elementor
- Elementor مجاني مقابل Elementor Pro: مقارنة الميزات التفصيلية
- Elementor : كيفية تغيير الصورة بنقرة زر واحدة
- كيفية إنشاء تخطيط مع Elementor
وفي الختام
يعد Elementor حلاً قويًا ومتعدد الاستخدامات لإنشاء صفحات WordPress استثنائية دون الحاجة إلى البرمجة. بفضل واجهته البديهية وميزاته القوية، فهو يسمح لكل من المبتدئين والمحترفين بتصميم مواقع ويب جذابة وعملية في أي وقت من الأوقات.
من خلال فهم الأقسام الرئيسية لواجهة Elementor، ستتمكن من التنقل في المحرر بكفاءة، واستخدام الأدوات على النحو الأمثل، وتخصيص كل جانب من جوانب صفحاتك لتلبية احتياجاتك الخاصة.
ال مجالات العمل, لوحات القطعة، وغيرها من الأدوات المصممة لتوفير أقصى قدر من المرونة مع الحفاظ على سهولة الاستخدام. ومن خلال دمج الأقسام والأعمدة بسلاسة، والاستفادة من خيارات التصميم والتخطيط، يمكنك تحويل رؤيتك إلى واقع.
لا تنس الاستفادة من ميزات المعاينة في الوقت الفعلي للتأكد من أن تصميماتك تبدو رائعة على جميع الأجهزة. مع Elementor، يصبح كل مشروع فرصة ل إنشاء موقع على شبكة الإنترنت مثير للإعجاب الذي يبرز حقا.
لمزيد من النصائح والبرامج التعليمية حول استخدام Elementor، اشترك في مدونتنا وتابع آخر التحديثات والنصائح. شارك هذه المقالة مع عشاق WordPress وتصميم الويب الآخرين لمساعدتهم على تحقيق الإمكانات الكاملة لـ Elementor.
ابدأ في استكشاف الإمكانيات التي لا نهاية لها التي يقدمها لك Elementor الآن وقم بتحويل أفكارك إلى تصميم ويب جذاب!