قم بترقية صفحة مدونة Divi الخاصة بك بخلفية مصممة لتخطيط الشبكة

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

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

هيا بنا نبدأ.

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

التسلل الذروة لتصميم تخطيط الشبكة

هنا نظرة خاطفة على التصميم.

ابدء

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

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

أنت الآن جاهز لبدء التحرير.

أضف طبقة الخلفية الأولى إلى القسم

ستتم إضافة التصميم المخصص إلى القسم الثاني من التخطيط الذي يحتوي على وحدة المدونة. لإنشاء طبقة الخلفية الأولى ، سنقوم بتصميم إعدادات القسم على النحو التالي:

لون الخلفية # 5873dd
الحشو المخصص (سطح المكتب): 4vw Top ، 4vw Bottom ، 7vw Left
الحشو المخصص (الكمبيوتر اللوحي): 0vw يسار

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

أضف طبقات الخلفية الثانية والثالثة إلى الصف

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

افتح إعدادات الصف وقم بتحديث ما يلي:

لون الخلفية: rgba (255،255،255،0.3)
العمود 1 الخلفية اليسرى: rgba (255،255،255،0.0)
العمود 1 خلفية اللون الأيمن: rgba (255،255،255،0.3)
اتجاه التدرج للعمود: 90 درجة
موضع بداية العمود: موضع بداية العمود: 33.3٪
موضع نهاية العمود: 0٪

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

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

العرض المخصص: 100٪
عرض المزراب: 4
حشوة مخصصة: 4٪ علوي ، 4٪ سفلي

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

احفظ التغييرات.

إضافة طبقة الخلفية الرابعة إلى وحدة المدونة الخاصة بنا

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

انتقل إلى إعدادات وحدة المدونة وقم بتحديث ما يلي:

لون خلفية بلاط الشبكة: rgba (255،255،255،0.7)

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

ثم قم بتحديث ما يلي:

مركز البداية: 66.6٪

الهامش المخصص: 4٪ أعلى ، 4٪ أسفل
حشوة مخصصة: 4٪ علوي ، 4٪ سفلي ، 4٪ يسار ، 4٪ يمين

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

في هذه المرحلة ، انتهينا من تصميم الخلفية. تحقق من ما لدينا حتى الآن.

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

اللمسات الأخيرة

ضمن علامة تبويب التصميم في إعدادات وحدة المدونة ، قم بتحديث ما يلي:

لون نص النص: rgba (0،0،0،0.8)
لون نص ميتا: rgba (0،0،0،0.5)
نمط خط ترقيم الصفحات: تسطير
لون تسطير ترقيم الصفحات: rgba (166،221،217،0.39)
لون نص ترقيم الصفحات: #ffffff
حجم نص ترقيم الصفحات: 3vw (سطح المكتب) ، 40 بكسل (جهاز لوحي) ، 30 بكسل (هاتف ذكي)

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

أعلى الحاجز: انظر لقطة الشاشة
لون الفاصل: rgba (88،115،221،0.5)
ارتفاع المقسم: 32vw
تكرار المقسم الأفقي: 0.3X

الحاجز السفلي: انظر لقطة الشاشة
لون الفاصل: rgba (88،115،221،0.5)
ارتفاع الحاجز: 43vw
تكرار المقسم الأفقي: 0.3X

الآن تحقق من النتيجة النهائية ...

الرسم المتجاوب

الطبقات التي تؤطر أعمدة مقياس الشبكة بشكل مثالي على جميع أحجام متصفح سطح المكتب.

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

هذا هو الشكل الذي سيبدو عليه على الهاتف المحمول ...

افكار اخيرة

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

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

أتطلع إلى الاستماع منك في التعليقات.

هتافات!