5 تصاميم وحدة زر Divi الإبداعية وكيفية صنعها

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

دعونا نحفر!

نظرة خاطفة

فيما يلي نظرة سريعة على الأزرار التي سنبنيها في هذا البرنامج التعليمي.

1. زر السهم الأيسر

2. تحريك زر الخط

3. سحب زر علامة التبويب

4. زر شعار الدائرة

5. زر الوهج

دعنا نصل إلى البرنامج التعليمي ، أليس كذلك؟

ما تحتاجه للبدء

للبدء ، سوف تحتاج إلى القيام بما يلي:

1. إذا لم تكن قد قمت بذلك بعد ، فقم بتثبيت وتفعيل Divi Theme.
2. قم بإنشاء صفحة جديدة في WordPress واستخدم Divi Builder لتحرير الصفحة على الواجهة الأمامية (منشئ مرئي).
3. اختر الخيار "البناء من الصفر".

بعد ذلك ، سيكون لديك لوحة فارغة لبدء التصميم في Divi.

5 تصاميم وحدة زر Divi وكيفية صنعها

1. زر السهم الأيسر

للبدء ، أنشئ قسمًا جديدًا بصف عمود واحد وأضف وحدة زر إلى الصف.

ثم قم بتغيير نص المحتوى الافتراضي للزر لقراءة "البدء" (أو ما تريده بالفعل).

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

استخدام الأنماط المخصصة للزر: نعم
لون نص الزر: #ffffff
لون خلفية الزر: # 324376
عرض الحدود: 0 بكسل
تباعد حرف الزر: 0.2em
خط الزر: Fira Sans
نمط الخط: TT (أحرف كبيرة) ، U (تحتها خط)
تسطير اللون: rgba (255،255،255،0.2)
نمط التسطير: مزدوج
رمز الزر: انظر لقطة الشاشة
لون أيقونة الزر: # ff4751
وضع رمز الزر: يسار

الحشو المخصص: 40 بكسل يسار ، 20 بكسل يمين

Box Shadow: انظر لقطة الشاشة
مربع الظل الوضع الأفقي: 22 بكسل
مربع الظل الوضع الرأسي: 0 بكسل
لون الظل: # ff4751

(تُنشئ الحشوة اليسرى المخصصة البالغة 40 بكسل مساحة ثابتة يتم ملؤها بظل الصندوق لتستقر في مواجهة أيقونة زر السهم الأيسر.)

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

هنا هو النتيجة النهائية.

2. تحريك زر الخط

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

للبدء ، أنشئ قسمًا جديدًا بصف عمود واحد وأضف وحدة زر إلى الصف.

قم بتحديث محتوى نص الزر إلى ما تريد. سأترك القيمة الافتراضية "انقر هنا" لهذا المثال. ثم قم بتحديث إعدادات التصميم على النحو التالي:

• استخدام الأنماط المخصصة للزر: نعم
• لون نص الزر: # 3b7986
• اللون الأيسر لخلفية الزر متدرج: rgba (255،255،255،0)
• لون خلفية الزر متدرج لليمين: # 3b7986
• اتجاه التدرج: 180 درجة
• مركز البداية: 96٪
• موقف النهاية: 0٪
• عرض حد الزر: 10 بكسل
• لون حدود الزر: rgba (0،0،0،0)
• نصف قطر حدود الزر: 0 بكسل
• تباعد حرف الزر: 6 بكسل
• خط الزر: Exo 2
• وزن الخط: عريض
• نمط الخط: Tt (أحرف صغيرة)
• رمز الزر: السهم الأيمن (انظر لقطة الشاشة)
• فقط إظهار الرمز عند التحويم للزر: لا
• الحشو المخصص: 0 بكسل للأسفل
• Box Shadow: انظر لقطة الشاشة
• مربع الظل الوضع الأفقي: -15 بكسل
• مربع الظل الرأسي: 15 بكسل
• قوة انتشار الظل المربع: -13 بكسل
• لون الظل: # 3b7986

قد تحتاج إلى ضبط لون الخلفية على #ffffff عند التمرير أيضًا لأن هذا هو الإعداد الافتراضي للزر.

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

ها هو التصميم النهائي.

لإضافة تأثير التمرير الذي يحرك ظل الصندوق ، ارجع إلى إعدادات التصميم وقم بالمرور فوق الخيار "Box Shadow Horizontal Position". سترى أيقونة سهم منبثقة بجوار النص. انقر فوقه لفتح خيارات التمرير لهذا الإعداد المحدد.

ثم انقر فوق علامة التبويب التمرير وقم بتغيير القيمة إلى 13 بكسل.
سترى معاينة تأثير التمرير في المنشئ المرئي.

إليك ما يبدو عليه تأثير التمرير:

3. سحب زر علامة التبويب

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

لإنشاء الزر ، أولاً ، قم بإنشاء قسم جديد بصف من عمود واحد ثم قم بإضافة وحدة زر إلى الصف.

افتح إعدادات وحدة الزر وقم بتحديث نص الزر الموجود أسفل علامة تبويب المحتوى إلى ما تريد (سأستخدم النص "معرفة المزيد").

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

استخدام الأنماط المخصصة للزر: نعم
لون نص الزر: #ffffff
زر خلفية متدرجة اللون الأيسر: # 7D80DA
زر خلفية متدرجة اللون الأيمن: # 8EEDF7
اتجاه التدرج: 90 درجة
عرض حد الزر: 0 بكسل
نصف قطر حدود الزر: 10 بكسل
تباعد حرف الزر: 1 بكسل
خط الزر: Source Sans Pro
وزن الخط: عريض
نمط الخط: TT
رمز الزر: انظر لقطة الشاشة
لون رمز الزر: #ffffff
حشوة مخصصة: 1em يسار ، 2.5em يمين
Box Shadow: انظر لقطة الشاشة
مربع الظل الوضع الأفقي: -35 بكسل
مربع الظل الوضع الرأسي: 0 بكسل
لون الظل: # 7d80da

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

انتقل إلى علامة التبويب خيارات متقدمة وأدخل CSS التالي داخل مربع الإدخال بعد:

position: absolute;
right: 5%;

يستهدف CSS موقع الرمز ويمنحه موضعًا مطلقًا بنسبة 5٪ من الحافة اليمنى للزر.

تحقق من التصميم حتى الآن.

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

الحشو المخصص: 4em الحق

الآن دعنا نتحقق من النتيجة النهائية.

4. زر شعار الدائرة

بالنسبة للتصميم التالي ، سنقوم بتحويل رمز / صورة دائرة إلى زر قابل للنقر مع تأثير تمرير رائع يُظهر دعوة قصيرة للعمل.

لبدء الأمور ، أنشئ قسمًا جديدًا بصف عمود واحد وأضف وحدة زر إلى الصف.

ثم افتح إعدادات تصميم الزر. تحت علامة تبويب المحتوى ، أضف كلمة "Go" لنص الزر.

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

بمجرد إضافة صورة الخلفية ، تأكد من تعيين حجم صورة الخلفية على "الحجم الفعلي". سيضمن هذا احتفاظ الصورة بأبعادها الأصلية (118 بكسل × 118 بكسل).

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

width: 118px;
height: 118px;
line-height: 118px !important;
text-align: center;

لاحظ أن ملف css يعيّن العرض والارتفاع وارتفاع السطر جميعًا بنفس القيمة البالغة 118 بكسل. هذا هو نفس عرض وارتفاع صورتنا. الآن الصورة تناسب الزر تمامًا. يتم ضبط ارتفاع السطر على 118 بكسل بحيث يتم توسيط النص الموجود داخل الزر عموديًا داخل الزر (لم يتم توسيطه بشكل مثالي حتى الآن لأنه لا يزال هناك بعض الحشو الذي نحتاجه للتخلص من ذلك وهو التخلص منه). وتتأكد محاذاة النص: الوسط من بقاء النص الموجود داخل الزر في المنتصف حتى عندما تكون وحدة الزر محاذية لليسار أو لليمين.

الآن كل ما نحتاج إلى القيام به هو الانتهاء من بعض إعدادات التصميم التي ستكمل التصميم. انتقل إلى علامة تبويب التصميم وقم بتحديث ما يلي:

لون نص الزر (افتراضي): rgba (0،0،0،0)
لون نص الزر (تحوم): #ffffff

(هذا يخفي نص الزر بشكل افتراضي ويظهره باللون الأبيض عند التمرير)

لون الخلفية (افتراضي): # 121212
لون الخلفية (تحوم): # da00f2

(يُظهر هذا خلفية سوداء خلف الصورة بشكل افتراضي ثم لون خلفية وردي فاتح عند التمرير).

عرض حد الزر: 0 بكسل
نصف قطر الزر: 50٪ ؛

(سيؤدي ضبط نصف قطر الزر على 50٪ إلى تغيير الزر إلى شكل دائرة لأنه تم ضبط ارتفاع وعرض الزر على 118 بكسل في css المخصص.)

خط الزر: بوبينز
وزن الخط: عريض
نمط الخط: TT
إظهار رمز الزر: لا (سيؤدي وجود رمز الزر إلى التخلص من النص المركزي)
الحشو المخصص: 0 بكسل أعلى ، 0 بكسل أسفل

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

Box Shadow: انظر لقطة الشاشة
مربع الظل الوضع الرأسي: 0 بكسل
لون الظل (افتراضي): rgba (0،0،0،0)
لون الظل (تحوم): rgba (0،0،0،0.68)

(سيظهر هذا ظل مربع طفيفًا حول الدائرة عند التمرير للحصول على تأثير منبثق إضافي.)

هذا هو التصميم النهائي مع تأثير التمرير.

5. زر الوهج

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

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

الآن افتح إعدادات الزر.

يمكنك ترك نص الزر الافتراضي "انقر هنا". ثم قم بتحديث إعدادات التصميم التالية:

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

لون الخلفية متدرج للخلفية اليسرى: # 00ff8c
تدرج خلفية الزر اللون الأيمن: # 15c39a
نوع التدرج: شعاعي
اتجاه شعاعي: المركز
موضع النهاية: 75٪

(سيؤدي تعيين نوع التدرج اللوني إلى Radial إلى منح التدرج شكل دائرة يتمدد للخارج. تأكد من ظهور اللون الأفتح في منتصف التدرج لإنشاء تأثير التوهج.)

عرض حد الزر: 0 بكسل
نصف قطر حدود الزر: 100 بكسل
تباعد أحرف الأزرار (افتراضي): 4 بكسل
تباعد أحرف الأزرار (تحوم): 5 بكسل

(ستؤدي زيادة تباعد الأحرف عند التمرير إلى توسيع الزر بالكامل قليلاً للحصول على تأثير جميل)

وزن الخط: عريض للغاية
نمط الخط: I، TT
رمز الزر: السهم الأيمن (انظر لقطة الشاشة)
الحشو المخصص: 20 بكسل للأعلى ، 20 بكسل للأسفل ، 30 بكسل لليسار ، 50 بكسل لليمين

(أنت بحاجة إلى مزيد من المساحة المتروكة الصحيحة لحساب رمز زر السهم الأيمن)

Box Shadow: انظر لقطة الشاشة
مربع الظل الوضع الرأسي: 0 بكسل
Box Shadow Blur Strength (افتراضي): 64 بكسل
قوة Box Shadow Blur (تحوم): 100 بكسل
قوة انتشار الظل المربع: -12 بكسل
لون الظل: rgba (0،255،140،0.66)

(يضيف ظل الصندوق إلى تأثير التوهج عندما تطابق لون الظل مع لون الزر. ستؤدي زيادة قوة التمويه عند التمرير إلى تكبير توهج الزر)

تحقق من التصميم النهائي مع تأثير التمرير.

المزيد من إلهام الأزرار

للتعرف على مصدر إلهام لأنماط الأزرار ، تحقق من بعض هذه المقالات الأخرى:

• كيفية إنشاء زر خط الأيقونة باستخدام Divi
• صمم تخطيط Divi ملء الشاشة فريدًا مع زر تمرير متحرك
• كيف تصمم أزرار Monarch Social الخاصة بك لتتناسب مع تصميم موقعك
• 7 مفاتيح لإنشاء زر اشتراك لا يقاوم

افكار اخيرة

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

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

هتافات!