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

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

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

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

هيا بنا نبدأ!

نظرة خاطفة

فيما يلي نظرة سريعة على التصميم الذي سنقوم ببنائه في هذا البرنامج التعليمي.

نظرة عامة سريعة على الإعدادات المسبقة العالمية

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

يسمح لك نظام Divi Presets الجديد بتصميم مظهر مخصص لعنصر Divi (مثل وحدة الزر) وحفظه كإعداد مسبق. يتم حفظ جميع تغييرات التصميم التي تجريها في الإعداد المسبق. عند إضافة وحدة نمطية جديدة إلى صفحتك ، يمكنك تصفح الإعدادات المسبقة المحفوظة وتطبيقها بسرعة.

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

أدلة الأنماط العامة المحددة مسبقًا

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

نظرة عامة سريعة على كتل تخطيط Divi

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

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

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

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

تحميل دليل نمط الإعدادات المسبقة العالمية

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

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

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

لاستيراد ملف JSON دليل النمط إلى مكتبة Divi ...

1. انتقل إلى Divi> Divi Library.
2. انقر فوق الزر استيراد وتصدير.
3. ضمن نافذة النقل المنبثقة ، حدد علامة التبويب استيراد.
4. اختر ملف JSON الخاص بدليل الأنماط العام لوكالة الويب.
5. تأكد من تحديد استيراد الإعدادات المسبقة.
6. ثم انقر فوق زر الاستيراد.

الآن كل هذه الإعدادات المسبقة العالمية متاحة في Divi Builder.

تحميل نموذج المشاركة

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

لتنزيل القالب ، انتقل إلى منشور المدونة ، وأدخل عنوان بريدك الإلكتروني ، وانقر لتنزيل الملفات.

لاستيراد قالب آخر ...

1. انتقل إلى Divi> Theme Builder.
2. ثم انقر فوق أيقونة قابلية النقل.
3. ضمن مشروط قابلية النقل ، حدد علامة التبويب استيراد.
4. اختر ملف JSON لقالب النشر الذي قمت بتنزيله.
5. ثم انقر فوق زر الاستيراد.

استخدام الإعدادات المسبقة لتحديث / تصميم قالب المشاركة

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

أو يمكنك استخدام الإعداد المسبق للوحدة النمطية "WALP - Blurb 2" على الدعاية التي تحتوي على معلومات المؤلف الديناميكية.

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

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

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

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

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

استخدام الإعدادات المسبقة العامة مع كتل تخطيط Divi

بمجرد تصميم القالب ، نكون مستعدين لبدء استخدام الإعدادات المسبقة العالمية مع كتل Divi Layout لتصميم عناصر محتوى إضافية للمنشور باستخدام محرر قوالب WordPress الافتراضي.

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

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

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

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

تصميم رقم 1: إنشاء مدونة تحث المستخدم على اتخاذ إجراء باستخدام الإعدادات المسبقة العالمية وكتلة تخطيط Divi

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

للقيام بذلك ، أضف Divi Layout Block إلى محتوى المنشور.

ثم انقر فوق إنشاء تخطيط جديد.

سيؤدي هذا إلى فتح محرر كتلة التخطيط وهو أساسًا Divi Builder كالمعتاد. امنح القسم الافتراضي صفًا مكونًا من عمود واحد.

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

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

نسخ الخلفية من دليل النمط

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

ثم افتح إعدادات القسم في محرر التخطيط وقم بلصق الخلفية للقسم.

أضف وحدة نصية مع H3 Preset

بعد ذلك ، أضف وحدة نصية جديدة إلى الصف.

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

أضف عنوان H3 للحث على اتخاذ إجراء عن طريق لصق HTML التالي في النص الأساسي:

<h3>Learn How One Client Increased Revenue by 500%</h3>

افتح القائمة المنسدلة Global Presents وحدد الإعداد المسبق لعنوان H3 (WALP - H3 - 1)

تحديث التصميم

ثم قم بتحديث لون النص إلى الأبيض وقم بتوسيط المحاذاة.

إضافة زر مع الإعداد المسبق العالمي

تحت وحدة النص ، أضف زرًا جديدًا.

ثم قم بتحديث نص الزر وحدد أحد تصميمات الأزرار العامة المعدة مسبقًا. في هذا المثال ، لنستخدم "WALP - الزر 3".

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

بمجرد الانتهاء ، انقر فوق حفظ وخروج.

يمكنك الآن رؤية العنصر المعروض في محرر قوالب WordPress.

تصميم رقم 2: إنشاء اقتباس مدونة باستخدام الإعدادات المسبقة العالمية وكتلة تخطيط Divi

بالنسبة لعنصر التصميم التالي هذا ، سنضيف عرض أسعار إلى منشور المدونة.

إضافة كتلة تخطيط ديفي

للبدء ، أضف Divi Layout Block حيث تريد عرض عرض الأسعار.

ثم انقر فوق إنشاء تخطيط جديد.

انسخ والصق الخلفية من دليل الأنماط

انسخ الخلفية الزرقاء الداكنة من دليل الأنماط.

ثم الصقه في القسم الافتراضي لمحرر التخطيط.

اضف سطر

بعد ذلك ، أضف صفًا من عمود واحد إلى القسم.

أضف وحدة الشهادة مع الإعداد المسبق

ثم أضف وحدة شهادة إلى العمود. ثم حدد الإعداد العالمي المسبق "WALP - شهادة 2".

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

تحديث التصميم

ضمن علامة تبويب التصميم ، اضبط إعدادات التصميم على النحو التالي:

• لون رمز الاقتباس:
• وزن خط الجسم: خفيف
• نمط خط النص: مائل
• محاذاة النص الأساسي: يسار
• لون النص الأساسي: #ffffff
• خط المؤلف: أوبونتو
• حجم نص المؤلف: 16 بكسل

أضف إعدادًا عالميًا مسبقًا جديدًا

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

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

احفظ التصميم وسترى ذلك في محتوى المنشور.

التصميم رقم 1: إضافة دعاية مغالى فيها إلى منشور مدونة باستخدام الإعدادات المسبقة العالمية وكتلة تخطيط Divi

في هذا المثال التالي ، سنضيف بعض الدعاية إلى المنشور.

أضف كتلة تخطيط Divi جديدة

أضف كتلة Divi Layout أخرى وانقر فوق الزر Build New Layout.

في محرر التخطيط ، أضف صفًا من عمودين إلى التخطيط.

إضافة وحدة Blurb مع الإعدادات المسبقة

في العمود الأيسر ، أضف وحدة دعاية مغالى فيها.

إضافة صورة رمز جديدة إلى دعاية مغالى فيها. ثم افتح القائمة المنسدلة للإعدادات المسبقة وحدد الإعداد الدعاية الدعاية "WALP - Blurb 4".

إضافة دعاية ثانية

ثم انسخ الدعاية المغلوطة والصقها في العمود 2 وقم بتحديث الصورة.

احفظ التصميم وسترى ذلك في محتوى المنشور.

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

افتح الآن المنشور في الواجهة الأمامية لرؤية النتيجة النهائية.

كتل قابلة لإعادة الاستخدام مع إعدادات مسبقة عالمية

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

افكار اخيرة

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

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

هتافات!