🚀 استخدام Elementor لإنشاء تصميم تفاعلي للدروس

🚀 استخدام Elementor لإنشاء تصميم تفاعلي للدروس سيجعل التجربة أكثر احترافية وسهولة في التعديل دون الحاجة إلى الأكواد المعقدة.

لنبدأ ببناء هيكلة قوية لنظام الدروس داخل Elementor، بحيث يكون: ✔️ سهل الاستخدام للطلاب ✔️ مرن في التعديل لك ✔️ متجاوب مع جميع الأجهزة

✅ 1. إنشاء صفحة الدورة داخل Elementor

📌 انتقل إلى WordPress > “صفحات” > “إضافة جديد”، ثم:

1️⃣ قم بتسمية الصفحة: “الدورة التعليمية”

2️⃣ اضغط على “تحرير باستخدام

Elementor” 3️⃣ استخدم عنصر “الأزرار” أو “القوائم” لإنشاء قائمة الدروس

4️⃣ أضف محتوى الدرس داخل “أقسام” قابلة للعرض عند الضغط

✅ 2. استخدام “التفاعلات المتقدمة” داخل Elementor

📌 لتجعل الدروس أكثر ديناميكية، استخدم:

✔️ زر “ابدأ الدرس” مع تأثيرات انتقال

✔️ إظهار المحتوى عند النقر على زر الدرس

✔️ إضافة شريط تقدم لتحديد مدى تقدم الطالب

✅ 3. تحسين مظهر الدروس عبر CSS مخصص

📌 أضف هذا الكود داخل إعدادات Elementor > CSS مخصص:

css

.lesson-box {
    background: #f9f9f9;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 2px 4px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease-in-out;
}

.lesson-box:hover {
    transform: scale(1.05);
    background: #0073aa;
    color: white;
}

✔️ عند تمرير الماوس على الدروس، ستتحرك وتظهر بتأثير ديناميكي!