هل تريد معرفة كيفية استخدام عنصر واجهة المستخدم للصور في Elementor؟
على رأي القول. " صورة تساوي ألف كلمة ". في بعض الأحيان يكون نقل رسالة عبر صورة أسهل بكثير.
كما ينطبق على تصميم الويب. يكاد يكون من المستحيل تصميم صفحة ويب دون تضمين عنصر صورة. كونه أداة تركز على التصميم ، Elementor يسمح لك بإضافة صورة إلى تصميمك بسهولة من خلال توفير عنصر واجهة المستخدم للصور. يمكنك ببساطة سحب أداة الصورة إلى مربع التعديل لإضافة عنصر صورة.
لا يمكنك فقط إضافة صورة ثابتة ، ولكن يمكنك أيضًا إضافة صورة ديناميكية في Elementor. هذه الميزة (القدرة على إضافة صورة ديناميكية) مفيدة بشكل خاص لإنشاء قالب مخصص مثل رسالة فريدة مخصصة ، أو صفحة فئة مخصصة ، أو رأس مخصص ، وما إلى ذلك ... - باستخدام منشئ سمات Elementor.
تتوفر أداة Image نفسها في كلا الإصدارين من Elementor ، ولكن لإضافة صورة ديناميكية تحتاج إلى استخدام الإصدار المحترف.
كيفية إضافة صورة في Elementor
قبل أن نذهب إلى أبعد من ذلك ، نفترض أنك تعرف بالفعل كيفية استخدام Elementor.
في محرر Elementor ، ما عليك سوى سحب أداة Image من اللوحة اليسرى إلى مربع التحرير ، ثم النقر فوق منتقي الصور لتحديد الصورة التي تريد استخدامها.
إضافة صورة ديناميكية
لإضافة صورة ديناميكية ، يمكنك تحريك مؤشر الماوس فوق منتقي الصور ، والنقر فوق رمز قاعدة البيانات ، وتحديد نوع الصورة الديناميكية التي تريد إضافتها من الخيارات المتاحة.
يمكنك بعد ذلك النقر فوق رمز مفتاح الربط لتحديد الإنقاذ. الاحتياطي نفسه هو المحتوى الافتراضي الذي يتم عرضه عند عدم توفر المحتوى الديناميكي. في هذه الحالة ، فإن Fallback هي الصورة الافتراضية التي يتم عرضها عندما يتعذر على Elementor العثور على الصورة الديناميكية.
تخصيص الصورة
لتخصيص الصورة ، يمكنك الوصول إليها علامة التبويب "النمط" من لوحة الإعدادات (اللوحة على الجانب الأيسر). قبل الذهاب إلى علامة التبويب "النمط" يمكنك ضبط حجم الصورة ومحاذاة الصورة وإضافة رابط للصورة في الكتلة صورة تحت علامة التبويب محتوى.
اقرأ أيضا: كيفية إدارة عمليات إرسال النماذج في Elementor
تحت علامة التبويب أسلوب، يمكنك تعيين نصف قطر الحد ، وتطبيق مرشحات CSS ، وتعيين حجم مخصص ، والتعتيم ، وتطبيق ظل المنطقة.
- تعريف الحجم المخصص
في الكتلة صورة تحت علامة التبويب محتوى، يمكنك ضبط حجم صورتك. إذا كنت ترغب في تعيين حجم مخصص ، يمكنك فقط تعيين قيمة العرض وقيمة الارتفاع على الكتلة صورة تحت علامة التبويب "النمط". يمكنك استخدام النسبة المئوية لوحدة البكسل أو عرض نافذة العرض (VW).
- ضبط عتامة الصورة
لتعيين مستوى عتامة الصورة ، يمكنك ببساطة سحب شريط التمرير من الصورة خيار التعتيم تحت علامة التبويب قلم المدقة. يمكنك إدخال مستوى التعتيم من 0 إلى 1.
- تطبيق مرشحات CSS
إذا كنت تريد ، يمكنك تطبيق مرشحات CSS على صورتك لإضافة بعض تأثيرات الصورة. هناك 5 خيارات تصفية يمكنك تطبيقها: Blur و Brightness و Contrast و Saturation و Hue. ما عليك سوى النقر فوق رمز القلم الرصاص في الخيار مرشحات CSS وقم بتعيين قيم عامل تصفية CSS المطلوبة عن طريق سحب أشرطة التمرير.
- تعريف الحدود
لجعل صورتك أكثر إقناعًا ، يمكنك أيضًا تعيين الحدود. لإضافة الحد ، حدد أولاً نوع الحد في الخيار نوع الحد. يمكنك بعد ذلك تعيين عرض الحد ولون الحدود ونصف قطرها.
بالمناسبة ، نصف قطر الحد هو مستوى إمالة زوايا جوانب الصورة (أعلى اليمين ، أعلى اليسار ، أسفل اليمين ، أسفل اليسار). كلما زادت قيمة نصف قطر الحد ، زادت تقريب صورتك.
- تطبيق ظل الصندوق
لتطبيق ظل الصندوق ، يمكنك فقط النقر فوق رمز القلم الرصاص في الخيار ظل الصندوق. حدد لون الظل واضبط قيمة الاتجاه الأفقي ، والاتجاه الرأسي ، ومستوى التمويه ، ومستوى الانتشار.
الإعدادات المتقدمة
لإجراء بعض الإعدادات المتقدمة على الصورة ، تحتاج إلى فتح علامة التبويب متقدم في لوحة الإعدادات. من خلاله ، يمكنك تحديد أشياء مثل الهامش والحشو ، وإدخال الرسوم المتحركة ، و CSS المخصص ، وما إلى ذلك.
- تحديد الهامش والحشو
لتعيين هامش الصورة والتعبئة ، تحتاج إلى فتح الكتلة متقدم.
- تطبيق رسم دخول
لجعل صورتك أكثر إقناعًا ، يمكنك تطبيق إدخال الرسوم المتحركة. للقيام بذلك ، يمكنك فتح الكتلة تأثيرات الحركة. من هذه الكتلة ، يمكنك تعيين تأثيرات التمرير وتأثير الماوس وخيار التثبيت.
لتطبيق رسم متحرك للإدخال ، كل ما تحتاجه هو نمط إدخال الرسوم المتحركة في الخيار الرسوم المتحركة للمدخل.
- إضافة CSS مخصص
إذا كانت لديك معرفة بـ CSS ، فيمكنك أيضًا إضافة CSS مخصص إلى عنصر واجهة المستخدم Image. لإضافة CSS مخصص ، يمكنك فقط فتح الكتلة CSS مخصصة ولصق كود CSS الخاص بك في الحقل المتاح.
- إخفاء الصورة على نوع معين من الأجهزة
في Elementor ، يمكنك استخدام إعداد مختلف على عنصر واجهة مستخدم معين لأنواع مختلفة من الأجهزة. بالإضافة إلى ذلك ، يمكنك تعيين عنصر واجهة مستخدم ليتم تعطيله على نوع معين من الأجهزة.
على سبيل المثال ، يمكنك إيقاف تشغيل أداة الصورة على الجهاز اللوحي. للقيام بذلك ، يمكنك فتح الكتلة استجابة. اسحب الأزرار لإخفاء الأداة على جهاز معين.
- تحديد الموقف المخصص
عند إضافة صورة في Elementor ، يتم تعيين الموضع الافتراضي على ثابت (بشكل افتراضي). هناك خياران آخران للموقف يمكنك تعيينهما: ثابت et مطلق.
- مثبت: إذا حددت هذا الخيار ، فسيتم وضع الصورة بالنسبة لنافذة العرض الخاصة بالمستخدم
- مطلق : إذا حددت هذا الخيار ، فسيتم وضع الصورة تمامًا عند أول موقع لها.
لتعيين الوضع المخصص ، يمكنك فتح الكتلة وضع تحت علامة التبويب متقدم. حدد الموضع المخصص الذي تريد تعيينه في الخيار الموقع الحالي وضبط إزاحة الاتجاه الأفقي والاتجاه الرأسي.
باختصار
الصورة جزء مهم من التصميم. يمكنك بالتأكيد تصميم صفحة بدون صورة ، لكن التصميم الخاص بك سيكون بلا طعم. يمكنك استخدام أداة Image لإضافة عنصر صورة إلى تصميم Elementor الخاص بك ، سواء كان قالب تصميم صفحة أو سمة.
يسمح لك Elementor بإضافة صورة ثابتة وديناميكية (الإصدار المحترف فقط). بالإضافة إلى عنصر واجهة المستخدم Image ، توجد أيضًا أداة Image Box لإضافة عنصر صورة مع محتوى النص. هذه الأداة التي تم ذكرها مؤخرًا مناسبة بشكل أفضل لاحتياجات معينة مثل إنشاء قسم لأعضاء الفريق وقسم قائمة الميزات والأقسام الأخرى التي تتضمن محتوى نصيًا وصوريًا.
احصل على Elementor Pro الآن!
ملحقات WordPress الإضافية الإضافية الأخرى
اكتشف أيضًا أخرى الإضافات وورد قسط يعمل على تحسين أداء مدونة WordPress أو موقع الويب الخاص بك.
1. MapSVG
MapSVG est l’un des plugins WordPress de création d’annuaire les plus puissants et les plus performants. Il vous permet de transformer n’importe quel fichier SVG en cartes vectorielles interactives et en cartes entièrement personnalisables. Il vous permet de créer un répertoire d’entreprises المحلية ، قوائم الموردين ، إلخ.
Il propose une carte pour tous les principaux pays du monde. Ses principales fonctionnalités sont : l’édition des cartes SVG dans n’importe quel éditeur de vecteurs afin de pouvoir facilement dessiner vos propres cartes, une base de données intégrée pour afficher tout type d’objet, des outils puissants de création de formulaire, pour renseigner la base de données, l’ajout des marqueurs de géolocalisation et autres.
اقرأ أيضا مقالتنا على كيفية الحفاظ على زوار موقعك لفترة أطول
2. Pan Zoom Image
يتيح لك هذا المكون الإضافي إضافة ميزة التكبير / التصغير للصور الموجودة على ملف بلوق وورد من خلال رمز قصير. على سبيل المثال ، يمكنك دمجه في مقالتك أو صفحتك.
كوظائف ، سيكون لديك من بين وظائف أخرى: التكبير البانورامي على صورة واحدة أو معرض به صور غير محدودة ، موضع شريط التحكم يمكن أن يكون أعلى ويمين وأسفل ويسار ، ويمكن أن يكون قاع الحاوية مظلمًا وخفيفًا ولا شيء من ذلك ؛ المعاينة المباشرة في لوحة القيادة، مثال على التكبير المتعدد في نفس الصفحة ، إلخ.
اكتشف أيضا لدينا 5 اختصارات ووردبريس الإضافات قسط
تحميل | عرض | استضافة المواقع
3. أتمتة التسويق
Ce وورد البرنامج المساعد يوفر premium واجهة مستخدم بسيطة ومرنة ، والغرض منها هو تساعدك بسهولة إنشاء رسالة إخبارية قوية على موقع الويب الخاص بك. ستسمح لك مرونته بإدارة مجموعة واسعة من الأحداث والظروف والإجراءات - بحيث يمكنك بسهولة تكوين استراتيجية التسويق عبر البريد الإلكتروني لإرسالها وتتبعها والاستفادة منها.
وظائفه الرئيسية هي: إمكانية تطبيق المنطق الشرطي بناءً على رد الفعل وسلوك الزوار ، وتتبع تصرفات زوار الموقع ، ومثالية لجميع برامج الولاء ، وممتازة لاستراتيجيات التسويق التي تراهن على المكافآت ، لوحة القيادة بديهية، وتقسيم زوار الموقع إلى شرائح ، إمكانية إجراء المسوحات, الرسائل القصيرة الإخطارات وعن طريق البريد الإلكتروني ، تظهر النوافذ المنبثقة بناءً على سلوك الزائر وإعلانات البانر على أساس سلوك الزائر وغير ذلك الكثير.
تحميل | عرض | استضافة المواقع
الموارد الموصى بها
تعرف على الموارد الأخرى الموصى بها لمساعدتك في بناء وإدارة موقع الويب الخاص بك.
- الإضافات 10 WooCommerce لخلق التسعير الديناميكي
- كيفية تنسيق التعليقات في ووردبريس
- 6 ملحقات WordPress لإضافة Authorize.Net إلى موقع الويب الخاص بك
- بعض الإضافات وورد للدخول الزائرين
وفي الختام
هنا ! هذا كل شيء بالنسبة لمقالنا الذي يوضح لك كيفية استخدام أداة الصورة في Elementor. اذا كنت تمتلك تعليقات أو اقتراحات ، لا تتردد في إعلامنا في القسم المحجوز.
ومع ذلك ، يمكنك أيضا استشارة مواردنا، إذا كنت بحاجة إلى المزيد من العناصر لتنفيذ مشاريعك لإنشاء مواقع الإنترنت ، من خلال استشارة دليلنا على وورد خلق بلوق أو واحد على ديفي: أفضل موضوع وورد في كل العصور.
ولكن في هذه الأثناء ، شارك هذا المقال على الشبكات الاجتماعية المختلفة.
...