كيفية إنشاء زر متدرج متعدد الألوان في العنصر

هل ترغب في إنشاء زر تدرج متعدد الألوان بتنسيق Elementor ?

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

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

كيفية إنشاء زر متدرج متعدد الألوان في العنصر

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

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

في إعدادات الأداة ، انتقل إلى علامة التبويب متقدم -> عرف المغلق. انسخ مقتطف CSS أدناه ، ثم الصقه في حقل CSS المخصص.

selector .elementor-button {
  background: linear-gradient(121.28deg, #A4006C 0%, #FFECA8 100%), linear-gradient(121.28deg, #69003F 0%, #FFF8F8 100%), linear-gradient(238.72deg, #00FFFF 0%, #0212A4 100%), radial-gradient(67.16% 100% at 50% 0%, #FF00B8 0%, #FFFFFF 100%), linear-gradient(140.54deg, #7000FF 0%, #001AFF 72.37%), linear-gradient(307.43deg, #FFE927 0%, #00114D 100%), radial-gradient(107% 142.8% at 15.71% 104.5%, #FFFFFF 0%, #A7AA00 100%), #FFFFFF;
background-blend-mode: overlay, difference, difference, overlay, difference, difference, difference, normal;
}

إذا كنت راضيًا عن التدرج اللوني متعدد الألوان الذي تم تطبيقه (كما في الصورة أعلاه) ، فيمكنك الاحتفاظ به بهذه الطريقة وحفظ مشروعك إذا كنت ترغب في ذلك. ولكن ، إذا كنت ترغب في تخصيصه ، فيمكنك القيام بذلك عن طريق تعديل مقتطف CSS بشكل أكثر تحديدًا في كتلة إعلان CSS.

تبدأ كتلة إعلان CSS بقوس فتح ( {"") وينتهي بالقوس الختامي الأيمن ("} ).

للحصول على كتلة الإعلان ، يمكنك إنشاء تدرج باستخدام امتداد أدوات التدرج عبر الإنترنت المغلق. Cliquez ICI لرؤية بعض أدوات من تدرج CSS. بمجرد الانتهاء من إنشاء التدرج اللوني ، انسخ CSS واستبدل كتلة الإعلان الحالية بأخرى جديدة عن طريق لصق CSS.

ملاحظة : يمكنكم، أيضا إنشاء عنوان التدرج في Elementor .

احصل على Elementor Pro الآن !!!

وفي الختام

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

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

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

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

ولكن في هذه الأثناء ، شارك هذا المقال على الشبكات الاجتماعية المختلفة.

...