إنشاء تصميمات فريدة لزر Divi باستخدام وحدة نصية

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

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

هيا بنا نبدأ!

نظرة خاطفة

فيما يلي بعض الأمثلة على تصميمات الأزرار التي سننشئها بسهولة باستخدام وحدة النص.

هذا زر به نص على سطرين ...

هذا زر يستخدم عنصر قائمة ...

هذا زر يستخدم الزوايا الإبداعية ...

إنشاء تصميمات فريدة لزر Divi باستخدام وحدة نصية

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

# 1 إنشاء زر بأسطر نص متعددة

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

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

فيما يلي مثال سريع على كيفية إعداد وحدة النص كزر به عدة أسطر من النص.

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

لمحتوى النص ، استخدم علامة التبويب html وأدخل ما يلي:

<h3>Contact Us</h3>
<h4>WE CAN HELP</h4>

هناك الكثير من أنماط الخلفية المختلفة التي يمكننا إضافتها إلى الوحدة النمطية الخاصة بنا ، ولكن في هذا المثال ، نضيف خلفية متدرجة بسيطة:

اللون الأيسر متدرج للخلفية: # FEE140
تدرج الخلفية اللون الصحيح: # FA709A

ثم انتقل إلى علامة تبويب التصميم واستخدم واجهة مستخدم علامة تبويب العنوان لتصميم علامات العنوان h3 و h4 على النحو التالي:

وزن خط العنوان 3: غامق للغاية
نمط خط العنوان 3: TT
لون نص العنوان 3: #ffffff
نمط خط العنوان 4: TT
لون نص العنوان 4: #ffffff
حجم نص العنوان 4: 16 بكسل

الآن كل ما نحتاج إلى القيام به هو تغيير حجم وحدة النص لتبدو وكأنها زر. للقيام بذلك تحديث ما يلي:

العرض: 230 بكسل
الحشوة المخصصة: 1em علوي ، 0.5 مللي متر أسفل ، 2em يسار ، 2em يمين

منذ إصدار خيارات التمرير الجديدة لـ Divi ، يمكن أن تصبح جميع الوحدات قابلة للنقر تمامًا مثل الزر. للقيام بذلك ، ارجع إلى علامة تبويب المحتوى وأدخل عنوان url لرابط الوحدة النمطية.

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

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

للقيام بذلك ، افتح إعدادات وحدة النص وقم بتحديث ما يلي:

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

هذا ما يبدو عليه عند المرور فوق.

# 2 إنشاء زر عنصر قائمة

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

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

ثم أضف html التالي في علامة تبويب النص لإعدادات المحتوى الخاصة بك:

<ol><li><h3>Contact Us</h3></li></ol>

من المهم التفاف نص عنصر القائمة في علامة عنوان حتى نتمكن من تصميم رمز / رقم عنصر القائمة بشكل منفصل عن النص.

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

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

خط القائمة المطلوبة: Exo 2
وزن خط القائمة المطلوبة: خفيف
لون نص القائمة المطلوبة: # 000000
حجم نص القائمة المطلوبة: 20 بكسل
قائمة تباعد الأحرف المطلوبة: 5 بكسل
نوع نمط القائمة المرتبة: بادئة عشرية بصفر
موضع نمط القائمة المطلوبة: خارجي
المسافة البادئة لعنصر القائمة المطلوبة: 2em

ضمن فئة نص العنوان ، انقر فوق علامة التبويب H3 وقم بتحديث ما يلي:

خط العنوان 3: Exo 2
وزن خط العنوان 3: شبه عريض
نمط خط العنوان 3: TT
لون نص العنوان 3: # 0c71c3
حجم نص العنوان 3: 26 بكسل
ارتفاع سطر العنوان 3: 0.3em

بعد ذلك ، قم بتغيير عرض الوحدة ومنحها حدًا والتباعد الذي تريده يبدو كزر:

العرض (الوحدة النمطية): 262 بكسل
محاذاة الوحدة: مركز
الحشو المخصص: 2em أعلى ، 0 بكسل أسفل ، 2em يسار ، 2em يمين
الزوايا الدائرية: 10 بكسل 2em
عرض الحدود: 1 بكسل
لون الحد: # 000000
نمط الحدود: صلبة

ولا تنس إضافة رابط إلى وحدتك إلى عنوان URL المعين الذي تختاره.

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

لا تتردد في استكشاف أنواع أنماط القائمة الجديدة (مثل Upper Roman) للحصول على تصميمات فريدة لأزرار القائمة.

# 3 إنشاء زر بزوايا إبداعية (مثل ورقة)

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

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

افتح إعدادات وحدة النص وأدخل html التالي في علامة تبويب النص في مربع المحتوى:

<h3>grow</h3>
<h4>with us</h4>

يتيح لنا ذلك وضع نص الزر على سطرين (مع تقليل العرض الرأسي) وتصميمهما بشكل مستقل.

بعد ذلك ، أضف خلفية متدرجة مع لون "شبيه بأوراق الشجر".

اللون الأيسر لتدرج الخلفية: # 7cda24
لون الخلفية التدرج الصحيح: # 26e051
اتجاه التدرج: 90 درجة

الآن دعنا ننتقل إلى إعدادات التصميم لتوسيط النص الخاص بنا وتصميم علامات العنوان. ستحتاج إلى تحديد علامة التبويب h3 لتصميم عنوان h3 وتحديد علامة التبويب h4 لتصميم عنوان h4:

اتجاه النص: الوسط
العنوان 3 الخط: أوزوالد
وزن خط العنوان 3: خفيف
نمط خط العنوان 3: TT
لون نص العنوان 3: #ffffff
حجم نص العنوان 3: 27 بكسل
العنوان 4 الخط: أوزوالد
نمط خط العنوان 4: TT
لون نص العنوان 4: #ffffff

استمر في تحديث التصميم لمنح وحدة النص الخاصة بك العرض والتباعد المناسبين للزر.

العرض: 178 بكسل
محاذاة الوحدة: مركز
حشوة مخصصة: 2em أعلى ، 2em أسفل ، 1em يسار ، 1em يمين

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

قم أولاً بإلغاء قفل خيار الزاوية المستديرة حتى تتمكن من تعيين قيم فردية لكل زاوية.

الزاوية اليسرى العلوية: 100 بكسل
الزاوية اليمنى السفلية: 100 بكسل

ثم أضف ظل مربع ...

Box Shadow: انظر لقطة الشاشة
مربع الظل الأفقي: 25 بكسل
مربع الظل الرأسي: -4 بكسل
قوة انتشار الظل المربع: -12 بكسل
لون الظل: rgba (0،0،0،0.25)

لا تنس إضافة عنوان URL لرابط الوحدة النمطية الخاص بك بحيث ترتبط الوحدة النمطية الخاصة بك بالموقع المطلوب.

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

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

وهذا ما يبدو عليه تأثير التمرير.

افكار اخيرة

من الجيد دائمًا التفكير خارج الصندوق بين الحين والآخر عندما يتعلق الأمر بتصميم مواقع الويب باستخدام Divi. نأمل أن يساعد هذا البرنامج التعليمي جيدًا في التفكير في تصميمات أزرار divi الجديدة والإبداعية باستخدام وحدة النص. في الواقع ، أود أن أقترح استكشاف وحدات أخرى (مثل Blurb Module) لمزيد من خيارات التصميم.

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

هتافات!