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

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

[vc_row content_placement = "middle" css = ". vc_custom_1508940533685 {background-color: # f8f6f6! important؛}" el_id = "themeforestpro"] [vc_column width = "3/4" css = ". vc_custom_1502759058885px {margin-bottom: 0 ! important؛ border-bottom-width: 0px! important؛ padding-bottom: 0px! important؛} "] [vc_column_text]

Divi: أسهل طريقة لاستخدام WordPress

[/ vc_column_text] [/ vc_column] [vc_column width = "1/4"] [vcex_button url = "https://www.elegantthemes.com/affiliates/idevaffiliate.php؟id=23065&tid1=divibeforepostmobile" target = "blank" size = "small" align = "center" color = "green" font_family = "Raleway" font_weight = "600" style = "flat" custom_color = "# ffffff" custom_hover_color = "# ffffff"] DOWNLOAD [/ vcex_button] [/ vc_column] [/ vc_row]

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

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

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

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

قالب العنوان العالمي لعنوان الموقع الديناميكي 6

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

مثال على تعديل عنوان Divi

تنزيل مجاني

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

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

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

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

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

اختر قالب divi

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

تعديل رأس divi العالمي

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

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

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

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

تخصيص عنوان divi

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

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

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

تخصيص هوية وورد

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

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

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

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

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

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

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

استيراد نموذج Divi

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

إزالة القالب من التذييل

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

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

نقل الشعار

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

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

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

تخصيص عبارة الحث على اتخاذ إجراء

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

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

تكوين إجراءات الحث على اتخاذ إجراء

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

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

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

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

أضف شعار موقع divi

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

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

إضافة ارتباط إلى الصفحة الرئيسية

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

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

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

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

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

المساحة المتروكة للأسفل: 0 بكسل
إضافة كود divi مخصص css

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

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

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

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

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

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

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

تخصيص زر الاتصال divi

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

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

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

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

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

اعرض شعار divi

نتيجة نهائية

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

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

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

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

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

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

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

[vc_row content_placement = "middle" css = ". vc_custom_1508940533685 {background-color: # f8f6f6! important؛}" el_id = "themeforestpro"] [vc_column width = "3/4" css = ". vc_custom_1502759058885px {margin-bottom: 0 ! important؛ border-bottom-width: 0px! important؛ padding-bottom: 0px! important؛} "] [vc_column_text]

Divi: أسهل طريقة لاستخدام WordPress

[/ vc_column_text] [/ vc_column] [vc_column width = "1/4"] [vcex_button url = "https://www.elegantthemes.com/affiliates/idevaffiliate.php؟id=23065&tid1=divibeforepostmobile" target = "blank" size = "small" align = "center" color = "green" font_family = "Raleway" font_weight = "600" style = "flat" custom_color = "# ffffff" custom_hover_color = "# ffffff"] DOWNLOAD [/ vcex_button] [/ vc_column] [/ vc_row]

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

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

دعونا نذهب.

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

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

الانتقال بين قسم divi

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

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

مباعدة

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

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

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

هيكل العمود

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

التحجيم

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

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

مباعدة

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

  • الهامش العلوي: 200px
  • الهامش السفلي: 200px
تكوين تباعد الأسطر Divi

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

أضف محتوى H2

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

خدماتنا يقدمها خبراء اللحظة

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

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

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

مباعدة

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

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

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

إضافة محتوى

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

مربع نص المحتوى divi

إعدادات النص

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

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

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

رؤية

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

  • إظهار الفاصل: نعم
حاجز مرئي

خط

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

  • لون الخط: # 000000
خلفية لون المقسم

التحجيم

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

  • وزن المقسم: 3px
  • العرض: 28٪
تحجيم فاصل ديفي

مباعدة

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

  • الهامش العلوي: 10px
تباعد وحدة فاصل Divi

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

مباعدة

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

  • الحشو العلوي: 0px
القسم 2 تباعد ديفي

الفيضانات

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

  • تجاوز أفقي: مخفي
  • تجاوز عمودي: مخفي
إخفاء فائض وحدة divi

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

هيكل العمود

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

اختر تخطيط divi

التحجيم

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

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

مباعدة

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

  • الحشو العلوي: 0px
  • الحشو السفلي: 0px
إعدادات تباعد وحدة Divi 1 line

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

لون الخلفية

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

  • لون الخلفية: # f7f7f7
تكوين خلفية وحدة خط Divi

مباعدة

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

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

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

مباعدة

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

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

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

رؤية

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

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

خط

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

  • لون الخط: # 000000
إعدادات فاصل ديفي

التحجيم

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

  • وزن المقسم: 3px
  • العرض: 50٪
تحجيم فاصل ديفي

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

أضف محتوى H3

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

إعداد قسم محتوى Divi

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

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

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

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

إضافة محتوى

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

إعداد وحدة نص Divi

إعدادات النص

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

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

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

أضف نسخة

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

إعداد محتوى وحدة النص

إعدادات زر

ثم صمم الزر.

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

مباعدة

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

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

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

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

  • المنصب: مطلق
  • الموقع: أسفل اليسار
تعديل موضع وحدة زر Divi

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

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

وحدة استنساخ divi

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

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

تحرير محتوى قسم divi

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

نتيجة نهائية

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

العرض النهائي

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

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

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

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

[vc_row content_placement = "middle" css = ". vc_custom_1508940533685 {background-color: # f8f6f6! important؛}" el_id = "themeforestpro"] [vc_column width = "3/4" css = ". vc_custom_1502759058885px {margin-bottom: 0 ! important؛ border-bottom-width: 0px! important؛ padding-bottom: 0px! important؛} "] [vc_column_text]

Divi: أسهل طريقة لاستخدام WordPress

[/ vc_column_text] [/ vc_column] [vc_column width = "1/4"] [vcex_button url = "https://www.elegantthemes.com/affiliates/idevaffiliate.php؟id=23065&tid1=divibeforepostmobile" target = "blank" size = "small" align = "center" color = "green" font_family = "Raleway" font_weight = "600" style = "flat" custom_color = "# ffffff" custom_hover_color = "# ffffff"] DOWNLOAD [/ vcex_button] [/ vc_column] [/ vc_row]

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

برهنة

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

انتقل عضو فريق divi

بداية الحمل

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

مباعدة

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

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

الفيضانات

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

  • تجاوز أفقي: مخفي
  • تجاوز عمودي: مخفي
تكوين الفائض

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

هيكل العمود

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

اختر تخطيط divi

التحجيم

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

  • العرض: 90٪
  • العرض الأقصى: 1580 بكسل
معلمة خط ديفي

مباعدة

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

  • الحشو العلوي: 100px
  • الحشو السفلي: 100px
تكوين divi تباعد الأسطر

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

أضف محتوى H2

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

قابل الفريق

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

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

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

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

رؤية

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

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

خط

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

  • لون الخط: # edf000
  • نمط الخط: الصلبة
  • موضع الخط: أعلى
أسلوب تباعد ديفي

التحجيم

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

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

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

هيكل العمود

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

تكوين عمود ديفي

التحجيم

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

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

مباعدة

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

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

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

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

تكوين خط معلمة Divi

خلفية التدرج

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

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

صورة الخلفية

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

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

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

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

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

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

إضافة محتوى

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

اسم الشخص divi

حذف صورة

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

إزالة صورة divi

صورة الخلفية

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

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

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

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

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

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

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

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

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

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

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

مباعدة

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

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

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

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

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

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

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

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

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

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

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

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

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

مسح

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

مكتب

انتقل عضو فريق divi

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

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

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

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

[vc_row content_placement = "middle" css = ". vc_custom_1508940533685 {background-color: # f8f6f6! important؛}" el_id = "themeforestpro"] [vc_column width = "3/4" css = ". vc_custom_1502759058885px {margin-bottom: 0 ! important؛ border-bottom-width: 0px! important؛ padding-bottom: 0px! important؛} "] [vc_column_text]

Divi: أسهل طريقة لاستخدام WordPress

[/ vc_column_text] [/ vc_column] [vc_column width = "1/4"] [vcex_button url = "https://www.elegantthemes.com/affiliates/idevaffiliate.php؟id=23065&tid1=divibeforepostmobile" target = "blank" size = "small" align = "center" color = "green" font_family = "Raleway" font_weight = "600" style = "flat" custom_color = "# ffffff" custom_hover_color = "# ffffff"] DOWNLOAD [/ vcex_button] [/ vc_column] [/ vc_row]

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

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

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

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

الرموز الاجتماعية divi

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

خيارات موضوع Divi

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

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

ديفي ووردبرس

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

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

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

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

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

خلق ديفي المادة

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

تخطيط ديفي جوتنبرج

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

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

إدراج وحدة متابعة على وسائل التواصل الاجتماعي

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

أضف الوحدة الاجتماعية للشبكة الاجتماعية divi

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

أضف شبكة اجتماعية جديدة

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

زر تخصيص الشبكة الاجتماعية

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

تخصيص الرموز الاجتماعية

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

تابعونا زر divi

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

زر Divi تابعنا

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

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

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

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

باني ديفي

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

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

أضف نموذج divi

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

تخطيط ديفي

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

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

اختر الوحدة الاجتماعية

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

وحدة الوسائط الاجتماعية الأيقونة divi

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

الظهور على divi مع زر المشاركة

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

تحرك وحدة Divi الاجتماعية للمشاركة

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

أيقونات الشريط الجانبي

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

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

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

التخصيص موضوع تخطيط divi

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

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

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

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

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

الخلاصة

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

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

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

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

[vc_row content_placement = "middle" css = ". vc_custom_1508940533685 {background-color: # f8f6f6! important؛}" el_id = "themeforestpro"] [vc_column width = "3/4" css = ". vc_custom_1502759058885px {margin-bottom: 0 ! important؛ border-bottom-width: 0px! important؛ padding-bottom: 0px! important؛} "] [vc_column_text]

Divi: أسهل طريقة لاستخدام WordPress

[/ vc_column_text] [/ vc_column] [vc_column width = "1/4"] [vcex_button url = "https://www.elegantthemes.com/affiliates/idevaffiliate.php؟id=23065&tid1=divibeforepostmobile" target = "blank" size = "small" align = "center" color = "green" font_family = "Raleway" font_weight = "600" style = "flat" custom_color = "# ffffff" custom_hover_color = "# ffffff"] DOWNLOAD [/ vcex_button] [/ vc_column] [/ vc_row]

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

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

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

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

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

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

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

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

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

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

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

إنشاء حقول ACF

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

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

  • "نوع الرسالة" يساوي "المنتج"
أضف القواعد

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

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

  • تسمية الحقل: عنوان المنفعة 1
  • نوع الحقل: نص
أضف حقل ac
تخصيص مجال Divi

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

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

  • عنوان الخدمة 1
  • وصف الفوائد 1
  • عنوان الخدمة 2
  • وصف الفوائد 2
  • عنوان الخدمة 3
  • وصف الفوائد 3
  • عنوان الخدمة 4
  • وصف الفوائد 4
تكوين حقول ACF

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

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

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

إنشاء منتج Divi

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

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

املأ حقول مزايا divi

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

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

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

باني موضوع ديفي

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

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

أضف جميع منتجات woocommerce

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

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

بناء الجسم divi

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

لون الخلفية

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

  • لون الخلفية: # 000000
تكوين خلفية قسم ديفي

مباعدة

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

  • الحشو العلوي: 10 بكسل
  • المساحة السفلية: 10 بكسل
تكوين تباعد قسم Divi

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

هيكل العمود

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

تكوين تخطيط وحدة الخط

مباعدة

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

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

مباعدة

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

  • هامش داخلي مرتفع: 0 بكسل
  • هامش داخلي منخفض: 0 بكسل
إعدادات تباعد وحدة خط Divi

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

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

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

  • المنتج: هذا المنتج
إعدادات وحدة إشعار عربة التسوق divi

خلفية ملونة

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

  • لون الخلفية: rgba (0,0,0,0،XNUMX،XNUMX،XNUMX)
إعدادات وحدة عربة Woo divi

إعدادات النص

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

  • خط النص: كارلا
إعدادات خط وحدة Divi

إعداد الزر

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

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

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

خلفية متدرجة

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

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

مباعدة

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

  • الحشو العلوي: 150 بكسل
تكوين تباعد وحدة خط Divi

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

هيكل العمود

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

تكوين نمط خط ديفي

التحجيم

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

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

التباعد

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

  • الحشو العلوي: 0 بكسل
تكوين تباعد وحدة Divi

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

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

سطح المكتب:

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

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

العرض محجوب؛
إعدادات نمط وحدة خط Divi

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

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

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

  • المنتج: هذا المنتج
إعدادات وحدة صورة منتج Woocommerce

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

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

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

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

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

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

  • المنتج: هذا المنتج
شبكة فوائد المنتج

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

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

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

مباعدة

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

  • الهامش الأيسر: 5٪
  • الهامش الأيمن: 5٪
إعداد وحدة عنوان Divi

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

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

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

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

إعدادات النص

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

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

التحجيم

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

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

مباعدة

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

  • الهامش العلوي: 50px
  • الهامش السفلي: 100px
  • الهامش الأيسر: 5٪
  • الهامش الأيمن: 5٪
وحدة وصف المنتج Divi

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

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

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

  • العنوان: عنوان المنفعة 1
  • نص: وصف المنفعة 1
إعداد نص وحدة ملخص Divi

تحميل الصور

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

صورة ملخص وحدة تكوين divi

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

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

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

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

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

  • خط العنوان: Oswald
  • نمط خط العنوان: Uppercase
  • حجم نص العنوان: 25 بكسل
تكوين خط وحدة ملخص divi

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

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

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

التحجيم

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

  • عرض الصورة: 25٪
  • العرض: 49٪
تكوين تحجيم وحدة ملخص divi

مباعدة

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

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

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

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

عرض: المحول لبنة؛
إضافة وحدة divi كود css

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

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

قسم اسم المنتج divi

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

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

صورة وحدة ملخص Divi

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

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

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

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

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

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

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

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

  • عرض الحدود السفلية: 1 بكسل
  • لون الحدود السفلية: # 000000
تكوين الهامش السفلي divi
إعدادات حدود Blurb الوحدة النمطية 2

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

  • عرض الحدود السفلية: 1 بكسل
  • لون الحدود السفلية: # 000000
تكوين ملخص وحدة الحدود divi
إعدادات حدود Blurb الوحدة النمطية 3

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

  • عرض الحد الأيمن: 1 بكسل
  • لون الحد الأيمن: # ffd623
شبكة فوائد المنتج

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

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

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

  • المنتج: هذا المنتج
إضافة إلى إعدادات وحدة بطاقة divi

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

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

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

إعدادات زر

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

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

مباعدة

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

  • الهامش العلوي: 100px
  • الهامش الأيسر: 5٪
تكوين تباعد divi

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

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

حفظ تصميم ديفي
حفظ تعديلات divi

مسح

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

نتيجة العرض

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

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

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

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

[vc_row content_placement = "middle" css = ". vc_custom_1508940533685 {background-color: # f8f6f6! important؛}" el_id = "themeforestpro"] [vc_column width = "3/4" css = ". vc_custom_1502759058885px {margin-bottom: 0 ! important؛ border-bottom-width: 0px! important؛ padding-bottom: 0px! important؛} "] [vc_column_text]

Divi: أسهل طريقة لاستخدام WordPress

[/ vc_column_text] [/ vc_column] [vc_column width = "1/4"] [vcex_button url = "https://www.elegantthemes.com/affiliates/idevaffiliate.php؟id=23065&tid1=divibeforepostmobile" target = "blank" size = "small" align = "center" color = "green" font_family = "Raleway" font_weight = "600" style = "flat" custom_color = "# ffffff" custom_hover_color = "# ffffff"] DOWNLOAD [/ vcex_button] [/ vc_column] [/ vc_row]

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

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

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

دعونا نبدأ!

مسح

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

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

تبديل الوضع الداكن

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

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

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

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

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

قسم ديفي

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

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

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

محتويات

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

وحدة ملخص Divi

تصور

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

  • لون الأيقونة: # 666666
  • محاذاة الصورة / الرمز: إلى اليسار
  • حجم خط الأيقونة: 22 بكسل
تكوين أيقونة Divi
  • العرض: 50px
  • محاذاة الوحدة: المركز
  • الارتفاع: 25px
تكوين ديفي تحجيم
  • الهامش: 0px منخفضة
  • زوايا مدورة: 4px
  • عرض الحدود: 2 بكسل
  • لون الحدود: 666666 #
تكوين حدود Divi

عرف المغلق

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

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

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

  • فئة CSS: إمكانية وضع et-dark
قسم divi محدد Css

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

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

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

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

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

اختر تخطيط divi 1

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

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

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

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

جميع الأقسام

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

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

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

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

اضافة الى جميع الاقسام المتخصصة

وحدات النص

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

أضف إلى وحدات النص

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

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

الوضع الواضح

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

وضع الظلام

موارد إضافية

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

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

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