زر الإبداع

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

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

ما تفعله أداة الأزرار الإبداعية #

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

قبل أن تبدأ #

• ووردبريس مع العنصر مثبتة ونشطة.
• الإضافات الرئيسية للعنصر مثبت ونشط. جديد في البرنامج المساعد؟ انظر دليل التثبيت.
• تم تمكين عنصر واجهة المستخدم Creative Buttons في لوحة خيارات Master Addons، ضمن Basic Widgets.

كيفية إضافة عنصر واجهة المستخدم للأزرار الإبداعية #

في محرر Elementor، ابحث في عناصر لوحة ل أزرار إبداعية واسحب الأداة إلى الصفحة. يظهر زر داكن يقرأ “Add Your CTA Content”، وهو متصل بالفعل بالتأثير الافتراضي.

اختر الإعداد المسبق لتأثير الزر #

يفتح زر الإعداد المسبق وعناصر التحكم في علامة التبويب المحتوى. ال تأثيرات الزر dropdown هو قلب الأداة: Default، Winona، Ujarak، Wayra، Tamaya، Rayen، Pipaluk، Moema، Isi، Aylen، Saqui، Wapasha، Nina، Nanuk، Nuka، Antiman، Itzel، Naira، Quidel، Sacnite، Shikoba، و اكثر.

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

قم بتعيين النص والرابط والنص البديل #

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

تقوم بعض الإعدادات المسبقة، مثل Winona وRayen، بتبديل التسمية برسالة ثانية عند التمرير. اختر واحدة من هؤلاء و نص الزر البديل يظهر الحقل؛ يقوم العرض التوضيحي بتعيينه على “انقر الآن!” بحيث يقرأ الزر “Add Your CTA Content” في حالة الراحة ويقلب عند التمرير.

أضف أيقونة #

ال أيقونة يفتح Control مكتبة أيقونات Elementor، باستخدام Font Awesome وكل مجموعة أيقونات قمت بتثبيتها.

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

نمط الزر #

التبديل إلى أسلوب علامة التبويب وفتح أنماط الأزرار. المجموعة العليا تتعامل مع الشكل: عرض, الطباعة, حشوة الأزرار, نوع الحدود, نصف قطر الحدود (8 في العرض التوضيحي، للزوايا المستديرة بهدوء)، صندوق الظل، و حجم الأيقونة.

تحت ذلك، عادي و تحوم علامات التبويب تحمل كل منها ثلاثة ألوان: لون النص, لون الخلفية، و لون الأيقونة. يعطي العرض التوضيحي الحالة العادية للنص الأبيض على اللون الأزرق:

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

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

النتيجة على الصفحة #

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

حالات الاستخدام الشائعة #

• قسم البطل CTAs حيث تجذب الرسوم المتحركة الأنظار إلى الحدث الرئيسي.
• أزرار صفحة التسعير مع تبديل النص مثل “Get Started” إلى “It's Free!” على التحويم.
• أزرار التنزيل والاشتراك مقترن برمز للتعرف الفوري.
• أقسام الصفحة المقصودة يحتاج ذلك إلى زر واحد للتمييز عن الإعدادات الافتراضية للموضوع.

نصائح لأزرار إبداعية أفضل #

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

فيديو تعليمي #

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

الأسئلة المتداولة #

إلتحاق بالركب #

تقوم أداة Creative Buttons بتحويل CTA عادي إلى CTA متحرك بدون رمز مخصص: اختر إعدادًا مسبقًا من القائمة المنسدلة للتأثيرات، وقم بتعيين النص والرمز، وأعطي الألوان العادية وحالات التمرير التي تستحق الرسوم المتحركة بينها. إنه يقترن جيدًا بأداة Creative Links للروابط النصية المتحركة. تصفح المجموعة الكاملة من عناصر واجهة المستخدم والإضافات الرئيسية، وانظر صفحة التسعير لإضافات Pro مثل أنماط الأزرار.