كيفية إضافة عنوان موقع ديناميكي وشعار إلى رأس Divi العالمي

من قبل بلير Jersyer | يونيو 10، 2020 | ديفي

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

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

النتيجة المحتملة

فيما يلي معاينة للتصميم الذي سنبنيه في هذا البرنامج التعليمي.

لاحظ عنوان الموقع والشعار في منتصف الجزء العلوي من الرأس والذي يتم عرضه ديناميكيًا.

تنزيل مجاني

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

لاستيراد القالب ، انتقل إلى Divi> Theme generator.

انقر فوق رمز قابلية النقل في الجزء العلوي الأيمن من الصفحة.

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

ثم اضغط على زر الاستيراد.

بمجرد الانتهاء ، سيكون قالب الرأس العام متاحًا في Divi Theme Builder.

في ما يلي سننتقل إلى التصميم.

عنوان الموقع وشعار ووردبريس

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

ليس من غير المألوف إضافة عنوان الموقع عند تثبيت WordPress ونسيانه.

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

يمكنك تحديد موقع وتحديث عنوان الموقع وشعار الموقع في WordPress في أي وقت بالانتقال إلى لوحة معلومات WordPress والانتقال إلى الإعدادات> عام.

أو يمكنك اتخاذ مسار آخر باستخدام أداة تخصيص السمة لتحديث عنوان الموقع ضمن الإعدادات العامة.

الآن بعد أن عرفنا مكان عنوان الموقع وشعاره في الواجهة الخلفية لـ WordPress ، دعنا نستكشف كيف يمكننا إضافتهم إلى رأس Divi!

كيفية إضافة عنوان موقع ديناميكي وشعار إلى رأس عام في Divi

استيراد قالب الرأس العام المصمم مسبقًا

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

حالما تمتلك تحميل حزمة خلق موضوع وفك ضغط الملف وتحديد موقع ملف JSON لقالب موقع الويب الافتراضي.

ثم انتقل إلى Divi> Theme Builder.

انقر على أيقونة قابلية النقل في أعلى اليمين. في نافذة قابلية النقل المنبثقة ، اختر ملف JSON لقالب موقع الويب الافتراضي وانقر فوق الزر استيراد.

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

إضافة عنوان موقع ديناميكي وشعار إلى العنوان

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

نقل الشعار

للبدء ، اسحب وحدة الصورة التي تعرض الشعار (ديناميكيًا) من العمود الأوسط للصف العلوي إلى العمود الأيسر للصف العلوي.

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

ثم أضف وحدة دعوة جديدة إلى العمود الأوسط للصف العلوي (حيث كان الشعار).

سنستخدم وحدة Call to Action لعرض عنوان الموقع والشعار.

ولكن قبل البدء في إضافة المحتوى ، حدد أولاً "لا" لاستخدام لون الخلفية.

أضف عنوان موقع ديناميكي

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

إضافة شعار موقع ديناميكي

بعد ذلك ، مرر مؤشر الماوس فوق منطقة الجسم وحدد رمز "استخدام المحتوى الديناميكي". ثم حدد "سطر شعار الموقع" من القائمة.

إضافة ارتباط ديناميكي الصفحة الرئيسية

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

تصميم نص العنوان وشعار الموقع

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

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

• خط العنوان: Heebo
• وزن خط العنوان: Bold
• نمط خط العنوان: TT
• حجم نص العنوان: 32 بكسل (سطح المكتب) ، 24 بكسل (الكمبيوتر اللوحي والهاتف)
• تباعد رسالة العنوان: 0.3em
• خط الجسم: Roboto
• نمط خط الجسم: مائل
• لون النص الأساسي:
• حجم النص الأساسي: 13 بكسل
• تباعد رسالة النص: 0.1em
• ارتفاع خط الجسم: 1em

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

المساحة المتروكة للأسفل: 0 بكسل

تعديلات التصميم الإضافية

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

التمركز العمودي للأعمدة / المحتوى

الآن الصف العلوي هو "Equalize Column Heights" النشط الذي يستخدم الخاصية المرنة. يمكننا الاستفادة من ذلك عن طريق إضافة مقتطف css صغير للتأكد من بقاء جميع الأعمدة في الوسط بشكل رأسي داخل الصف. للقيام بذلك ، افتح إعدادات الصف العلوي وأضف CSS التالية إلى العنصر الرئيسي:

محاذاة البنود: مركز.

تحديث العمود بالزر

بعد ذلك ، افتح إعدادات العمود 3 في الصف العلوي وأخرج لون الخلفية والحشو.

تحديث خلفية الزر

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

• خلفية متدرجة اللون الأيسر: #ffffff
• لون تدرج الخلفية اليمنى: # 1dbf73
• اتجاه التدرج: 135deg
• موضع البدء: 10٪
• الموضع النهائي: 0٪

الإضافة قبل وبعد الحروف على الشعار

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

نتيجة نهائية

لرؤية النتيجة ، افتح أي صفحة على موقعك. يجب أن ترى عنوان الموقع الديناميكي والشعار معروضين بشكل جميل!

الأفكار النهائية

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

المصدر موضوع أنيق

كيفية إنشاء انتقال سلس مع تأثيرات التمرير على Divi

من قبل بلير Jersyer | يونيو 9، 2020 | ديفي

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

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

دعونا نذهب.

النتيجة المحتملة

قبل الغوص في البرنامج التعليمي ، دعنا نلقي نظرة على النتيجة على أحجام الشاشات المختلفة.

1 ، إعادة بناء هيكل العناصر

إضافة القسم رقم 1

مباعدة

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

• المساحة المتروكة العلوية: 80 بكسل (سطح المكتب والجهاز اللوحي) ، 0 بكسل (الهاتف)
• الحشو السفلي: 80px

أضف سطرًا جديدًا

هيكل العمود

متابعة إضافة صف جديد باستخدام بنية العمود التالي:

التحجيم

بدون إضافة المزيد من الوحدات النمطية ، افتح معلمات الخط وقم بتطبيق التغييرات التالية على معلمات الأبعاد:

• استخدم عرض مزراب مخصص: نعم
• عرض مزراب: 1
• العرض: 90٪
• العرض الأقصى: 1580 بكسل

مباعدة

ثم قم بإضافة هامش علوي وسفلي مخصص.

• الهامش العلوي: 200px
• الهامش السفلي: 200px

إضافة وحدة نمطية النص إلى العمود 1

أضف محتوى H2

حان الوقت لإضافة وحدات نمطية ، بدءًا من وحدة نصية في العمود 1. أدخل أي محتوى H2 تريده.

إعدادات النص H2

انتقل إلى علامة تبويب تصميم الوحدة النمطية وقم بتغيير إعدادات نص H2 كما يلي:

• العنوان 2 الشرطة: ربع سنوي
• العنوان 2 حجم النص: 80 بكسل (سطح المكتب) ، 50 بكسل (الكمبيوتر اللوحي) ، 40 بكسل (الهاتف)
• ارتفاع السطر 2 من الرأس: 1.2em

مباعدة

ثم أضف هامشًا أقل على الجهاز اللوحي والهاتف.

• الهامش السفلي: 50 بكسل (الكمبيوتر اللوحي والهاتف فقط)

إضافة وحدة نمطية النص إلى العمود 2

إضافة محتوى

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

إعدادات النص

قم بالتبديل إلى علامة تبويب تصميم الوحدة النمطية وقم بتغيير إعدادات النص وفقًا لذلك:

• خط النص: المقصورة
• نمط خط النص: أحرف كبيرة
• لون النص: # 000000
• حجم النص: 18 بكسل (سطح المكتب) ، 15 بكسل (الكمبيوتر اللوحي) ، 13 بكسل (الهاتف)
• تباعد الحروف النصية: 3 بكسل (سطح المكتب) ، 1 بكسل (الكمبيوتر اللوحي والهاتف)
• ارتفاع سطر النص: 3em

أضف وحدة فصل إلى العمود 2

رؤية

الوحدة التالية والأخيرة التي نحتاجها في هذا العمود هي وحدة فصل. تأكد من تمكين خيار "إظهار الفاصل".

• إظهار الفاصل: نعم

خط

ثم قم بتغيير لون خط الوحدة.

• لون الخط: # 000000

التحجيم

ثم قم بإجراء بعض التغييرات على معلمات التحجيم.

• وزن المقسم: 3px
• العرض: 28٪

مباعدة

نضيف أيضًا هامشًا علويًا.

• الهامش العلوي: 10px

إضافة القسم رقم 2

مباعدة

دعنا ننتقل إلى القسم العادي التالي. أزل المساحة المتروكة الافتراضية من القسم.

• الحشو العلوي: 0px

الفيضانات

أيضًا إخفاء التدفقات الفائضة.

• تجاوز أفقي: مخفي
• تجاوز عمودي: مخفي

أضف سطرًا جديدًا

هيكل العمود

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

التحجيم

بدون إضافة المزيد من الوحدات النمطية ، افتح معلمات الخط ، وقم بالوصول إلى معلمات الأبعاد وقم بإجراء التعديلات التالية:

• استخدم عرض مزراب مخصص: نعم
• عرض مزراب: 1
• معادلة ارتفاع العمود: نعم
• العرض: 90٪
• العرض الأقصى: 1580 بكسل

مباعدة

ثم قم بإزالة كل المساحة المتروكة العلوية والسفلية الافتراضية.

• الحشو العلوي: 0px
• الحشو السفلي: 0px

إعدادات العمود 1

لون الخلفية

ثم افتح إعدادات العمود 1 وقم بتغيير لون الخلفية.

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

مباعدة

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

• المساحة المتروكة العلوية: 200 بكسل (المكتب) ، 100 بكسل (الكمبيوتر اللوحي والهاتف)
• المساحة السفلية: 200 بكسل (المكتب) ، 100 بكسل (الكمبيوتر اللوحي والهاتف)
• المساحة المتروكة اليسرى: 8٪
• المساحة المتروكة لليمين: 8٪

إعدادات العمود 2

مباعدة

تابع بفتح الإعدادات في العمود 2. انتقل إلى علامة التبويب "خيارات متقدمة" وأضف قيم حشو مخصصة على أحجام شاشات مختلفة.

• المساحة العلوية: 100 بكسل (سطح المكتب) ، 50 بكسل (الكمبيوتر اللوحي والهاتف)
• الحشو السفلي: 200px
• المساحة المتروكة اليسرى: 150 بكسل (المكتب) ، 0 بكسل (الجهاز اللوحي والهاتف)

أضف وحدة فصل إلى العمود 1

رؤية

في العمود الأول ، أول وحدة نحتاجها هي وحدة فصل. تأكد من تمكين خيار "إظهار الفاصل".

• إظهار الفاصل: نعم

خط

ثم قم بتغيير لون خط الوحدة.

• لون الخط: # 000000

التحجيم

قم أيضًا بإجراء تغييرات على معلمات التحجيم.

• وزن المقسم: 3px
• العرض: 50٪

إضافة وحدة نمطية النص إلى العمود 1

أضف محتوى H3

الوحدة التالية التي نحتاجها في العمود 1 هي وحدة نصية ذات محتوى H3.

إعدادات النص H3

قم بالتبديل إلى علامة تبويب تصميم الوحدة النمطية وقم بتغيير إعدادات نص H3:

• العنوان 3 الشرطة: ربع سنوي
• لون نص العنصر 3: # 000000
• العنصر 3 حجم النص: 50 بكسل (سطح المكتب) ، 40 بكسل (الكمبيوتر اللوحي) ، 35 بكسل (الهاتف)
• ارتفاع السطر 3 من الرأس: 1.1em

إضافة وحدة نمطية النص إلى العمود 2

إضافة محتوى

في العمود الثاني ، الوحدة الأولى التي نحتاجها هي وحدة نصية مع بعض محتوى الوصف.

إعدادات النص

قم بتغيير إعدادات نص الوحدة كما يلي:

• خط النص: المقصورة
• نمط خط النص: أحرف كبيرة
• حجم النص: 18 بكسل (سطح المكتب) ، 15 بكسل (الكمبيوتر اللوحي) ، 13 بكسل (الهاتف)
• تباعد الحروف النصية: 3 بكسل (سطح المكتب) ، 1 بكسل (الكمبيوتر اللوحي والهاتف)
• ارتفاع سطر النص: 3em

إضافة وحدة زر إلى عمود 2

أضف نسخة

الوحدة التالية والأخيرة التي نحتاجها هي وحدة زر. أدخل نسخة من اختيارك.

إعدادات زر

ثم صمم الزر.

• استخدم الأنماط المخصصة للزر: نعم
• حجم نص الزر: 20 بكسل
• لون نص الزر: #ffffff
• لون خلفية الزر: # 000000
• عرض حد الزر: 0px

• خط الزر: ربع سنوي
• وزن خط الزر: غامق

مباعدة

أضف أيضًا المساحة المتروكة المخصصة.

• الحشو العلوي: 50px
• الحشو السفلي: 50px
• حشوة اليسار: 100px
• الحشوة اليمنى: 100 بكسل

الوظيفة الحالية

وأعد وضع الزر وفقًا لذلك:

• المنصب: مطلق
• الموقع: أسفل اليسار

استنساخ الخط عدة مرات حسب الضرورة

بمجرد الانتهاء من الخط بالكامل وجميع وحداته ، يمكنك استنساخ الخط بأكمله ثلاث مرات.

تغيير كل المحتوى

تأكد من تحرير كل المحتوى في أسطر مكررة.

2. تطبيق تأثيرات التمرير

تأثيرات التمرير للصف الأول

الحركة الأفقية

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

• تنشيط الحركة الأفقية: نعم
• تعويض البداية: -5
• متوسط ​​الإزاحة: 0 (بنسبة 26 ٪)
• تعويض النهاية: 0
• تأثير حركة الزناد: منتصف العنصر

تتلاشى والخروج

استخدم أيضًا تأثير التلاشي الوارد والصادر.

• تنشيط التلاشي داخل وخارج: نعم
• العتامة الأولية: 100٪
• متوسط ​​العتامة: 100٪ (بنسبة 50٪)
• عتامة النهاية: 0٪ (إلى 53٪)
• تأثير حركة الزناد: منتصف العنصر

تأثيرات التمرير للصف الأوسط

الحركة العمودية

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

• تنشيط الحركة العمودية: نعم
• تعويض البداية: -4
• متوسط ​​الإزاحة: 0 (بنسبة 26 ٪)
• تعويض النهاية: 0
• تأثير تحريك الحركة: منتصف العنصر

تتلاشى والخروج

قم أيضًا بتفعيل تأثير التلاشي للداخل والخارج.

• تنشيط التلاشي داخل وخارج: نعم
• العتامة الأولية: 0٪
• متوسط ​​العتامة: 100٪ (من 27٪ إلى 50٪)
• تعويض النهاية: 0 (عند 53٪)
• تأثير حركة الزناد: منتصف العنصر

تأثيرات تمرير الخط الأخير

الحركة العمودية

ثم افتح السطر الأخير من القسم وأضف الحركة الرأسية التالية:

• تنشيط الحركة العمودية: نعم
• تعويض البداية: -4
• متوسط ​​الإزاحة: 0 (بنسبة 26 ٪)
• تعويض النهاية: 0
• تأثير حركة الزناد: منتصف العنصر

تتلاشى والخروج

مع تأثير التلاشي الوارد والصادر ، تكون قد انتهيت!

• تنشيط التلاشي داخل وخارج: نعم
• العتامة الأولية: 0٪
• متوسط ​​العتامة: 100٪ (من 27٪ إلى 50٪)
• عتامة النهاية: 100٪ (إلى 53٪)
• تأثير حركة الزناد: منتصف العنصر

نتيجة نهائية

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

الأفكار النهائية

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

كيفية إنشاء عضو فريق التمرير دائري مع Divi

من قبل بلير Jersyer | يونيو 9، 2020 | ديفي

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

برهنة

قبل الغوص في البرنامج التعليمي ، دعنا نلقي نظرة على النتيجة على أحجام الشاشات المختلفة.

بداية الحمل

إضافة قسم جديد

مباعدة

ابدأ بإضافة قسم عادي جديد إلى الصفحة التي تعمل عليها. افتح إعدادات القسم وأضف حشوة مخصصة على أحجام الشاشات المختلفة.

• المساحة المتروكة العلوية: 200 بكسل (المكتب) ، 100 بكسل (الكمبيوتر اللوحي والهاتف)
• المساحة السفلية: 200 بكسل (المكتب) ، 100 بكسل (الكمبيوتر اللوحي والهاتف)

الفيضانات

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

• تجاوز أفقي: مخفي
• تجاوز عمودي: مخفي

أضف السطر رقم 1

هيكل العمود

استمر في إضافة سطر جديد إلى القسم باستخدام بنية العمود التالي:

التحجيم

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

• العرض: 90٪
• العرض الأقصى: 1580 بكسل

مباعدة

نضيف أيضًا الحشو العلوي والسفلي المخصص.

• الحشو العلوي: 100px
• الحشو السفلي: 100px

إضافة وحدة نمطية النص إلى العمود

أضف محتوى H2

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

إعدادات النص H2

انتقل إلى علامة تبويب تصميم الوحدة النمطية وقم بتغيير إعدادات نص H2 كما يلي:

• عنوان الخط 2: Quicksand
• عنوان الخط 2: شبه الغامق
• لون نص العنصر 2: # 000000
• العنوان 2 حجم النص: 70 بكسل (سطح المكتب) ، 50 بكسل (الكمبيوتر اللوحي) ، 40 بكسل (الهاتف)

إضافة وحدة فصل إلى العمود

رؤية

ثم أضف وحدة فصل. تأكد من تمكين خيار "إظهار الفاصل".

• إظهار الفاصل: نعم

خط

ثم قم بإجراء بعض التغييرات على إعدادات الخط.

• لون الخط: # edf000
• نمط الخط: الصلبة
• موضع الخط: أعلى

التحجيم

وأكمل معلمات الوحدة بتعديل معلمات الأبعاد وفقًا لذلك:

• وزن المقسم: 20px
• العرض: 11٪
• محاذاة الوحدة: اليسار
• الارتفاع: 20px

أضف السطر رقم 2

هيكل العمود

إلى الصف التالي! استخدم هيكل العمود التالي:

التحجيم

بدون إضافة المزيد من الوحدات النمطية ، افتح معلمات الخط وقم بتعديل معلمات تغيير الحجم كما يلي:

• استخدم عرض مزراب مخصص: نعم
• عرض مزراب: 2
• العرض: 100٪
• أقصى عرض: 100 ٪

مباعدة

ثم أضف المساحة المتروكة اليمنى واليسرى على الشاشات الصغيرة فقط.

• المساحة المتروكة اليسرى: 5٪ (الجهاز اللوحي والهاتف فقط)
• المساحة المتروكة لليمين: 5٪ (الجهاز اللوحي والهاتف فقط)

معلمات العمود (5x)

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

خلفية التدرج

أولاً ، أضف خلفية متدرجة لكل عمود.

• لون 1: rgba (255,255,255,0)
• لون 2: rgba (0,0,0,0,84)
• نوع التدرج: الخطي
• موضع البدء: 25٪
• الموضع النهائي: 86٪
• ضع التدرج فوق صورة الخلفية: نعم

صورة الخلفية

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

• حجم صورة الخلفية: الغلاف
• موضع صورة الخلفية: المركز

العنصر الرئيسي

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

العرض: 100٪! مهم ؛ الهامش: 50 بكسل 0 بكسل 50 بكسل 0 بكسل! هام ؛

أضف وحدة شخص إلى العمود

إضافة محتوى

لمشاركة المعلومات حول أعضاء الفريق ، سوف نستخدم وحدة الشخص. أضف وحدة الشخص الأول إلى العمود 1 واستخدم أي محتوى تريده.

حذف صورة

ثم احذف الصورة. بدلاً من ذلك ، نستخدم صورة الخلفية للعمود.

صورة الخلفية

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

• حجم صورة الخلفية: الغلاف
• موضع صورة الخلفية: المركز

إعدادات نص العنوان

انتقل إلى علامة تبويب تصميم الوحدة النمطية وقم بتغيير إعدادات نص العنوان كما يلي:

• مستوى العنوان: H3
• خط العنوان: الرمال المتحركة
• وزن خط العنوان: غامق
• لون نص العنوان: #ffffff
• حجم نص العنوان: 230٪

إعدادات نص الجسم

أيضا تغيير إعدادات النص الأساسي.

• هيئة الخط: افتح Sans
• لون النص الأساسي: #ffffff
• ارتفاع خط الجسم: 2,2 م

إعدادات نص الموضع

ثم قم بإجراء بعض التغييرات على إعدادات نص الموضع.

• موضع الخط: افتح Sans
• لون نص الموضع: # edf000

مباعدة

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

• الحشو العلوي: 70٪
• المساحة السفلية: 10٪
• المساحة المتروكة اليسرى: 10٪
• المساحة المتروكة لليمين: 10٪

قم بتكرار وحدة الشخص 4 مرات

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

ضع التكرارات في الأعمدة المتبقية

ضع وحدات مكررة في الأعمدة الأربعة المتبقية من الصف. تأكد من تحرير المحتوى أيضًا.

تحويل الصف إلى مكتبة دائرية ذاتية التمرير

تغيير حجم الخط رقم 2

الآن لتحويل هذا الصف إلى دائرة دائرية لأعضاء الفريق بالتمرير التلقائي ، نحتاج إلى إعادة فتح إعدادات الصف وتغيير العرض والحد الأقصى للعرض في إعدادات الحجم.

• العرض: 180٪
• الحد الأقصى للعرض: 220٪ (مكتب) ، 100٪ (كمبيوتر لوحي وهاتف)

إضافة حركة أفقية للخط رقم 2

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

• تنشيط الحركة الأفقية: نعم
• تعويض البداية:
  • المكتب: 2,5
  • الجهاز اللوحي والهاتف: 0
• متوسط ​​الإزاحة: 0 (بنسبة 40 ٪)
• تعويض النهاية:
  • المكتب: -25 (بنسبة 62٪)
  • الجهاز اللوحي والهاتف: 0
• تأثير حركة الزناد: منتصف العنصر

مسح

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

مكتب

الأفكار النهائية

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

كيفية إضافة المزيد من أيقونات وسائل التواصل الاجتماعي إلى Divi

من قبل بلير Jersyer | يونيو 8، 2020 | ديفي

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

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

كيفية تنشيط رموز الوسائط الاجتماعية الإضافية بسهولة في تذييل Divi

أسهل طريقة لإضافة المزيد من أيقونات الوسائط الاجتماعية إلى موقع Divi الخاص بك هي الانتقال إلى اللوحة خيارات الموضوع ، تفعيل خيارات Facebook و Twitter و Instagram و RSS. ثم كل ما عليك فعله هو إدخال عناوين URL لملف التعريف الخاص بك في الحقول. عند القيام بذلك ، ستراها تظهر كروابط رمز في تذييل موقعك:

في قائمة لوحة تحكم WordPress الخاصة بك ، انتقل إلى ديفي - خيارات الموضوع وانقر فوق علامة التبويب عام . قم بالتمرير لأسفل لرؤية مفتاح الشبكة. أيضًا ، أسفل هذه التبديل مباشرةً ، تأكد من إدخال عناوين URL لكل رمز Divi الاجتماعي الذي تقوم بتنشيطه. وإلا ستظهر الأيقونة ، لكن النقر عليها سيؤدي إلى عدم تواجد المستخدم في أي مكان. باستخدام أ # بدلاً من عنوان URL ، سيُبقي المستخدم على الصفحة بدلاً من إعادة توجيهه إلى ملف الصفحة 404 .

قم بالتمرير إلى نهاية خيارات المظهر الخاص بك وانقر فوق حفظ التغييرات . يمكنك الآن الانتقال إلى تذييل موقعك والنقر فوق الرموز الاجتماعية لاختبارها!

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

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

كيفية استخدام Divi Builder لإضافة أدوات تتبع وسائل التواصل الاجتماعي إلى الصفحة أو نشر المحتوى

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

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

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

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

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

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

سيُطلب منك اختيار الشبكات الاجتماعية التي تريدها قبل أن تبدأ في تخصيصها. اضغط على أضف شبكة اجتماعية جديدة .

ثم حدد واحدة من القائمة المنسدلة.

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

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

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

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

بعد ذلك ، ستصبح رموز الوسائط الاجتماعية الخاصة بك مباشرة على موقعك.

استخدام Divi Theme Builder لإضافة أيقونات وسائل التواصل الاجتماعي

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

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

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

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

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

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

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

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

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

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

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

إضافة أيقونات الوسائط الاجتماعية إلى رأس الصفحة وتذييلها باستخدام Divi Theme Builder

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

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

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

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

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

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

الخلاصة

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

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

إنشاء شبكة مزايا ديناميكية لمنتجات WooCommerce

من قبل بلير Jersyer | يونيو 8، 2020 | ديفي

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

سنوضح لك كيفية تضمين شبكة مزايا المنتج الديناميكية في تصميمك باستخدام Divi والمكوّن الإضافي Advanced Custom Fields. سنبدأ بإنشاء مجموعة من الحقول للفوائد. سنقوم بعد ذلك بملء الحقول المخصصة في صفحة المنتج الخاصة بنا وتضمين المحتوى الديناميكي في قالب صفحة المنتج الخاص بنا. 

النتيجة المحتملة

قبل الغوص في البرنامج التعليمي ، دعنا نلقي نظرة سريعة على النتيجة على أحجام الشاشات المختلفة.

1. قم بتثبيت البرنامج المساعد ACF Plugin and Product Benefit Field Group

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

لعرض مزايا المنتج المختلفة في الواجهة الخلفية لمنتجاتنا ، سنستخدم البرنامج الإضافي المجاني Advanced Custom Fields. الوصول الخاص بك الواجهة الخلفية لـ WordPress> المكونات الإضافية> إضافة جديد> البحث عن مكون إضافي لـ ACF> تثبيت> تنشيط .

انتقل إلى الحقول المخصصة وأضف مجموعة جديدة من الحقول

بمجرد تثبيت وتفعيل المكوّن الإضافي ACF ، ستتمكن من الوصول إلى الحقول المخصصة الخاصة بك وإضافة مجموعة جديدة من الحقول.

إعدادات مجموعة الحقول

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

• "نوع الرسالة" يساوي "المنتج"

أضف الحقل الأول

تابع بإضافة حقل جديد لعنوان فائدة منتجك الأول.

• تسمية الحقل: عنوان المنفعة 1
• نوع الحقل: نص

كرر الخطوة للحقول المتبقية

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

• عنوان الخدمة 1
• وصف الفوائد 1
• عنوان الخدمة 2
• وصف الفوائد 2
• عنوان الخدمة 3
• وصف الفوائد 3
• عنوان الخدمة 4
• وصف الفوائد 4

2. إضافة فوائد للمنتجات

افتح أو أضف منتجًا جديدًا

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

أكمل حقول مزايا المنتج

وتحقيق فوائد المنتج.

3. إنشاء قالب صفحة المنتج في Divi Theme Builder

انتقل إلى Divi Theme Builder وأضف قالبًا جديدًا

حان الوقت للبدء مع Divi! لإنشاء قالب جديد ، انتقل إلى Divi Theme Builder وانقر على "إضافة قالب جديد".

استخدم قالب على جميع المنتجات

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

أدخل محرر قالب نص النموذج

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

تعديل القسم رقم 1

لون الخلفية

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

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

مباعدة

انتقل إلى علامة تبويب تصميم القسم وأضف بعض المساحة المخصصة العلوية والسفلية.

• الحشو العلوي: 10 بكسل
• المساحة السفلية: 10 بكسل

أضف خطًا جديدًا

هيكل العمود

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

مباعدة

بدون إضافة أي تعديلات ، دعنا نفتح إعدادات الصف ونقوم ببعض تعديلات التباعد.

• استخدام ميزاب مخصص: نعم
• عرض الحضيض: 1
• العرض: 90٪
• الحد الأقصى للعرض: 100٪

مباعدة

قم بإزالة جميع المسافات الداخلية العلوية والسفلية.

• هامش داخلي مرتفع: 0 بكسل
• هامش داخلي منخفض: 0 بكسل

أضف وحدة إشعار Woo Cart إلى العمود

محتوى ديناميكي

الوحدة الوحيدة التي نحتاجها في هذا السطر والقسم هي وحدة Woo Cart Notice. تأكد من تحديد "هذا المنتج" في القسم الديناميكي.

• المنتج: هذا المنتج

خلفية ملونة

ثم افتح إعدادات الوحدة واستخدم خلفية شفافة.

• لون الخلفية: rgba (0,0,0,0،XNUMX،XNUMX،XNUMX)

إعدادات النص

قم بالتبديل إلى علامة التبويب "تصميم" وقم بتغيير خط النص.

• خط النص: كارلا

إعداد الزر

قم بإنهاء إعدادات المكون الإضافي من خلال تحديد إعدادات النمط:

• استخدم الأنماط المخصصة للزر: نعم
• حجم نص الزر: 20 بكسل
• لون نص الزر: # 000000
• خلفية الزر: # ffd623
• عرض حد الزر: 0 بكسل
• زر حد مستدير: 0px

• خط الزر: أوزوالد
• نمط خط الزر: Shift

• هامش داخلي مرتفع: 20 بكسل
• هامش داخلي منخفض: 20 بكسل
• الهامش الداخلي الأيسر: 50 بكسل
• الهامش الأيمن الداخلي: 50 بكسل

أضف القسم رقم 2

خلفية متدرجة

أضف قسمًا عاديًا آخر أسفل القسم السابق. ثم افتح الإعدادات واستخدم خلفية متدرجة على النحو التالي:

• اللون 1: # 000000
• اللون 2: #ffffff
• يبدأ فى مكان:
  • سطح المكتب: 30٪
  • الجهاز اللوحي: 57٪
  • الهاتف: 54٪
• موقف النهاية:
  • سطح المكتب: 30٪
  • الجهاز اللوحي: 57٪
  • الهاتف: 54٪

مباعدة

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

• الحشو العلوي: 150 بكسل

أضف سطرًا جديدًا

هيكل العمود

استمر بإضافة سطر جديد بنفس الهيكل كما هو موضح أدناه:

التحجيم

بدون إضافة أي تعديلات حتى الآن ، سنفتح الإعدادات ونغير التباعد كما يلي:

• استخدام المزاريب المخصصة: نعم
• مساحة الميزاب: 1
• العرض: 95٪
• العرض الأقصى: 2560 بكسل
• محاذاة الخط: المركز

التباعد

سنقوم أيضًا بإزالة الهامش الداخلي العلوي أيضًا.

• الحشو العلوي: 0 بكسل

العنصر الرئيسي

ولتوسيط محتوى العمود على سطح المكتب ، سنستخدم سطرين من كود CSS في العنصر الرئيسي لوحدة الصف.

سطح المكتب:

عرض: المرن ؛ محاذاة العناصر: مركز.

الجهاز اللوحي والهاتف:

العرض محجوب؛

أضف وحدة Woo Image إلى العمود 1

محتوى ديناميكي

حان الوقت لإضافة وحدات ، سنبدأ بوحدة Woo Images في العمود 1. تأكد من تحديد "هذا المنتج".

• المنتج: هذا المنتج

تأثير حركة التمرير العمودي

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

• تنشيط الحركة العمودية: نعم
• تعويض البداية:
  • المكتب: -4
  • الجهاز اللوحي والهاتف: 0
• الإزاحة المتوسطة: 0
• تعويض النهاية: 0
• تأثير حركة الزناد: منتصف العنصر

أضف وحدة عنوان Woo إلى العمود 2

محتوى ديناميكي

في العمود 2 ، أول تعديل نحتاجه هو تعديل عنوان Woo. تأكد من تحديد "هذا المنتج" في منطقة المحتوى الديناميكي.

• المنتج: هذا المنتج

إعدادات نص العنوان

ثم انتقل إلى علامة تبويب التصميم وقم بتنسيق نص العنوان على النحو التالي:

• خط العنوان: أوزوالد
• نمط خط العنوان: أحرف كبيرة
• لون نص العنوان: # ffd623
• حجم نص العنوان: 80 بكسل

مباعدة

أكمل وحدة عنوان Woo بإضافة الهوامش اليسرى واليمنى.

• الهامش الأيسر: 5٪
• الهامش الأيمن: 5٪

إضافة وحدة وصف وو إلى العمود 2

محتوى ديناميكي

دعنا ننتقل إلى الوحدة التالية ، وهي وحدة وصف Woo. نحن نستخدم المحتوى الديناميكي التالي لهذا:

• المنتج: هذا المنتج
• نوع الوصف: وصف قصير

إعدادات النص

قم بالتبديل إلى علامة تبويب تصميم الوحدة النمطية وقم بتغيير إعدادات النص وفقًا لذلك:

• خط النص: كارلا
• لون النص: #dbdbdb
• حجم النص: 17 بكسل (سطح المكتب والجهاز اللوحي) ، 15 بكسل (الهاتف)
• ارتفاع سطر النص: 1,9 م

التحجيم

ثم قم بتغيير العرض على أحجام الشاشات المختلفة.

• العرض: 59٪ (سطح المكتب) ، 82٪ (الكمبيوتر اللوحي والهاتف)

مباعدة

أكمل وحدة وصف Woo بإضافة قيم هامش مخصصة في إعدادات التباعد.

• الهامش العلوي: 50px
• الهامش السفلي: 100px
• الهامش الأيسر: 5٪
• الهامش الأيمن: 5٪

أضف الوحدة النمطية Blurb إلى عمود 2

محتوى ديناميكي

لعرض مزايا المنتج التي أضفناها في الجزء الأول من هذا البرنامج التعليمي ، سنستخدم وحدات Blurb. أضف وحدة Blurb أولًا واستخدم المحتوى الديناميكي للمنفعة الأولى المنتجة للعنوان والجسم.

• العنوان: عنوان المنفعة 1
• نص: وصف المنفعة 1

تحميل الصور

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

إعدادات الصورة / الرمز

انتقل إلى علامة تبويب تصميم الوحدة وقم بتغيير إعدادات الصورة / الرمز على النحو التالي:

• وضع الصورة / الرمز: أعلى
• محاذاة الصورة / الرمز: إلى اليسار

إعدادات نص العنوان

نقوم بتعديل إعدادات نص العنوان بعد ذلك.

• خط العنوان: Oswald
• نمط خط العنوان: Uppercase
• حجم نص العنوان: 25 بكسل

إعدادات النص الأساسي

إلى جانب إعدادات النص الأساسي.

• خط الجسم: Karla
• حجم النص: 17 بكسل (سطح المكتب والجهاز اللوحي) ، 15 بكسل (الهاتف)
• ارتفاع خط الجسم: 1,9 م

التحجيم

ثم انتقل إلى إعدادات التحجيم وقم بتغيير العرض. من المهم استخدام عرض رئيسي أقل من 50٪ ، وهذا سيسمح لنا بإظهار وحدتي Blurb جنبًا إلى جنب في الخطوات التالية.

• عرض الصورة: 25٪
• العرض: 49٪

مباعدة

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

• الحشو العلوي: 8٪
• المساحة السفلية: 8٪
• المساحة المتروكة اليسرى: 8٪ (سطح المكتب والجهاز اللوحي) ، 2٪ (الهاتف)
• المساحة المتروكة لليمين: 8٪ (الكمبيوتر المكتبي والجهاز اللوحي) 2٪ (الهاتف)

العنصر الرئيسي

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

عرض: المحول لبنة؛

استنساخ وحدة الملخص 3 مرات

بمجرد الانتهاء من أول تعديل Blurb ، يمكنك استنساخه ثلاث مرات. ستلاحظ تلقائيًا ظهور وحدات Blurb النمطية في شبكة.

قم بتحرير صور وحدة Blurb

قم بتحرير الصورة في كل جراب Blurb مكرر. يمكنك العثور عليها في مجلد التنزيل الذي ربما تكون قد قمت بتنزيله في بداية هذه المقالة.

تعديل المحتوى الديناميكي لوحدة Blurb

قم أيضًا بتعديل المحتوى الديناميكي لكل وحدة Blurb مكررة.

• العنوان: عنوان الخدمة (2,3،4 أو ​​XNUMX)
• النص: وصف المزايا (2,3،4 أو ​​XNUMX)

أضف حدودًا إلى وحدات Blurb بشكل فردي

إعدادات حدود Blurb الوحدة النمطية 1

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

• عرض الحد الأيمن: 1 بكسل
• لون الحد الأيمن: # ffd623

أضف أيضًا حدًا سفليًا إلى أول وحدة Blurb.

• عرض الحدود السفلية: 1 بكسل
• لون الحدود السفلية: # 000000

إعدادات حدود Blurb الوحدة النمطية 2

ثم افتح وحدة Blurb الثانية واستخدم حدًا سفليًا.

• عرض الحدود السفلية: 1 بكسل
• لون الحدود السفلية: # 000000

إعدادات حدود Blurb الوحدة النمطية 3

أكمل تصميم الشبكة بإضافة حد مستقيم إلى وحدة Blurb الثالثة.

• عرض الحد الأيمن: 1 بكسل
• لون الحد الأيمن: # ffd623

إضافة وو إضافة إلى سلة الوحدة النمطية في العمود 2

محتوى ديناميكي

آخر وحدة نحتاجها في تصميمنا هي وحدة Woo Add to Cart. تأكد من تحديد "هذا المنتج" في منطقة المحتوى الديناميكي.

• المنتج: هذا المنتج

إعدادات المجال

انتقل إلى علامة تبويب التصميم التالية وقم بتغيير إعدادات الحقل.

• لون خلفية الحقول: #ffffff
• لون نص الحقل: # 000000

• الحقول المستديرة: 0 بكسل (جميع الزوايا)
• عرض الحدود الدنيا للحقول: 1 بكسل
• لون الحدود السفلية للحقول: # 000000

إعدادات زر

ثم ، قم بتصميم الزر وفقًا لذلك:

• استخدم الأنماط المخصصة للزر: نعم
• حجم نص الزر: 20 بكسل
• لون نص الزر: # 000000
• لون خلفية الزر: # ffd623
• عرض حد الزر: 0px
• نصف قطر حد الزر: 0px

• خط الزر: أوزوالد
• نمط خط الزر: أحرف كبيرة

• الحشو العلوي: 20px
• الحشو السفلي: 20px
• حشوة اليسار: 50px
• الحشوة اليمنى: 50 بكسل

مباعدة

وأكمل معلمات الوحدة بإضافة قيم الهامش المخصصة.

• الهامش العلوي: 100px
• الهامش الأيسر: 5٪

3. حفظ التعديلات على مولد الموضوع ومعاينة النتيجة

بمجرد الانتهاء من تصميم قالب صفحة المنتج ، يمكنك حفظ جميع تغييرات Theme Builder وعرض النتائج على منتجاتك!

مسح

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

الأفكار النهائية

في هذه المقالة ، أوضحنا لك كيفية الإبداع مع قالب صفحة منتج Divi التالي. على وجه التحديد ، أوضحنا لك كيفية تضمين شبكة مزايا ديناميكية للمنتج لإضافة مزايا إضافية إلى صفحة منتجك. أنشأنا هذا البرنامج التعليمي باستخدام Divi بالاشتراك مع المكون الإضافي Advanced Custom Fields. يمكنك أيضًا تنزيل ملف JSON مجانًا! إذا كان لديك أي أسئلة أو اقتراحات ، فلا تتردد في ترك تعليق في قسم التعليقات أدناه.

كيفية تنفيذ الوضع المظلم على موقعك باستخدام Divi

من قبل بلير Jersyer | يونيو 1، 2020 | ديفي

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

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

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

دعونا نبدأ!

مسح

فيما يلي معاينة للتصميم الذي سنبنيه في هذا البرنامج التعليمي.

هنا تبديل الوضع المظلم المخصص الذي سنقوم بإنشائه.

وإليك ما قبل وبعد الوضع المظلم المطبق على أحد تخطيطاتنا المحددة مسبقًا.

وإليك وضع تبديل الوضع المظلم مضافًا إلى رأس عام. لاحظ كيف يظل الوضع الفاتح / المظلم عند تصفح الموقع.

الجزء 1: بناء التبديل من الوضع المظلم

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

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

إضافة وحدة ملخص

لإنشاء التبديل المخصص ، سنقوم بتصميم وحدة Blurb مع القليل من CSS المخصص.

إضافة وحدة نصية عرض تقديمي جديدة إلى السطر.

محتويات

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

تصور

انتقل إلى إعدادات التصميم وقم بتحديث ما يلي:

• لون الأيقونة: # 666666
• محاذاة الصورة / الرمز: إلى اليسار
• حجم خط الأيقونة: 22 بكسل

• العرض: 50px
• محاذاة الوحدة: المركز
• الارتفاع: 25px

• الهامش: 0px منخفضة
• زوايا مدورة: 4px
• عرض الحدود: 2 بكسل
• لون الحدود: 666666 #

عرف المغلق

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

الفائض: مرئي! مهم ؛

ثم أضف CSS المخصص التالي إلى العنصر After:

المحتوى: "خفيف" ؛ الموضع: مطلق ؛ يسار: -35 بكسل ؛ أعلى: 0 بكسل ؛

يؤدي ذلك إلى إضافة تسمية إلى وحدة Blurb التي سنقوم بتغييرها من "light" إلى "dark" عند النقر.

تصميم النص الأساسي

نظرًا لأن نص العنصر الزائف المنشور يرث أنماط النص الأساسي ، يمكننا إضافة أنماط النص الأساسي باستخدام خيارات Divi على النحو التالي:

• خط الجسم: Roboto
• لون النص الأساسي: # 666666
• نص حجم النص: 13px
• تباعد حروف الجسم: 1px

إضافة رمز مخصص مع وحدة رمز

لإضافة الرمز اللازم (CSS / JQuery) لتشغيل تبديل الوضع المظلم ، سنستخدم وحدة رمز.

أنشئ وحدة رمز جديدة تحت وحدة Blurb في العمود نفسه.

ثم الصق الكود التالي في منطقة الكود:

/*** Dark Mode Toggle Styles*/.et-dark-mode {transition: all .5s;}.et-dark-toggle {cursor: pointer;transition: all .5s;}body.et-dark-mode .et-dark-toggle {border-color: #666666;}body.et-dark-mode .et-dark-toggle:after {content:"dark";color: #666666;left: 54px;}body.et-dark-mode .et-dark-toggle .et_pb_blurb_content {text-align:right;}body.et-dark-mode .et-dark-toggle .et-pb-icon {color: #666666;}/*** Body Dark Mode Style*/body.et-dark-mode {background-color: #23282d !important;}/*** Divi Element Dark Mode Styles** Here you can add styling for each Divi Element that has the class "et-dark-mode-capable".*//* Section with dark mode */.et_pb_section.et-dark-mode-capable.et-dark-mode {background-color: #23282d !important;background-blend-mode: overlay;transition: opacity .5s ease-in-out;color: #dddddd !important;}/* Row with dark mode */.et_pb_row.et-dark-mode-capable.et-dark-mode {background-color: #23282d !important;color: #dddddd !important;}/* Column with dark mode */.et_pb_column.et-dark-mode-capable.et-dark-mode {background-color: #23282d !important;color: #dddddd !important;}/* Module with dark mode */.et_pb_module.et-dark-mode-capable.et-dark-mode {background-color: transparent !important;color: #dddddd !important;}/* Text Headings with dark mode */.et_pb_module.et-dark-mode-capable.et-dark-mode.et_pb_module_header,.et_pb_module.et-dark-mode-capable.et-dark-mode h1,.et_pb_module.et-dark-mode-capable.et-dark-mode h2,.et_pb_module.et-dark-mode-capable.et-dark-mode h3,.et_pb_module.et-dark-mode-capable.et-dark-mode h4,.et_pb_module.et-dark-mode-capable.et-dark-mode h5,.et_pb_module.et-dark-mode-capable.et-dark-mode h6 {color: #dddddd !important;}function storageAvailable(type) {try {var storage = window[type],x = '__storage_test__';storage.setItem(x, x);storage.removeItem(x);return true;}catch(e) {return e instanceof DOMException && (// everything except Firefoxe.code === 22 ||// Firefoxe.code === 1014 ||// test name field too, because code might not be present// everything except Firefoxe.name === 'QuotaExceededError' ||// Firefoxe.name === 'NS_ERROR_DOM_QUOTA_REACHED') &&// acknowledge QuotaExceededError only if there's something already storedstorage.length !== 0;}}jQuery(document).ready(function($) {var storageAvailable = window.storageAvailable('sessionStorage');$(".et-dark-toggle").click(function() {$(".et-dark-mode-capable,body").toggleClass("et-dark-mode");if ( storageAvailable ) {$("body").hasClass("et-dark-mode") ?sessionStorage.setItem('etDarkModeEnabled','1'):sessionStorage.removeItem('etDarkModeEnabled');}});if (storageAvailable) {'1' == sessionStorage.getItem('etDarkModeEnabled') ?$(".et-dark-mode-capable,body").addClass("et-dark-mode"):$(".et-dark-mode-capable,body").removeClass("et-dark-mode");}});

إضافة فئات CSS مخصصة

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

فئة وحدة Blurb

افتح إعدادات وحدة Blurb وأضف فئة CSS مخصصة على النحو التالي:

• فئة CSS: et-dark-toggle

فئة قادرة على الوضع المظلم

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

للبدء ، يمكننا إضافة الوضع المظلم إلى القسم الذي يحتوي على تبديل الوضع المظلم.

افتح معلمات القسم وأضف فئة CSS التالية:

• فئة CSS: إمكانية وضع et-dark

الجزء 2: إضافة ميزات الوضع المظلم إلى صفحة Divi

الآن بعد أن أصبح لدينا كود CSS وفئاته في مكانه الصحيح ، نحن مستعدون لتطبيق وظيفة Dark Mode والتصميم على صفحة كاملة في Divi. للقيام بذلك ، سنستخدم تخطيط Premade الخاص بنا للصفحة المقصودة لتطبيق الهاتف المحمول.

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

ثم حدد تخطيط الصفحة المقصودة لتطبيق الجوال من علامة التبويب التخطيطات المحددة مسبقًا.

تأكد من عدم تحديد الخيار "استبدال المحتوى الموجود". لا تريد مسح القسم باستخدام تبديل الوضع المظلم.

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

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

إضافة فئة CSS إلى عناصر الصفحة

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

جميع الأقسام

لإضافة فئة CSS إلى جميع الأقسام ، افتح إعدادات القسم العلوي الذي يحتوي على تبديل الوضع المظلم. ثم قم بتغيير الإعدادات الافتراضية العامة للقسم وأضف فئة CSS التالية إلى الإعدادات الافتراضية العامة للقسم:

• فئة CSS: إمكانية وضع et-dark

جميع الأقسام المتخصصة

أضف أيضًا فئة CSS إلى الإعدادات الافتراضية العامة في القسم المتخصص.

وحدات النص

ثم افتح الإعدادات الخاصة بإحدى وحدات النص على الصفحة وأضف نفس فئة CSS إلى الإعدادات الافتراضية للنص العام.

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

إليك ما يجب أن تبدو عليه الصفحة في الوضع الواضح.

وإليك ما يجب أن تبدو عليه الصفحة في الوضع المظلم.

موارد إضافية

فيما يلي موارد أخرى قد تهمك.

• كيفية تخصيص الطباعة والتخطيط على Divi
• كيفية إضافة استدعاء انزلاق reclosable للعمل على Divi
• كيفية محاذاة العناصر على نفس السطر على Divi
• كيفية إنشاء أقسام متحركة بالضغط على Divi Builder

الأفكار النهائية

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