كيفية توسيع وحدة الخريطة الخاصة بك عند التمرير باستخدام تأثيرات التمرير لديفي

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

هيا بنا نبدأ!

نظرة خاطفة

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

تخطيط 1

تخطيط 2

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

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

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

كيفية تكبير وحدة الخريطة الخاصة بك على التمرير باستخدام تأثيرات التمرير لديفي

تخطيط 1

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

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

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

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

ابحث عن وحدد صفحة Acai Bowl المقصودة.

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

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

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

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

أضف وحدة الخريطة إلى الصف الجديد.

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

بعد ذلك ، أضف دبوسًا جديدًا.

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

إعدادات التصميم

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

• الارتفاع: 300 بكسل

بعد ذلك ، افتح إعدادات الحدود وأضف الزوايا الدائرية إلى الخريطة.

• الزوايا الدائرية: 22 بكسل

أضف تأثيرات التمرير

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

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

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

• مقياس البدء: 80٪
• مقياس متوسط: 90٪
• مقياس النهاية: 100٪

أخيرًا ، اضبط تأثير الحركة على التشغيل في منتصف العنصر.

• مشغل تأثير الحركة: منتصف العنصر

تصميم نهائي

هذا هو التصميم النهائي لتخطيطنا الأول.

تخطيط 2

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

بالنسبة للتخطيط الثاني ، سنستخدم تخطيط صفحة الاتصال من نفس حزمة تخطيط Acai Bowl. هيا بنا نبدأ.

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

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

ابحث عن وحدد صفحة جهات اتصال Acai Bowl.

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

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

تعديل إعدادات الصف

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

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

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

أضف لون الخلفية.

• الخلفية: # 442854

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

• الزوايا الدائرية - أسفل اليسار: 300 بكسل
• الزوايا الدائرية - أسفل اليمين: 300 بكسل

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

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

• قناع الخلفية: ركن النقطة
• لون القناع: #FFFFFF
• تحويل القناع: عمودي وعكس

إضافة صورة

أولاً ، أضف وحدة صورة إلى العمود بجوار وحدة الخريطة.

ثم أضف الصورة الشفافة لوعاء أكي إلى الوحدة. يجب أن يكون لديك هذا في مكتبة الوسائط الخاصة بك بعنوان acai-bowl-34.png إذا كنت تستخدم تخطيط الصفحة المقصودة Acai Bowl للتخطيط 1.

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

بعد ذلك ، اضبط الدوران.

• بدء الدوران: 180
• منتصف الدوران: 90
• نهاية الدوران: 0

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

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

• استخدام مرشح Greyscale: نعم
• كمية مرشح التدرج الرمادي (٪): 100

بعد ذلك ، قم بتعديل الارتفاع ضمن علامة التبويب "تغيير الحجم".

• الارتفاع: 600 بكسل

ضمن إعدادات التباعد ، أضف بعض الهوامش.

• الهامش العلوي: 5 بكسل
• الهامش السفلي: 5 بكسل
• الهامش - اليسار: 5 بكسل
• الهامش الأيمن: 5 بكسل

ثم أضف الزوايا الدائرية إلى الزوايا السفلية اليسرى واليمنى.

• الزوايا الدائرية - أسفل اليسار: 300 بكسل
• الزوايا الدائرية - أسفل اليمين: 300 بكسل

أضف تأثيرات التمرير

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

أخيرًا ، قم بتخصيص المقاييس.

• مقياس البدء: 90٪
• مقياس متوسط: 95٪
• مقياس النهاية: 100٪

تصميم نهائي

هذا هو التصميم النهائي للتخطيط 2.

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

الآن دعنا نلقي نظرة على كلا التخطيطين في العمل.

تخطيط 1

تخطيط 2

افكار اخيرة

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