كيفية بناء شبكة محفظة مع Divi 5's Loop Builder

شبكة المحفظة هي وسيلة بسيطة وفعالة لعرض عملك. باستخدام Divi 5's Loop Builder ، يمكنك تصميم تخطيط بطاقة قابلة لإعادة الاستخدام والسماح له بالتعبير التلقائي من المحتوى الخاص بك مباشرة في Visual Builder.

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

فهم منشئ حلقة Divi 5

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

يدعم Loop Builder أنواع المحتوى المختلفة ، بما في ذلك أنواع المنشورات المخصصة (CPTS) ، ومنتجات WooCommerce ، والحقول المخصصة المتقدمة (ACF) ، مما يتيح لك عرض محفظتك بالضبط كيف تريد.

الفوائد الرئيسية لباني الحلقة

بفضل خيارات التخصيص القوية ، يعد Loop Builder مناسبًا تمامًا لإنشاء شبكات محفظة. فيما يلي ميزاتها البارزة:

• المرونة لتصميم قوالب حلقة مخصصة: مع Builder Loop ، لا تقتصر على التخطيطات المحددة مسبقًا. يمكنك استخدام أي وحدة DIVI لتصميم قالب فريد لكل عنصر من عناصر الحافظة.
• الاستعلامات القابلة للتخصيص: يتيح لك Loop Builder ضبط المحتوى الذي يظهر في شبكتك. تصفية حسب الفئة أو نوع النشر أو الحقول المخصصة لعرض العناصر المطلوبة فقط في طلبك المفضل.
• تكامل المحتوى الديناميكي: قم بسحب بيانات المحتوى الديناميكي بشكل سلس مثل عناوين المشروع أو الصور المميزة أو الأوصاف أو البيانات الوصفية المخصصة لجعل كل عنصر محفظة جذابًا.

تجعل هذه الميزات شركة Divi 5's Loop Builder أداة مثالية لإنشاء محفظة مهنية مصقولة يمكن تخصيصها بالكامل وسهلة التنقل.

بناء محفظة مع باني حلقة

سنستخدم نوع النشر المخصص للمشاريع المخصصة للمشاريع المخصصة (CPT) لإنشاء محفظة مع Builder Loop. تم تصميم المشاريع CPT لعرض محتوى على غرار المحفظة ، مما يجعلها خيارًا مثاليًا لتخطيطنا. على الرغم من أن Divi تقدم وحدة محفظة ، إلا أننا سنستخدم Loop Builder لأنه يمنحنا خيارات غير محدودة لإنشاء محفظة فريدة.

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

سنضيف وحدة العنوان إلى العمود الأول .

أدخل عنوانًا أو استخدم Divi AI لإنشاء واحد لك.

انتقل إلى علامة تبويب التصميم ، واختر Inter لخط العنوان ، والضوء لوزن الخط العنوان ، وضبط حجم النص على 2EM ، وتعيين ارتفاع خط العنوان 1.3EM .

الآن ، دعونا نبني حلقتنا. انتقل إلى العمود الثاني في الصف.

حدد موقع علامة تبويب الحلقة ، وتوسيعها ، وتمكين تبديل عنصر الحلقة .

بعد ذلك ، اختر نوع الاستعلام . لهذا البرنامج التعليمي ، سنستخدم مشاريع Divi المدمجة في CPT. تحت نوع آخر ، حدد المشاريع . نريد عرض جميع المشاريع ، لذلك سوف نترك كل شيء كما هو.

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

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

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

تصميم عمود الحلقة

الآن بعد أن أصبحت إعدادات الحلقة في مكانها ، فقد حان الوقت لتصميم أعمدةنا. ستؤثر إعدادات النمط التي نختارها هنا على الأعمدة المتبقية في الحلقة. في الصف المكون من 3 عمود ، انقر فوق العمود الثاني وانقر فوق علامة تبويب التصميم . انتقل إلى المنسدلة الحدودية وتعيين نصف قطر الحدود 15 بكسل إلى العمود. تحت أنماط الحدود ، أضف عرض حدود 1 بكسل واستخدم #000000 كون الحدود .

أضف محتوى إلى الحلقة

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

سنستخدم قوة المحتوى الديناميكي لـ Divi 5 لسحب الصورة المميزة لمشروعنا. تحوم فوق الصورة للكشف عن الرموز. انقر فوق أيقونة المحتوى الديناميكي للمتابعة.

اختر صورة مميزة حلقة عندما تظهر الخيارات.

ستقوم حلقةنا بوضع الصورة المميزة لكل مشروع مباشرة في حلقة محفظتنا.

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

في علامة تبويب التصميم ، حدد H3 لمستوى العنوان ، inter لخط العنوان ، مركز محاذاة النص ، و 20 بكسل لحجم النص.

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

قم بالتبديل إلى علامة تبويب التصميم وضبط المحاذاة على المركز .

قم بتوسيع إعدادات الزر المنسدلة وتمكين استخدام أنماط مخصصة للزر . أدخل إعدادات التصميم التالية:

• خلفية زر: #000000
• دائرة نصف قطر الحدود: 15 بكسل
• عرض الحدود الزر: 0px
• زر الخط: Inter
• لون نص نص: #ffffff
• زر حجم النص: 16px
• الهامش: 15px أسفل
• الحشو: 15 بكسل أعلى وأسفل ، 35 بكسلس اليسار واليمين

هذا كل شيء! كما ترون ، فإن إنشاء حلقة مع Divi 5 هو عملية واضحة.

تغيير الأنماط مع Loop Builder

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

ليست هناك حاجة لتحرير عناصر الحلقة بشكل فردي. نظرًا لأنها متصلة جميعًا ، يتعين عليك فقط تحرير الوحدات مرة واحدة ، وسيقوم Divi 5 بتطبيق الأنماط المحدثة تلقائيًا عبر كل وحدة في الحلقة.

يمكنك إضافة المزيد من الوحدات النمطية إلى الحلقة ، مثل مقتطفات المشروع ، وتاريخ النشر ، وعدد التعليقات ، والسيرة الذاتية للمؤلف ، والحقول المخصصة ، والمزيد.

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

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

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

تحقق من أن عنوان كل مشروع وصورة مميزة ومقتطف ووصلة الحلقة يتم سحبها بشكل صحيح من المشاريع CPT. تأكد من عدم وجود أصحاب نتوء هي عناصر مكسورة تظهر.

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

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

لجعل التصميم أكثر ملاءمة للهاتف المحمول ، يمكنك استخدام إعداد بنية عمود تغيير Divi 5 لتغيير عدد الأعمدة المعروضة على الأجهزة الأصغر.

أفضل الممارسات والنصائح

لضمان حصولك على أقصى استفادة من Divi 5 و Loop Builder ، إليك بعض أفضل الممارسات التي يجب متابعتها عند بناء محفظتك.

1. ضمان اتساق التصميم مع متغيرات التصميم

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

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

2. النظر في إمكانية الوصول

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

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

3. حفظ وإعادة استخدام القوالب

بعد إتقان قالب Loop Builder الخاص بك ، احفظه إلى مكتبة Divi بالنقر بزر الماوس الأيمن في قسم المحفظة واختيار الحفظ إلى المكتبة . امنحه اسمًا وصفيًا لسهولة الرجوع إليه. هذا يتيح لك إعادة استخدام القالب على صفحات أخرى دون إعادة البناء من الصفر.

لاستخدام القالب على مواقع الويب الأخرى ، يمكنك حفظه في Divi Cloud واستيراده إلى مشاريع ويب أخرى بنقرة واحدة.

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

قم بتنزيل الملفات

تنزيل مجانًا

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

تحميل

لقد اشتركت بنجاح. يرجى التحقق من عنوان بريدك الإلكتروني لتأكيد اشتراكك والوصول إلى حزم تخطيط Divi الأسبوعية المجانية!

جرب Loop Builder في Divi 5 اليوم

يسهل إنشاء Builder's Loop Builder Divi 5 ، مما يتيح لك عرض عملك بأسلوب وكفاءة. من خلال الاستفادة من المشاريع المدمجة CPT وميزات Loop Builder القوية ، يمكنك إنشاء شبكات مرنة وقابلة للتخصيص بالكامل تسحب محتوى مشروعك ديناميكيًا. تتيح لك مرونته تصميم تخطيطات فريدة باستخدام أي وحدة DIVI ، وإعداد استعلامات لعرض مشاريع محددة ، وإنشاء شبكات سريعة التألق على أي جهاز.

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