في هذا الدليل، سنستعرض أربعة من العناصر (Widgets) الرئيسية الأخرى: الأيقونة (Icon)، السلايدر (Slider)، آراء العملاء (Testimonials)، صندوق المعلومات (Info Box)، والفيديو (Video). سيغطي كل قسم الغرض من العنصر، وكيفية إضافته إلى الصفحة، وخيارات التخصيص الأساسية. لنبدأ!
1. عنصر الأيقونة (Icon Widget) #
الغرض #
يتيح لك عنصر الأيقونة إضافة أيقونات صغيرة وأنيقة إلى صفحاتك. وهو مثالي لإبراز الميزات، أو إضافة إشارات بصرية، أو تزيين القوائم—مثل عرض علامة صح للمزايا أو أيقونة هاتف لمعلومات الاتصال.
كيفية إضافته #
- افتح محرر الكتل في ووردبريس للصفحة أو المقال الذي تقوم بتعديله.
- انقر على زر “+” لفتح مُدرِج الكتل.
- اكتب “Icon” في شريط البحث.
- اختر كتلة Spectra Icon لإضافتها.
خيارات التخصيص #
بعد إضافة كتلة الأيقونة، يمكنك تخصيصها من خلال الشريط الجانبي:
- اختيار الأيقونة: اختر من مكتبة الأيقونات (مثل Font Awesome أو الخيارات المدمجة في Spectra).
- الحجم: قم بتعديل حجم الأيقونة ليتناسب مع التصميم.
- اللون: غيّر لون الأيقونة ليتماشى مع الهوية البصرية.
- المحاذاة: ضع الأيقونة يسارًا أو في المنتصف أو يمينًا.
نصيحة: استخدم عنصر الأيقونة مع النص لإنشاء قوائم ميزات جذابة بصريًا.
2. عنصر السلايدر (Slider Widget) #
الغرض #
يتيح لك عنصر السلايدر عرض مجموعة من الصور أو المحتوى بشكل متحرك، وهو مثالي لعرض الأعمال، أو صور المنتجات، أو العروض الترويجية. يضيف عنصرًا تفاعليًا وديناميكيًا إلى موقعك.
كيفية إضافته #
- في محرر الكتل، انقر على زر “+”.
- ابحث عن “Slider”.
- اختر كتلة Spectra Slider.
- أضف شرائح (Slides) من خلال رفع الصور أو إدراج محتوى داخل السلايدر.
خيارات التخصيص #
يمكنك تخصيص السلايدر باستخدام الإعدادات التالية:
- الشرائح: إضافة أو حذف الشرائح وإعادة ترتيبها.
- التنقل: تفعيل الأسهم أو النقاط للتنقل بين الشرائح.
- التشغيل التلقائي: ضبط السلايدر ليعمل تلقائيًا مع التحكم في السرعة.
- الارتفاع والعرض: التحكم في أبعاد السلايدر.
نصيحة: اجعل محتوى الشرائح بسيطًا (مثل صورة مع نص قصير) للحصول على أفضل تجربة مستخدم.
3. عنصر آراء العملاء (Testimonials Widget) #
الغرض #
تم تصميم عنصر آراء العملاء لعرض تقييمات أو آراء العملاء، مما يساعد على بناء الثقة والمصداقية. وهو مثالي لمواقع الأعمال أو المعارض.
كيفية إضافته #
- انقر على زر “+” في محرر الكتل.
- ابحث عن “Testimonials”.
- اختر كتلة Spectra Testimonials.
- أضف رأيًا من خلال إدخال النص واسم العميل وصورته (اختياري).
خيارات التخصيص #
يمكنك تعديل عنصر آراء العملاء من خلال:
- التخطيط: عرض رأي واحد أو عدة آراء بشكل سلايدر.
- المحتوى: تعديل نص الرأي واسم العميل ووصفه.
- الصورة: إضافة صورة شخصية أو شعار.
- التصميم: تخصيص الألوان والخطوط والمسافات.
نصيحة: استخدم آراء حقيقية وصورًا واقعية (بإذن أصحابها) لزيادة التأثير.
4. عنصر صندوق المعلومات (Info Box Widget) #
الغرض #
يجمع عنصر صندوق المعلومات بين النصوص والأيقونات والأزرار في كتلة واحدة، مما يجعله مثاليًا لعرض المعلومات المهمة مثل الخدمات أو الميزات بطريقة جذابة.
كيفية إضافته #
- في محرر الكتل، انقر على زر “+”.
- اكتب “Info Box” في البحث.
- اختر كتلة Spectra Info Box.
- أضف العنوان والوصف وزر أو أيقونة (اختياري).
خيارات التخصيص #
يمكنك تخصيص صندوق المعلومات من خلال:
- الأيقونة أو الصورة: إضافة أيقونة أو صورة أعلى العنوان.
- النص: تعديل العنوان والوصف.
- الزر: إضافة زر دعوة لاتخاذ إجراء مع رابط وتصميم.
- الخلفية والحدود: تحديد لون الخلفية أو إضافة حدود.
نصيحة: استخدم عدة صناديق معلومات بجانب بعضها لإنشاء قسم منظم وجذاب.
5. كيفية استخدام عنصر الفيديو #
يتيح لك عنصر الفيديو تضمين مقاطع فيديو من منصات مثل YouTube أو Vimeo، أو رفع فيديو خاص بك، مما يعزز المحتوى التفاعلي في موقعك.
خطوات استخدام عنصر الفيديو #
- إضافة عنصر الفيديو: انقر على + وابحث عن Video ثم اختره.
- اختيار مصدر الفيديو:
- رابط مباشر: الصق رابط YouTube أو Vimeo.
- رفع فيديو: اختر ملف فيديو من جهازك.
- تخصيص مشغل الفيديو:
- التشغيل التلقائي: تفعيل أو تعطيل التشغيل التلقائي.
- عناصر التحكم: إظهار أو إخفاء أزرار التشغيل.
- نسبة العرض إلى الارتفاع: ضبط أبعاد الفيديو.
- إضافة وصف (اختياري): كتابة وصف أسفل الفيديو.
- حفظ التغييرات: انقر على تحديث.
مثال على الاستخدام #
- صفحة تعليمية: تضمين فيديو من YouTube لشرح الخطوات للمستخدمين.
نصيحة: قم بتحسين حجم الفيديوهات المرفوعة لتجنب بطء التحميل، ويفضل استخدام YouTube للأداء الأفضل.
استمر في استكشاف Spectra Builder #
تُعد هذه العناصر—الأيقونة، السلايدر، آراء العملاء، وصندوق المعلومات—جزءًا بسيطًا مما يقدمه Spectra Builder. مع وجود العديد من الكتل الأخرى مثل النماذج والمعارض والعدادات، يمكنك استكشاف الأدوات المناسبة لموقعك. لاكتشاف المزيد، تصفح مُدرِج الكتل أو استخدم القوالب الجاهزة للإلهام.
تصميم موفق!
