كيفية إنشاء صفحة مقصودة باستخدام Elementor و PowerPack

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

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

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

ما هو العنصر؟

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

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

يأتي Elementor Pro مع أكثر من 60 عنصر واجهة مستخدم وكمية كبيرة من القوالب المصممة مسبقًا والتي يمكنك استخدامها لتصميم أي صفحة.

ميزات العنصر

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

سريع وسهل الإستخدام

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

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

قوالب الصفحة المصممة مسبقًا

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

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

محملة بالحاجيات

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

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

Elementor Pop up Builder

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

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

الاعدادات العامة

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

إنشاء أجزاء سمة مثل الرأس والتذييل والمحفوظات وما إلى ذلك.

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

محتوى ديناميكي

باستخدام وظيفة المحتوى الديناميكي في Elementor Pro ، يمكنك عرض البيانات / المحتوى الديناميكي من حقول WordPress المخصصة أو ACF أو Toolset أو Pods أو MetaBox أو أي مكون إضافي للحقول المخصصة. يمكنك استخدام البيانات من الحقول المخصصة وعرضها مع عناصر واجهة المستخدم Elementor في أي جزء من موقعك. يمكنك معرفة المزيد عن المحتوى الديناميكي هنا.

إصدار لايت و Pro

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

PowerPack للعنصر

العنصر هو بالتأكيد الحزمة بأكملها. الأداة الوحيدة التي تحتاجها لبدء تصميم صفحات الويب بحد أدنى من التعلم.

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

يوجد حاليًا أكثر من 50 عنصر واجهة مستخدم في إصدار Pro من PowerPack ، ويستمر الفريق في إضافة عناصر واجهة مستخدم جديدة مما يجعله خيارًا رائعًا بين إضافات Elementor.

تم تصميم PowerPack بواسطة فريق من مطوري ومصممي WordPress الخبراء مع وضع الأداء في الاعتبار. البرنامج المساعد جيد الترميز ويتم تحديثه بانتظام للتوافق مع أحدث إصدارات Elementor و WordPress

دعونا نرى كيف يمكنك استخدام الوظيفة الإضافية Elementor و PowerPack معًا لإنشاء صفحات ويب رائعة.

إنشاء الصفحة المقصودة

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

يرجى التأكد من تثبيت كل من Elementor و PowerPack على موقعك. يمكنك الحصول على الإصدارات المجانية من الروابط أدناه:

1. العنصر
2. PowerPack Lite للعنصر

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

سجّل الدخول إلى لوحة تحكم مسؤول WordPress وانقر على خيار إضافة جديد ضمن الصفحات . قم الآن بإعطاء صفحتك عنوانًا / اسمًا وانقر فوق الزر تحرير باستخدام Elementor .

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

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

الخطوة 1: قسم البطل

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

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

الآن ، يمكنك تحديد الصورة المطلوبة للخلفية من علامة تبويب النمط> نوع الخلفية> كلاسيكي واختيار الصورة من شاشة الوسائط.

لدينا الخلفية جاهزة. الآن دعنا نضيف العناوين والزر إلى قسم الأبطال لدينا.

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

هناك العديد من التعديلات الأخرى التي يمكنك إجراؤها لجعل لقب بطلك بالطريقة التي تريدها.

بمجرد إجراء التغييرات ، قم بسحب وإسقاط عنصر واجهة مستخدم عنوان آخر أسفل العنوان المزدوج وتغيير إعدادات النص والطباعة كما هو مطلوب ، هنا قمت بتغيير حجم النص إلى 90 ، والخط إلى Elsie ، ووزن الخط إلى 600 .

الآن سنضيف زر CTA .

قم بسحب وإسقاط عنصر واجهة المستخدم Elementor Button في القسم الموجود أسفل عنصر واجهة المستخدم Heading مباشرةً. الآن سنبدأ في تغيير إعدادات الزر.

فيما يلي التغييرات التي أجريتها على الزر:

• نص تم تغييره إلى اطلب الآن!
• الزر بمحاذاة الوسط.
• تمت إضافة رابط CTA
• تغيير الطباعة إلى إليز ؛ 24 ؛ 600 للخط والحجم والوزن على التوالي.
• تم تغيير لون الخلفية إلى اللون الأحمر ( # ff0000 ) ولون الخط إلى الأبيض ( # ff0000 ).
• تمت إضافة المساحة المتروكة 18 ، 40 ، 18 ، 40 للأعلى ، اليمين ، الأسفل ، اليسار على التوالي.

بعد إجراء التغييرات ، هذا ما يبدو عليه قسم الأبطال.

الخطوة 2: قسم حول

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

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

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

هذا هو الشكل الذي ستبدو عليه:

أضف الآن محرر النصوص أسفل العنوان في العمود الأيسر وقم بتغيير الطباعة إلى نفس العنوان المعروض أدناه.

سنقوم الآن بإضافة عنصر واجهة مستخدم Testimonial Carousel أسفل أداة محرر النص. أضف "العناصر" أو الشهادات لتظهر على موقع الويب الخاص بك. يمكنك أيضًا استخدام أداة الشهادات من PowerPack والتي توفر المزيد من قوة التخصيص.

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

الآن بالنسبة للعمود الأيمن ، أضف الخلفية لإضافة القليل من التباين إلى القسم.

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

قم بمحاذاة العمود الأيمن عموديًا إلى المنتصف من عمود التحرير> التخطيط> المحاذاة الرأسية وسيكون لديك قسم "حول" جاهزًا!

هذه هي النتيجة النهائية للقسم حول:

الخطوة 3: قسم "معرفة المزيد" للحث على اتخاذ إجراء

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

لذلك ، نريد أن تبدو النتيجة النهائية كما يلي:

هل لاحظت أي شيء مشابه هنا؟

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

لنفعلها!

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

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

هذا ما يبدو عليه القسم:

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

الخطوة 4: قسم الاتصال / الطلب

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

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

بادئ ذي بدء ، نحن نعلم أنه يتعين علينا الحفاظ على التصميم ومظهر العنوان ومحرر النص كما هو. يمكنك المضي قدمًا وتكرارها من القسم السابق ووضعها هنا. الآن قم بتغيير النص هناك بالنص الذي تريده.

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

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

إذا كنت تستخدم أي مكون إضافي لنموذج الاتصال مثل Gravity Forms و WPForms و Ninja Forms وما إلى ذلك ، فيمكنك استخدام عنصر واجهة مستخدم PowerPack لتصميم النموذج باستخدام Elementor.

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

أدخل الهبة الآن!

هدية PowerPack مستضافة بواسطة Cloudways

إنهائها!

بعد إجراء جميع التغييرات ، هذا ما سيبدو عليه مخططنا بالكامل.

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

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