10 تخطيطات الشبكة مصنوعة من صفوف Divi 5 المتداخلة (تنزيل مجاني)

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

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

دعونا نستكشف كيف تجعل ميزات Divi 5 المتقدمة هذه التخطيطات الإبداعية على غرار الشبكة.

Divi 5 جاهز للاستخدام على مواقع الويب الجديدة ، لكننا لا نوصي بتحويل المواقع الحالية إلى Divi 5 حتى الآن.

ميزات Divi 5 الرئيسية لتخطيطات الشبكة

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

اشترك في قناتنا على YouTube

صفوف متداخلة

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

سواء أكان بناء عرض منتجات معقدة أو شبكة محفظة ذات طبقات ، يمكّنك Nexted Rows من تنظيم المحتوى بشكل أكثر ذكاءً ، مما يجعل تخطيطاتك ديناميكية وجذابة بصريًا.

نقاط التوقف القابلة للتخصيص

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

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

مجموعات الوحدة النمطية

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

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

متغيرات التصميم

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

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

وحدات متقدمة

تمنحك الوحدات المتقدمة لـ Divi 5 تحكمًا محببًا في التباعد والتحجيم مع خيارات مثل VW و VH و REM و EM. تتيح هذه الوحدات تخطيطات الشبكة الديناميكية والسريعة الاستجابة التي تتوسع تمامًا عبر الأجهزة. يمكنك ضبط الحشوة أو الهوامش أو أحجام العناصر مع المدير المتغير. توفر الوحدات المتقدمة المرونة في محاذاة مكونات الشبكة وتوسيع نطاقها بدقة ، مما يضمن أن تخطيطاتك وظيفية ومتناغمة بصريًا.

إدارة السمة

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

تعمل ميزات Divi 5 هذه معًا لتوفير مرونة وكفاءة لا مثيل لها ، مما يجعل من الأسهل إنشاء تخطيطات شبكات مذهلة وسريعة الاستجابة تعزز تجربة المستخدم ورفع تصاميم الويب الخاصة بك.

10 أمثلة تخطيط الشبكة الإبداعية في Divi 5

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

1. شبكة ميزة متماثلة

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

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

2. شبكة البناء

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

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

3. شبكة المحفظة التفاعلية

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

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

4. شبكة عرض المنتج

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

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

5. شبكة عضو الفريق

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

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

6. شبكة الخدمات

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

في المثال أدناه ، استخدمنا صفًا من أربعة أعمدة ، وقمنا بتعيين صيغة CALC () لتباعد الصفوف ، ومجموعات الوحدات النمطية المدمجة والصفوف المتداخلة لتسريع عملية التصميم.

7. جدول الأحداث الشبكة

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

يعرض المثال أدناه تخطيطًا من ثلاثة أعمدة مع صفوف متداخلة لعرض الأحداث وظيفيًا وجماليًا.

8. شبكة جدول التسعير

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

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

9. شبكة أسئلة وأجوبة أكورديون

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

في هذا المثال ، استخدمنا الصفوف المتداخلة لإنشاء قسم أسئلة وأجوبة جذابة مع مقاطع فيديو إعلامية و Q&A لتزويد المستخدمين بالمعلومات ذات الصلة التي يحتاجونها لاتخاذ قرار مستنير.

10. شبكة معرض الصور

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

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

نصائح لإنشاء تخطيطات شبكية فعالة في Divi 5

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

1. الاستفادة من الصفوف المتداخلة

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

2. تحسين الاستجابة

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

3. استخدم مجموعات الوحدة النمطية للكفاءة

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

4. الحفاظ على الاتساق مع متغيرات التصميم

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

5. تجربة الوحدات المتقدمة

عزز مرونة شبكاتك باستخدام وحدات متقدمة مثل VH أو VW أو REM أو CALC () أو CLAMP () للتباعد الديناميكي والتغييرات. تتيح هذه الوحدات عناصر الشبكات الخاصة بك توسيع نطاقها بشكل سائل على أساس حجم المنفذ أو إعدادات الخط ، مما يضمن الاستجابة والتوازن البصري.

قم بتنزيل تخطيطات قسم الشبكة مجانًا

هل تريد البدء في استخدام تخطيطات الشبكة داخل Divi 5؟ اشترك أدناه للوصول إلى ملفات JSON. يمكنك تحميلها على مكتبة Divi واستيرادها إلى صفحاتك بعد ذلك.

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

تنزيل مجانًا

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

تحميل

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

العنان للإبداع مع Divi 5

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

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

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