الزر الافتراضي يحصل على نقرات؛ زر مع القليل من الحركة يحصل على المزيد منهم. مجانا القطعة زر الإبداع في الإضافات الرئيسية للعنصر يشحن مكتبة من الإعدادات المسبقة لتأثير التمرير، بدءًا من عمليات مسح الخلفية الدقيقة وحتى الرسوم المتحركة لتبديل النص، بحيث يمكن أن تتحرك الدعوة إلى الإجراء دون كتابة سطر من CSS.
يمكنك اختيار إعداد مسبق، وكتابة النص، وإضافة رمز إذا كنت تريد ذلك، وتصميم الحالة العادية وحالة التمرير. يغطي هذا الدليل الأداة بأكملها، واسحب إلى الزر النهائي.
ما تفعله أداة الأزرار الإبداعية #
تعرض الأداة زر استدعاء لإجراء واحد مع رسوم متحركة تم إنشاؤها مسبقًا. تأتي الرسوم المتحركة على شكل 21 إعدادًا مسبقًا محددًا، 6 منها مجانية و15 مع Master Addons Pro، ولكل منها حركتها الخاصة: الخلفيات التي تنزلق، والحدود التي ترسم نفسها، والنص الذي يقلب إلى رسالة بديلة. كل شيء آخر يعمل مثل زر Elementor العادي: النص والرابط والأيقونة والمحاذاة والتحكم الكامل في الألوان لكل حالة.
قبل أن تبدأ #
- ووردبريس مع العنصر مثبتة ونشطة.
- الإضافات الرئيسية للعنصر مثبت ونشط. جديد في البرنامج المساعد؟ انظر دليل التثبيت.
- تم تمكين عنصر واجهة المستخدم Creative Buttons في لوحة خيارات Master Addons، ضمن Basic Widgets.
كيفية إضافة عنصر واجهة المستخدم للأزرار الإبداعية #
في محرر Elementor، ابحث في عناصر لوحة ل أزرار إبداعية واسحب الأداة إلى الصفحة. يظهر زر داكن يقرأ “Add Your CTA Content”، وهو متصل بالفعل بالتأثير الافتراضي.
اختر الإعداد المسبق لتأثير الزر #
يفتح زر الإعداد المسبق وعناصر التحكم في علامة التبويب المحتوى. ال تأثيرات الزر dropdown هو قلب الأداة: Default، Winona، Ujarak، Wayra، Tamaya، وRayen مجانيون. يحتاج بيبالوك، مويما، إيسي، آيلين، ساكي، واباشا، نينا، نانوك، نوكا، أنتيمان، إيتزل، نيرا، كويديل، ساكنيت، وشيكوبا ماستر أدونز برو.
كل اسم عبارة عن رسوم متحركة مختلفة للتحليق. قم بتمرير الزر الموجود على اللوحة القماشية بعد كل اختيار ويقوم المحرر بتشغيل التأثير مباشرة، لذا فإن اختبار الإعدادات المسبقة يستغرق ثوانٍ. الأسماء لا تلمح إلى ما يفعلونه، لذا فإن تجربة أربعة أو خمسة هي أسرع طريقة للعثور على الطريقة الصحيحة. محاذاة الزر و محاذاة نص الزر اجلس بالأسفل مباشرةً، ولكل منها مفتاح تبديل سريع الاستجابة لإعدادات كل جهاز.
قم بتعيين النص والرابط والنص البديل #
ال ضوابط الزر تغطي المجموعة المحتوى. زر النص هو التسمية، و رابط URL قم بتوجيه الزر إلى مكان ما، مع رمز الترس لخيارات علامة التبويب الجديدة وعدم المتابعة.
يمكن للإعدادات المسبقة تبديل التسمية برسالة ثانية عند التمرير. اختر أي تأثير بخلاف الافتراضي و نص الزر البديل يظهر الحقل؛ يقوم العرض التوضيحي بتعيينه على “انقر الآن!” بحيث يقرأ الزر “Add Your CTA Content” في حالة الراحة ويقلب عند التمرير.
أضف أيقونة #
ال أيقونة يفتح Control مكتبة أيقونات Elementor، باستخدام Font Awesome وكل مجموعة أيقونات قمت بتثبيتها.
بعد اختيار واحد، موقف الأيقونة يضعه قبل أو بعد التسمية، و تباعد الأيقونات يضبط الفجوة؛ يصل العرض التوضيحي إلى 12 بكسل حتى يتنفس الرمز والنص.
نمط الزر #
التبديل إلى أسلوب علامة التبويب وفتح أنماط الأزرار. المجموعة العليا تتعامل مع الشكل: عرض, الطباعة, حشوة الأزرار, نوع الحدود, نصف قطر الحدود (8 في العرض التوضيحي، للزوايا المستديرة بهدوء)، صندوق الظل، و حجم الأيقونة.
تحت ذلك، عادي و تحوم علامات التبويب تحمل كل منها ثلاثة ألوان: لون النص, لون الخلفية، و لون الأيقونة. يعطي العرض التوضيحي الحالة العادية للنص الأبيض على اللون الأزرق:
ثم يقلب حالة التحويم إلى نص داكن على اللون الأخضر، وبالتالي فإن التأثير ينشط بين مظهرين مختلفين بشكل واضح
أ أنماط يأتي القسم الموجود في الأسفل من ملحق الأنماط المجانية ويضيف أنماط خلفية زخرفية.
النتيجة على الصفحة #
في الصفحة المباشرة، يبقى الزر بألوانه العادية حتى وصول المؤشر. ثم يتم تشغيل الإعداد المسبق: تنتقل الخلفية إلى لون التمرير، ويتحول الرمز والنص، ويظهر النص البديل إذا كان الإعداد المسبق يستخدم واحدًا.
حالات الاستخدام الشائعة #
- قسم البطل CTAs حيث تجذب الرسوم المتحركة الأنظار إلى الحدث الرئيسي.
- أزرار صفحة التسعير مع تبديل النص مثل “Get Started” إلى “It's Free!” على التحويم.
- أزرار التنزيل والاشتراك مقترن برمز للتعرف الفوري.
- أقسام الصفحة المقصودة يحتاج ذلك إلى زر واحد للتمييز عن الإعدادات الافتراضية للموضوع.
نصائح لأزرار إبداعية أفضل #
- إعدادات الاختبار المسبقة على القماش. قم بتمرير الزر بعد كل اختيار للمؤثرات؛ يتم تشغيل الرسوم المتحركة في المحرر، ولا حاجة إلى معاينة.
- جعل حالة التحويم التباين. تُقرأ الرسوم المتحركة بشكل أفضل عندما تختلف الألوان العادية والألوان المتحركة بشكل واضح، مثل العرض التوضيحي من الأزرق إلى الأخضر.
- إبقاء النص البديل قصيرا. تبدو الإعدادات المسبقة لتبديل النص نظيفة عندما تكون كلتا الرسالتين بنفس الطول تقريبًا.
- زر إبداعي واحد لكل قسم. الحركة تجذب الانتباه؛ ثلاثة أزرار متحركة على التوالي تتنافس مع بعضها البعض.
- تحقق من سلوك النقر على الهاتف المحمول. لا تحتوي شاشات اللمس على أي تحوم، لذا تأكد من أن الحالة العادية تقرأ على أنها قابلة للنقر من تلقاء نفسها.
فيديو تعليمي #
يمكنك أيضًا مشاهدة الفيديو أدناه إذا كنت ترغب في رؤية زر الإبداع أثناء العمل، بدءًا من اختيار التأثير المحدد مسبقًا وحتى الرسوم المتحركة النهائية للتحليق على الصفحة المباشرة.
الأسئلة المتداولة #
ما هي أداة Creative Buttons في Master Addons؟
إنها أداة Elementor لأزرار الاتصال إلى الإجراء مع رسوم متحركة للتحليق معدة مسبقًا. يمكنك الاختيار من بين 21 إعدادًا مسبقًا للتأثير المسمى (6 مجانًا، و15 مع Pro)، وتعيين النص والرابط والرمز، وتصميم الحالات العادية وحالات التحويم بشكل منفصل عن لوحة Elementor.
كم عدد تأثيرات الزر المضمنة؟
يسرد القائمة المنسدلة لـ Button Effects 21 إعدادًا مسبقًا. الافتراضي، Winona، Ujarak، Wayra، Tamaya وRayen مجانيان، والباقي يحتاج إلى Master Addons Pro، بما في ذلك Winona، Ujarak، Wayra، Tamaya، Rayen، Moema، Naira، وShikoba. يطبق كل منها رسمًا متحركًا مختلفًا للتحليق، وتقوم لوحة المحرر بتشغيل التأثير مباشرة عند تحريك الزر.
ما هو حقل نص الزر البديل؟
يمكن للتأثيرات تبديل تسمية الزر برسالة ثانية عند التمرير. عند اختيار أي تأثير بخلاف الافتراضي، يظهر حقل نص الزر البديل حتى تتمكن من ضبط رسالة التمرير، مثل تبديل “Get Started” إلى “It's Free!”.
هل يمكنني إضافة أيقونة إلى الزر الإبداعي؟
نعم. يفتح عنصر التحكم في الأيقونة مكتبة أيقونات Elementor. بعد اختيار أيقونة، يضعها موضع الأيقونة قبل النص أو بعده، ويقوم Icon Spacing بتعيين الفجوة، ويعيش حجم الأيقونة ولون الأيقونة في علامة التبويب "النمط".
هل يمكنني تصميم حالة التحويم بشكل منفصل؟
نعم. تحتوي أنماط الأزرار على علامات تبويب عادية وعلامات تبويب قابلة للتمرير، ولكل منها لون النص ولون الخلفية ولون الأيقونة الخاص بها. يتم تحريك الإعداد المسبق بين الحالتين، لذا فإن الألوان المتباينة تجعل التأثير أكثر وضوحًا.
إلتحاق بالركب #
تقوم أداة Creative Buttons بتحويل CTA عادي إلى CTA متحرك بدون رمز مخصص: اختر إعدادًا مسبقًا من القائمة المنسدلة للتأثيرات، وقم بتعيين النص والرمز، وأعطي الألوان العادية وحالات التمرير التي تستحق الرسوم المتحركة بينها. إنه يقترن جيدًا بأداة Creative Links للروابط النصية المتحركة. تصفح المجموعة الكاملة من عناصر واجهة المستخدم والإضافات الرئيسية، وانظر صفحة القطعة زر الإبداع للعروض التوضيحية والمقارنة مع عنصر واجهة المستخدم Elementor Button.
