كيفية إضافة تبديل خريطة ثابتة إلى قالب صفحة 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 وأضف قالب صفحة جديدًا

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

أدخل منطقة الجسم للقالب

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

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

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

تباعد

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

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

أضف الصف رقم 1

هيكل العمود

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

تحجيم

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

• العرض: 100٪
• العرض الأقصى: 100٪

تباعد

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

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

أضف وحدة محتوى النشر إلى العمود

للسماح لمحتوى كل صفحة بالظهور ديناميكيًا ، سنستخدم وحدة محتوى النشر داخل هذا الصف.

3. إنشاء تصميم دبوس خريطة ثابت

أضف الصف رقم 2 إلى القسم

هيكل العمود

إلى الصف التالي ، الذي يستخدم بنية العمود التالية:

تحجيم

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

• العرض: 90٪
• عرض ماكس:
  • سطح المكتب: 600 بكسل
  • الجهاز اللوحي والهاتف: 100٪

تباعد

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

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

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

لون الخلفية

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

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

الصورة الخلفية

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

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

أضف الأسطر التالية من كود CSS إلى العنصر الرئيسي للعمود أيضًا:

width: 80% !important;
max-height: 80vh;

الرؤية

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

• الفائض الرأسي: تلقائي

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

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

افتح إعدادات العمود 2 بعد ذلك وقم بتطبيق السطر التالي من كود CSS على العنصر الرئيسي:

width: 12% !important;

أضف وحدة الخريطة إلى العمود 1

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

تحجيم

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

• العرض: 88٪
• محاذاة الوحدة: المركز

تباعد

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

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

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

إضافة محتوى

أضف وحدة Blurb النمطية أسفل Map Module في العمود 1. استخدم بعض المحتوى الذي تختاره.

حدد أيقونة

حدد رمزًا بعد ذلك.

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

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

• لون الأيقونة: #ffffff
• وضع الصورة / الرمز: اليسار

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

صمم نص العنوان بعد ذلك.

• وزن خط العنوان: غامق
• لون نص العنوان: #ffffff
• حجم نص العنوان: 16 بكسل
• ارتفاع خط العنوان: 1.6em

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

بعد ذلك ، قم بتعديل إعدادات النص الأساسي وفقًا لذلك:

• لون النص الأساسي: #ffffff
• حجم النص الأساسي:
  • سطح المكتب: 16 بكسل
  • الجهاز اللوحي: 14 بكسل
  • الهاتف: 13 بكسل
• ارتفاع خط الجسم: 1.8em

تباعد

قم بتطبيق قيم المساحة المتروكة التالية أيضًا:

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

حيوية

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

• صورة / أيقونة متحركة: لا توجد رسوم متحركة

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

اترك مربعات المحتوى فارغة

إلى العمود 2. هناك ، سنقوم بإضافة وحدة Blurb Module بدون محتوى.

حدد أيقونة

حدد رمزًا بعد ذلك.

لون الخلفية

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

• لون الخلفية: # 0045ff

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

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

• لون الأيقونة: #ffffff
• وضع الصورة / الرمز: علوي
• محاذاة الصورة / الرمز: الوسط
• استخدام حجم خط الأيقونة: نعم
• حجم خط الأيقونة: 25 بكسل

تحجيم

قم بتعديل إعدادات التحجيم بعد ذلك.

• العرض: 70 بكسل
• الارتفاع: 70 بكسل

تباعد

ثم قم بإزالة الهامش السفلي الافتراضي.

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

مربع الظل

قم بتضمين ظل الصندوق أيضًا.

• مربع الظل الأفقي: 6 بكسل
• مربع الظل الرأسي: 6 بكسل
• لون الظل: rgba (0،0،0،0.3)

العنصر الرئيسي & Blurb Image CSS

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

display: flex;
justify-content: center;
align-items: center;

وأضف هذا السطر من كود CSS داخل مربع Blurb Image:

margin-bottom: 0;

4. إضافة وظيفة تبديل

أضف فئة CSS إلى الصف رقم 2

الآن بعد أن أصبح لدينا جميع العناصر في مكانها الصحيح ، حان الوقت للتركيز على الوظائف. ابدأ بفتح الصف الثاني وتطبيق فئة CSS التالية:

• فئة CSS: map-toggle-row

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

افتح الوحدة النمطية Blurb في العمود 2 بعد ذلك واستخدم فئة CSS التالية:

• فئة CSS: map-toggle

أضف وحدة التعليمات البرمجية أسفل الوحدة النمطية للدليل في العمود 2

بعد ذلك ، أضف Code Module أسفل الوحدة النمطية Blurb في العمود 2.

إضافة نمط وعلامات البرنامج النصي

ضع بعض علامات الأنماط والنصوص داخل مربع الشفرة.

أدخل كود CSS

نحن نستخدم كود CSS التالي داخل علامات النمط:

.map-toggle-row {
-webkit-transition: .1s ease-in-out;
-moz-transition: .1s ease-in-out;
-o-transition: .1s ease-in-out;
transition: .1s ease-in-out;
}

.reveal-map{
left: 0 !important;
}

.map-toggle {
cursor: pointer;
}

أدخل كود JQuery

وكود JQuery التالي داخل علامات البرنامج النصي:

jQuery(function($){
$(document).ready(function(){

var toggleIcon = $('.map-toggle');
var toggleRow = $('.map-toggle-row');

toggleIcon.click(function(){
toggleRow.toggleClass('reveal-map');
});

});
});

أضف الموضع الثابت مع الإزاحة الأفقية إلى الصف رقم 2

أخيرًا وليس آخرًا ، سنحتاج إلى تعديل إعدادات موضع الصف الثاني وفقًا لذلك:

• المركز: ثابت
• الموقع: مركز اليسار
• تعويض الأفقي:
  • سطح المكتب: -500 بكسل
  • الجهاز اللوحي والهاتف: -72٪
• الفهرس Z: 11

5. حفظ الصفحة وتغييرات منشئ السمات

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

معاينة

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

سطح المكتب

متحرك

افكار اخيرة

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

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