دمج تخطيطات شبكة CSS البسيطة في وورد

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

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

الخطوة 1: تحديد عرض الشبكة الخاصة بك

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

الخطوة 2: مصمم الشبكة

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

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

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

الخطوة 3: تحديث ورقة أنماط WordPress الخاصة بك

قم بتسجيل الدخول إلى موقع WordPress وانتقل إلى المظهر> محرر.

في أسفل يمين لوحة محرر ، سترى أ Styles.css ملف (أو شيء مشابه ، حسب موضوعك). انقر هنا لفتحه.

قم بالتمرير إلى أسفل الورقة ولصق ما قبل الخاص بك من MindPlay.dk:

الخطوة 4: تنفيذ الشبكة

لاستخدام الشبكة ، يمكنك ببساطة إنشاء

مع فئة "الشبكة". يتم تعريف كل منطقة في الشبكة في CSS. افتح صفحة أو منشور جديد. انتقل إلى علامة تبويب HTML لبدء إنشاء شبكتك.

فيما يلي بعض العينات السابقة التي يمكنك لصقها في مكانها لتبدأ بها:

   العمود الأيسر
  العمود الأوسط
  العمود الأيمن

إليك ما يبدو في ووردبريس:

حفظ / تحديث الصفحة وإلقاء نظرة على النتائج. في حالتي ، هذه هي الصفحة الرئيسية للموقع:

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

    العمود الأيسر
  العمود الأوسط
  العمود الأيمن
    الصف الأيسر # 2
  الصف الأوسط # 2
  الصف الأيمن رقم 2

إليك كيف تبدو حتى الآن:

يمكنك الآن إضافة صور أو نص ، وتصميم كل صف بالطريقة التي تريدها بالضبط.

نصائح للتبديل

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

.grid-m4 float: left؛ العرض: 20 بكسل ؛ الارتفاع: 250 بكسل ؛

هذا سيضمن لك .شبكة-M1 على الجانب الأيسر من الصف التالي لا تطفو إلى الصف فوقه.

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

.الشبكة العرض: 450 بكسل ؛ الارتفاع: 1000 بكسل ؛ الهامش: السيارات ؛

بناءً على إصدار منشئ الشبكة MindPlay.dk الذي تستخدمه ، قد لا ينشئ الموقع ".grid-m4" وبدلاً من ذلك ، ستحتاج إلى استخدام .شبكة-M1 بعد .شبكة-C3 للتأكد من أن شبكتك تمتد إلى المكان المناسب:

  العمود الأيسر
  العمود الأوسط
  العمود الأيمن

النتائج النهائية

إليك ما تبدو عليه النتائج النهائية من خلال صفين وبعض الرسومات البسيطة:

استمتع بالتصميم وتذكر أنه يمكنك تصميم شبكتك بأي طريقة تريدها.

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