هل ترغب في معرفة كيفية استخدام وحدة Icon الخاصة بـ Divi لإنشاء رموز مخصصة؟
أصبحت أزرار الرموز عنصرًا أساسيًا في عالم تصميم الويب. توفر الرموز استدعاءات مرئية موجزة للعمل تعمل بشكل رائع للأجهزة المحمولة لأنها لا تشغل مساحة كبيرة. كما أنها تعمل بشكل جيد مثل أزرار التبديل أو النوافذ المنبثقة التي يتعرف عليها المستخدمون بشكل حدسي دون الحاجة إلى نص.
في البرنامج التعليمي اليوم ، سوف نوضح لك كيفية تصميم أزرار الرموز باستخدام Divi. قم بإنشاء زر رمز في Divi بسيط للغاية وممتع.
باستخدام وحدة الأيقونات، يمكننا الاختيار من بين مئات الأيقونات واستخدام عدد لا يحصى من خيارات التصميم المضمنة منها Divi Builder لإنشاء أي نوع من أزرار الأيقونات التي يمكنك التفكير فيها.
نأمل أن تساعدك هذه المقالة في البدء في إنشاء أزرار أيقونات مذهلة لمشروعك التالي.
دعونا نبدأ!
مسح
فيما يلي نظرة عامة سريعة على أزرار الرموز التي سننشئها في هذا البرنامج التعليمي.
قم بإنشاء صفحة جديدة باستخدام Divi Builder
أنظر أيضا: Divi: كيفية تخصيص السلة والبحث عن أيقونات وحدة "Fullwidth Menu"
من لوحة تحكم WordPress ، انتقل إلى الصفحات> إضافة جديد لإنشاء صفحة جديدة.
أعطه عنوانًا منطقيًا لك وانقر استخدم Divi Builder
ثم انقر فوق ابدأ البناء (البناء من الصفر)
بعد ذلك ، سيكون لديك لوحة قماش فارغة لبدء التصميم في Divi.
قم بإنشاء أزرار رمز باستخدام وحدة Divi Icons
الجزء 1: إنشاء زر رمز
للبدء ، دعنا نضيف صفًا من عمود واحد إلى القسم العادي الافتراضي.
ثم أضف وحدة جديدة رمز في العمود.
الرمز وعنوان URL للرابط ولون الخلفية
تحت علامة التبويب وصف المنتج إعدادات وحدة الرمز ، قم بتحديث ما يلي:
- الرمز: السهم الأيمن (انظر لقطة الشاشة)
- عنوان URL لارتباط الرمز: # (مجرد حشو الآن)
- الخلفية: # 3e22ff
نصف قطر الحدود والحدود
تحت علامة التبويب تصميم، قم بتحديث ما يلي:
- الزوايا الدائرية: 10 بكسل
- عرض الحدود: 2 بكسل
- لون الحدود: # 7272ff
صندوق الظل
- Box Shadow: انظر لقطة الشاشة
- لون الظل: rgba (62,34,255,0.48،XNUMX،XNUMX،XNUMX)
مطابقة المساحة القابلة للنقر مع حجم زر الأيقونة
حاليًا ، ستمتد وحدة الرمز على العرض الكامل للحاوية الرئيسية (أو العمود). هذا يعني أن المساحة القابلة للنقر أكبر من زر الرمز الفعلي.
لمطابقة المساحة القابلة للنقر مع حجم زر الأيقونة ، يمكننا إعطاء الوحدة عرضًا أقصى يساوي عرض زر الرمز.
في هذا المثال ، يبلغ إجمالي عرض الزر 94 بكسل.
ضمن علامة التبويب خيارات متقدمة ، أضف CSS المخصص التالي إلى العنصر الرئيسي:
max-width: 94px
ها هي النتيجة.
الجزء 2: إنشاء زر رمز مربع
لإنشاء زر رمز المربع الخاص بنا ، قم بتكرار الصف الذي يحتوي على زر الرمز الأول الذي أنشأناه للتو. سيعطينا هذا زرًا مكررًا في الصف للعمل معه.
امنح الرمز نفس الارتفاع والعرض مع إبقائه في المنتصف
تتضمن المجموعة الكبيرة من الرموز المتاحة للاستخدام في وحدة Icon كلاً من أيقونات Divi وأيقونات Fontawesome. ومع ذلك ، لن يكون لكل الرموز نفس الارتفاع والعرض. هذا يجعل الأمر أكثر صعوبة قليلاً لتحديد العرض الدقيق والارتفاع لزر الأيقونة.
من أجل إنشاء زر مربع تمامًا يشرك الرمز عند التمرير ، يمكننا إضافة CSS مخصص لتعيين ارتفاع وعرض الرمز بالإضافة إلى توسيط الرمز باستخدام خاصية CSS Flex.
إليك كيف.
أولاً ، افتح إعدادات الرمز المكرر. ثم قم بتحديث الرمز برمز جديد من منتقي الرموز.
قم بإزالة المساحة المتروكة من وحدة الرموز. لن يكون هذا ضروريًا لأننا سنقوم بتعيين ارتفاع وعرض للأيقونة.
ضمن علامة التبويب خيارات متقدمة ، أضف CSS المخصص التالي إلى عنصر الرمز :
height: 90px
width: 90px
display: flex;
align-items: center;
justify-content: center;
الآن سيكون لزر الأيقونة ارتفاع وعرض يساوي 90 بكسل ، مما يجعله مربعًا مثاليًا. أيضًا ، تقوم خاصية flex بمحاذاة الرمز الموجود في وسط الوحدة. يتيح لك ذلك تحديث حجم الرمز بسهولة في وحدة الرمز.
لإكمال هذا الزر ، دعنا نعطيه تدرجًا في الخلفية ولونًا أبيض للحدود على النحو التالي:
- توقفات متدرجة:
- 0٪: # 3e22ff
- 100٪: # ff2000
- لون الحدود: # fff
ها هي النتيجة النهائية.
زر إنشاء رمز دائري
بمجرد أن يصبح زر الرمز مربعًا مثاليًا ، يصبح دائريًا بسيطًا. ولكن قبل أن نظهر لك هذه الحيلة البسيطة ، دعنا نكرر السطر السابق لبدء إنشاء زر الرمز الدائري الخاص بنا.
الآن افتح الإعدادات الخاصة برمزنا المكرر الجديد وتحت علامة التبويب تصميم، قم بتحديث نصف قطر الحد (أو الزوايا الدائرية) كما يلي:
- زوايا دائرية: 50٪
وبهذه الطريقة ، لدينا زر رمز دائري!
لتغيير التصميم قليلاً ، دعنا نمنح وحدة الأيقونة رمزًا مختلفًا ولونًا للخلفية على النحو التالي:
- الرمز: انظر لقطة الشاشة
- الخلفية: # 121212
ها هي النتيجة.
إنشاء زر القائمة الأفقية رمز
يتمثل الاتجاه الشائع في استخدام الرموز لإنشاء قائمة رموز تتكون عادةً من عدة أزرار موضوعة جنبًا إلى جنب. للقيام بذلك ، يمكننا استخدام الخاصية flex.
إليك كيفية القيام بذلك.
أولاً ، أضف صفًا جديدًا إلى عمود في الصفحة.
افتح إعدادات الخط وقم بتحديث عرض الحضيض إلى 1.
- عرض الحضيض: 1
بعد ذلك ، افتح إعدادات العمود داخل الصف وأضف CSS المخصص التالي إلى عنصر العمود الرئيسي:
display:flex;
align-items:center;
أضف وحدة جديدة رمز في العمود.
تحت علامة التبويب وصف المنتج إعدادات الرمز ، حدد رمزًا وأضف عنوان URL لرابط الرمز.
تحت علامة التبويب تصميم، قم بتحديث ما يلي:
- لون الأيقونة: # 3e22ff
- حجم الرمز: 40 بكسل
- الهامش (يسار ويمين): 10 بكسل
- عرض الحدود: 2 بكسل
- لون الحدود: # 3e22ff
تعليق : سيخلق الهامش مساحة بين الأزرار المجاورة بمجرد أن نضيف المزيد لاحقًا.
تحت علامة التبويب متقدم، أضف CSS المخصص التالي في الحقل عنصر الرمز (كما فعلنا سابقًا لزر أيقونة المربع):
display: flex;
align-items: center;
justify-content: center;
height: 60px;
width: 60px;
الآن عندما نضيف أزرار رموز جديدة ، ستظهر جنبًا إلى جنب. لتوضيح ذلك ، دعنا نكرر زر الرمز الحالي ثلاث مرات لإنشاء إجمالي أربعة أزرار رمز في القائمة الأفقية.
بعد ذلك ، يمكننا العودة وتحديث الرموز حسب الحاجة.
ها هي النتيجة.
تمت إضافة تأثيرات التمرير إلى زر الرمز
من الصعب التحدث عن تصميم زر الأيقونة دون ذكر تأثيرات التمرير. هم مجرد متعة للغاية لتجاهلها.
تغيير لون الخلفية ولون الرمز عند التمرير
يعد تغيير ألوان الأزرار أحد تأثيرات التمرير الشائعة والفعالة. على سبيل المثال ، يمكننا تغيير لون الخلفية ولون الرمز في وقت واحد عندما يحوم المستخدم فوق الزر.
للقيام بذلك ، افتح إعدادات وحدة الرمز وقم بتمكين خيارات التمرير للون الخلفية واختر لونًا مختلفًا لحالة التمرير. ثم يمكنك أن تفعل الشيء نفسه بالنسبة للرمز.
في هذا المثال ، نقوم بتغيير لون الخلفية من الأبيض إلى الأزرق والأيقونة من الأزرق إلى الأبيض.
تغيير الرمز عند التمرير
تأثير التمرير الآخر الذي قد يعجبك هو تغيير الرمز تمامًا. للقيام بذلك ، يمكنك اختيار رمز مختلف لحالة التمرير عند اختيار رمز في إعدادات الرمز.
مقياس زر الرمز عند التمرير
تأثير التمرير الذي يصعب تجاهله هو تأثير التحويم المتدرج. يؤدي هذا إلى تكبير أو تكبير زر الرمز. أفضل طريقة لإضافة هذا النوع من تأثير التمرير هي استخدام خيارات تحويل Divi. سيسمح هذا للزر بالنمو دون التأثير على العناصر المحيطة به.
لإضافة تأثير تمرير مقياس إلى زر الرمز ، افتح إعدادات الرمز وتحت علامة التبويب تصميم، ابحث عن خيارات التحويل. قم بتمكين خيارات التمرير ، ثم قم بتعيين مقياس التحويل التالي إلى حالة التمرير:
- التحويل ص: 118٪
- تحويل X: 118٪
سيؤدي هذا إلى زيادة حجم زر الأيقونة بنسبة 18٪ عندما يقوم المستخدم بتمرير الماوس فوقه.
زر رمز التدوير على التمرير
تحوم الأجسام الدوارة دائمًا تفاعل جزئي ممتع. لتدوير زر رمز عند التمرير ، يمكننا استخدام خيار تدوير التحويل. ولكن قبل ذلك ، لنجعل الزر دائريًا بحيث يظهر الرمز فقط للدوران.
لجعل الرمز دائريًا ، بافتراض أن الزر مربع ، ما عليك سوى تحديث إعداد الزوايا الدائرية إلى 50٪ في جميع الزوايا الأربع.
ثم قم بتحديث خيارات التحويل لتضمين قيمة دوران التحويل التالية في حالة التمرير:
- استدارة تحويل Z: 180 درجة
دعنا نلقي نظرة على تأثيرات التمرير الأربعة أثناء العمل.
نتيجة نهائية
دعنا نلقي نظرة على النتائج النهائية لبرنامجنا التعليمي.
اقرأ أيضا: Divi: كيفية إبراز وحدة "Blurb" عند التمرير وطمس الآخرين
فيما يلي ثلاثة أزرار للأيقونات (قياسية ، ومربعة ، ودائرية).
وهنا قائمة زر الأيقونة الأفقية مع تأثيرات التمرير.
تحميل DIVI Now !!!
وفي الختام
تعرف على كيفية تصميم أزرار الرموز لـ موقع انترنت ضروري. وكما رأينا في هذا البرنامج التعليمي ، ليس الأمر بهذه الصعوبة مع Divi. تحتوي وحدة أيقونة Divi's على مجموعة من الخيارات المضمنة التي تفتح الباب أمام تصميمات أزرار الرموز الإبداعية.
نأمل أن تساعدك التقنيات الواردة في هذه المقالة في فتح بعض سحر تصميمات أزرار الأيقونات الخاصة بك.
إذا كانت لديك أية مخاوف أو اقتراحات ، فابحث عنا قسم التعليقات لمناقشته.
يمكنك أيضا استشارة مواردنا، إذا كنت بحاجة إلى مزيد من العناصر لتنفيذ مشاريعك الخاصة بإنشاء مواقع الإنترنت ، من خلال الرجوع إلى دليلنا على وورد خلق بلوق أو واحد على ديفي: أفضل موضوع وورد في كل العصور.
ولكن في هذه الأثناء ، شارك هذا المقال على الشبكات الاجتماعية المختلفة.
...
