كيفية نقل نمط تصميم جديد إلى صفحة أخرى باستخدام ميزات كفاءة Divi

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

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

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

معاينة

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

مقاربة

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

الجزء 1: فتح صفحتين بجانب بعضهما البعض

سنبدأ بفتح صفحتين بجوار بعضهما البعض. الصفحة الحالية والصفحة الجديدة التي تحتوي على نمط التصميم الذي نريد تطبيقه. سنأخذ الصفحة المقصودة لـ Furniture Store Layout Pack (نمط التصميم الذي نريد تطبيقه على الصفحة الحالية) والصفحة المقصودة لـ Hosting Company Layout Pack (الصفحة التي نريد تغييرها).

الجزء 2: إعادة تعيين إعدادات قسم معينة

الجزء الثاني سيكون حول إعادة تعيين إعدادات قسم معينة. تختلف الإعدادات التي تحتاج إلى إعادة تعيينها من تخطيط إلى تخطيط ولكنها تتضمن عادةً إعدادات الخلفية وإعدادات المقسم.

الجزء 3: استخدام نسخ ولصق صفحات Divi وتوسيع ميزات الأنماط لقسم Hero

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

الجزء 4: إجراء تغييرات يدوية (وفقًا للتخطيط) واستخدام ميزات الكفاءة

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

الجزء 5: إضافة خصائص التصميم

أخيرًا وليس آخرًا ، يمكنك إضافة خصائص تصميم معينة إلى الصفحة الحالية أيضًا.

الجزء 1: فتح صفحتين بجانب بعضهما البعض

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

الآن بعد أن انتهينا من جزء النهج من هذا المنشور ، فلنبدأ في استخدام Divi! أضف صفحة جديدة باستخدام الصفحة المقصودة لـ Furniture Store Layout Pack.

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

قم بإنشاء صفحة أخرى باستخدام الصفحة المقصودة لـ Hosting Company Layout Pack. سنقوم باستبدال نمط تصميم هذا التصميم بتصميم الصفحة المقصودة لـ Furniture Store Layout Pack.

الجزء 2: إعادة تعيين إعدادات قسم معينة

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

افتح قسم البطل

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

إعادة تعيين خلفية القسم وتوسيعه إلى جميع الأقسام

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

إعادة تعيين الفواصل وتوسيعها إلى جميع الأقسام

افعل نفس الأشياء لفواصل الأقسام للتأكد من اختفاء جميع فواصل الأقسام على الصفحة.

الجزء 3: استخدام نسخ ولصق صفحات Divi وتوسيع ميزات الأنماط لقسم Hero

عبر الصفحات ، نسخ ولصق عناصر القسم البطل

إعدادات القسم

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

إعدادات الصف

افعل نفس الشيء للصف.

وحدة نص العنوان

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

وحدة النص الأساسي

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

تمديد الأنماط

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

غيّر الخلف اتجاهات النص إلى المركز عند الحاجة

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

إعدادات الزر

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

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

بدلاً من تمديد أنماط وحدة الزر بالكامل ، سنقوم بتوسيع إعدادات الزر المحددة.

توسيع أنماط التباعد

جنبا إلى جنب مع إعدادات التباعد.

توسيع أنماط Box Shadow

وإعدادات ظل الصندوق كذلك.

نسخ ولصق العناصر المتبقية مرة واحدة + تمديد النمط

مقسم

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

تمديد الأنماط

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

الجزء 4: إجراء تغييرات يدوية (وفقًا للتخطيط) واستخدام ميزات الكفاءة

التغييرات الخاصة بالتخطيط

البحث عن واستبدال خط العنوان

حان الوقت لبدء إجراء بعض التغييرات اليدوية! أول شيء سنفعله هو مطابقة الخط. افتح وحدة نصية على الصفحة وابحث عن خط روبيك المستخدم في جميع أنحاء الصفحة. ثم ، انقر فوق Find & Replace واستبدل الخط بـ Montserrat.

البحث عن واستبدال وزن خط العنوان

افعل نفس الشيء لوزن الخط. بدلاً من استخدام Medium ، حدد Light.

البحث عن واستبدال الزوايا الدائرية

نقوم أيضًا بإزالة حدود الزوايا الدائرية في جميع أنحاء الصفحة باستخدام Find & Replace وتطبيق "0px" على كل ركن من أركان الصفحة.

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

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

ابحث عن لون خلفية الحث على الشراء واستبدله في القسم

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

ابحث عن لون نص CTA واستبدله في القسم

استبدل لون النص بـ "فاتح" في جميع أنحاء القسم أيضًا.

تغيير إعدادات زر جدول الأسعار

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

• لون خلفية الزر: # ef6f49
• عرض حد الزر: 8 بكسل
• لون حدود الزر: # ef6f49
• نصف قطر حدود الزر: 0 بكسل
• تباعد أحرف الأزرار: 2 بكسل (افتراضي) ، 1 بكسل (تحوم)
• زر الخط: مونتسيرات
• وزن الخط: شبه عريض
• نمط الخط: أحرف كبيرة
• محاذاة الزر: يسار

تمديد أنماط جداول التسعير ووحدات CTA

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

الجزء 5: إضافة خصائص التصميم

لون خلفية القسم # 1

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

• لون الخلفية: # f7f3ec

لون خلفية القسم # 2

افعل نفس الشيء للقسم أدناه.

• لون الخلفية: # f7f3ec

قسم التدرج الخلفية # 1

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

• اللون 1: #ffffff
• اللون 2: # 1a2545
• اتجاه التدرج: 90 درجة
• موقف البداية: 55٪
• موضع النهاية: 55٪

قسم التدرج الخلفية # 2

استخدم خلفية متدرجة أخرى للقسم أدناه:

• اللون 1: rgba (210،218،228،0.38)
• اللون 2: #ffffff
• اتجاه التدرج: 90 درجة
• موقف البداية: 45٪
• موضع النهاية: 45٪

قسم التدرج الخلفية # 3

أخيرًا وليس آخرًا ، أضف خلفية متدرجة خطية إلى القسم الأخير في الصفحة أيضًا.

• اللون 1: #ffffff
• اللون 2: # f7f3ec
• موقف البداية: 40٪
• موضع النهاية: 40٪

معاينة

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

افكار اخيرة

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