أزرار التصميم مع خيارات الخلفية الجديدة لديفي (6 تصاميم متضمنة)

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

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

لنذهب.

نظرة خاطفة

فيما يلي أمثلة على تصميمات الأزرار التي تمت تغطيتها في هذا المنشور.

أزرار التصميم مع خيارات الخلفية الجديدة لديفي (6 تصاميم متضمنة)

اشترك في قناتنا على اليوتيوب

وانشاء

باستخدام Visual Building ، أضف قسمًا عاديًا بصف عمود واحد.

بعد ذلك ، أضف وحدة زر إلى الصف.

ثم قم بتحديث إعدادات وحدة الزر على النحو التالي:

خيارات المحتوى

نص الزر: [أدخل نصًا]
عنوان URL للزر: [أدخل عنوان URL]

خيارات التصميم

محاذاة الزر: الوسط
لون النص: فاتح
استخدام الأنماط المخصصة للزر: نعم
حجم نص الزر: 48 بكسل

خيارات متقدمة

نحتاج إلى عرض 100٪ لملء عرض العمود. للقيام بذلك ، أدخل CSS المخصص التالي في المربع Main Element:

Width: 100%;

احفظ التغييرات

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

انتقل إلى إعدادات الصف التي يوجد بها الزر الجديد وقم بتحديث ما يلي:

خيارات المحتوى

حدد علامة التبويب تدرج الخلفية في العمود 1 ثم انقر فوق الزر الدائري الرمادي مع رمز زائد أبيض.

الآن يجب أن ترى الألوان المتدرجة الافتراضية تظهر خلف الزر الأبيض.

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

خيارات التصميم

ضمن خيارات التصميم ، سنقوم بتعديل حجم الصف ليلائم زرنا الجديد عن طريق تعديل ما يلي:

استخدام العرض المخصص: نعم
العرض المخصص: 500 بكسل (يعيّن هذا الحد الأقصى لعرض الزر على 500 بكسل)
الحشو المخصص: 0 بكسل أعلى ، 0 بكسل يمين ، 0 بكسل أسفل ، 0 بكسل يسار

خيارات متقدمة

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

border-radius: 10px;

أدخل نفس CSS في مربع Column Main Element :

border-radius: 10px;

احفظ التغييرات

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

هذا إجمالي 3 طبقات خلفية (زر ، عمود ، صف) يمكننا استخدامها للتصميم لاحقًا.

فيما يلي توضيح لكيفية إنشاء الزر حاليًا.

رائع أليس كذلك؟

هذا كل شيء من أجل الإعداد الأساسي. حان الوقت الآن للجزء الممتع من إنشاء تصميمات رائعة لأزرارك.

إنشاء تصميمات زر رائعة

# 1 زر خلفية الفيديو

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

بالنسبة لإعدادات الصف ، قم بتحديث خيارات المحتوى التالية:

فيديو الخلفية: [تحميل الفيديو]
ألوان تدرج الخلفية للعمود 1: rgba (12،113،195،0.41) ، rgba (131،0،233،0.18)

احفظ التغييرات

بالنسبة لإعدادات وحدة الأزرار ، قم بتحديث ما يلي:

خيارات المحتوى

نص الزر: "تحقق من ذلك"

خيارات التصميم

لون خلفية الزر: rgba (12،113،195،0.25)
لون حدود الزر: # 0c71c3

احفظ التغييرات

الآن المشكلة الوحيدة المتبقية لدينا هي نصف قطر حدود خلفية الفيديو. يتعين علينا إضافة بعض CSS المخصص لمنح الفيديو نصف قطر حد يطابق الزر. هذا الرمز الإضافي ضروري فقط لزر خلفية الفيديو.

لإضافة CSS المخصص ، انتقل إلى إعدادات الصفحة من Visual Builder وانقر فوق علامة التبويب خيارات متقدمة. ثم قم بتحديث مربع إدخال CSS المخصص باستخدام CSS التالي:

.et_pb_section_video_bg {

border-radius: 10px;

}

احفظ التغييرات

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

هذا كل شيء! الآن لديك زر بخلفية فيديو.

# 2 زر متقلب

يتطلب الزر المتقلب استخدام طبقتين (صف وعمود) من تدرجات ألوان الخلفية.

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

بالنسبة لإعدادات الصف ، قم بتحديث خيارات المحتوى التالية:

ألوان تدرج الخلفية: # 8300e9 ، # 0c71c3
اتجاه التدرج: 270 درجة
موقف البداية: 50٪
موقف النهاية: 0٪
Column1 الخلفية ألوان التدرج: rgba (224،11،0،0.39) ، rgba (255،255،255،0)
اتجاه التدرج: 180 درجة
موقف البداية: 50٪
موقف النهاية: 0٪

احفظ التغييرات

انتقل الآن إلى إعدادات وحدة الزر وقم بتحديث ما يلي

خيارات المحتوى

نص الزر: "اشتراك"

خيارات التصميم

عرض حد الزر: 0 بكسل
تباعد حرف الزر: 10 بكسل
خط الزر: افتراضي ، غامق (B) ، مائل (I)
تباعد الأحرف التي تحوم على الزر: 10 بكسل

هذا كل شيء. هنا هو النتيجة النهائية.

أنت الآن تعرف كيفية إضافة تأثير متقلب إلى الأزرار الخاصة بك.

# 3 زر التدرج الشعاعي

لإنشاء هذا الزر ، ستستخدم طبقتين (صف وعمود) من تدرجات ألوان الخلفية.

بالنسبة لإعدادات الصف ، قم بتحديث خيارات المحتوى التالية:

ألوان تدرج الخلفية: # 8300e9 ، # 0c71c3
نوع التدرج: شعاعي
اتجاه شعاعي: المركز
موقف البداية: 50٪
موضع النهاية: 100٪
Column1 الخلفية ألوان التدرج: rgba (224،11،0،0.39) ، rgba (255،255،255،0)
نوع التدرج: شعاعي
اتجاه شعاعي: المركز
موقف البداية: 50٪
موضع النهاية: 100٪

احفظ التغييرات

انتقل الآن إلى إعدادات وحدة الزر وقم بتحديث ما يلي:

خيارات المحتوى

نص الزر: "اتصل بي"

خيارات التصميم

عرض حد الزر: 0 بكسل
زر الخط: ماكرة بنات

رمز الزر: [اختر رمز القلب]
إظهار الأيقونة عند التمرير للزر فقط: لا

خيارات متقدمة

لللمسة الأخيرة ، دعنا نضيف ظل منزلق إلى الزر. بالإضافة إلى الكود السابق ، أدخل CSS المخصص التالي في المربع Main Element :

box-shadow: 0px 5px 10px 3px #ccc;

هذا كل شيء! ها هي نتيجتك النهائية:

# 4 زر بولس

لإنشاء هذا الزر ، ستستخدم طبقتين (صف وعمود) من تدرجات ألوان الخلفية. بالإضافة إلى أننا سنقوم بإضافة بعض css المخصص في وحدة الزر لإنشاء تأثير الحد السفلي المنبثق.

بالنسبة لإعدادات الصف ، قم بتحديث خيارات المحتوى التالية:

ألوان تدرج الخلفية: # 023500 ، # 008c02
نوع التدرج: شعاعي
اتجاه شعاعي: المركز
موقف البداية: 19٪
موقف النهاية: 0٪
Column1 ألوان التدرج للخلفية: rgba (0،206،72،0.43) ، rgba (255،255،255،0)
نوع التدرج: شعاعي
اتجاه شعاعي: المركز
موقف البداية: 32٪
موقف النهاية: 0٪

انتقل الآن إلى إعدادات وحدة الزر وقم بتحديث ما يلي:

خيارات المحتوى

نص الزر: "شراء"

خيارات التصميم

حجم نص الزر: 65 بكسل
عرض حد الزر: 0 بكسل
خط الزر: Roboto ، Bold (B) ، Uppercase (TT)

خيارات متقدمة

الآن من أجل اللمسة الأخيرة. أضف CSS المخصص التالي إلى الكود الموجود في مربع إدخال العنصر الرئيسي :

box-shadow: 0px 5px 0px 0px #01771f;

# 5 زر الصورة

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

بالنسبة لإعدادات الصف ، قم بتحديث خيارات المحتوى التالية:

ضمن علامة التبويب صورة الخلفية

صورة الخلفية: [تحميل الصورة]
حجم صورة الخلفية: الغلاف
موقف صورة الخلفية: المركز
تكرار صورة الخلفية: لا يوجد تكرار
مزيج صورة الخلفية: مضاعفة

ضمن علامة التبويب تدرج الخلفية

ألوان التدرج للخلفية: rgba (12،113،195،0.33) ، # edf000
نوع التدرج: خطي
اتجاه التدرج: 63 درجة
موقف البداية: 50٪
موضع النهاية: 100٪

الآن قم بالتمرير لأسفل إلى خيارات العمود 1 الخلفية وحدد علامة التبويب التدرج.

العمود 1 ألوان التدرج للخلفية: rgba (236،239،31،0.66)، rgba (0،0،0،0.49)
نوع التدرج للعمود: خطي
اتجاه التدرج للعمود: 139 درجة
موضع بداية العمود: 12٪
موضع نهاية العمود: 0٪

احفظ التغييرات

هذا يهتم بالمستوى الثاني من تصميمات الخلفية. بقي واحد آخر.

انتقل إلى " إعدادات وحدة الزر" وقم بتحديث ما يلي:

خيارات المحتوى

نص الزر: "احصل على تذاكر"

خيارات التصميم

لون خلفية الزر: rgba (12،113،195،0.16)
لون حدود الزر: # efef4f
خط الزر: Lato
رمز الزر: [اختر أيقونة التذاكر]
فقط إظهار الأيقونة عند التحويم للزر: لا

لون نص تحوم الزر: # 023b7c
تحوم الزر لون الخلفية: # 023b7c

هذا كل شيء!. تحقق من زر صورتك.

# 6 زر عمودي

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

بالنسبة إلى إعدادات الصف ، قم بالتمرير لأسفل إلى خيارات خلفية العمود 1 وقم بتحديث ما يلي:

صورة خلفية العمود: [تحميل صورة عمودية]
حجم صورة خلفية العمود: مناسب (سيؤدي ذلك إلى التأكد من أن الصورة تناسب الزر دائمًا)
موضع صورة خلفية العمود: وسط اليسار (يؤدي هذا إلى محاذاة صورتك إلى يسار الزر)
تكرار صورة خلفية العمود: لا يوجد تكرار
مزيج صورة الخلفية للعمود: اللمعان (يؤدي هذا إلى مزج اللون البرتقالي مع الصورة)

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

الآن يمكنك رؤية مزيج البرتقال على الزر الخاص بك.

احفظ التغييرات

انتقل الآن إلى إعدادات وحدة الزر وقم بتحديث ما يلي:

خيارات المحتوى

نص الزر: "لنتحدث"

خيارات التصميم

محاذاة الزر: يمين
لون حدود الزر: # ff7b23
تباعد حرف الزر: 3 بكسل
خط الزر: قرد سعيد
رمز الزر [إضافة رمز الدردشة]
فقط إظهار الأيقونة عند التحويم للزر: لا
تباعد الأحرف التي تحوم على الزر: 3 بكسل

كله تمام! أحب هذا التصميم لزر الاتصال بالمدونة. أعتقد أنه يضيف لمسة شخصية لطيفة.

تصميم الأزرار على هياكل الأعمدة المختلفة

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

على سبيل المثال ، لنفترض أنك تريد إضافة صف 1/2 1/2 عمود مع زر على اليسار وبعض النص على اليمين. إليك ما ستفعله.

ابدأ بقسم عادي جديد وحدد بنية صف 1/2 1/2 عمود . ثم أضف وحدة زر إلى العمود الأيسر.

في إعدادات وحدة الزر ، تأكد من إدراج CSS التالي في مربع إدخال العنصر الرئيسي ضمن علامة التبويب خيارات متقدمة:

Width: 100%;

يمكنك تخصيص بقية وحدة الزر لاحقًا.

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

ثم انتقل إلى علامة التبويب " تصميم" وقم بتحديث ما يلي:

حشوة مخصصة للعمود 1: 0 بكسل أعلى ، 0 بكسل يمين ، 0 بكسل أسفل ، 0 بكسل يسار

احفظ التغييرات

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

مستجيب؟

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

عبر دعم المتصفح

حاليًا ، خاصية CSS لوضع مزيج الخلفية غير مدعومة من قبل Internet Explorer أو Edge ولدى Safari خيارات مزج محدودة. ومع ذلك ، فإن التراجع ليس كبيرًا في تجربتي في معظم الحالات.

إليك ما تبدو عليه الأزرار في IE:

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

افكار اخيرة

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

نتطلع إلى الاستماع منك في التعليقات.

هتافات