كل ما تحتاج لمعرفته حول وحدة قائمة أيقونة Divi 5

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

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

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

ما هي وحدة قائمة الأيقونة؟

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

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

الميزات الرئيسية

تحتوي وحدة قائمة الأيقونات على ميزات تجعلها إضافة رائعة إلى Divi 5. فيما يلي ميزاتها الرئيسية:

إنشاء قائمة سهلة

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

خيارات تخصيص واسعة النطاق

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

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

كيفية استخدام وحدة قائمة الأيقونة

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

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

في علامة تبويب المحتوى ، أدخل عنوانًا في حقل النص .

بعد ذلك ، قم بتوسيع علامة التبويب Icon Sropdown. هنا ، يمكنك الاختيار من بين مئات الرموز في مكتبة Divi. يمكنك البحث عن الرموز أو التمرير للعثور على الرموز التي ترغب في استخدامها.

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

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

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

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

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

بمجرد أن تقوم بتصميم عنصر قائمة الأيقونات الأولى ، يمكنك بسهولة نسخه وتغيير الأيقونة وتحديث النص.

إضافة مساحة بين عناصر قائمة الأيقونة

في القسم السابق ، أوضحنا كيفية إضافة عناصر قائمة الأيقونات. في هذا القسم ، سنراجع كيفية ضبط خصائص التخطيط باستخدام نظام تخطيط Flexbox Divi 5. كما ترون ، يمكننا استخدام مساحة صغيرة بين كل من عناصر قائمة الأيقونات الخاصة بنا.

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

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

إعدادات التصميم العالمي لجميع عناصر قائمة الأيقونات

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

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

أمثلة عملية باستخدام وحدة قائمة الأيقونة

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

مدونات السفر

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

ميزات على موقع الأعمال

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

دليل العملية خطوة بخطوة

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

صفحات متجر التجارة الإلكترونية

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

قم بتنزيل الملفات

تنزيل مجانًا

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

تحميل

لقد اشتركت بنجاح. يرجى التحقق من عنوان بريدك الإلكتروني لتأكيد اشتراكك والوصول إلى حزم تخطيط Divi الأسبوعية المجانية!

استخدم وحدة قائمة الأيقونة في Divi 5

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

هل أنت مستعد لتجربته؟ قم بتنزيل أحدث Divi 5 Public Alpha اليوم واستكشف وحدة قائمة الأيقونات بنفسك. ترقبوا المزيد من تحديثات Divi 5 أثناء طرح ميزات جديدة.