برنامج Divi تعليمي: كيفية استخدام وحدة المحفظة الكاملة العرض

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

كيفية إضافة وحدة محفظة قابلة للتصفية إلى صفحتك

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

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

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

مثال لحالة الاستخدام: إضافة وحدة حافظة قابلة للتصفية إلى صفحة محفظة

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

دعونا نبدأ.

استخدم المنشئ المرئي لإضافة قسم عادي بصف عرض كامل (عمود واحد) أسفل رأس الصفحة. ثم أضف وحدة محفظة قابلة للتصفية إلى الصف.

قم بتحديث إعدادات المحفظة القابلة للتصفية كما يلي:

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

عدد المقالات: 8

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

التخطيط: لون أيقونة تكبير الشبكة: #ffffff لون تراكب التمرير: rgba (224,153,0,0.58،14،1،14) خط العنوان: افتراضي ، غامق ، أحرف كبيرة عنوان حجم الخط: 1 بكسل تباعد حرف العنوان: 12 بكسل مرشح الخط: افتراضي ، حجم الخط الغامق والكبير: 1 بكسل تباعد حرف المرشح: XNUMX بكسل حجم الخط الميتا: XNUMX بكسل تباعد الأحرف الوصفية: XNUMX بكسل

خيارات متقدمة (CSS مخصصة)

مرشح المحفظة النشط: اللون: # e09900 ؛ عنوان المحفظة: text-align: center ؛ تعريف رسالة المحفظة: محاذاة النص: مركز ؛ الصفحة النشطة لتقسيم الصفحات: اللون: # e09900! مهم؛

هذا كل شيئ !

خيارات محتوى المحفظة القابلة للفلترة

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

عدد المشاركات

اختر كيفية عرض المنشورات التي تريد عرضها قبل ترقيم القائمة.

تشمل الفئات

حدد الفئات التي تريد عرضها. المشاركات في الفئات التي لم يتم تحديدها لن تظهر في قائمة المشاركات التي تم إنشاؤها.

إظهار العنوان

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

عرض الفئات

اختر ما إذا كنت تريد عرض الفئة ضمن كل مقالة في منطقة البيانات الوصفية أم لا.

عرض الصفحات

يتيح هذا الخيار / يعطل ترقيم الصفحات. إذا تم تعطيل ترقيم الصفحات ، فسيتم عرض صفحة مشروع واحدة فقط لكل فئة.

لون الخلفية

حدد لون خلفية مخصصًا للوحدة النمطية الخاصة بك أو اتركه فارغًا لاستخدام اللون الافتراضي.

صورة الخلفية

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

تسمية الإدارة

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

خيارات تصميم الحافظة القابلة للفلترة

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

توفير

اختر نمط التخطيط لمحفظتك. يعرض "Fullwidth" رسالة واحدة لكل صف ، بينما تعرض "الشبكة" مشاريعك في شبكة متجانبة مع مشاريع متعددة في كل صف.

لون النص

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

خط العنوان

يمكنك تغيير خط نص العنوان الخاص بك عن طريق تحديد الخط المطلوب من القائمة المنسدلة. يأتي 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" اعتمادًا على قيمة حجمك لتغيير نوع الوحدة.

الفوقية الخط

يمكنك تغيير خط نص التعريف الخاص بك عن طريق تحديد الخط الذي تريده من القائمة المنسدلة. يأتي 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 الفرعي الخاص بك أو في ورقة أنماط 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]

برنامج Divi التعليمي: كيفية استخدام وحدة المحفظة كاملة العرض