كيفية تحويل تخطيطات Divi إلى إطارات سلكية قابلة لإعادة الاستخدام

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

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

دعنا نذهب اليها!

معاينة

قبل أن نتعمق في الأمر ، دعنا نلقي نظرة على النتيجة النهائية التي سننشئها.

تحويل التخطيط إلى إطار سلكي

افتح الصفحة المقصودة لتقديم الطعام باستخدام Visual Builder

انطلق وافتح الصفحة المقصودة التي أنشأتها باستخدام حزمة Divi's Food Catering Layout Pack.

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

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

امنح الأقسام المتناوبة لون خلفية رمادية بدلاً من ذلك

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

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

تمكين مرشح الأنماط المعدلة في وحدة الزر

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

امنح وحدة الزر الخلفية الداكنة ولون الحدود

قم بتغيير لون خلفية الزر ولون حدود الزر إلى "# 2b2b2b".

نسخ أنماط الأزرار وتطبيقها على الأزرار الأخرى

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

إزالة إعدادات التصميم الإضافية (مثل Box Shadow)

إزالة ظل مربع الزر

نحن نزيل عناصر إضافية ، مثل Box Shadow أيضًا. افتح نفس وحدة الأزرار التي كنت تعمل عليها وقم بإزالة ظل الصندوق تمامًا.

إعدادات ظل مربع وحدة زر النسخ

انسخ Box Shadow Styles لوحدة الأزرار هذه وأضفها إلى وحدات الأزرار المتبقية أيضًا.

قم بإزالة Box Shadow يدويًا في قسم Hero & Contact

الزران الوحيدان اللذان يحتاجان إلى الإزالة اليدوية لـ Box Shadow هما الزران الموجودان في Fullwidth Header Module و Contact Module. تعد هذه الأزرار جزءًا من وحدة بها العديد من عناصر التصميم ، ولهذا السبب نحتاج إلى إزالتها يدويًا.

امنح القسم المميز نفس لون الخلفية مثل عبارات الحث على اتخاذ إجراء

ثم قم بالتمرير لأسفل حتى تصادف القسم "المميز". هنا ، استخدم لون خلفية القسم "# ​​2b2b2b". تم استخدام نفس اللون لـ CTAs.

تحديد أبعاد الصورة

انتقل إلى مكتبة الوسائط

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

افتح الصور المستخدمة بشكل فردي

افتح كل صورة من الصور المضمنة في صفحتك بشكل منفصل.

اكتب الأبعاد المختلفة للصور على الصفحة

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

قم بإنشاء عناصر نائبة بأبعاد

افتح برنامج فوتوشوب

حان الوقت لإنشاء العناصر النائبة! افتح Photoshop أو أي برنامج آخر لتحرير الصور.

إنشاء مشاريع جديدة للأبعاد

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

• 800 × 1029
• 400 × 400
• 48 × 48

اختر اللون الرمادي

اختر # e7e8ed بلونك.

فتح طبقة الخلفية

افتح طبقة الخلفية أيضًا.

حدد أداة دلو الطلاء وأضف لونًا إلى الطبقة

بعد ذلك ، استخدم أداة Paint Bucket Tool لتلوين قماشك باللون الرمادي.

أضف نصًا بأبعاد

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

حفظ للويب

بمجرد الانتهاء ، احفظ العنصر النائب لصورتك للويب.

كرر لكل واحد من أبعاد الصورة على الصفحة

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

• 800 × 1029 (قسم عنا
• 400 × 400 (قسم المعرض)
• 48 × 48 (أيقونات)

استبدل الصور بعناصر نائبة

بمجرد تصدير جميع العناصر النائبة للصور ، امض قدمًا واستبدل الصور.

جعل الإطار السلكي قابلاً لإعادة الاستخدام بسهولة

قم بإنشاء خريطة Wireframe على الكمبيوتر

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

تخطيط لقطة الشاشة وحفظها محليًا

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

حفظ التخطيط في المكتبة بالاسم نفسه

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

تغيير إعدادات التصميم للإطار السلكي المخصص

أضف فواصل القسم

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

العب مع الطباعة

تمكين البحث والاستبدال على خط العنوان

أو يمكنك أيضًا التلاعب بالطباعة. افتح وحدة Fullwidth Header في قسم البطل الخاص بك وانقر بزر الماوس الأيمن على خط العنوان. تابع عن طريق تمكين ميزة البحث والاستبدال.

تغيير الخط

قم بتغيير الخط المستخدم في صفحتك إلى خط آخر ولديك إطار سلكي جديد تمامًا!

حفظ عناصر تصميم منفصلة باستخدام الفئات

انقر فوق أيقونة "إضافة إلى المكتبة"

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

أضف فئة جديدة وامنح عنصر التصميم اسمًا

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

معاينة

الآن بعد أن انتهينا من جميع الخطوات ، دعنا نلقي نظرة أخيرة على النتيجة النهائية.

افكار اخيرة

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