10 خطوات لاستخدام حزمة Divi Layout جديدة لمشروعك التالي

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

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

يتمتع!

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

10 خطوات لاستخدام حزمة Divi Layout جديدة لمشروعك التالي

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

# 1 قم باستيراد التخطيطات إلى مكتبة Divi الخاصة بك أولاً

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

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

من لوحة معلومات WordPress الخاصة بك ، انتقل إلى Divi> Divi Library وانقر فوق الزر Import & Export في الجزء العلوي الأيسر من الصفحة. في حالة النقل المنبثقة ، حدد علامة التبويب استيراد وانقر فوق اختيار ملف. ابحث عن مجلد حزمة التخطيط الذي تم فك ضغطه وحدد ملف json الذي يحتوي على "الكل" في اسم الملف. سيؤدي هذا إلى تحميل جميع التخطيطات إلى مكتبتك مرة واحدة ، بدلاً من الاضطرار إلى القيام بكل منها على حدة. على سبيل المثال ، إذا كنت ترغب في تحميل حزمة تخطيط الأزياء ، يمكنك اختيار الملف المسمى Fashion_All.json من مجلد التخطيط. ثم انقر فوق استيراد تخطيطات Divi Builder.

# 2 أضف تخطيطات إلى صفحات جديدة

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

كرر هذه العملية لكل صفحة جديدة ، مع إضافة تخطيط جديد لكل صفحة.

# 3 قم بإنشاء القائمة الأساسية الخاصة بك

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

لإنشاء قائمتك الأساسية ، انتقل إلى لوحة معلومات WordPress وقم بما يلي:

1. انتقل إلى المظهر> القوائم.
2. حدد رابط "إنشاء قائمة جديدة" أعلى الصفحة.
3. أدخل اسم القائمة.
4. حدد عناصر القائمة الخاصة بك في زر التبديل الأيسر ضمن الصفحات.
5. انقر فوق إضافة إلى القائمة
6. تنظيم عناصر القائمة الخاصة بك عن طريق سحبها إلى مكانها.
7. ضمن إعدادات القائمة في الجزء السفلي من الصفحة ، حدد "القائمة الأساسية" كموقع العرض.
8. حفظ القائمة

# 4 قم بتعيين لوحة الألوان الافتراضية الخاصة بك

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

يمكنك تعيين لوحة الألوان الافتراضية من خلال الانتقال إلى لوحة معلومات WordPress الخاصة بك والانتقال إلى Divi> Theme Options. وهناك في علامة التبويب العامة ستجد الخيار مدرجًا. أضف الألوان التي تحتاجها هناك. من الجيد دائمًا الاحتفاظ باللون الأبيض (#ffffff) وزوجين من الألوان الداكنة (مثل # 333333 أو أيًا كان ما قمت بتعيينه للون الخط الداكن) لاستخدامه في تصميم الخلفيات والنصوص بسهولة.

# 5 قم بتعيين لون التمييز العالمي الخاص بك

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

لتغيير لون التمييز العالمي ، انتقل إلى "مُخصص القوالب" وانتقل إلى "الإعدادات العامة"> "إعدادات التخطيط" وابحث عن خيار "لون التمييز" في الأسفل.

لاحظ الألوان الجديدة المتاحة لك في لوحة الألوان منذ أن قمت بتحديث لوحة الألوان الافتراضية في خيارات السمة الخاصة بك.

بعد ذلك ، بمجرد تغييرها ، احفظ إعداداتك وانشرها وقم بتحديث صفحتك.

سيتم تطبيق Theme Accent Color المحدث على حوالي 20 عنصرًا آخر تلقائيًا وهذا هو سبب أهمية تحديث هذا أولاً.

تتضمن بعض العناصر التي يتم تحديثها تلقائيًا ما يلي:

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

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

# 6 نمط رأسك

يمكنك تصميم العنوان الخاص بك من "مُخصص القوالب". ما عليك سوى الانتقال إلى لوحة معلومات WordPress الخاصة بك والانتقال إلى Divi> Theme Customizer> Header & Navigation.

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

لديك خيارات لقوائم التنقل الأساسية والثانوية والثابتة. خذ الوقت الكافي لتصميم كل ما ينطبق على موقعك.

إذا قمت بتعيين لون التمييز العام ، فسيتم تغيير بعض إعدادات لون الرأس من أجلك. لهذا السبب من المهم تعيين هذا اللون أولاً.

# 7 نمط شريطك السفلي

يمكنك نمط الشريط السفلي الخاص بك أيضًا من مُخصص القوالب. ما عليك سوى الانتقال إلى لوحة معلومات WordPress الخاصة بك والانتقال إلى Divi> Theme Customizer> Footer> Bottom Bar.

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

# 8 استخدم الاختصارات لإجراء تغييرات في التصميم على تخطيط صفحتك

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

باستخدام خيارات النقر بزر الماوس الأيمن

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

قم باستعادة الافتراضيات حتى تتمكن من التحكم فيها باستخدام أداة تخصيص السمة

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

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

استخدم مربع البحث لتحديد الإعدادات التي تريد تغييرها

تحديد ما تم تعيينه على الافتراضي بسهولة

أثناء البحث عن الخيارات التي تريد تغييرها ، ستلاحظ أن بعض الخيارات بها رمز "الاستعادة الافتراضي" بجوارها. هذا يعني أنه تم تغييره من الافتراضي.

قم باستعادة كافة إعدادات التصميم إلى الوضع الافتراضي بنقرة واحدة

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

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

# 9 احفظ العناصر الأساسية لإنشاء صفحات أو منشورات جديدة

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

رأس الصفحة

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

رؤوس الأقسام

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

قسم المحتوى

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

الأزرار (الفاتحة والداكنة)

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

قسم التذييل

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

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

# 10 تعيين العناصر العالمية

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

افكار اخيرة

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