تعد مشاركة مجموعة من الصور على Divi دائمًا طريقة رائعة لإشراك المستخدمين بصريًا مع المحتوى الخاص بك. تتيح لك وحدة معرض Divi إنشاء معارض وتنظيمها في أي مكان على موقع الويب الخاص بك. تتوفر وحدة المعرض في Divi Builder بتنسيق شبكي وشريط تمرير وتدعم المعارض الكبيرة مع ترقيم الصفحات.

كيفية إضافة وحدة معرض إلى صفحتك

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

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

حدد موقع وحدة المعرض في قائمة الوحدات وانقر عليها لإضافتها إلى صفحتك. قائمة الوحدات قابلة للبحث ، مما يعني أنه يمكنك أيضًا كتابة كلمة "معرض" ثم النقر فوق إدخال للبحث تلقائيًا عن وحدة المعرض وإضافتها! بمجرد إضافة الوحدة ، سيتم الترحيب بك من خلال قائمة خيارات الوحدة. تنقسم هذه الخيارات إلى ثلاث مجموعات رئيسية: محتويات , تصور et متقدم .

مثال على حالة الاستخدام: إضافة معرض صور كامل العرض لعرض الصورة.

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

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

باستخدام Visual Builder ، أضف قسمًا جديدًا أسفل قسم الرأس مع صف كامل أو عرض كامل (عمود واحد). ثم أضف وحدة المعرض إلى الصف.

قم بتحديث إعدادات وحدة معرض الصور كما يلي:

خيارات المحتوى

صور المعرض: انقر فوق المعرض المحدث وحدد الصور التي تريد تضمينها في المعرض. عدد الصور: 12 عنوان العرض والتعليق: لا ترقيم الصفحات: لا

خيارات التصميم

التخطيط: اتجاه الشبكة المصغرة: رمز التكبير الأفقي اللون: #ffffff لون التحويم: rgba (0,0,0,0.48،XNUMX،XNUMX،XNUMX) منتقي رمز التمرير: افتراضي

حفظ الإعدادات

الآن كل ما تبقى هو التخلص من كل المساحة حول الصور. ارجع وحدد إعدادات الصف. في علامة التبويب تصميم ، قم بتحديث ما يلي:

اجعل هذا الصف كامل العرض: نعم
استخدم عرض الحضيض المخصص: نعم
عرض مزراب: 1

من المهم أن تتذكر أن القيمة العددية "1" لعرض الحضيض هي صفر فعلاً (لا يوجد عرض على الإطلاق).

حفظ الإعدادات

هذا كل شيئ !

خيارات المحتوى لوحدة المعرض

في علامة التبويب "المحتوى" ، ستجد جميع عناصر محتوى الوحدة ، مثل النصوص والصور والرموز. كل ذلك يتحكم مما يظهر دائمًا في الوحدة النمطية الخاصة بك في علامة التبويب هذه.

صور المعرض

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

عدد الصور

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

عرض العنوان والتعليق:

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

عرض الصفحات

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

تسمية المسؤول

سيؤدي هذا إلى تغيير تسمية الوحدة في المنشئ لتسهيل التعرف عليها. عند استخدام عرض WireFrame في Visual Builder ، تظهر هذه الملصقات في كتلة الوحدة النمطية لواجهة Divi Builder.

خيارات تصميم وحدة المعرض

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

توفير

بشكل افتراضي ، يتم عرض المعارض كشبكة من الصور. يمكنك أيضًا اختيار عرض معرض الصور الخاص بك كشريط تمرير للصور.

اتجاه المصغرة

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

تكبير أيقونة اللون

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

تحوم فوق لون التراكب

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

رمز محدد الطيران (التحويم)

هنا يمكنك اختيار رمز مخصص لعرضه عندما يحوم الزائر فوق عناصر المعرض في الوحدة النمطية.

لون النص

هنا يمكنك اختيار ما إذا كان النص يجب أن يكون فاتحًا أم غامقًا. إذا كنت تعمل على خلفية داكنة ، يجب أن يكون النص فاتحًا. إذا كانت خلفيتك فاتحة ، يجب أن يكون النص داكنًا.

خط العنوان

يمكنك تغيير خط نص العنوان الخاص بك عن طريق تحديد الخط المطلوب من القائمة المنسدلة. يأتي Divi مع عشرات الخطوط الرائعة التي تدعمها Google Fonts. بشكل افتراضي ، يستخدم Divi خط Open Sans لجميع النصوص الموجودة على صفحتك. يمكنك أيضًا تخصيص نمط النص الخاص بك باستخدام خيارات الخط الغامق والمائل والأحرف الكبيرة والتسطير.

حجم خط العنوان

هنا يمكنك ضبط حجم نص العنوان الخاص بك. يمكنك سحب شريط تمرير النطاق لزيادة أو تقليل حجم النص أو إدخال قيمة حجم النص المطلوب مباشرةً في حقل الإدخال على يمين شريط التمرير. تدعم حقول الإدخال وحدات قياس مختلفة مما يعني أنه يمكنك إدخال "px" أو "em" اعتمادًا على قيمة حجمك لتغيير نوع الوحدة.

لون نص العنوان

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

تباعد أحرف العنوان

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

ارتفاع سطر العنوان

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

أسطورة الخط

يمكنك تغيير خط نص التسمية التوضيحية عن طريق تحديد الخط المطلوب من القائمة المنسدلة. يأتي Divi مع عشرات الخطوط الرائعة التي تدعمها Google Fonts. بشكل افتراضي ، يستخدم Divi خط Open Sans لجميع النصوص الموجودة على صفحتك. يمكنك أيضًا تخصيص نمط النص باستخدام خيارات الخط الغامق والمائل والأحرف الكبيرة والتسطير.

حجم خط وسيلة الإيضاح

هنا يمكنك ضبط حجم نص التسمية التوضيحية. يمكنك سحب شريط تمرير النطاق لزيادة حجم النص أو تقليله ، أو إدخال قيمة حجم النص المطلوب مباشرةً في حقل الإدخال على يمين شريط التمرير. تدعم حقول الإدخال وحدات قياس مختلفة مما يعني أنه يمكنك إدخال "px" أو "em" اعتمادًا على قيمة الحجم لديك لتغيير نوع الوحدة.

لون نص وسيلة الإيضاح

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

تباعد حروف الأسطورة

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

ارتفاع خط الأسطورة

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

استخدم الحدود

سيؤدي تمكين هذا الخيار إلى وضع حد حول الوحدة النمطية الخاصة بك. يمكن تخصيص هذا الحد باستخدام المعلمات الشرطية التالية.

لون الحدود

يؤثر هذا الخيار على لون حدودك. حدد لونًا مخصصًا من منتقي الألوان لتطبيقه على حدودك.

عرض الحدود

بشكل افتراضي ، تكون الحدود بعرض 1 بكسل. يمكنك زيادة هذه القيمة عن طريق سحب شريط تمرير النطاق أو إدخال قيمة مخصصة في حقل الإدخال إلى يمين شريط التمرير. وحدات القياس المخصصة مدعومة ، مما يعني أنه يمكنك تغيير الوحدة الافتراضية من "px" إلى شيء آخر مثل em و vh و vw وما إلى ذلك.

نمط الحدود

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

خيارات وحدة معرض المتقدمة

في علامة التبويب "خيارات متقدمة" ، ستجد خيارات قد يجدها مصممو الويب الأكثر خبرة مفيدة ، مثل سمات 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