كيفية تسليط الضوء بشكل تفاعلي على تفاصيل الاتصال في التذييل العالمي الخاص بك مع Divi

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

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

معاينة

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

سطح المكتب

متحرك

قم بتنزيل قالب التذييل العالمي مجانًا

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

قم بتنزيل الملفات

تنزيل مجاني

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

تحميل

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

1. إنشاء قالب تذييل جديد

انتقل إلى Divi Theme Builder وأضف تذييلًا عالميًا أو مخصصًا جديدًا

ابدأ بالانتقال إلى Divi Theme Builder في الواجهة الخلفية لموقع WordPress الخاص بك. هناك ، أضف تذييلًا عامًا أو مخصصًا جديدًا.

ابدأ البناء من الصفر

ابدأ في بناء قالب التذييل من البداية.

2. بناء تصميم تذييل

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

لون الخلفية

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

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

أضف الصف رقم 1

هيكل العمود

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

تحجيم

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

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

تباعد

أضف بعض الحشوة السفلية بعد ذلك.

• حشوة سفلية: 1٪

العمود العنصر الرئيسي CSS

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

سطح المكتب:

display: flex;
flex-direction: row;

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

display: block;

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

محتوى متجاوب

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

تحوم المحتوى

قم بتعديل محتوى التمرير بعد ذلك.

لون الخلفية

ثم قم بتطبيق لون الخلفية.

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

لون الخلفية تحوم

قم بتعديل لون الخلفية عند التمرير.

• تحوم لون الخلفية: # 00ff88

إعدادات نص H3

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

• العنوان 3 الخط: أوزوالد
• وزن خط العنوان 3: غامق
• نمط خط العنوان 3: أحرف كبيرة وتسطير
• العنوان 3 محاذاة النص: الوسط
• لون نص العنوان 3: # 000000
• حجم نص العنوان 3:
  • سطح المكتب: 2.5vw
  • الجهاز اللوحي: 4.5vw
  • الهاتف: 5.5vw

تحجيم

تأكد من أن العرض هو "100٪" بعد ذلك.

• العرض: 100٪

تباعد

بعد ذلك ، قم بتطبيق قيم التباعد سريعة الاستجابة التالية:

• الهامش السفلي:
  • سطح المكتب: /
  • الجهاز اللوحي والهاتف: 1٪
• الهامش الأيمن:
  • سطح المكتب: 1٪
  • الجهاز اللوحي والهاتف: 0٪
• الحشو العلوي: 10vh
• الحشوة السفلية: 10vh

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

قم بتطبيق الأسطر التالية من كود CSS على الوحدة أيضًا:

flex: 1;
position: relative !important;
transition: flex 800ms !important;

تحوم العنصر الرئيسي CSS

وقم بتغيير الخاصية hover main element CSS flex.

flex: 3;

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

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

تعديل وحدة النص # 2

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

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

تغيير التباعد

قم بإزالة الهامش الأيمن لهذه الوحدة أيضًا.

تعديل وحدة النص # 3

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

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

تغيير التباعد

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

• الهامش الأيسر:
  • سطح المكتب: 1٪
  • الجهاز اللوحي والهاتف: 0٪

أضف الصف رقم 2

هيكل العمود

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

لون الخلفية

افتح إعدادات الصف وقم بتطبيق لون الخلفية التالي:

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

تحجيم

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

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

تباعد

قم بتعديل إعدادات تباعد الصف أيضًا.

• الحشوة العلوية:
  • سطح المكتب: 100 بكسل
  • الجهاز اللوحي والهاتف: 50 بكسل
• الحشوة السفلية:
  • سطح المكتب: 100 بكسل
  • الجهاز اللوحي والهاتف: 50 بكسل
• الحشوة اليسرى:
  • سطح المكتب: 8٪
  • الجهاز اللوحي والهاتف: 10٪
• الحشوة اليمنى:
  • سطح المكتب: 8٪
  • الجهاز اللوحي والهاتف: 10٪

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

أضف محتوى H4

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

إعدادات نص H4

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

• العنوان 4 الخط: أوزوالد
• نمط خط العنوان 4: أحرف كبيرة
• لون نص العنوان 4: #ffffff
• حجم نص العنوان 4:
  • سطح المكتب: 26 بكسل
  • الجهاز اللوحي: 22 بكسل
  • الهاتف: 18 بكسل
• عنوان 4 خط ارتفاع: 1.3em

تباعد

قم بتطبيق بعض الهامش السفلي أيضًا.

• الهامش السفلي: 20 بكسل

أضف وحدة النص رقم 2 إلى العمود 1

إضافة محتوى

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

إعدادات نص الارتباط

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

• خط الارتباط: Lato
• لون نص الرابط: # 00ff88
• حجم نص الرابط: 17 بكسل

تباعد

قم بتطبيق بعض الهامش السفلي سريع الاستجابة بعد ذلك.

• الهامش السفلي:
  • سطح المكتب: 0 بكسل
  • الجهاز اللوحي والهاتف: 50 بكسل

أعد استخدام العمود 1

قم بإزالة العمود 2 و 3 و 4

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

عمود الاستنساخ 1 ثلاث مرات

وأعد استخدام العمود الأول باستنساخه ثلاث مرات.

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

تأكد من تغيير كل المحتوى المكرر في كل عمود جديد.

قم بإزالة الهامش السفلي لوحدة النص النمطية رقم 2 في العمود 4

وقم بإزالة الهامش السفلي لوحدة النص الأخيرة في العمود 4.

أضف الصف رقم 3

هيكل العمود

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

تحجيم

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

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

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

إضافة محتوى

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

إعدادات النص

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

• خط النص: لاتو
• حجم النص: 17 بكسل

استنساخ وحدة النص ووضع نسخة مكررة في العمود 2

انسخ وحدة النص في العمود 1 مرة واحدة ، ثم ضع النسخة المكررة في العمود 2.

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

تغيير محتوى الوحدة المكررة.

تغيير محاذاة النص

واستخدم محاذاة نصية متجاوبة مختلفة.

• محاذاة النص:
  • سطح المكتب: صحيح
  • الجهاز اللوحي والهاتف: يسار

4. حفظ جميع تغييرات منشئ القوالب والقوالب

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

معاينة

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

سطح المكتب

متحرك

افكار اخيرة

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

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