هل أنت مهتم ببناء موقع رائع بواسطة Elementor؟ سنوفر في هذه المقالة كيفية استخدام Elementor
حسنًا ، هناك أخبار جيدة … أصبحت الآن أسهل من أي وقت مضى! ليست هناك حاجة لترميز كل صفحة يدويًا من البداية أو تعيين فريق من المحترفين.
في هذه الأيام ، كل ما تحتاجه حقًا هو إضافة تسمى Elementor . إنها واحدة من أكثر منشئي صفحات WordPress تنوعًا ويمكن الوصول إليها في السوق.
والأفضل من ذلك ، إنه مجاني تمامًا للبدء!
في هذا البرنامج التعليمي Elementor ، سنغطي كيفية استخدام Elementor خطوة بخطوة ونتعرف على بعض أفضل ميزاته.
في النهاية ، يجب أن يكون لديك كل ما تحتاجه لإنشاء موقع ويب WordPress يثير الإعجاب ، في أي وقت من الأوقات!
5. كيفية استخدام Elementor Theme Builder
عادة ، عندما يصبح شيء ما أسهل في الاستخدام ، يجب أن يسقط الميزات المفيدة. لحسن الحظ ، تعتبر Elementor حالة خاصة سهلة الاستخدام ومتعددة الاستخدامات بشكل لا يصدق ، ويرجع الفضل في ذلك إلى حد كبير إلى أداة إنشاء السمات الخاصة بها.
متوفر في إصدار Elementor’s Pro ، يعد منشئ السمات مغيرًا للعبة لأي شخص على دراية بمنشئي الصفحات ، لأنه يسمح لك بإنشاء رؤوس وتذييلات ومحتويات ديناميكية أخرى لموقعك على الويب.
حتى أنه يسمح لك بتجاوز جوانب موضوع WordPress الخاص بك ، حتى تتمكن من الاستمرار في العمل وإجراء التغييرات التي تريدها!
لماذا تحتاج إلى محتوى ديناميكي؟ حسنًا ، في بعض الأحيان قد ترغب في استضافة صفحة مبيعات لا تحتوي على رأس تقليدي وشريط جانبي أو قد ترغب في حفظ تخطيط منشور مدونة مخصص يمكنك استخدامه في كل مرة تضيف فيها منشورًا جديدًا.
الاحتمالات لا حصر لها.
بناء رأس / تذييل مع Elementor
هل أنت جاهز لإنشاء رأس أو تذييل مخصص باستخدام Elementor باستخدام أداة إنشاء السمات؟ إليك كيف يتم ذلك!
الخطوة 1. انقر فوق “القوالب” في لوحة تحكم WordPress
بعد تسجيل الدخول إلى لوحة تحكم WordPress الخاصة بك ، انتقل إلى ” القوالب ” ضمن Elementor في القائمة الجانبية.
الخطوة 2. إضافة قالب جديد أو استيراد
هذا هو المكان الذي تقوم فيه بإنشاء قالب جديد لرأسك.
إذا رأيت رأسًا أعجبك مظهره بالفعل ، فيمكنك استيراده لاستخدامه كنقطة بداية. بخلاف ذلك ، انقر فوق ” إضافة جديد “.
سيظهر هذا مربع حوار يسمح لك باختيار نوع القالب والعنوان في هذه الحالة بالإضافة إلى اسم القالب الخاص بك.
ملحوظة:
يتضمن Elementor Free قوالب القسم والصفحة فقط. يتضمن إصدار Pro العديد من فئات القوالب الإضافية ، بما في ذلك عنصر واجهة المستخدم والرأس والتذييل والفردي والأرشيف.
الخطوة الثالثة. قم بتحرير القالب الجديد الخاص بك
إذا كانت هذه الخطوة تبدو مألوفة ، فذلك لأنها نفس المحرر الدقيق الذي استخدمناه لإنشاء صفحة كاملة في وقت سابق. الآن ، يتم تطبيقه على إنشاء رأس مخصص.
يمكنك متابعة العملية لإنشاء تخطيطك باستخدام عناصر واجهة مستخدم مختلفة ، وحتى صور محددة أو محتوى آخر. بمجرد حفظ رأسك الجديد ، يمكن الوصول إليه بسهولة من صفحة جديدة.
بناء صفحات WooCommerce باستخدام Elementor
تشبه عملية إنشاء صفحة منتج WooCommerce مخصصة أي صفحة أو قسم آخر يمكنك إنشاؤه. الشعور بنمط هنا؟
باستخدام WooCommerce Builder ، يدعم Elementor القدرة على إنشاء قالب لصفحة منتج واحدة. بمجرد إنشاء قالب جديد ، سترى مكتبة قوالب مليئة بالكتل أو الصفحات الكاملة التي يمكنك استخدامها لصفحة منتج WooCommerce.
ضع في اعتبارك أن قالب WooCommerce هذا سيحتوي على عدد من أدوات المنتج الديناميكية ، بما في ذلك عنوان المنتج وصورة المنتج وسعر المنتج.
يمكنك تعيين تفاصيل المنتجات باستخدام WooCommerce ، واستخدام Elementor لعرض معلومات المنتج المحدثة على الواجهة الأمامية.
بكل بساطة!
ما العنصر المفقود
على الرغم من كل هذه المرونة ، لا تزال هناك بعض الأشياء التي لا يستطيع Elementor القيام بها. تذكر أن Elementor ليس سمة – إنه يستخدم مُنشئ السمات الخاص به لتجاوز بعض ميزات السمات.
للتحكم الكامل في المظهر الخاص بك ، نوصي باستخدام Astra Pro و Elementor. تمنحك Astra خيارات رأس وتذييل مضمنة وقوائم ضخمة وغير ذلك الكثير!
قوالب المبتدئين للعنصر
فائدة كبيرة أخرى لـ Astra هي مجموعتها من قوالب Starter الجاهزة للاستيراد إلى Elementor ، بما في ذلك الخيارات المجانية والمدفوعة.
على سبيل المثال ، إذا كنت تقوم بإعداد موقع ويب لمدرب لياقة بدنية ، فيمكنك استخدام موقع بداية Fitness Trainer من Astra كأساس متين وتخصيصه من هناك.
من السهل القيام باستيراد نموذج Astra Starter!
تحتاج فقط إلى تثبيت الإصدار المجاني أو المدفوع من Astra Theme ، بالإضافة إلى البرنامج المساعد Starter Templates المجاني .
بمجرد إعداد كلاهما ، يمكنك تسجيل الدخول إلى لوحة معلومات WordPress الخاصة بك ، والانتقال إلى Appearance> Starter Templates ، وتحديد موقع الويب الذي تريد استيراده.
بعد ذلك ، ستتمكن من إجراء تغييرات على موقع البداية مباشرة في Elementor!
الإضافات النهائية للعنصر
بالإضافة إلى هذه القوالب ، لدينا الإضافة يسمى Ultimate Addons for Elementor يوفر وظائف إضافية غير موجودة في Elementor.
يذهب هذا إلى أبعد من Elementor Pro في تقديم عناصر واجهة مستخدم متقدمة ، مثل تبديل المحتوى ، والنوافذ المنبثقة ، والجدول الزمني للمحتوى ، وجدول المحتويات.
لتحقيق أقصى قدر من التحكم والمرونة ، من الجدير بالتأكيد مراجعة Ultimate Addons for Elementor !
6. كيفية بناء القوالب باستخدام Elementor
يمكنك إنشاء قوالب لجميع أنواع الأقسام والصفحات ، بما في ذلك:
- صفحة
- رأس
- تذييل
- وظيفة واحدة
- ارشيف المدونة
- صفحات المنتج
في هذا المثال ، دعنا نعمل مع قالب المنشور / الصفحة.
إنشاء قالب صفحة باستخدام Elementor
في Elementor ، تتم تغطية كل من الصفحة والمشاركة بواسطة “نموذج الصفحة”. هذا قالب محفوظ يمكنك استخدامه لأي صفحة جديدة أو منشور مدونة ، مما يسمح لك بالحفاظ على التناسق ، حتى مع قيام العديد من أعضاء الفريق بالنشر.
أفضل من ذلك ، هذا متاح لجميع مستخدمي Elementor ، بما في ذلك مع Elementor Free.
الخطوة 1. انقر فوق “القوالب” في لوحة تحكم WordPress
بعد تسجيل الدخول إلى لوحة تحكم WordPress الخاصة بك ، انتقل إلى ” القوالب ” ضمن Elementor في القائمة الجانبية.
الخطوة 2. إضافة قالب جديد أو استيراد
هذا هو المكان الذي تقوم فيه بإنشاء قالب جديد لرأس الصفحة.
في مربع الحوار ، اختر نوع قالب الصفحة وقم بتسمية القالب الجديد الخاص بك.
ثم ، انقر فوق ” إنشاء نموذج ” للبدء!
الخطوة الثالثة. قم بتحرير قالب الصفحة
تمامًا كما حدث سابقًا عندما أنشأنا صفحتنا الخاصة ، ستستخدم نفس المحرر هنا. الأمر بسيط مثل إنشاء أقسام جديدة وتغيير الأعمدة وسحب عناصر واجهة مستخدم مختلفة إلى الصفحة.
بمجرد تصميم الصفحة التي تريدها ، يمكنك حفظها كقالب بحيث يمكن الوصول إليها لأي من صفحاتك الأخرى من الآن فصاعدًا.
7. كيفية إنشاء منبثقة في Elementor
هل تريد إنشاء نافذة منبثقة في Elementor؟ ربما تصدر إعلانًا ، أو تلتقط عملاء متوقعين أو أي شيء آخر؟
يعد إنشاء نافذة منبثقة في Elementor أمرًا بسيطًا إلى حد ما. ستحتاج إلى الترقية إلى الإصدار المحترف لإنشاء النوافذ المنبثقة بالرغم من ذلك.
لديك بعض الميزات الرائعة حقًا مع الإصدار المحترف ، مثل النافذة المنبثقة للترحيب ، ومبيعات المنتج ، والنوافذ المنبثقة للخروج ، والمزيد.
ما عليك سوى اتباع هذه الخطوات لإنشاء نافذة منبثقة يتم تشغيلها عند النقر فوق الزر.
1. توجه إلى لوحة التحكم> القوالب> النوافذ المنبثقة> إضافة جديد .
2. قم بتسمية القالب الخاص بك ، ثم انقر فوق ” إنشاء نموذج “.
3. يمكنك اختيار إنشاء قالب خاص بك أو اختيار واحد من مكتبة القوالب.
4. انقر فوق ” نشر ” بمجرد الانتهاء. ثم احفظ وأغلق.
5. الآن ، قم بإنشاء صفحة جديدة في Elementor. واسحب أداة الزر.
6. ضمن التخطيط ، حدد ارتباط> ديناميكي> إجراءات> منبثق .
7. تصفح إلى Popup> Open Popup> وحدد النافذة المنبثقة التي أنشأتها للتو.
8. انقر فوق ” نشر ” عند الانتهاء وتحقق من الصفحة المباشرة. انقر فوق الزر لعرض النافذة المنبثقة الخاصة بك.
وهذا هو مدى سهولة إنشاء نافذة منبثقة باستخدام Elementor!
8. إنشاء موقع ويب مستجيب للجوال باستخدام Elementor
مع تزايد عدد المستخدمين الذين يزورون مواقع الويب من أجهزتهم المحمولة ، من الضروري الحصول على مكان عرض موقع الويب الخاص بك على الهاتف المحمول. كما أشرنا سابقًا ، يأتي أكثر من 50٪ من حركة مرور موقعك على الويب من أجهزة الجوّال.
لقد قمنا بإدراج بعض الخطوات التي يمكنك من خلالها التأكد من أن موقع الويب الخاص بك متوافق مع الأجهزة المحمولة إذا كنت تستخدم منشئ الصفحة Elementor.
إذا كنت تفضل رؤية كيفية القيام بذلك ، فاطلع على هذا الفيديو التعليمي حول استجابة Elementor.
يجعل Elementor الأمر سهلاً للغاية عندما يتعلق الأمر بتخصيص موقع الويب الخاص بك لأجهزة مختلفة.
القاعدة العامة هي أن جميع الميزات القابلة للتحرير لها إعداد محدد لسطح المكتب والجوال والجهاز اللوحي. تتضمن الإعدادات الأكثر شيوعًا حجم النص والهامش والحشو.
على سبيل المثال ، كما هو موضح في الصورة أدناه ، ابحث عن رمز الجهاز المجاور لـ “العرض”. هذا هو الحال مع أي عنصر ترغب في تخصيصه.
انقر فوق الجهاز الذي تريد إجراء التخصيص له. بمجرد التحديد ،قم بالتلاعب بالإعدادات بناءً على تفضيلاتك.
بشكل افتراضي ، تستجيب صور الخلفية تلقائيًا. لديك سيطرة كاملة على المزيد من التخصيص للصور لتناسب جهازك ، حتى إلى حد وجود صور مختلفة لأحجام شاشة مختلفة.
هل تعلم أنه يمكنك اختيار إظهار أو إخفاء قسم بناءً على الجهاز؟
على سبيل المثال ، إذا كان هناك صف من الصور أو النص الذي ترغب في إخفائه في الأجهزة المحمولة ، فيمكنك القيام بذلك بسهولة.
ما عليك سوى التوجه إلى قسم التحرير> خيارات متقدمة> علامة التبويب سريعة الاستجابة.
هل لاحظت مجموعة من الخيارات ضمن ” الرؤية “؟ بشكل افتراضي ، يتم تعيين القسم ليتم عرضه عبر جميع الأجهزة. إذا كنت ترغب في إخفائه ، حسنًا ، ما عليك سوى تبديل الزر بناءً على جهازك.
بينما لا يزال بإمكانك رؤية القسم أثناء تحرير الصفحة ، فإنه لن يكون مرئيًا في الواجهة الأمامية ، بمجرد نشر الصفحة.
لتبديل عرض صفحة الويب بأكملها ، كل ما عليك فعله هو النقر على أيقونة وضع الاستجابة في الجزء السفلي من لوحة معلومات Elementor.
بشكل افتراضي ، ستلاحظ عرض الجوال.
للتبديل بين الأجهزة ، ما عليك سوى النقر فوق رمز الجهاز المعني في الأعلى. وللخروج من العرض سريع الاستجابة ، ما عليك سوى النقر فوق “X” في الزاوية العلوية اليمنى.
ما مدى سهولة إنشاء عرض سريع الاستجابة للجوّال؟ قراءة سهلة؟
9. لماذا يجب عليك استخدام Elementor
الآن بعد أن عرفنا كيفية استخدام Elementor ، دعنا نغطي سؤالًا خارج السياق، ولكن كثيرًا ما يتم طرحه. لماذا يجب علينا استخدام Elementor في المقام الأول؟
مهما كانت خبرتك ، قد يكون إنشاء موقع ويب أمرًا صعبًا. من الحصول على مكان التنقل إلى الحفاظ على جماليات الموقع بشكل عام ، يستغرق الأمر وقتًا وجهدًا.
إذا كنت تعمل بشكل مستقل أو مصمم مواقع ويب ، فستدرك جيدًا أنه مع كل عميل جديد تأتي تحديات جديدة ومتطلبات محددة.
في الواقع ، تجعل المنصات مثل WordPress عملية تطوير الموقع بالكامل أسهل كثيرًا. ومع ذلك ، فأنت دائمًا تريد المزيد.
لحسن الحظ ، لديك أدوات إنشاء صفحات تعمل بالسحب والإفلات مثل Elementor والتي تأخذ عملية تطوير الويب بأكملها إلى مستوى جديد تمامًا.
من استخدام مجموعة من الأدوات والعناصر لبناء صفحة الويب الخاصة بك إلى الكتل والقوالب الرائعة ، هناك الكثير الذي يمكنك القيام به باستخدام Elementor.
دعنا نتعمق أكثر في سبب استخدام المكون الإضافي لـ Elementor page builder .
1. سهل الاستعمال
يعد إنشاء موقع ويب باستخدام Elementor أمرًا سهلاً مثل 1-2-3. باستخدام ميزة السحب والإفلات ، ما عليك سوى إضافة عنصر واجهة مستخدم أو عنصر من اختيارك ، وتخصيصه بالطريقة التي تريدها ، ونشر الصفحة. الأمر بهذه البساطة. لا تحتاج إلى معرفة كيفية البرمجة أو لديك أي معرفة برمجية.
2. التحرير المباشر
Elementor هو محرر WYSIWYG (ما تراه هو ما تحصل عليه). من خلال المعاينة في الوقت الفعلي ، يمكنك أن ترى بالضبط كيف تبدو صفحتك بعد التحديث ، بدلاً من نشرها ثم الاضطرار إلى الإعادة إذا لم تسر بالطريقة التي تريدها.
3. أصول قوية ومثيرة للإعجاب
مع أكثر من 90 أداة لا تصدق (يشار إليها أيضًا باسم الكتل) وأكثر من 300 قالب مصمم ، يمكنك ضبط خيالك أثناء إنشاء صفحات الويب والصفحات المقصودة والنوافذ المنبثقة والمزيد. من العناوين الرئيسية إلى الأزرار ، وأيقونات الوسائط الاجتماعية إلى المعارض والدوارات ، هناك عنصر واجهة مستخدم لأي ميزة ترغب في إضافتها إلى موقع الويب الخاص بك.
4. تصميم مستجيب
نظرًا لأن أكثر من 50 ٪ من زيارات موقع الويب تأتي من الأجهزة المحمولة ، فمن الضروري أن تحصل على عرض الجوال لموقع الويب الخاص بك على الفور.
باستخدام Elementor ، يمكنك بسهولة معاينة وتخصيص صفحاتك لأجهزة سطح المكتب والجوال والأجهزة اللوحية. ما عليك سوى تبديل العرض وتعديل كل عنصر لتبدو مثالية على أي جهاز.
5. الخطوط العالمية والألوان
قم بتعيين اختياراتك من الخطوط والألوان عبر موقعك بنقرة واحدة. من العناوين والفقرات وحتى نص الزر ، حدد علامتك التجارية مرة واحدة وقم بتطبيقها على كل عنصر على موقعك.
6. قوالب جاهزة
مع قوالب Astra Starter ، لن تحتاج حقًا إلى بديل. يوجد نموذج جاهز بغض النظر عن المكانة التي أنت فيها.
إذا كنت تبحث عن المزيد من الخيارات ، فيمكنك التفكير في مجموعة رائعة من القوالب التي يفتخر بها Elementor. لذلك ، حتى لو كنت مبتدئًا تبدأ بتصميم مواقع الويب ، فإن Astra و Elementor قد جعلتك مغطى.
7. إنشاء تأثيرات حركة متقدمة
هل تحب دمج الرسوم المتحركة في موقع الويب الخاص بك؟ هل تعلم ، تأثيرات المنظر هذه ، هل تجعل النصوص تبرز من خلال إنشاء تأثير ثلاثي الأبعاد ، أو حتى تأثير لوتي؟ يتيح لك Elementor القيام بذلك بسهولة إلى حد ما.
8. آمن للغاية
مع التحديثات المنتظمة ، يضمن Elementor أن موقع الويب الخاص بك في أيد أمينة. إنها متوافقة تمامًا مع معايير أمان WordPress وتزيل أي محتوى ضار عند الحاجة.
9. 50+ لغة
مع تكامل RTL ودعم متعدد اللغات ، يتوفر Elementor بلغات متعددة. استخدم النظام الأساسي بلغتك المفضلة.
10. التكامل السلس مع إضافات WordPress
سواء كان ذلك WooCommerce و LearnDash و Yoast SEO و MemberPress وغير ذلك الكثير ، فإن Elementor متوافق مع إضافاتWordPress الإضافية الشائعة.
11. المصدر المفتوح
على الرغم من أن هذا سيتطلب بعض الترميز من نهايتك ، إلا أن لديك وصولاً كاملاً إلى كود مصدر Elementor. يمكنك تحسين قدرات Elementor عن طريق إضافة الوظائف المخصصة الخاصة بك و CSS المخصص.
12. تاريخ المراجعة
إذا كنت تقوم بالترميز لفترة من الوقت الآن أو في هذا الصدد ، حتى باستخدام محرر مستندات Google ، فأنت توافق على أن ميزة التراجع والإعادة هي نعمة كبيرة. سواء قمت بحذف سطر واحد من التعليمات البرمجية أو كتلة كاملة من التعليمات البرمجية ، يمكن أن يعود التراجع البسيط إلى حيث بدأت.
باستخدام محفوظات مراجعة Elementor ، يمكن بسهولة تتبع عملية إنشاء الصفحة بالكامل.
13. لا توجد رموز مختصرة
على الرغم من أننا لا نرى سببًا يجعلك تتخلى عن Elementor ، فقط في حالة رغبتك في التحول إلى بديل ، فسيظل موقع الويب الخاص بك قيد التشغيل. كما هو الحال مع بعض منشئي الصفحات ، لا يتم تأمينك بواسطة الرموز القصيرة عند استخدام Elementor.
14. المجتمع النشط
مع Elementor ، لست وحدك. نظرًا لشعبية المكون الإضافي Elementor ، هناك مجتمع متزايد يمكنك الاتصال به.
يمكنك التعلم باستمرار والتعرف على أدوات وأفكار تصميم جديدة وغير ذلك الكثير. ناهيك عن أن المجتمع موجود لدعمك إذا كنت بحاجة إلى أي مساعدة واقتراحات وأفكار لإنشاء موقع ويب رائع.
15. مجاني
أخيرًا وليس آخرًا ، يمكنك البدء في استخدام Elementor مجانًا تمامًا. في حين أن هناك إصدارًا احترافيًا ، كما ذكرنا سابقًا في المقالة ، يجب أن تعمل النسخة المجانية بشكل جيد.
10. إيجابيات وسلبيات استخدام Elementor Page Builder
تمامًا مثل أي شيء آخر ، فإن Elementor لها مزاياها وعيوبها. في حين أن الإيجابيات تفوق السلبيات ، فقد قمنا بإدراجهما هنا من أجلك.
| الايجابيات من Elementor Page Builder | سلبيات Elementor Page Builder |
| واجهة بسيطة وبديهية | تحتاج إلى الترقية إلى الإصدار الاحترافي للحصول على الدعم |
| سحب وإسقاط منشئ الصفحة | لا يوجد خيار تسعير مدى الحياة |
| تخصيص الصفحات بسهولة لمختلف الأجهزة (سطح المكتب والجوال والأجهزة اللوحية) | حالات بطء تحميل الصفحة |
| معاينات حية في الوقت الحقيقي أثناء التحرير | |
| أكثر من 90 أداة ، وأكثر من 300+ قالب ، والعديد من الكتل للاختيار من بينها | |
| تكامل سلس مع أدوات الطرف الثالث | |
| تأمين مع التحديثات بانتظام | |
| قم بإنشاء سمات مخصصة ونوافذ منبثقة ورسوم متحركة جذابة | |
| متوافق مع جميع الثيمات | |
| يتكامل بشكل جيد مع WooCommerce | |
| النسخة المجانية تعمل بشكل رائع |
افكار اخيرة
يا للعجب ، لقد غطينا الكثير من الأرضية مع هذا البرنامج التعليمي WordPress Elementor!
فيما يتعلق بالأفكار الأساسية ، آمل أن تتمكن من معرفة سبب كون Elementor منشئ صفحات رائعًا يأخذ الكثير من التخمين من تصميم الويب. إنه يحقق توازنًا مثاليًا بين سهولة الاستخدام والوظائف العميقة ، مما يجعله أحد أكثر أدوات إنشاء الصفحات التي يمكن الوصول إليها والمتاحة لـ WordPress.
Astra خفيف الوزن وسريع ومرن بشكل لا يصدق ، ويضيف ميزات تكميلية إلى Elementor بحيث يمكنك إنشاء أي شيء يحلم به عقلك!
شكرا للقراءة! نأمل أن يكون هذا المنشور قد أعطاك نقطة انطلاق رائعة للنجاح مع Elementor.