صورة متقدمة
يجب أن تفعل الصورة الموجودة على موقع الويب الخاص بك أكثر من مجرد الجلوس هناك. يقوم عنصر الصورة المتقدمة بشحن الصورة الأساسية بميزات ذكية وتفاعلية. قم بإنشاء تأثيرات تحويم “ ملفتة للنظر قبل وبعد ”، وأضف شرائط “NEW” أو “SALE” أنيقة، وقم بتطبيق تأثيرات إمالة ديناميكية على حركة الماوس، وحتى أضف ظلالًا ملونة. مع التحكم الكامل في الصناديق الضوئية والروابط وكل جانب من جوانب التصميم، يمكنك تحويل أي صورة إلى جزء جذاب من المحتوى الذي يرشد الزوار ويعزز التفاعل. مثالي لعروض المنتجات أو المحافظ أو اللافتات المميزة.
تحوم الصورة والتأثيرات الذكية
قم بإنشاء مقارنات فورية بين “ قبل وبعد تحديد الاتجاه أو الكشف عن التحليق البسيط. قم بتحميل صورتك الرئيسية، ثم قم بتمكين Hover Image من تحميل صورة ثانية. عندما يحوم الزوار، يتم تبديل الصورة بسلاسة. أضف طبقة من التعقيد مع تأثير الإمالة، مما يجعل الصورة تميل قليلاً أثناء تحرك الماوس فوقها، مما يضيف إحساسًا دقيقًا ثلاثي الأبعاد. لمزيد من العمق، قم بتمكين Colorized Shadow من وضع ظل ناعم وملون خلف الصورة، مما يجعلها تنبثق من الصفحة.
- مقارنات تفاعلية: مثالية لعرض منتج قبل وبعد، أو عرض عقار ليلاً ونهارًا.
- تأثير إمالة جذاب: يضيف طبقة تفاعلية حديثة تستجيب لحركة المؤشر.
- العمق البصري: استخدم الظل الملون لإنشاء الفصل والتركيز دون عناصر تصميم إضافية.
شرائط وملصقات قابلة للتخصيص
اجعل صورك مميزة بأشرطة احترافية. قم بتمكين ميزة الشريط لإضافة ملصق مثل “NEW DESIGN أو” “BESSTELLER أو” أو“SOLD OUT.” اختر من بين أنماط الأشرطة المختلفة (مثل الزاوية أو الصليب أو البسيط) وقم بتعيين الموضع (أعلى/أسفل، يسار/يمين). قم بتخصيص ألوان الشريط وطباعته وسمكه بالكامل للتأكد من أنه يكمل صورتك وعلامتك التجارية بشكل مثالي.
- تسليط الضوء على المعلومات الأساسية: قم بتوصيل الحالة أو العرض الترويجي أو الفئة مباشرة على الصورة على الفور.
- تحديد موضع مرن: ضع الشريط في أي زاوية لتجنب تغطية أجزاء مهمة من الصورة.
- التحكم الكامل في النمط: قم بمطابقة خلفية الشريط ولون النص والخط مع لغة تصميم موقعك.
إضافة الارتباط وتكامل Lightbox
يمكن أن تكون كل صورة بوابة. ربط صورتك مباشرة بعنوان URL، مثل صفحة المنتج أو خطة التسعير الخاصة بك. وبدلاً من ذلك، قم بتمكين Lightbox للسماح للمشاهدين بالتركيز على الصورة في نافذة منبثقة جميلة بملء الشاشة. اختر من بين أيقونات lightbox المختلفة (مثل زر الزائد) وتحكم في محاذاتها. للأداء، استخدم خيار التحميل المسبق للصورة لضمان التحميل السريع، خاصة لتأثيرات التمرير.
- المكالمات المباشرة إلى الإجراء: ربط الصور بصفحات مهمة، وتحويل الاهتمام المرئي إلى حركة مرور مباشرة.
- تجربة المعرض المحسنة: اسمح للمستخدمين بمشاهدة الصور بالتفصيل باستخدام صندوق ضوئي أنيق.
- الأداء الأمثل: قم بتحميل الصور المتحركة مسبقًا لمنع التأخير أو “flash” في التفاعل الأول.
التصميم التفصيلي والتحكم في الحجم
احصل على تحكم كامل في التصميم في العرض التقديمي لصورتك. اضبط الحد الأقصى للعرض والحد الأقصى للارتفاع بدقة. قم بتطبيق نصف قطر الحدود بشكل فردي على كل زاوية للحصول على أشكال فريدة. قم بتصميم الحالات العادية وحالات التمرير بشكل منفصل مع الحدود والخلفيات وظلال الصناديق. وهذا يضمن أن تبدو صورتك مثالية في كل سياق وأثناء كل تفاعل.
- التحجيم سريع الاستجابة: التحكم في أبعاد الصورة بدقة دون الاعتماد على التحجيم التلقائي غير المتوقع.
- الأشكال المخصصة: قم بإنشاء صور دائرية أو مستطيلات مستديرة أو حدود فريدة غير متماثلة.
- التصميم الخاص بالحالة: أضف حدًا أو ظلًا فقط عند التمرير للإشارة بصريًا إلى أن الصورة تفاعلية.
الأسئلة المتداولة للصورة المتقدمة
هل تأثير Hover Image متوافق مع شاشات اللمس المحمولة؟
نعم، لكنه يعمل بشكل مختلف قليلا. على الأجهزة التي تعمل باللمس، غالبًا ما يؤدي النقر الأول إلى تشغيل تأثير التمرير (تبديل الصورة)، إذا لم تقم بتمكين الصندوق الضوئي. ولكن إذا قمت بتمكين الصندوق الضوئي، فسيحصل الصندوق الضوئي على أولوية أكبر وعند النقر فوقه، سيتم فتح الصورة الأولى في الصندوق الضوئي.
هل سيؤدي استخدام تأثير الإمالة والظل الملون إلى إبطاء صفحتي؟
تستخدم هذه التأثيرات CSS، وهو خفيف الوزن بشكل عام. ومع ذلك، فإن استخدامها على عدد كبير جدًا من الصور في صفحة واحدة (كما هو الحال في الشبكة الكثيفة و100+ صورة) يمكن أن يساهم في زيادة الحمل على جهاز المستخدم. استخدمها بشكل انتقائي على الصور الرئيسية للحصول على أفضل أداء وتأثير.
كيف يختلف هذا عن أداة الصورة الأساسية لـ Elementor؟
تتيح لك الأداة الأساسية لـ Elementor إضافة صورة ورابط وتعليق وبعض التصميم البسيط. يضيف عنصر الصورة المتقدمة مجموعة من الميزات الاحترافية: تبديل الصور المتحركة، والأشرطة/الملصقات، وتأثير الإمالة، والظل الملون، وتصميم الحالة العادية/التحويم المنفصل، والمزيد من عناصر التحكم في صندوق الإضاءة الحبيبي. إنه مصمم لإنشاء عروض تقديمية للصور أكثر جاذبية وتفاعلية.
هل يمكنني استخدام ميزة الشريط بدون صورة تحوم أو تأثيرات أخرى؟
قطعاً! كل ميزة مستقلة. يمكنك الحصول على صورة بشريط فقط، أو مجرد صورة ذات تأثير مائل. يمكنك مزج الميزات ومطابقتها كما تريد. قم بتمكين الميزات التي تحتاجها فقط لتحقيق هدف التصميم المحدد الخاص بك.
ما هو أفضل استخدام لإعداد "Preload Image"؟
تمكين صورة التحميل المسبق (يتم ضبطها على "تشغيل") عند استخدام ميزة Hover Image. وهذا يجبر المتصفح على تحميل الصورة الثانية عند تحميل الصفحة، على الرغم من أنها مخفية. وهذا يمنع حدوث تأخير ملحوظ أو وميض فارغ في المرة الأولى التي يحوم فيها المستخدم فوق الصورة، مما يضمن تجربة مستخدم سلسة.
عناصر واجهة المستخدم والملحقات الشائعة
إنشاء مواقع متطورة في وقت أقل.
التشكل الزجاجي
إضافات الحاويات
أنماط
ناسخ البريد/الصفحة
