دليل خطوة بخطوة لإنشاء أزرار مميزة في Elementor لموقع WordPress
كيفية إضافة أزرار مخصصة في Elementor لتحسين تصميم موقعك على WordPress

تعتبر الأزرار أحد العناصر الأساسية في أي موقع ويب، حيث تسهل التفاعل مع الزوار وتحسين تجربة المستخدم. إذا كنت تستخدم Elementor في WordPress، فإليك طريقة بسيطة لإضافة الأزرار وتخصيصها لتجعل موقعك يبدو أكثر احترافية وجذبًا للزوار.
الخطوة الأولى: إضافة زر جديد
- قم بالدخول إلى لوحة التحكم في WordPress.
- افتح الصفحة التي تريد تعديلها باستخدام Elementor.
- على الجهة اليسرى، ابحث عن “زر” في قسم Widgets.
- اسحب العنصر إلى المكان الذي ترغب في وضع الزر فيه.
الخطووة الثانية: تخصيص النص والارتباط الخاص بالزر
- بمجرد أن تضع الزر في المكان المطلوب، انقر عليه لتخصيصه.
- في قسم Content، ستجد خيارًا لتعديل النص (مثل “إقرأ المزيد” أو “اشتر الآن”).
- أسفل النص، يمكنك إضافة رابط الصفحة أو الرابط الذي سيقود الزوار عند النقر على الزر.
الخطوة الثالثة: تخصيص التصميم
- انتقل إلى Style في الشريط الجانبي.
- اللون: اختر اللون الذي يتناسب مع تصميم موقعك.
- الحجم: يمكنك ضبط الحجم ليناسب التصميم العام.
- الحدود: قم بتحديد إذا كنت تريد للزر أن يكون ذو حواف دائرية أو زاوية حادة.
4. الخطوة الرابعة: إضافة تأثيرات التمرير
- في Effect، يمكنك إضافة تأثيرات جميلة للزر عند التمرير عليه، مثل التغيير في اللون أو الحركة.
- هذا سيجعل الزر أكثر جذبًا وملفتًا للنظر، مما يزيد من احتمالية النقر عليه.
5. الخطوة الخامسة: استخدام الأنماط المتقدمة
- في قسم Advanced، يمكنك إضافة بعض التخصيصات المتقدمة مثل <strongend=”1732″>الهوامش، <strong”>التباعد، و إضافة الظلال لجعل الزر أكثر وضوحًا وجاذبية.
6. الخطوة السادسة: معاينة الزر ونشر التغييرات
- بعد إتمام تخصيص الزر، يمكنك معاينة التغييرات في الوضع المباشر بالنقر على “Preview”.
- إذا كان كل شيء جاهزًا، انقر على “Update” لحفظ التغييرات.
من المؤكد أن أداة Elementor هي واحدة من الأدوات الأكثر إثارة للاهتمام في كتالوج WordPress. بفضله، أصبح من الممكن تعديل الصفحات الرئيسية لـ WordPress وجعلها أكثر جاذبية. على أية حال، إذا كنت تريد موقعًا متجاوبًا وعمليًا، فأنت بحاجة إلى معرفة كيفية وضع الأزرار باستخدام Elementor في WordPress .
ما هي وظيفة الأزرار الموجودة على صفحة الويب؟
تعتبر الأزرار ضرورية على صفحات الويب وعادةً ما يكون لها وظائف مختلفة. على أية حال، وظيفتها الرئيسية هي نقلنا إلى مواقع مختلفة على الموقع أو إلى روابط خارجية. لحسن الحظ، في معظم الأحيان يكون من السهل جدًا استخدام الأزرار الموجودة على صفحات الويب، نظرًا لأنه لا يهم إذا كنت تستخدم قوالب أو أدوات خارجية، فعادةً ما يكون لدى WordPress نظام بديهي للغاية.
كيف يمكنني إضافة الأزرار بسهولة في Elementor؟
عادةً ما تكون عملية إضافة الأزرار واضحة جدًا وتُعد واحدة من الميزات الأساسية لتخصيص السمة باستخدام Astra أو Elementor . للبدء، قم ببساطة بتحرير أي صفحة داخل موقع الويب الخاص بك باستخدام Elementor. بمجرد دخولك إلى Elementor، انتقل إلى القسم الذي تريد إضافة الزر إليه . يمكنك أيضًا إنشاءه من لا شيء إذا كنت تفضل ذلك.
بمجرد أن تحدد في ذهنك المكان الذي تريد إضافة الزر إليه، انتقل إلى القائمة الموجودة على اليسار وانقر على المربع الصغير في الأعلى، والذي سيسمح لك بالوصول إلى كافة أدوات Elementor. هناك، ابحث ببساطة عن “الزر”، وانقر عليه واسحبه إلى القسم الذي تريد إضافته إليه.
الآن، سوف تحتاج إلى تحرير الزر ، أولاً، ما عليك سوى الانتقال إلى علامة التبويب “المحتوى”، حيث ستقوم بتغيير القيم مثل النص، والرابط الذي سيوجه إليه الزر، والحجم، والمحاذاة، وما إلى ذلك. من ناحية أخرى، في علامة التبويب “النمط”، يمكنك تغيير الجوانب المتعلقة بلون النص والزر والظلال وما إلى ذلك.
وأخيرًا وليس آخرًا، لدينا أيضًا قسم “متقدم”. كما يشير اسمه، يمكننا في قسم “المتقدم” إجراء العديد من التغييرات. على سبيل المثال، يمكنك تغيير رسوم الدخول المتحركة في حال كنت تريد تحريكها عند تحميل الصفحات والجوانب الأخرى، على الرغم من أن هذه الخيارات ليست ضرورية دائمًا بالتأكيد.
انسى أزرار الرموز المختصرة
في الواقع، لم يتم تصميم مكون Forget About Shortcode Buttons خصيصًا للاستخدام مع Elementor، ولكن إذا كنت تريد تحرير الأزرار بسهولة باستخدام نظام منشورات WordPress الكلاسيكي، فهو بالتأكيد أداة مفيدة للغاية. في الواقع، بعد الحصول على البرنامج المساعد، كل ما عليك فعله هو كتابة أي نص، والنقر على أيقونة الأداة لإنشاء رابط بسيط ولكنه عملي.
أين يمكنني حفظ الأزرار التي أقوم بإنشائها لاستخدامها كقوالب؟
بطريقة مشابهة نسبيًا لكيفية إنشاء نموذج اتصال WordPress ثم حفظه، هناك أيضًا القدرة على حفظ قوالب الأزرار والإعدادات المماثلة الأخرى . سنعرض لك أدناه طرق القيام بذلك باستخدام Elementor.
نسخ ولصق
واحدة من الميزات الأكثر إثارة للاهتمام في Elementor هي أنه يسمح لك بنسخ ولصق المحتوى بين صفحات مختلفة. لذلك، إذا كنت تريد نسخ نمط من زر أو قسم أو أي جزء آخر من صفحتك، يمكنك القيام بذلك دون أي مشاكل كبيرة.
على أية حال، ننصحك بحفظ القالب الذي تعمل عليه، حيث قد يكون مفيدًا إذا كنت تريد استعادته ، وهي العملية التي نعرضها لك أدناه (مع خيار القالب). ومن ناحية أخرى، يعد الوصول إلى وظائف النسخ واللصق أمرًا سهلاً للغاية.
كل ما عليك فعله هو أن يكون لديك علامة التبويب الخاصة بالصفحة التي تريد نسخها مفتوحة، ويجب أن تكون داخل Elementor بشكل واضح. انقر فوق الزر الذي تريد نسخه ثم حدد “نسخ” بالنقر بزر الماوس الأيمن. الآن انتقل إلى القسم الآخر، وانقر بزر الماوس الأيمن واضغط على “لصق” .
سيطر على نفسك
تم تصميم خيارات القوالب خصيصًا لحفظ أقسام كاملة من صفحة الويب. في حالة Elementor، للوصول إلى جميع ميزات القوالب، من الضروري الدفع مقابل الإصدار الاحترافي من أداة WordPress.
على أية حال، في الإصدار المجاني هناك أيضًا إمكانية حفظ تكوينات الشاشة، بما في ذلك الأزرار. للقيام بذلك، ما عليك سوى الضغط على السهم الصغير الموجود على الجانب الأيسر من “تحديث”.
عند الضغط على القسم السابق سيظهر لك خيار “حفظ كقالب”، فقط اضغط على هذا الزر. كل ما عليك الآن هو إدخال اسم القالب الخاص بك ثم النقر فوق حفظ. على أية حال، ضع في اعتبارك أن هذه الوظيفة ستقوم بحفظ الصفحة بأكملها التي تقوم بتحريرها.
هل يوجد مكون إضافي يسمح لي بتخصيص الأزرار؟
إذا ذهبت إلى صفحة إضافات WordPress ، يمكنك العثور على العديد من الأدوات المفيدة لموقع الويب الخاص بك. في المقابل، هناك العديد من المكونات الإضافية المتعلقة بالأزرار، ولكن القليل منها وظيفي مثل MaxButtons ، وهي الأداة التي سنخبرك عنها أدناه.
أزرار ماكس
إذا كنت تريد الحصول على الأزرار الأكثر جمالًا على موقع WordPress الخاص بك، فيجب عليك مراعاة أداة MaxButtons، والتي ستسمح لك بتحرير الأزرار بالطريقة التي تريدها. على أية حال، إذا كنت تريد الاستفادة من كافة الميزات التي تقدمها MaxButtons، فسوف تحتاج إلى شرائها مباشرة من متجر WordPress .
نصائح إضافية:
- حافظ على البساطة: لا تبالغ في الألوان أو التأثيرات. حاول استخدام ألوان تتناغم مع تصميم موقعك.
- اختبار الأزرار: تأكد من اختبار الأزرار على الأجهزة المختلفة لضمان أن يعمل الزر كما يجب على الهواتف المحمولة والأجهزة اللوحية.
خاتمة:
بإضافة أزرار مخصصة باستخدام Elementor، يمكنك تحسين تجربة المستخدم في موقعك وجعل التنقل فيه أكثر سلاسة وجذبًا. قم بتخصيص الأزرار لتتناسب مع هوية موقعك وزيِّنها بتأثيرات لافتة للنظر. مع Elementor، أصبح الأمر أسهل من أي وقت مضى!