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

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

تتضمن بعض النقاط البارزة في هذا البرنامج التعليمي ما يلي:

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

مسح

إليك معاينة لما سيحدث ...

ماذا تريد؟

بالنسبة لهذا البرنامج التعليمي ، سأستخدم ما يلي:

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

لنبدأ!

أضف الخط Elegant Icons إلى وحدة الأزرار الخاصة بك

إضافة وحدة زر

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

اسحب خط أيقونة أنيق

للحصول على لعبة اللون ElegantFontsيمكنك تحميل هذه حزمة الخط عبر هذا الرابط. قم باستخراج محتويات ملف zip وحدد موقع ملفات الخط الأنيق من خلال الانتقال إلى elegant_font > HTML CSS > class. ثم اسحب الملف "ElegantIcons.ttf" إلى جهاز الكمبيوتر الخاص بك وأسقطه في المولد المرئي.

سيؤدي ذلك إلى إظهار صيغة الخط "التنزيل تلقائيًا". ما عليك سوى النقر فوق زر التنزيل لتنزيل الخط إلى Divi Builder.

الآن ستتمكن من الوصول إلى خط الأيقونة الأنيق عند تخصيص خط تعديل في المنشئ المرئي.

انتقل إلى إعدادات وحدة الزر وقم بتحديث خط الزر بخط Elegant Icon الجديد الذي قمت بتنزيله للتو. سيظهر في قائمة الرموز تحت "Custom Fonts".

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

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

أيقونات زر التبادل عند التمرير

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

حجم نص الزر: 30 بكسل رمز الزر: انظر لقطة الشاشة (ستكون هذه هي الأيقونة التي ستحل محل رمز الخط المستخدم للزر) لون زر الرمز: # 0c71c3 (والذي يجب أن يتطابق مع اللون المستخدم لنص الزر ) موضع رمز الزر: لون نص تمرير الزر الأيسر: rgba (255,255,255,0،1) (هذا شفاف تمامًا لإخفاء خط رمز زر التمرير). تعبئة مخصصة: أول يسار ، أول يمين (ستحل هذه التعبئة محل التوسيع أثناء التمرير)

كل ما علينا فعله الآن هو استبدال الهامش الخاص بالعنصر الأمامي في css المخصص. انتقل إلى علامة التبويب خيارات متقدمة وأدخل رمز CSS التالي في المربع الأمامي:

الآن سيتم استبدال رمز الزر الخاص بك برمز التمرير فوق الرمز.

أزرار رمز إبداعية مع دائرة بحجم نص الزر

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

الحيلة هي أن تباعد الزر باستخدام وحدة الطول "em". وحدة الطول هذه مرتبطة بحجم النص الموجود على الزر الخاص بك. لذلك إذا كان حجم نص الزر 30 بكسل ، فإن 1em يكون أيضًا 30 بكسل (2em سيكون 60 بكسل وهكذا ...). بمعرفة ذلك ، نحتاج فقط إلى التأكد من أن الحشو الخاص بنا حول الزر سيكون هو نفسه في جميع الجوانب الأربعة. ولكن ما لم تفكر فيه هو أن ارتفاع سطر نص الزر هو 4em افتراضيًا. هذا يعني أنه يتعين علينا أخذ ذلك في الاعتبار عندما نضيف قيم الحشو العلوية والسفلية.

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

للتعبئة اليسرى واليمنى ، اضبط كلاهما على 1em. هذا يعني أن العرض الإجمالي للزر الخاص بك سيكون 90 بكسل (أو 3em) لأن ...

الحشو 30px لليسار + 30px للرمز font + 30px الحشو لليمين = إجمالي 90px

يبلغ ارتفاع سطر نص الزر 1.7em ، وهو ما يعادل 170٪ من حجم نص الزر (30 بكسل) وهو 51 بكسل.

بالنسبة للحشو العلوي والسفلي ، اضبط كلاهما على 0,65em. 0.65em يعادل 65٪ من حجم نص الزر (30 بكسل) ، وهو ما يعادل 19.5 بكسل.

لذلك ...

الحشو العلوي 19.5px + ارتفاع خط 51px + الحشو السفلي 19.5px = إجمالي 90px

هذا يعني أنه عند تعيين نص الزر على 30 بكسل ، سيكون الحجم الإجمالي للزر 90 بكسل × 90 بكسل (مربع كامل). في الواقع ، يمكنك التفكير في الأمر بهذه الطريقة. بغض النظر عن حجم نص الزر ، يبلغ الحجم الإجمالي للزر 3 أضعاف القيمة. لذلك ، سينشئ نص الزر 40 بكسل زر 120 بكسل × 120 بكسل ، إلخ.

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

إليك ما تحتاج إلى تغيير الزر إلى زر دائرة:

زر الشعاع الحدودي: 50٪
تنجيد مخصص: 0.65em Top ، 0.65em Bottom ، 1em Straight ، 1em Left

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

إضافة أزرار على ديفي

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

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

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

إضافة زر أيقونة إلى صورة

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

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

ثم افتح إعدادات الأزرار وضع حرف "P" في مربع نص الزر. سيتغير هذا في الرمز الخاص بنا بمجرد تحديد مجموعات الخلفية الرائعة مثل خط الزر.

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

الآن ، انقر بزر الماوس الأيمن على الوحدة التي أضفتها أسفل الصورة وحدد "نمط زر اللصق".

ثم قم بتحديث إعدادات الزر كما يلي:

زر الخط: رائع الخط
زر الخط عرض الحدود: 0 بكسل
إظهار رمز الزر: NO

ثم قم بإضافة حشوة مخصصة ذكية بحيث يكون الزر مربعًا مثاليًا:

حشوة مخصصة: 0.65em Top و 0.65em Bottom و 1em Left و 1em Right

لوضع الزر بحيث يغطي الركن الأيمن السفلي من الصورة ، يجب عليك أولاً إزالة الهامش السفلي من وحدة الصورة أعلاه. افتح إعدادات Image Image Module أعلى الزر مباشرةً واضبط الهامش السفلي على 0 بكسل.

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

كما ذكرنا سابقًا في هذه المقالة ، مع التعبئة المخصصة في المكان ، يمكننا معرفة الحجم الدقيق للزر بناءً على الحجم الحالي لنص الزر. نظرًا لأن حجم نص الزر هو 20 بكسل ، فإننا نعلم أن ارتفاع الزر لدينا هو 3em (3 أضعاف حجم نص الزر) ، وهو 60 بكسل. لذلك ، نحتاج إلى تعيين هامش مخصص لزرنا على النحو التالي:

الهامش المخصص: -60px الأعلى

وبعد ذلك يمكننا وضع زرنا على اليمين عن طريق ضبط محاذاة الزر على اليمين.

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

نظرًا لأننا أزلنا الهامش السفلي للصورة ، يمكننا بسهولة تطبيق هذا التغيير على جميع الصور في القسم باستخدام خيار Extend Styles. انقر بزر الماوس الأيمن على الصورة وحدد "تمديد أنماط الصورة".

في مربع الحوار Extend Styles ، حدد "This Section" للخيار Across وانقر فوق الزر Expand. الآن جميع الصور بها هامش سفلي 0 بكسل.

الخطوة الأخيرة هي ببساطة نسخ وحدات الزر ولصقها أسفل كل صورة.

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

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

الرموز المتاحة باستخدام وحدة الزر

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

إليك لقطة شاشة للشخصيات مع رمز الخط المقابل لها:

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

الأفكار النهائية

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

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