خطوة بخطوة: كيفية استخدام Flatsome UX Builder لتقسيم الدورة التدريبية باستخدام الأيقونات

  1. منشئ تجربة المستخدم المفتوح:
    • انتقل إلى الصفحة التي تريد إضافة تفاصيل المقرر الدراسي فيها.
    • انقر على "تحرير باستخدام أداة إنشاء تجربة المستخدم" لبدء تخصيص الصفحة.
  2. إضافة قسم جديد:
    • أدرج قسمًا جديدًا بالنقر على "+ إضافة عناصر".
    • اختر "صف" للبدء بتخطيط منظم.
  3. إدراج أعمدة للوحدات النمطية:
    • داخل الصف، أضف أعمدة بناءً على عدد الوحدات النمطية التي تريد عرضها في كل صف (على سبيل المثال، عمود واحد لكل وحدة نمطية للتوضيح).
    • انقر على "+ إضافة عناصر" داخل كل عمود.
  4. إضافة أيقونات:
    • اختر "أيقونة" من قائمة العناصر. يتيح لك Flatsome البحث من خلال أيقونات مختلفة أو تحميل أيقونات مخصصة.
    • اضبط حجم الأيقونة ولونها ومحاذاتها حسب الحاجة.
  5. إضافة نص لأوصاف الوحدة النمطية:
    • بعد الأيقونة، أضف عنصر "نص".
    • اكتب عنوان الوحدة النمطية ووصفها. استخدم أدوات التنسيق لتنسيق النص (على سبيل المثال، بخط عريض للعناوين).
  6. تصميم القسم:
    • قم بتخصيص الخلفية والهوامش والهوامش والبطانات الخاصة بالمقطع والأعمدة لتتماشى مع تصميم موقعك.
    • يمكنك استخدام ألوان الخلفية أو الصور لتمييز أقسام الوحدة النمطية بصريًا.
  7. إضافة تفاعل تفاعلي (اختياري):
    • استخدم عناصر "الأكورديون" أو "علامات التبويب" لجعل أوصاف الوحدة النمطية قابلة للطي أو مبوبة. هذا مفيد إذا كان لديك محتوى شامل لكل وحدة نمطية وتريد الحفاظ على نظافة الصفحة.
    • ضع محتوى كل وحدة نمطية داخل أكورديون أو علامة تبويب للحصول على تجربة مدمجة وسهلة الاستخدام.
  8. المعاينة والضبط:
    • استخدم وظيفة المعاينة في UX Builder لمعرفة كيف تبدو العناصر على الموقع.
    • اضبط المحاذاة أو المسافات أو الأنماط بناءً على المعاينة للتأكد من أن كل شيء يبدو مثاليًا.
  9. الحفظ والنشر:
    • بمجرد الرضا عن التخطيط والتصميم، انقر على "تطبيق" و"نشر" لجعل التغييرات مباشرة.

مثال على بنية HTML مع أيقونات

إذا كنت لا تزال بحاجة إلى HTML الخام لأي سبب من الأسباب، فإليك كيفية إضافة الأيقونات باستخدام HTML و CSS:

رمز نسخ htmlCopy<div class="course-module">
    <div class="icon-container">
        <img src="path/to/your/icon.png" alt="وصف الأيقونة">
    </div>
    <div class="content">
        <h2>عنوان الوحدة</h2>
        <p>وصف الوحدة.</p>
    </div>
</div>
رمز نسخ cssCopy

وحدة العرق {
العرض: مرن;
محاذاة العناصر: ابدأ;
الحشو: 10 بكسل;
لون الخلفية: #F0f0f0f0;
الهامش السفلي: 10 بكسل;
}

.أيقونة-حاوية-أيقونة {
الهامش لليمين: 15 بكسل;
}

.icon-container-container img {
العرض: 40 بكسل؛ /* تعيين الحجم المفضل لديك *//
}

.المحتوى h2 {
أعلى الهامش: 0;
}

باستخدام أداة إنشاء تجربة المستخدم من Flatsome's UX Builder، ستتمكن من إنشاء تقسيم أكثر جاذبية وتفاعلية للدورة التدريبية يتناسب تمامًا مع بقية تصميم موقعك ويحسن تجربة المستخدم.

تم نشر هذا الإدخال في Tutorials. ضع إشارة مرجعية على permalink.

أضف تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *

ary