يقوم شريط تمرير المعرض بإقران صورة معاينة كبيرة مع مجموعة من الصور المصغرة القابلة للنقر عليها، بحيث يمكن للزوار الانتقال مباشرة إلى الصورة التي يريدونها بدلاً من النقر فوق شريحة واحدة في كل مرة. ال معرض القطعة المنزلق في ماستر أدونز برو يبني هذا التخطيط في بضع دقائق. يمكنك اختيار الصور واختيار شبكة مصغرة أو دائري وتصميم كل جزء من لوحة Elementor.
يمر هذا الدليل عبر كل إعداد، حتى تتمكن من بناء منزلق معرض العنصر دون تخمين ما يفعله كل عنصر تحكم.
ما تفعله أداة Gallery Slider #
تعرض الأداة شريحة معاينة كبيرة بجوار شبكة أو دائرة من الصور المصغرة. يؤدي النقر فوق الصورة المصغرة أو السهم إلى تغيير المعاينة. تم تضمين التسميات التوضيحية أو التشغيل التلقائي أو الحلقة اللانهائية أو التلاشي أو انتقالات الشرائح وحالات التمرير المنفصلة للمعاينة والصور المصغرة. فهو يناسب المحافظ أو صور المنتجات أو قوائم العقارات أو ألبومات الأحداث أو أي صفحة يحتاج الزوار فيها إلى تصفح مجموعة من الصور بسرعة.
قبل أن تبدأ #
- ووردبريس مع العنصر مثبتة ونشطة.
- الإضافات الرئيسية للعنصر مثبتة ونشطة. بحاجة الى مساعدة؟ انظر دليل التثبيت.
- أ ماستر أدونز برو الترخيص، لأن Gallery Slider هو عنصر واجهة مستخدم احترافي.
- مجموعة من الصور التي تم تحميلها إلى مكتبة الوسائط الخاصة بك، ومن الأفضل أن تكون بنسب عرض إلى ارتفاع مماثلة.
كيفية إضافة عنصر واجهة مستخدم Elementor Gallery Slider #
افتح محرر Elementor وابحث عنه معرض المنزلق في لوحة العناصر، أو قم بالتمرير لأسفل إلى قسم الإضافات الرئيسية. تحمل كل أداة من عناصر واجهة المستخدم الخاصة بـ Master Addons شارة MA صغيرة، مما يساعدك عند تثبيت العديد من حزم الإضافات. اسحب الأداة إلى القسم الخاص بك.
إضافة صور في علامة التبويب المحتوى #
صالة عرض #
تبدأ الأداة فارغة. في ال محتوى علامة التبويب، افتح صالة عرض القسم وانقر فوق الزر الزائد أدناه إضافة صور.
تفتح نافذة وسائط WordPress على إنشاء معرض شاشة. حدد الصور التي تريدها في شريط التمرير، ثم انقر لإدراج المعرض. خذ دقيقة هنا لملء النص البديل والتعليقات التوضيحية لكل صورة. يعد حقل التسمية التوضيحية أكثر أهمية مما يبدو: يمكن لعنصر واجهة المستخدم طباعته أسفل صورة المعاينة لاحقًا، وإذا كان التعليق مفقودًا في الواجهة الأمامية، فهذه الشاشة هي أول مكان يجب التحقق منه.
بعد إدخال المعرض، يعرض المحرر التخطيط الكامل على الفور: المعاينة الكبيرة على اليسار مع أسهم التنقل، وشبكة الصور المصغرة على اليمين. تظهر الصور المحددة أيضًا داخل قسم المعرض، حيث يمكنك إعادة ترتيبها أو إزالتها.
الصور المصغرة #
ال الصور المصغرة يتحكم القسم في الصور الصغيرة بجانب المعاينة.
- الصور المصغرة: إظهار أو إخفاء منطقة الصورة المصغرة بالكامل.
- دائري / الشبكة: قم بالتبديل بين الشبكة الثابتة والدوامة المتحركة.
- دقة الصورة: الحجم الذي يستخدمه WordPress للصور المصغرة. الصورة المصغرة (150 x 150) تحافظ على إضاءة الصفحة.
- الأعمدة: اختر من 1 إلى 12 عمودًا للشبكة. يؤدي الانتقال من 2 إلى 3 أعمدة إلى تغيير الشبكة من كتلة طويلة وضيقة إلى كتلة أكثر إحكامًا.
- طلب: احتفظ بالترتيب الافتراضي أو قم بخلط الصور عشوائيًا.
- تسمية توضيحية: إظهار تعليق على الصور المصغرة، أو تركه في لا شيء.
التحول إلى دائري يستبدل الوضع الشبكة بشريط من الصور المصغرة ويضيف مجموعة الإعدادات الخاصة به توجه (أفقي أو رأسي)، الشرائح لكل عرض، أ السهام تبديل مع موضع السهم إسقاط، زائد التشغيل التلقائي, حلقة لا نهائية، و اتجاه عناصر التحكم فقط لشريط الصور المصغرة. تعمل الشبكة بشكل أفضل مع عشرات الصور أو أقل؛ بعد ذلك، يوفر الكاروسيل الكثير من المساحة الرأسية.
معاينة #
ال معاينة يدير القسم الشريحة الكبيرة وكيف تتصرف.
- دقة الصورة: الحجم المقدم للصورة الكبيرة. يبدو الشكل الكامل هو الأفضل ولكنه يزن أكثر، لذا قم بضغط النسخ الأصلية.
- رابط إلى: قم بربط صورة المعاينة بعنوان URL أو ملف الوسائط، أو احتفظ بها في لا شيء. يتيح لك الارتباط بملف الوسائط تشغيل الصندوق الضوئي.
- تسمية توضيحية: عرض التسمية التوضيحية للصورة أسفل المعاينة.
- اتجاه: انزلق من اليسار إلى اليمين أو من اليمين إلى اليسار.
- حلقة لا نهائية: العودة إلى الشريحة الأولى بعد الشريحة الأخيرة.
- الارتفاع التلقائي: دع شريط التمرير يضبط ارتفاعه حسب كل صورة. مفيد للنسب المختلطة، على الرغم من أن الصفحة ستتغير قليلاً مع تغير الشرائح.
- التشغيل التلقائي: تقدم الشرائح تلقائيا. انقر فوق أيقونة التحرير لضبطها.
- تأثير: الشريحة، التلاشي، المكعب، الوجه أو تدفق الغطاء. مع التلاشي، أ كين بيرنز يضيف الخيار تكبيرًا بطيئًا مع الحجم وأصل التحويل والمدة والتيسير.
- السرعة (مللي ثانية): كم من الوقت يستمر الانتقال. الافتراضي هو 1000.
- السهام: إظهار أو إخفاء أسهم التنقل واختيارها موضع، مثل أعلى اليسار.
صمم شريط التمرير في علامة التبويب "النمط" #
تخطيط #
ال تخطيط يقرر القسم مكان المعاينة بالنسبة للصور المصغرة. موقف المعاينة العروض أعلى، يمين، أسفل، ويسار. مع الجزء العلوي أو السفلي، تصطف الصور المصغرة أسفل المعاينة أو فوقها و محاذاة أفقية يظهر التحكم مع أ عرض دائري شريط التمرير. مع اليسار أو اليمين، تحصل على عرض المعاينة (%) المنزلق بدلا من ذلك.
- كومة على: اختر متى يتم تكديس التخطيط عموديًا، مثل Tablet & Mobile.
- عرض المعاينة (%): مقدار المساحة الأفقية التي تستغرقها المعاينة. في مكان ما بين 60 و70 بالمائة يقع بشكل جيد بجوار شبكة مكونة من ثلاثة أعمدة.
- تباعد: الفجوة بين المعاينة والصور المصغرة.
معاينة #
علامة التبويب النمط معاينة يقوم القسم بتصميم حاوية الشرائح الكبيرة.
- الارتفاع المخصص: تجاوز الارتفاع التلقائي.
- لون الخلفية: يملأ المنطقة خلف الصورة.
- نوع الحدود: افتراضي، لا شيء، صلب، مزدوج، منقط، متقطع، أو أخدود، مع عناصر تحكم في العرض واللون عند النشاط.
- نصف قطر الحدود وظل الصندوق: قم بتدوير الزوايا وارفع الشريحة من الصفحة.
- السهام: مجموعة مخصصة مع مقاس, الحشو, نصف قطر الحدود, الانتقالومنفصل الافتراضي, تحوم، و معاق الدول، ولكل منها لونها الخاص ولون خلفيتها.
معاينة التسميات التوضيحية #
إذا قمت بتمكين التسميات التوضيحية في علامة التبويب "المحتوى"، فسيقوم هذا القسم بوضعها وأنماطها. محاذاة عمودية ضع التسمية التوضيحية في أعلى الشريحة أو وسطها أو أسفلها، و محاذاة أفقية العروض اليسار والوسط واليمين والتبرير. تحصل أيضا الطباعة, الحشو, هامش, نوع الحدود، و نصف قطر الحدود يتحكم.
معاينة تأثيرات التحويم #
معاينة تأثيرات التحويم تحريك التسمية التوضيحية عندما يحوم الزوار فوق الشريحة. اختر تأثير، اضبط الانتقالثم قم بتصميم الافتراضي و تحوم الحالات ذات اللون ونوع الخلفية والعتامة وظل النص.
الصور المصغرة #
علامة التبويب النمط الصور المصغرة القسم يتعامل مع الصور الصغيرة: محاذاة عمودية للكتلة بأكملها، التباعد الأفقي و التباعد العمودي بين الصور المصغرة، زائد نوع الحدود و نصف قطر الحدود.
تأثيرات تحوم الصور المصغرة #
يقوم هذا القسم بوضع الصور المصغرة عبر ثلاث ولايات: الافتراضي, تحوم، و نشط (الصورة المصغرة المطابقة للشريحة الحالية). ال الصور تغطي المجموعة لون الخلفية، التعتيم, مقياس, صندوق الظل، و مرشحات CSS. خارج الصندوق، توجد الصور المصغرة غير النشطة عند عتامة تبلغ 0.65، لذا تبرز الصورة النشطة. ال تراكب تضيف المجموعة طبقة لون أو تدرج مع وضع المزج, هامش, التعتيموضوابط الحدود.
هناك أيضا أنماط القسم الموجود أسفل علامة التبويب "النمط" مع الإعدادات المسبقة للنمط الجاهز. يظهر نفس القسم في العديد من عناصر واجهة المستخدم الخاصة بـ Master Addons.
شاهد النتيجة الحية #
انقر على أيقونة العين لمعاينة الصفحة. يرى الزائرون شبكة الصور المصغرة بجانب المعاينة الكبيرة. يؤدي النقر فوق الصورة المصغرة إلى تبديل المعاينة على الفور، وتتدرج الأسهم عبر الشرائح بالترتيب، ويتبع التعليق كل صورة.
حالات الاستخدام الشائعة #
- يعرض المحفظة: صورة بطل واحدة كبيرة مع بقية المشروع بنقرة واحدة.
- صفحات المنتج: تخطيط المتجر الكلاسيكي مع معاينة مكبرة ومنتقي الصور المصغرة.
- قوائم العقارات: اسمح للمشترين بالقلب عبر الغرف دون مغادرة الصفحة.
- ألبومات الأحداث أو حفلات الزفاف: قم بتمييز صورة واحدة مع إبقاء المجموعة الكاملة مرئية.
نصائح للحصول على شريط تمرير معرض أفضل #
- مطابقة نسب العرض إلى الارتفاع للصورة. يمنع الارتفاع التلقائي اقتصاص المفاجآت، لكن النسب المتسقة تبدو أكثر نظافة وتمنع التخطيط من القفز.
- خدمة القرارات الصحيحة. ممتلئ للمعاينة، صورة مصغرة (150 x 150) للشبكة. الضغط قبل التحميل؛ انظر دليلنا إلى أفضل المكونات الإضافية لتحسين الصور WordPress.
- كتابة التسميات التوضيحية في مكتبة الوسائط قبل إدخال المعرض، تكون كل شريحة جاهزة.
- حافظ على سرعة التشغيل التلقائي معقولة. امنح الزائرين الوقت لرؤية كل صورة فعليًا.
- استخدم الحالة النشطة. إن العتامة الافتراضية البالغة 0.65 على الصور المصغرة غير النشطة توجه العين بالفعل؛ الحدود أو المقياس الطفيف على الصورة المصغرة النشطة يجعلها أكثر وضوحًا.
فيديو تعليمي #
تفضل مشاهدة الإعداد بدلا من ذلك؟ يغطي هذا الفيديو العملية برمتها، بدءًا من سحب الأداة إلى شريط التمرير النهائي في الصفحة المباشرة
الأسئلة المتداولة #
كيف أقوم بإنشاء شريط تمرير المعرض في Elementor؟
قم بتثبيت الإضافات الرئيسية لـ Elementor، واسحب عنصر واجهة مستخدم Gallery Slider إلى صفحتك، وانقر فوق إضافة صور في قسم المعرض. حدد صورك في نافذة الوسائط وأدخل المعرض. يظهر شريط التمرير مع المعاينة والصور المصغرة على الفور.
هل يمكنني إظهار الصور المصغرة على شكل دائري بدلاً من الشبكة؟
نعم. في قسم الصور المصغرة في علامة التبويب المحتوى، قم بتبديل عنصر التحكم في Carousel/Grid إلى Carousel. يمكنك بعد ذلك الحصول على إعدادات الاتجاه والشرائح لكل عرض والأسهم والتشغيل التلقائي وإعدادات الحلقة اللانهائية لشريط الصور المصغرة.
هل يمكنني تغيير مكان ظهور صورة المعاينة؟
نعم. في علامة التبويب "النمط" ضمن التخطيط، قم بتعيين موضع المعاينة إلى الأعلى أو اليمين أو الأسفل أو اليسار. باستخدام التخطيطات اليسرى أو اليمنى، يمكنك التحكم في عرض المعاينة؛ مع الجزء العلوي أو السفلي يمكنك التحكم في عرض الرف الدائري ومحاذاته.
هل يدعم Gallery Slider التشغيل التلقائي؟
نعم. قم بتشغيل التشغيل التلقائي في قسم المعاينة بعلامة تبويب المحتوى. يمكنك دمجها مع Infinite Loop، واختيار Slide أو Fade أو Cube أو Flip أو Coverflow، وتعيين سرعة الانتقال بالمللي ثانية.
كيف أعرض التسميات التوضيحية للصور على شريط التمرير؟
أضف تسميات توضيحية إلى صورك في مكتبة وسائط WordPress، ثم اضبط التسمية التوضيحية على التسمية التوضيحية في قسم المعاينة. قم بتصميم النص ووضعه من قسم المعاينة والتسميات التوضيحية في علامة التبويب "النمط".
هل أداة Gallery Slider مجانية؟
يعد No. Gallery Slider جزءًا من Master Addons Pro. تغطي أداة Image Carousel المجانية أشرطة تمرير الصور البسيطة بدون لوحة مصغرة.
إلتحاق بالركب #
الإضافات الرئيسية معرض المنزلق القطعة يغطي (Pro) نمط المعاينة الكاملة بالإضافة إلى الصور المصغرة: الصور المصغرة الشبكية أو الدائرية، والمعاينة على أي جانب، والتعليقات التوضيحية، والتصميم لكل حالة، كل ذلك من لوحة واحدة وبدون رمز مخصص.
لمزيد من الطرق لعرض الصور، تحقق من صورة دائري, معرض قابل للتصفية، و صورة متقدمة المستندات، أو مقارنة الخيارات في لدينا دليل دائري لصورة العنصر. لرؤية كل شيء آخر في البرنامج المساعد، تصفح عناصر واجهة المستخدم والإضافات الرئيسية جمع أو خطط التسعير.
