Divi يجعل من السهل إضافة الصور في أي مكان بلوق الخاص بك. تدعم جميع الصور التحميل التدريجي، وتأتي مع 4 أنماط رسوم متحركة مختلفة تجعل التنقل في موقعك أمرًا ممتعًا وجذابًا. يمكن وضع وحدات الصور في أي عمود تقوم بإنشائه وسيتم تعديل حجمها لتناسبها.
كيفية إضافة وحدة صورة من Divi
قبل أن تتمكن من إضافة وحدة صورة إلى صفحتك ، يجب عليك أولاً الانتقال إلى Divi Builder. مرة واحدة في موضوع ديفي مثبتًا على موقع الويب الخاص بك ، ستلاحظ زرًا استخدم Divi Builder فوق محرر التدوينات كلما قمت بإنشاء صفحة جديدة. انقر فوق هذا الزر لتنشيط Divi Builder والوصول إلى جميع وحدات Divi Builder. ثم اضغط على الزر استخدم Visual Builder لبدء المولد في الوضع المرئي. يمكنك أيضًا النقر فوق الزر استخدم Visual Builder عندما تتصفح موقع الويب الخاص بك في المقدمة إذا كنت متصلاً بلوحة معلومات WordPress الخاصة بك.
بمجرد تنشيط Visual Builder ، يمكنك النقر فوق الزر الرمادي (+) لإضافة وحدة نمطية جديدة إلى صفحتك. لا يمكن إضافة الوحدات النمطية الجديدة إلا داخل الصفوف. إذا كنت تبدأ صفحة جديدة ، فتذكر إضافة صف إلى صفحتك أولاً.
حدد موقع وحدة الصورة في قائمة الوحدات وانقر عليها لإضافتها إلى صفحتك. قائمة التعديلات قابلة للبحث ، مما يعني أنه يمكنك أيضًا كتابة كلمة "صورة" ثم النقر فوق إدخال للعثور تلقائيًا على تعديل الصورة وإضافته! بمجرد إضافة الوحدة ، سيتم الترحيب بك من خلال قائمة خيارات الوحدة. تنقسم هذه الخيارات إلى ثلاث مجموعات رئيسية: محتويات , تصور et متقدم .
مثال لحالة الاستخدام: إضافة صور متداخلة لتوضيح الخدمات على صفحة الخدمات
هناك طرق لا حصر لها لاستخدام وحدة الصورة. في هذا المثال ، سأوضح لك كيفية إضافة الصور إلى صفحة خدمات لموقع ويب خاص بشركة صغيرة. هنا حيث سأضيف الصور. كل دائرة حمراء تمثل صورة.
نظرًا لأن إضافة صورة إلى صفحة هي عملية بسيطة ومباشرة إلى حد ما ، سأضيف بعض الأنماط المخصصة لوضع صوري بحيث تتداخل ، مما يؤدي إلى إنشاء تأثير مكدس.
دعونا نبدأ.
استخدم المنشئ المرئي لإضافة قسم قياسي بتخطيط 1/4 1/4 1/2. ثم أضف وحدة نصية إلى العمود الأيمن 1/2 من صفك. أدخل عنوان ووصف للخدمة.
ثم أضف وحدة صورة إلى العمود 1/4 في أقصى اليسار.
قم بتحديث إعدادات وحدة الصورة كما يلي:
خيارات المحتوى
عنوان URL للصورة: [أدخل عنوان URL أو قم بتنزيل الصورة بأبعاد 500 × 625]
خيارات التصميم
الهامش المخصص: يسار -60px
خيارات avancées
الرسوم المتحركة: من اليسار إلى اليمين
حفظ الإعدادات
أضف وحدة صورة أخرى في العمود الثاني 1/4 (أو العمود الأوسط) وقم بتحديث إعدادات الصورة على النحو التالي:
خيارات المحتوى
عنوان URL للصورة: [أدخل عنوان URL أو قم بتنزيل الصورة بأبعاد 500 × 625]
خيارات التصميم
الهامش المخصص: أعلى 100px ، -60px يسار
خيارات avancées
الرسوم المتحركة: من اليمين إلى اليسار
حفظ الإعدادات
هذا يعتني بالقسم الأول. الآن بالنسبة لقسم الخدمة التالي ، يمكننا تكرار القسم الذي أنشأناه للتو لقسم الخدمة الأول. بمجرد تكرار القسم ، قم بتغيير هيكل العمود إلى تخطيط عمود 1/2 1/4 1/4 (عكس القسم السابق).
ثم اسحب وحدة النص مع رأس ووصف الخدمة إلى العمود 1/2 في أقصى اليسار. تأكد من تحريك وحدتي الصور لملء كل 1/4 عمود (الآن على اليمين).
نظرًا لأن وحدات الصور مكررة ، فنحن بحاجة إلى تحميل الصور الجديدة لقسم الخدمة المحدد هذا. أيضًا ، تحتوي الوحدات النمطية دائمًا على إعدادات هامش مخصصة مثل أول وحدتي صور تم إنشاؤها. دعونا نغير ذلك.
بدءًا من وحدة الصورة في العمود 1 / 4 الصحيح ، قم بتحديث إعدادات الصورة التالية:
خيارات المحتوى
عنوان URL للصورة: [أدخل عنوان URL أو قم بتنزيل الصورة بأبعاد 500 × 625]
خيارات التصميم
الهامش المخصص: -60px يسار (فقط)
علامة تبويب متقدمة
الرسوم المتحركة: من اليمين إلى اليسار
أخيرًا ، قم بتحديث إعدادات الصورة لوحدة صورة العمود المركزي 1/4 بما يلي:
خيارات المحتوى
عنوان URL للصورة: [أدخل عنوان URL أو قم بتنزيل الصورة بأبعاد 500 × 625]
خيارات التصميم
الهامش المخصص: 100px Up ، -60px Right
علامة تبويب متقدمة
الرسوم المتحركة: من اليسار إلى اليمين
حفظ الإعدادات
تحقق الآن من الصفحة!
خيارات محتوى الوحدة النمطية للصورة
في علامة التبويب "المحتوى" ، ستجد جميع عناصر محتوى الوحدة ، مثل النصوص والصور والرموز. كل ذلك يتحكم مما يظهر دائمًا في الوحدة النمطية الخاصة بك في علامة التبويب هذه.
رابط الصورة
ضع عنوان url صالحًا هنا ، أو اختر / قم بتحميل صورة عبر مكتبة وسائط WordPress. ستظهر الصور دائمًا مضبوطة لليسار في أعمدتها وتمتد بعرض العمود بالكامل. ومع ذلك ، لن تكون صورتك أكبر من حجمها الأصلي أبدًا. يتم تحديد ارتفاع الصورة من خلال نسبة العرض إلى الارتفاع لصورتك الأصلية.
فتح في المشاهد
هنا يمكنك اختيار ما إذا كانت صورتك ستفتح في عارض أم لا عند النقر عليها. إذا تم تمكين هذا الخيار ، فسيتم "تكبير" صورتك إلى أقصى حجم لها عند النقر فوق نافذة مشروطة. إنها ميزة رائعة للمحافظ.
رابط الرابط
ضع عنوان url صالحًا للويب في هذا الحقل لتحويل صورتك إلى رابط. ترك هذا الحقل فارغًا سيترك صورتك كعنصر ثابت.
فتح URL
يمكنك هنا اختيار ما إذا كان الارتباط الخاص بك سيفتح في نافذة جديدة.
تسمية المسؤول
سيؤدي هذا إلى تغيير تسمية الوحدة في المنشئ لتسهيل التعرف عليها. عند استخدام عرض WireFrame في Visual Builder ، تظهر هذه الملصقات في كتلة الوحدة النمطية لواجهة Divi Builder.
خيارات تصميم وحدة صورة
في علامة التبويب "تصميم" ، ستجد جميع خيارات تصميم الوحدة النمطية ، مثل الخطوط والألوان والتحجيم والتباعد. هذه هي علامة التبويب التي ستستخدمها لتغيير مظهر الوحدة الخاصة بك. تحتوي كل وحدة Divi على قائمة طويلة من إعدادات التصميم التي يمكنك استخدامها لتغيير أي شيء.
تراكب الصورة
إذا تم تمكين هذا الخيار ، فسيتم عرض لون وأيقونة تراكب عندما يحوم الزائر فوق الصورة.
تراكب رمز اللون
هنا يمكنك تعيين لون مخصص لرمز التراكب
غطاء تراكب اللون
هنا يمكنك تحديد لون مخصص للتراكب.
أيقونة التحليق
هنا يمكنك تحديد أيقونة مخصصة للتراكب.
أزل المساحة الموجودة أسفل الصورة
يؤثر هذا الخيار على الصور فقط عندما تكون هي آخر وحدة نمطية في العمود. عند تمكين هذا الخيار ، يتم إزالة المسافة بين الجزء السفلي من الصورة والقسم التالي ، مما يسمح للصورة بوضع إطار أعلى القسم التالي من الصفحة.
محاذاة الصورة
هنا تختار الاتجاه الذي تطفو فيه صورتك في العمود. يمكنك تحريك الصورة إلى اليسار أو اليمين أو إبقائها في المنتصف.
قم دائمًا بتوسيط الصورة على الهاتف المحمول
غالبًا ما تكون الصور الصغيرة أكثر إرضاءً للعين على الأجهزة المحمولة عندما تكون في المنتصف. مع فشل الأعمدة ، تصبح الصور المحاذية لليسار أو لليمين في أعمدة أصغر معزولة عندما تفشل الأعمدة وتصل إلى عرض 100٪. تمكين هذا العمود بالصور الإجبارية لمحاذاة مركز العمود على الهاتف المحمول دون التأثير على محاذاة الصورة على أجهزة سطح المكتب.
استخدم الحدود
سيؤدي تمكين هذا الخيار إلى وضع حد حول الوحدة النمطية الخاصة بك. يمكن تخصيص هذا الحد باستخدام المعلمات الشرطية التالية.
لون الحدود
يؤثر هذا الخيار على لون حدودك. حدد لونًا مخصصًا من منتقي الألوان لتطبيقه على حدودك.
عرض الحدود
بشكل افتراضي ، تكون الحدود بعرض 1 بكسل. يمكنك زيادة هذه القيمة عن طريق سحب شريط تمرير النطاق أو إدخال قيمة مخصصة في حقل الإدخال إلى يمين شريط التمرير. وحدات القياس المخصصة مدعومة ، مما يعني أنه يمكنك تغيير الوحدة الافتراضية من "px" إلى شيء آخر مثل em و vh و vw وما إلى ذلك.
نمط الحدود
تدعم الحدود ثمانية أنماط مختلفة: صلب ، ومنقط ، ومنقط ، ومزدوج ، وأخدود ، وحافة ، وتراكب ، وبدء. حدد النمط الذي تريده من القائمة المنسدلة لتطبيقه على حدودك.
أقصى عرض للصورة
بشكل افتراضي ، يتم تعيين الحد الأقصى لعرض الصورة على 100٪. هذا يعني أنه سيتم عرض الصورة بعرضها الطبيعي ما لم يتجاوز عرض الصورة عرض العمود الأصلي ، وفي هذه الحالة ستقتصر الصورة على 100٪ من عرض العمود. إذا كنت تريد تحديد الحد الأقصى لعرض الصورة بشكل أكبر ، فيمكنك القيام بذلك عن طريق إدخال قيمة العرض القصوى المطلوبة هنا. على سبيل المثال ، ستحد القيمة 50٪ من عرض الصورة إلى 50٪ من عرض العمود الأصلي.
قوة العرض الكامل
بشكل افتراضي ، يتم عرض الصور بعرضها الأصلي. ومع ذلك ، يمكنك اختيار فرض الصورة لتمتد بالعرض الكامل للعمود الأصلي عن طريق تمكين هذا الخيار.
هامش مخصص
الهامش هو المساحة المضافة إلى الجزء الخارجي من الوحدة النمطية الخاصة بك ، بين الوحدة النمطية والعنصر التالي أعلاه ، أو أسفله ، أو إلى يساره ويمينه. يمكنك إضافة قيم هامش مخصصة إلى أي من الجوانب الأربعة للوحدة النمطية. لإزالة الهامش المخصص ، قم بإزالة القيمة المضافة من حقل الإدخال. بشكل افتراضي ، يتم قياس هذه القيم بالبكسل ، لكن يمكنك إدخال وحدات قياس مخصصة في حقول الإدخال.
خيارات وحدة الصورة المتقدمة
في علامة التبويب "خيارات متقدمة" ، ستجد خيارات قد يجدها مصممو الويب الأكثر خبرة مفيدة ، مثل سمات CSS و HTML المخصصة. هنا يمكنك تطبيق CSS مخصص على أي من عناصر الوحدة المتعددة. يمكنك أيضًا تطبيق معرفات وفئات CSS المخصصة على الوحدة النمطية ، والتي يمكن استخدامها لتخصيص الوحدة في ملف style.css الخاص بالقالب الخاص بك.
معرف CSS
أدخل معرف CSS اختياريًا لاستخدامه لهذه الوحدة. يمكن استخدام المعرف لإنشاء نمط CSS مخصص أو الارتباط بأقسام معينة من صفحتك.
فئة CSS
أدخل فئات CSS الاختيارية لاستخدامها في هذه الوحدة. يمكن استخدام فئة CSS لإنشاء نمط CSS مخصص. يمكنك إضافة فئات متعددة مفصولة بمسافة. يمكن استخدام هذه الفئات في سمة Divi child أو في ورقة أنماط CSS المخصصة التي تضيفها إلى صفحتك أو موقع الويب الخاص بك باستخدام خيارات سمة Divi أو الإعدادات في صفحة Divi Builder.
عرف المغلق
يمكن أيضًا تطبيق CSS المخصص على الوحدة النمطية وأي من الأجزاء الداخلية للوحدة. في قسم CSS المخصص ، ستجد حقل نص حيث يمكنك إضافة أوراق أنماط CSS مخصصة مباشرة إلى كل عنصر. تم بالفعل تغليف إدخالات CSS في هذه الإعدادات بعلامات النمط. لذا فقط أدخل قواعد CSS مفصولة بفواصل منقوطة.
الرسوم المتحركة
استخدم هذه القائمة المنسدلة لتحديد الرسوم المتحركة ذات التحميل البطيء لصورتك. يمكنك اختيار ظهور صورتك من اليمين أو اليسار أو أسفل أو أعلى.
رؤية
يتيح لك هذا الخيار التحكم في الأجهزة التي تظهر عليها الوحدة الخاصة بك. يمكنك اختيار إلغاء تنشيط الوحدة الخاصة بك على الأجهزة اللوحية أو الهواتف الذكية أو أجهزة الكمبيوتر المكتبية بشكل فردي. يعد هذا مفيدًا إذا كنت تريد استخدام تعديلات مختلفة على أجهزة مختلفة ، أو إذا كنت تريد تبسيط تصميم الهاتف المحمول عن طريق إزالة عناصر معينة من الصفحة.
نص الصورة البديل
يوفر النص البديل جميع المعلومات الضرورية إذا لم يتم تحميل الصورة أو عرضها بشكل صحيح أو في أي موقف آخر حيث لا يمكن للمستخدم رؤية الصورة. كما أنه يسمح لقراءة الصورة والتعرف عليها بواسطة محركات البحث.
[vc_row center_row = "نعم"] [vc_column width = "1/2 ″] [vcex_button target =" blank "layout =" expand "align =" center "font_family =" Raleway "font_weight =" 700 ″ style = "flat" custom_background = ”# 18b69d” custom_hover_background = ”# 118d7a” custom_color = ”# ffffff” custom_hover_color = ”# ffffff” icon_right = ”fa fa-download”] DOWNLOAD DIVI THEME [/ vcex_button] [/ width_column] [= vc_column] / 1 ″] [vcex_button url = ”https://www.elegantthemes.com/affiliates/idevaffiliate.php؟id=2&url=23065&tid40632=tutorials” target = ”blank” layout = ”توسيع” align = ”center” font_family = ”Raleway” font_weight = ”1 ″ style =” flat ”custom_background =” # c700e ”custom_hover_background =” # 4226d8f ”custom_color =” # ffffff ”custom_hover_color =” # ffffff ”icon_right =” fa fa-download ”] تنزيل TEMPLATES DIVI [/ vcex_button] [/ vc_column] [/ vc_row]
دروس ديفي أخرى
- المواقع 5 للاستخدام مطعم ديفي موضوع
- كيفية إضافة نص على منتج Divi WooCommerce
- كيفية تغيير لون القائمة بين صفحات Divi
- كيفية تخصيص شبكات بلوق مع ديفي
- كيفية استخدام دور ديفي محرر على وورد
- كيفية إنشاء كامل الشاشة المنزلق ديفي
- كيفية تغيير لون القوائم بين صفحات Divi
- الميزات التي ربما لا تعرفها عن Divi
- كيفية استخدام Divi Builder على وورد
- كيفية استخدام وحدة Divi Video scrolling
- كيفية استخدام وحدة Divi Builder Flip
- كيفية إضافة وحدة شهادة على Divi Builder
- كيفية استخدام وحدة Divi النصية
- كيفية إنشاء شريط التمرير على ديفي
- كيفية تحرير دور مستخدم Divi
- كيفية استخدام وحدة Divi Social Media
- كيفية استخدام وحدة متجر على موضوع ووردبرس]
- كيفية استخدام وحدة Divi الشريط الجانبي
- كيفية استخدام Divi Price Table Module
- كيفية استخدام وحدة العنوان لمنشورات Divi
- كيفية إضافة وحدة فيديو ديفي
- كيفية استخدام وحدة الملاحة المادة
- كيفية استخدام وحدة البحث Divi
- كيفية استخدام وحدة محفظة Divi
- كيفية استخدام وحدة الشخص على Divi Builder
- كيفية استخدام وحدة المحفظة مع فلتر Divi
- كيفية استخدام وحدة المنزلق بعرض كامل
- كيفية استخدام Divi Builder Image Module
- كيفية استخدام وحدة التنقل كاملة العرض في Divi Builder
- كيفية استخدام وحدة معرض الصور
- كيفية استخدام وحدة بطاقة Divi Builder Full-Width
- كيفية استخدام وحدة Divi Full Width Portfolio
- كيفية استخدام وحدة الرأس Divi ذات العرض الكامل
- كيفية استخدام Divi Counter Module
- كيفية استخدام شريط التمرير المقالات على Divi Builder
- كيفية استخدام وحدة Divi Email Optin
