هل تحتاج إلى إنشاء زر بتأثير التحويم باستخدام Elementor ?
إذا كان الأمر كذلك ، اجلس في هذه الحافلة الرائعة ، لأن ما سنحققه اليوم هو في الفيديو التالي:
لنُنشئ صفحة، ثم نُعدِّلها باستخدام Elementor، ثم نختار بنية عمودين. في اللوحة، لنُعدِّل القسم المُنشأ حديثًا باختيار ارتفاع الحد الأدنى فورا الإستكبار وعلى الفور ارتفاع الحد الأدنى دعنا نضغط VH ثم اضبط المؤشر على 100.
في علامة التبويب الطراز دعنا نغير لون الخلفية إلى # 070e39.
في العمود الأول ، دعنا نسقط أداة الزر ، ونعدل نصها عن طريق الكتابة عرض التفاصيل ودعنا نحاذيها إلى اليمين
في علامة التبويب الطراز دعونا نعدلها أسلوب الطباعة عن طريق تغيير الحجم 15, تحول في أحرف كبيرة et تباعد الأحرف في 1.1
في علامة التبويب متقدم، تعديل الكل هوامش في 20 وفي القسم CSS مخصصة، فلنلصق الكود التالي الذي يضيف تدرجًا إلى الزر:
المحدد {
–Btn- العرض: 180 بكسل ؛
- ارتفاع BTN: 50 بكسل ؛
–Btn- الخلفية: # 0e1538 ؛
- الانحدار الأيسر: # F803F8 ؛
- الانحدار الأيمن: # 03F2FD ؛
}
المحدد أ {
;position: relative
العرض: var (–btn-width) ؛
الارتفاع: var (–btn-height) ؛
}
المحدد أ: قبل ،
المحدد أ: بعد {
سعيدة: "؛
;position: absolute
أقحم: 0 ؛
الانتقال: 0.5 ثانية ؛
}
المحدد أ: nth-child (1): قبل ،
selector a: nth-child (1): after {
الخلفية: التدرج الخطي (45 درجة ، فار (–تدرج يسار) ، var (–btn- خلفية) ، var (–btn-background) ، var (– right-gradient)) ؛
}
selector a: hover: before {
أقحم: -3 بكسل ؛
}
selector a: hover: after {
أقحم: -3 بكسل ؛
عامل التصفية: طمس (10 بكسل) ؛
}
محدد فترة {
;position: absolute
;top: 0
اليسار: 0
عرض: 100٪،
الارتفاع: 100٪؛
الخلفية: var (–btn-background) ؛
ض الفهرس: 10.
عرض: المرن.
تبرير المحتوى: المركز ؛
محاذاة البنود: مركز.
إخفاء الفائض؛
}
الآن إذا قمت بالمرور فوق الزر سوف تكتشف تأثيرات رائعة.
لإضافة تأثير زجاجي لامع على الزر ، دعنا نلصق الكود التالي أيضًا:
/ * تأثير زجاجي لامع * /
محدد فترة :: قبل {
سعيدة: "؛
;position: absolute
;top: 0
اليسار: -50٪؛
عرض: 100٪،
الارتفاع: 100٪؛
الخلفية: rgba (255,255,255,0.075،XNUMX،XNUMX،XNUMX) ؛
تحويل: انحراف (160 درجة) ؛
}
تلاحظ تأثيرًا جديدًا يجلب مزيدًا من الضوء على الزر.
اقرأ أيضا: كيفية إنشاء قسم أعضاء الفريق باستخدام Elementor
لنقم الآن بنسخ هذا الزر ولصقه في العمود الثاني. دعنا نغير محاذاة الزر إلى اليسار ونغير النص إلى شاهد المزيد.
الآن كل ما عليك فعله هو نشر عملك أو معاينته.
هنا 2 أزرار جميلة تم إنشاؤها.
احصل على Elementor Pro الآن!
الخاتمة
هذا كل شيء! هذا كل شيء في هذا الدرس التعليمي الذي يوضح لك كيفية إنشاء زر بتأثير التمرير باستخدام مُنشئ الصفحات Elementor. إذا واجهت أي مشكلة في ذلك، فأخبرنا في تعليقات.
ومع ذلك ، يمكنك أيضا استشارة مواردنا، إذا كنت بحاجة إلى مزيد من العناصر لتنفيذ مشاريعك الخاصة بإنشاء مواقع الإنترنت ، من خلال الرجوع إلى دليلنا على وورد خلق بلوق أو واحد على ديفي: أفضل موضوع وورد في كل العصور.
ولكن في هذه الأثناء ، شارك هذا المقال على الشبكات الاجتماعية المختلفة.
...