إعدادات عناصر واجهة المستخدم للصور المتقدمة

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

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

تفضل المشاهدة أولا؟ يمر هذا البرنامج التعليمي القصير عبر أداة الصورة المتقدمة من النهاية إلى النهاية:

ما تفعله أداة الصورة المتقدمة #

يعرض في جوهره صورة واحدة، لكنه يضع طبقات إضافية في الأعلى. يتم تبديل الصورة الحوامة عندما يكون المؤشر فوقها، وينادي الشريط بتسمية مثل “NEW،”، وتضيف علامة التبويب الإعدادات صندوقًا ضوئيًا وتأثير إمالة وظلًا ملونًا. يتم تكوين كل شيء من اللوحة، بحيث يمكن لنفس الصورة أن تفعل أكثر بكثير من الصورة العادية.

تحتوي الأداة على أربع علامات تبويب: محتوى الصور والشريط، وإعدادات السلوك مثل lightbox والإمالة، ونمط التحجيم والألوان، ومتقدم لخيارات تباعد Elementor والرؤية المعتادة.

قبل أن تبدأ #

• ووردبريس مع العنصر مثبتة ونشطة.
• الإضافات الرئيسية للعنصر مثبت ونشط. جديد في البرنامج المساعد؟ انظر دليل التثبيت.
• صورة واحدة لإظهارها، وصورة ثانية إذا كنت تريد تبديل التحويم.

كيفية إضافة عنصر واجهة المستخدم الصورة المتقدمة #

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

ضبط الصورة #

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

إضافة صورة تحوم #

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

أضف شريطًا #

ال شريط يضيف القسم لافتة زاوية فوق الصورة. تشغيل شريط العرض، اضبط النص، واختر كيف يبدو.

• نص: التسمية، مثل جديد أو بيع.
• نمط الشريط: بسيطة أو زاوية أو صليب.
• موضع الشريط: ضعه في أي زاوية، مثل أعلى اليمين أو أسفل اليسار.
• سمك الشريط وعرضه: قم بقياس النطاق ليناسب النص.

الإعدادات: صندوق الضوء، والإمالة، والظل #

ال إعدادات علامة التبويب هي المكان الذي يعيش فيه السلوك. هذه هي الإضافات التي تميز الأداة عن الصورة العادية.

• فتح في lightbox: انقر فوق الصورة لفتحها بالحجم الكامل في نافذة منبثقة. يؤدي تشغيلها إلى إضافة خيار زر مميز (مثل رمز الزائد) فوق الصورة.
• محاذاة: اليسار أو الوسط أو اليمين داخل كتلته.
• صورة التحميل المسبق: يُظهر عنصرًا نائبًا أثناء تحميل الصورة، مثل المعاينة غير الواضحة، أو الرسوم المتحركة لمربع التقدم، أو أداة التحميل الدوارة.
• تأثير الميل: يضيف إمالة ثلاثية الأبعاد تتبع المؤشر لقليل من الحركة.
• الظل الملون: يسقط ظلًا ملونًا من ألوان الصورة الخاصة. لاحظ أنه غير متوفر أثناء تنشيط الصورة الحوامة.

نمط الصورة والشريط #

ال أسلوب تتعامل علامة التبويب مع التحجيم والألوان. ال صورة يحدد القسم مظهر الصورة نفسها.

• أقصى عرض وأقصى ارتفاع: غطاء حجم الصورة.
• نصف قطر الحدود: حول الزوايا.
• الحالات العادية والتحويم: اضبط Box Shadow والحدود والخلفية بشكل منفصل للراحة والتحليق.

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

النتيجة على الصفحة #

قم بالنشر أو المعاينة وتعرض الصورة مع وضع الشريط في مكانه والتأثيرات مباشرة: قم بالتمرير لتبديل الصور، أو قم بالتمرير للإمالة، أو انقر لفتح صندوق الإضاءة، اعتمادًا على ما قمت بتشغيله.

حالات الاستخدام الشائعة #

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

نصائح للعمل مع أداة الصورة المتقدمة #

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

الأسئلة المتداولة #

إلتحاق بالركب #

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