كيفية استخدام Elementor: الدليل النهائي للمبتدئين

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

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

كل ما تحتاجه هو التصميم المطلق والمثابرة وعقلية إنشاء شيء مذهل. الآن سؤال المليون دولار هو - هل تعرف كيفية استخدام Elementor في WordPress؟

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

جدول المحتويات

• تعرف على Elementor
• ما الذي يجعل Elementor منشئ الصفحات الأكثر شيوعًا في WordPress
• تقديم Elementor Dashboard
• كيفية استخدام Elementor مع WordPress
• كيفية استخدام الميزات المتقدمة Elementor
• إيجابيات وسلبيات استخدام Elementor Page Builder في موقع WordPress الخاص بك
• أفضل إضافات عناصر الطرف الثالث لتحسين التصميم الخاص بك
• برنامج تعليمي مجاني: قم ببناء موقع التجارة الإلكترونية الخاص بك باستخدام Elementor و Happy Addons
• الأسئلة الشائعة حول Elementor
• انتهى اليك

تعرف على Elementor

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

تعرف على ميزات Elementor الأساسية

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

للسماح لك بالقيام بذلك ، يأتي Elementor مع ؛

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

• Popup Builder: يساعدك على إنشاء نوافذ منبثقة تبرز وتتوافق تمامًا مع بقية تصميم موقعك.

• 80+ عنصر واجهة مستخدم: تقدم كل عنصر واجهة مستخدم في Elementor تخصيصًا متقدمًا للتصميم بحيث لا تحتاج إلى تثبيت مكونات إضافية لإنجاز تصميمك.

• 100+ قالب مُصمم مسبقًا و 300+ قالب: يمكنك الاختيار من بين أكثر من 100 قالب WordPress كامل الصفحة و 300 قالب لإثراء تصميمك في غضون لحظات.

Elementor Free مقابل Elementor Pro

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

كمبتدئ ، توصيتنا هي تجربة Elementor مجانًا أولاً ، ثم الانتقال إلى Elementor pro إذا كان ذلك ضروريًا حقًا بالنسبة لك.

ما الذي يجعل Elementor منشئ الصفحات الأكثر شيوعًا في WordPress

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

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

سيؤدي استخدام Elementor لبناء مواقع الويب إلى:

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

بالنسبة لمطوري WordPress ، لا يزال النظام الأساسي الأفضل مع تحسين البرنامج النصي والسمات المخصصة وإصدارات التراجع.

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

Elementor vs Divi vs Beaver Builder - جدول المقارنة

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

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

تقديم Elementor Dashboard

للوصول إلى لوحة معلومات Elemnetor ، في البداية ، نحتاج إلى تثبيت Elementor على موقع WordPress الخاص بنا. تثبيت Elementor سهل مثل الفطيرة. اتبع الخطوات التالية لتثبيت Elementor وتنشيطه في لحظات.

كيفية تثبيت Elementor وتفعيله في WordPress؟

• الخطوة 01: اذهب إلى لوحة معلومات WordPress الخاصة بك> الإضافات> إضافة جديد

• الخطوة 02: اكتب "Elementor" في مربع البحث وابحث عن Elementor من نتيجة البحث. ثم انقر فوق زر التثبيت .

• الخطوة 03: أخيرًا ، انقر فوق الزر " تنشيط " لتنشيط واستخدام Elementor.

إعدادات العنصر

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

الإعدادات :

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

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

• متقدم: ستجد خيار تعيين طريقة طباعة CSS ، وتبديل طريقة أداة التحميل عند استكشاف مشكلات الخادم وإصلاحها ، وتمكين دعم SVG.

مدير الدور :

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

أدوات:

• عام: ستتيح لك الأدوات العامة إعادة إنشاء CSS على موقع الويب الخاص بك ومزامنة مكتبة Elementor يدويًا إذا كنت بحاجة إلى ذلك.

• استبدال عنوان URL: علامة التبويب "استبدال عنوان URL" هي مكان حيث يمكنك ، كما يقول الاسم ، استبدال عناوين URL إذا قمت بتغيير عنوان الموقع.

• وضع الصيانة: في علامة التبويب "وضع الصيانة" ، يمكنك الحصول على جميع عناصر التحكم في وضع صيانة موقع الويب الذي ستحتاج إليه في أي وقت.

• Font Awesome: يتيح لك الوصول إلى أكثر من 1500+ رمز Font Awesome 5 المذهل والاستمتاع بأداء ومرونة تصميم أسرع.

عنصر لوحة القيادة

• للوصول إلى لوحة معلومات Elementor ، انتقل إلى WordPress Dashboard> Pages> Add New .

• بعد ذلك ، أدخل عنوان الصفحة وحدد خيار Elementor Canvas من القائمة المنسدلة للقالب على الجانب الأيمن.

• أخيرًا ، انقر فوق الزر " تحرير باستخدام Elementor " وابدأ في العمل مع أقوى أداة إنشاء صفحات.

• ومع ذلك ، إذا كنت تريد تحرير صفحة مثيرة باستخدام Elementor ، فانتقل إلى All Pages> Hovering Over a Page .

• ثم سيظهر زر " تحرير باستخدام Elementor ". الآن ، انقر فوق الزر وابدأ في تحرير صفحتك.

ها هو. لوحة معلومات العنصر التي طال انتظارها. لنأخذ جولة فيه.

هذه هي الواجهة حيث يمكنك تصميم صفحتك باستخدام عناصر السحب والإفلات ومشاهدة المعاينة المباشرة لموقعك.

• ستجد أعلى اليسار أيقونة همبرغر لبعض الإعدادات الافتراضية والعالمية.

• في الجزء العلوي الأيمن ، ستجد زر اتصال للرجوع إلى اللوحة الرئيسية

• بعد ذلك ، يظهر مربع بحث لاكتشاف الأدوات المدرجة والمطلوبة بسرعة

• ستجد جميع الوحدات المفيدة في اللوحة اليمنى

• في الجزء السفلي ، ستجد بعض الرموز المفيدة لإعدادات الصفحة والتنقل السريع والمحفوظات ووضع الاستجابة والمعاينة.

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

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

بهذه الطريقة ، ستحصل على معاينة كاملة لصفحتك.

نقطة المكافأة: يمكنك تحسين تجربة العنصر الخاص بك باستخدام أدوات الطرف الثالث مثل HappyAddons

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

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

• 100+ الحاجيات
• 200+ كتلة جاهزة
• لصق نسخ عبر المجالات
• قسم غير محدود التعشيش
• اخفاء الصورة
• تأثير الجسيمات السعيد
• 500+ رمز الخط
• ارتفاع متساوي ، وأكثر من ذلك بكثير

باستخدام HappyAddons مع Elementor ، يمكنك إعطاء موقعك نظرة متميزة في أي وقت من الأوقات.

كيفية استخدام Elementor مع WordPress

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

1. كيفية استخدام Elementor Page Builder
2. كيفية استخدام Elementor Theme Builder
3. كيفية إنشاء نافذة منبثقة في Elementor

لذلك ، في الأساس ، سيبدأ برنامجنا التعليمي من هذا القسم. في وقت سابق تعرفنا على Elementor ، والآن ، سنعمل معه بطريقة حقيقية.

كيفية استخدام Elementor Page Builder

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

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

• انتقل إلى لوحة معلومات WordPress الخاصة بك> الصفحات> إضافة جديد

• أعط هذه الصفحة اسما. هنا سميته الصفحة الرئيسية.
• عيّن القالب الافتراضي على " Elementor Canvas " لأننا نريد إنشاء الصفحة بأكملها باستخدام Elementor. يمكنك اختيار Elementor Full Width ، والذي سيتيح لك تخصيص الصفحة بأكملها بدون القائمة.
• بعد ذلك ، انشر الصفحة من الشريط الجانبي الأيمن. يمكنك أيضًا الاحتفاظ بها كمسودة.
• انقر فوق " تحرير باستخدام Elementor " وستتم إعادة توجيهك إلى منشئ صفحة Elementor.

الخطوة 02: اختر نموذجًا مناسبًا للصفحة الرئيسية لموقع السفر الخاص بك

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

• انقر فوق الزر "إضافة قالب".

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

الخطوة 03: أضف رأس الصفحة إلى صفحتك الرئيسية

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

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

يساعد Header في عرض هوية علامتك التجارية على الفور بمجرد دخول زوارك إلى موقع الويب الخاص بك. بعد تخصيص العنوان ، سنقوم الآن بتخصيص جسم الصفحة الرئيسية.

الخطوة الرابعة: تسليط الضوء على مرافق الفندق

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

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

الخطوة 05: أضف مقطع فيديو وشهادة

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

الخطوة 06: أضف نموذج الاتصال

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

الخطوة 07: اجعلها تستجيب عبر الأنظمة الأساسية

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

نظرة عامة على صفحتنا الرئيسية

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

كيفية استخدام Elementor Theme Builder

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

في هذا القسم ، سوف نوضح لك كيف يمكنك إنشاء رؤوس جميلة باستخدام Elementor Theme builder.

ملاحظة: يتوفر مُنشئ سمة Elementor لإصداره المحترف. الإصدار المجاني يأتي بميزة محدودة للغاية.

الخطوة 01: اختر نوع القالب

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

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

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

الخطوة 02: تخصيص رأسك في Elementor

يمكنك اختيار تصميم العنوان الخاص بك أو يمكنك اختيار أي من العناصر المعدة مسبقًا من Elementor Template Library.

• انقر فوق خيار إضافة قالب لتحميل رأس الصفحة المعدة مسبقًا إلى المحرر الخاص بك.

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

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

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

كيفية إنشاء نافذة منبثقة في Elementor

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

ملاحظة: لا يتوفر مُنشئ سمة Elementor إلا لإصداره المحترف.

الخطوة 01: قم بإضافة ملف جديد

• انتقل إلى لوحة معلومات WordPress الخاصة بك> القوالب> النوافذ المنبثقة. ثم انقر فوق الزر " إضافة جديد " في الجانب العلوي.

• قم بتسمية النافذة المنبثقة الخاصة بك وانقر فوق الزر إنشاء نموذج.

• حدد قالبًا منبثقًا تريد استخدامه. حرك مؤشر الفأرة فوقه وانقر فوق الزر " إدراج " لنقله إلى محرر Elementor.

ملاحظة: إذا كنت تفضل إنشاء نافذة منبثقة من البداية ، يمكنك ببساطة إغلاق مكتبة القوالب لفتح محرر Elementor.

الخطوة 02: تخصيص النافذة المنبثقة

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

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

بمجرد الانتهاء ، انقر فوق زر النشر .

الخطوة 03: ضبط شروط العرض والمشغلات

في الخطوة التالية ، سيُطلب منك تعيين شروط العرض والمشغلات. هناك أيضًا خيار لتعيين قواعد متقدمة.

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

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

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

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

الخطوة الرابعة: ربط النافذة المنبثقة بصفحة

قم بإنشاء صفحة / منشور جديد وقم بتحريره باستخدام Elementor (يمكنك أيضًا تحرير صفحة موجودة).

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

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

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

انقر فوق نشر / تحديث بمجرد الانتهاء من تحرير الصفحة.

قبل النقر فوق الزر " نشر / تحديث " ، يمكنك معاينة صفحتك أولاً لمعرفة ما إذا كانت النافذة المنبثقة تعمل بالفعل.

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

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

• كيفية تخصيص صفحة منتج WooCommerce في Elementor
• كيفية استيراد قالب عنصر من ملف JSON

لذلك دعونا نجعل الكرة تتدحرج.

كيفية تخصيص صفحة منتج WooCommerce في Elementor

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

بعد الإعداد ، يمكنك تصميم صفحة المنتج الخاص بك. اتبع هذه الخطوات.

الخطوة 1: قم بإنشاء نموذج منتج واحد

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

الخطوة 2: اختر قالب صفحة منتج مُصمم مسبقًا ، أو أنشئ نموذجًا من Scratch

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

الخطوة 03: أضف أدوات منتج مختلفة لتخصيص صفحتك

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

الخطوة الرابعة: انشر الصفحة

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

قد تبدو مثل الصورة أدناه.

كيفية استيراد قالب عنصر من ملف JSON

يسمح لك Elementor باستيراد قالب من ملف JSON. للسماح لك بالقيام بذلك ، هناك طريقتان متاحتان هناك. دعونا نتعلم كيف يعملون!

1. عبر مكتبة القوالب

• انقر فوق الزر " إضافة قالب ".

• انقر فوق رمز السهم - استيراد قالب .
• الآن ، انقر فوق الزر SELECT FILE لتحديد ملف JSON الذي تريد استيراده.

• يمكنك العثور على القالب الذي قمت باستيراده للتو في علامة التبويب القوالب في مكتبة القوالب.

أعد تحميل القالب بالنقر فوق أيقونة إعادة التحميل إذا لم يظهر النموذج الذي قمت باستيراده للتو. مرر مؤشر الماوس فوق قالب وانقر فوق الزر " إدراج " لتحميله إلى لوحة Elementor.

2. عبر مدير القوالب

• من لوحة معلومات WordPress الخاصة بك ، انتقل إلى القوالب> القوالب المحفوظة .
• انقر فوق الزر استيراد القوالب .
• ثم اضغط على زر اختيار ملف لتحديد ملف JSON.
• أخيرًا ، انقر فوق الزر استيراد الآن لاستيراده.

هاتان الطريقتان لاستيراد قالب Elementor من ملف JSON. يمكنك اختيار أي من الطرق لإنجاز عملك.

إيجابيات وسلبيات استخدام Elementor Page Builder في موقع WordPress الخاص بك

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

حسنًا ، قبل ذلك ، دعنا نتحقق من إيجابياته في لمحة.

مميزات استخدام Elementor في WordPress

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

سلبيات استخدام Elementor في WordPress

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

أفضل إضافات عناصر الطرف الثالث لتحسين التصميم الخاص بك

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

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

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

1. الإضافات السعيدة: يأتي مع أكثر من 100 عنصر واجهة مستخدم ، وأكثر من 200 كتلة بحيث يمكنك الحصول على الحرية الكاملة لتصميم موقع الويب الخاص بك في وقت أقل وبميزانية أقل.
2. Premium Addons for Elementor: إنه يوفر 55+ من الأدوات الإضافية والعناصر الأساسية القابلة للتخصيص بدرجة عالية من Elementor ، و 300+ قوالب Elementor المعدة مسبقًا التي تساعدك على تصميم موقع ويب في وقت أقل بسهولة.
3. الإضافات الحصرية لـ Elementor: ستساعدك مجموعة من 700+ كتلة معدة مسبقًا و 10+ قوالب قابلة للاستخدام في إنشاء مواقع الويب الخاصة بك في وقت أقل بدون تشفير.
4. PowerPack لـ Elementor: يوفر أكثر من 60 عنصر واجهة مستخدم وإضافات إبداعية Elementor لتحسين تجربة Elementor.

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

برنامج تعليمي مجاني: قم ببناء موقع التجارة الإلكترونية الخاص بك باستخدام Elementor و Happy Addons

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

فيما يلي المتطلبات المسبقة لإنشاء موقع التجارة الإلكترونية الخاص بك:

1. اختر اسم المجال الخاص بك وخطة استضافة الويب
2. قم بتثبيت WordPress و WooCommerce
3. قم بتثبيت Elementor
4. أخيرًا قم بتثبيت HappyAddons (مجاني + برو)

05: اختر قالب التجارة الإلكترونية

• انتقل إلى لوحة معلومات WordPress الخاصة بك> الصفحات> إضافة جديد
• أعط هذه الصفحة اسما.
• عيّن القالب الافتراضي على " Elementor Canvas " لأننا نريد إنشاء الصفحة بأكملها باستخدام Elementor. يمكنك اختيار Elementor Full Width ، والذي سيتيح لك تخصيص الصفحة بأكملها بدون القائمة.
• بعد ذلك ، انشر الصفحة من الشريط الجانبي الأيمن. يمكنك أيضًا الاحتفاظ بها كمسودة.
• انقر فوق " تحرير باستخدام Elementor " وستتم إعادة توجيهك إلى منشئ صفحة Elementor.

• انقر فوق علامة HappyAddons لإضافة قالب مصمم مسبقًا لموقع التجارة الإلكترونية الخاص بك.

• اختر نموذجًا مُصممًا مسبقًا وانقر فوق الخيار " إدراج ".

06: تخصيص القالب

عملية التخصيص بأكملها هي نفسها التي أظهرتها في القسم السابق - كيفية استخدام Elementor Page Builder. اتبع نفس الخطوات لإنجاز التصميم الخاص بك.

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

الخطوة 07: انشر الصفحة

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

• لمعاينة الموقع ، انقر فوق الرمز.
• إذا كنت راضيًا عن النتيجة ، فابدأ وانقر على زر نشر / تحديث.
• انقر فوق "إلقاء نظرة" لعرض الصفحة المنشورة.

الأسئلة الشائعة حول Elementor

انتهى اليك

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

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

إذا واجهت أي تعقيدات أثناء استخدام Elementor ، أو كان لديك أي اقتراحات بخصوص هذا الدليل حول كيفية استخدام Elementor في WordPress ، فأخبرنا بذلك من خلال مربع التعليقات أدناه. حظ سعيد!