كيفية إنشاء أزرار خطوط الأيقونة باستخدام Divi

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

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

• كيفية استخدام Elegant Font لإضافة رمز كنص زر
• كيفية إضافة نصف قطر الحشو والحد الذي يضمن أن يتخذ الزر شكل مربع أو دائرة كاملة
• كيفية استبدال رمز الزر برمز مختلف عند التمرير
• كيفية وضع رمز زر لتداخل صورة
• و اكثر…

نظرة خاطفة

إليك نظرة سريعة على ما سيأتي ...

ماذا تحتاج

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

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

هيا بنا نبدأ!

إضافة خط الأيقونة الأنيق إلى وحدة الزر الخاصة بك

أضف وحدة زر

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

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

للحصول على Elegant Icon Font ، انتقل إلى Elegant Icon Font Blog Post وقم بتنزيل ملف الخط. قم باستخراج محتويات الملف المضغوط وابحث عن ملفات خطوط الأيقونات الأنيقة بالانتقال إلى Elegant_font> HTML CSS> الخطوط. ثم اسحب الملف “ElegantIcons.ttf” من ملف الكمبيوتر الخاص بك وقم بإفلاته في المنشئ المرئي.

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

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

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

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

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

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

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

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

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

margin-left: 0 !important;

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

إنشاء أزرار رمز دائرة تمامًا تتناسب مع حجم نص الزر

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

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

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

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

30 بكسل من المساحة المتروكة اليسرى + 30 بكسل من خط الأيقونة + 30 بكسل من المساحة المتروكة اليمنى = إجمالي 90 بكسل

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

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

وبالتالي…

19.5 بكسل من المساحة المتروكة العلوية + 51 بكسل لارتفاع الخط + 19.5 بكسل من المساحة المتروكة السفلية = إجمالي 90 بكسل

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

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

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

نصف قطر حد الزر: 50٪
الحشو المخصص: 0.65 سم علوي ، 0.65 سم سفلي ، 1 سم يمين ، 1 سم يسار

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

إضافة أزرار أيقونة إلى تخطيط Divi الخاص بك

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

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

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

إضافة زر رمز إلى صورة

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

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

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

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

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

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

خط الزر: خط أنيق
عرض حد الزر: 0 بكسل
إظهار رمز الزر: NO

ثم دعونا نضيف الحشو المخصص الأنيق الخاص بنا للتأكد من أن الزر مربع مثالي:

الحشو المخصص: 0.65 سم علوي ، 0.65 سم سفلي ، 1 سم يسار ، 1 سم يمين

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

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

الهامش المخصص: -60 بكسل للأعلى

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

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

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

في النافذة المنبثقة Extend Styles ، حدد "هذا القسم" للخيار طوال الوقت وانقر فوق الزر "توسيع". الآن كل الصور بها هامش سفلي قدره 0 بكسل.

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

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

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

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

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

فيما يلي لقطة شاشة للأحرف مع رمز الخط المقابل لها:

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

افكار اخيرة

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

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

لمزيد من الأفكار ، تحقق من كيفية استخدام Elegant Icon Font أو كيفية تضمين خط رمز على موقع الويب الخاص بك.

أود أن أطلع هنا على بعض الأفكار منك في التعليقات أدناه.

هتافات!