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

هل تريد إنشاء زر تدرج متعدد الألوان في 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 بقوس فتح ( {'' ) وينتهي بقوس الإغلاق المستقيم(''} ).

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

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

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

خاتمة

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

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

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

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

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

...