كيفية إضافة وحدة خريطة مثبتة إلى صفحة Divi الخاصة بك

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

بدون مزيد من اللغط ، دعنا نبدأ!

نظرة خاطفة

هنا معاينة لما سنصممه

ما تحتاجه للبدء

قبل أن نبدأ ، قم بتثبيت وتنشيط Divi Theme وتأكد من أن لديك أحدث إصدار من Divi على موقع الويب الخاص بك.

الآن ، أنت جاهز للبدء!

كيفية إضافة وحدة خريطة مثبتة إلى صفحة Divi الخاصة بك

قم بإنشاء صفحة جديدة باستخدام تخطيط مسبق الصنع

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

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

سنستخدم تخطيطًا معدًا مسبقًا من مكتبة Divi لهذا المثال ، لذا حدد استعراض التخطيطات.

ابحث عن وحدد الصفحة المقصودة للمدرسة الحرفية.

حدد استخدام هذا التخطيط لإضافة التخطيط إلى صفحتك.

الآن نحن جاهزون لبناء تصميمنا.

تعديل تخطيط وحدة الخريطة اللاصقة

تسجيل CTA

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

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

• الخلفية: # fcf8f3

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

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

• الوظيفة: الافتراضي

قسم "تعال وزور الاستوديو"

أضف صفًا جديدًا بعمودين أسفل قسم عضوية الاستوديو.

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

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

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

أضف النص.

• H2: تعال وقم بزيارة الاستوديو!

بعد ذلك ، انتقل إلى علامة التبويب "تصميم" وافتح إعدادات نص العنوان. تخصيص الخط على النحو التالي:

• خط العنوان 2: Yusei Magic

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

• سطح المكتب بحجم نص العنوان 2: 50 بكسل
• كمبيوتر لوحي بحجم العنوان 2: 30 بكسل
• العنوان 2 حجم النص للجوال: 24 بكسل
• ارتفاع خط العنوان 2: 1.2 em

إعدادات النص

أضف وحدة نصية أخرى أسفل نص "Come Visit The Studio".

أدخل النص التالي.

• H3: العنوان
• الفقرة: 1234 Divi St. # 1000 San Francisco، CA 33945

ضمن علامة التبويب "تصميم" ، قم بتعديل أنماط النص.

• خط النص: Open Sans
• سطح المكتب حجم النص: 16 بكسل
• الجهاز اللوحي بحجم النص: 15 بكسل
• حجم النص للجوال: 13 بكسل

ثم قم بتعديل أنماط العناوين.

• خط العنوان 3: فتح Sans
• وزن خط العنوان 3: غامق
• نمط خط العنوان 3: مكتوب بحروف كبيرة (TT)

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

• سطح المكتب بحجم نص العنوان 3: 14 بكسل
• الجهاز اللوحي بحجم العنوان 3: 13 بكسل
• العنوان 3 حجم النص للجوّال: 12 بكسل
• العنوان 3 تباعد الأحرف: 3 بكسل

أضف وحدة نصية أخرى أسفل وحدة العنوان.

بعد ذلك ، أضف المحتوى التالي إلى النص الأساسي:

• الجسم: Lorem ipsum dolor sit amet، consectetur adipiscing elit. موريس بلانديت أليكت إيليت ، إيجيت تينكيدونت نيبه بولفينار أ. Curabitur arcu erat، accumsan id imperdiet et، porttitor at sem. الدهليز ac Diam sit amet quam videicula elementum sed sit amet dui. present sapien massa ، convallis a pellentesque nec ، egestas non nisi. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Donec rutrum congue leo eget malesuada. Donec rutrum congue leo eget malesuada. دونيك sollicitudin molestie malesuada. Curabitur aliquet quam id dui posuere blandit.

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

• خط النص: Open Sans

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

• حجم سطح المكتب للنص: 15 بكسل
• حجم النص للجوال: 13 بكسل
• ارتفاع خط النص: 1.9em

إعدادات الزر

أضف وحدة زر إلى القسم ، أسفل النص الذي أضفناه.

اضبط نص الزر على "معرفة المزيد".

• الزر: معرفة المزيد

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

• استخدام الأنماط المخصصة للزر: نعم
• حجم نص الزر: 12 بكسل
• لون نص الزر: #FFFFFF

تخصيص خلفية الزر وعرض الحدود.

• خلفية الزر: # d5b38e
• عرض حد الزر: 0 بكسل

قم بتعديل نصف قطر حد الزر وتباعد الأحرف والخط.

• نصف قطر حدود الزر: 0 بكسل
• تباعد حرف الزر: 3 بكسل
• خط الزر: فتح Sans
• وزن خط الزر: غامق
• نمط خط الزر: مكتوب بحروف كبيرة (TT)

أخيرًا ، أضف الحشوة إلى الزر.

• المساحة المتروكة: 15 بكسل
• الحشوة السفلية: 15 بكسل
• المساحة المتروكة: 30 بكسل
• الحشوة اليمنى: 30 بكسل

قسم عضويات الاستوديو

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

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

تمرير إعدادات الصورة

انقل صورة التمرير الصغيرة للفخار إلى العمود الأيمن ، فوق الصورة الكبيرة التي نقلناها.

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

• العرض للجوال: 35٪

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

• الإزاحة الأفقية: -30 بكسل

أخيرًا ، افتح تأثيرات التمرير واضبط إزاحة النهاية للحركة الرأسية.

• إزاحة النهاية: -1

نص عضويات الاستوديو

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

ثم افتح إعدادات الصف وافتح إعدادات العمود 2.

ضمن إعدادات التباعد في علامة التبويب تصميم ، قم بإزالة الحشوة السفلية الموجودة.

خلفية القسم

افتح إعدادات القسم. ضمن إعدادات الخلفية ، أضف صورة خلفية. حدد craft-school-24.png من مكتبة الوسائط الخاصة بك.

أضف وحدة الخريطة اللاصقة

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

أولاً ، أضف وحدة خريطة إلى العمود الأيمن من صف "تعال وزور الاستوديو".

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

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

تصميم الخرائط

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

• تشبع الخريطة: 56٪

بعد ذلك ، افتح إعدادات الحدود وقم بتخصيص الحدود على النحو التالي:

• عرض الحدود: 20 بكسل
• لون الحدود: # fcf8f3

افتح إعدادات Box Shadow وأضف ظلًا إلى وحدة الخريطة.

• ظل المربع: أدناه

الإعدادات الثابتة

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

• سطح المكتب ذو الموضع اللاصق: التزم بالأعلى
• الجهاز اللوحي والجوال ذو الوضع اللاصق: لا تلتصق
• الإزاحة العلوية اللاصقة: 20 بكسل
• حد الالتصاق السفلي: القسم

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

• الارتفاع عند اللزوجة: 600 بكسل

أخيرًا ، استخدم الإعدادات سريعة الاستجابة لتغيير حجم الخريطة على الجهاز اللوحي والجوال.

• ارتفاع الجهاز اللوحي والجوّال: 350 بكسل

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

الآن دعنا نلقي نظرة على وحدة الخريطة اللاصقة الخاصة بنا قيد التنفيذ.

افكار اخيرة

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