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

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

هيا بنا نبدأ.

نظرة خاطفة

فيما يلي نظرة خاطفة على أمثلة تأثير التمرير الموسع التي سأغطيها في هذا البرنامج التعليمي.

ابدء

في هذا البرنامج التعليمي ، كل ما تحتاجه حقًا هو Divi. سنستخدم أيضًا Design Agency About Page premade التخطيط المتاح داخل Divi Builder لبدء التصميم.

للبدء ، قم بإنشاء صفحة جديدة ، وقم بإعطاء صفحتك عنوانًا ، وانقر لاستخدام Divi Builder. بعد ذلك ، حدد خيار اختيار تخطيط Premade. من التحميل من نافذة المكتبة المنبثقة ، حدد Design Agency Layout Pack ثم انقر لاستخدام Design Agency About Page.

بمجرد تحميل التخطيط على الصفحة ، انشره. في هذا البرنامج التعليمي ، سأستخدم Divi builder في الواجهة الأمامية. للقيام بذلك ، كل ما عليك فعله هو النقر فوق الزر "Build On The Front End" أعلى محرر الصفحة الخلفية.

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

توسيع Blurbs عند Hover

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

انقل وحدات Blurb النمطية لتشغل صفًا واحدًا فقط

يتكون القسم حاليًا من صفين من ثلاثة أعمدة مع دعاية دعاية في كل عمود.

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

ثم احذف الصف السفلي الفارغ.

تخصيص وحدات Blurb

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

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

حجم نص العنوان 16 بكسل
العرض: 150 بكسل
محاذاة الوحدة: مركز
الحشو المخصص: أعلى 10 بكسل ، أسفل افتراضي ، يسار افتراضي ، يمين افتراضي

يؤدي منح الوحدات عرضًا مخصصًا يبلغ 150 بكسل إلى إبقاء نص العنوان مغلقًا في مكانه عندما نقوم بتوسيع الصف.

حفظ التغييرات والنقر خارج التحديد المتعدد.

اجعل المركز Blurb أكثر وضوحًا

بعد ذلك ، افتح إعدادات الوحدة النمطية للدعاية الإعلامية المبسطة للدعاية العلوية في العمود الثاني بعنوان "هوية العلامة التجارية". ثم قم بتحديث ما يلي:

حجم خط الأيقونة: 120 بكسل
حجم نص العنوان: 18 بكسل (افتراضي)

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

تخصيص الصف للتوسيع عند التمرير

من أجل توسيع وحداتنا عند التمرير ، سنقوم بتعديل حجم الصف وتباعده. افتح إعدادات الصف وقم بتحديث ما يلي:

العرض المخصص: 750 بكسل
عرض المزراب: 4
الحشو المخصص (افتراضي): 150 بكسل يسار ، 150 بكسل يمين
الحشو المخصص (التمرير): 0 بكسل لليسار ، 0 بكسل لليمين
الحشو المخصص (الكمبيوتر اللوحي): 0 بكسل يسار ، 0 بكسل يمين

التغيير في قيم المساحة المتروكة عند التمرير هو ما يُنشئ تأثير التمرير الموسع. سيتم توسيع الصف 150 بكسل إلى اليمين و 150 بكسل إلى اليسار.

تحقق من النتيجة النهائية.

صنع شبكة دائرية

إذا كنت ترغب في إنشاء تخطيط شبكي دائري يتوسع ، فكل ما يتطلبه الأمر هو بعض التعديلات الطفيفة.

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

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

align-items: center;

الآن تحقق من النتيجة.

توسيع الشبكة إلى اليمين

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

كيف يبدو على الهاتف المحمول

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

إضافة تأثير التمرير الموسع إلى معرض الصور

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

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

قم بتحديث إعدادات وحدة المعرض كما يلي:

أضف 4 صور إلى المعرض بنفس الأبعاد بحيث تبدو متشابهة عبر الصف.

عدد الصور: 4
إظهار العنوان والتعليق: لا
إظهار ترقيم الصفحات: لا

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

لون أيقونة التكبير: # 353740
لون التراكب: rgba (252،210،29،0.92)

العرض (سطح المكتب): 40٪
العرض (تحوم): 100٪
العرض (الكمبيوتر اللوحي): 100٪

يؤدي تغيير عرض وحدة المعرض عند التمرير إلى إنشاء تأثير التمرير الموسع. يؤدي تعيين عرض الجهاز اللوحي إلى 100٪ أيضًا إلى منع حدوث تأثير التمرير على الهاتف المحمول.

هذا ما يبدو عليه حتى الآن.

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

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

العرض المخصص: 80٪
عرض المزراب: 2
معادلة ارتفاعات العمود: نعم

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

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

انتقل إلى إعدادات الصف وأضف CSS المخصص التالي في العنصر الرئيسي:

min-height: 350px

ثم أضف CSS المخصص التالي في Column Main Element:

margin: auto;

تؤدي موازنة ارتفاعات العمود إلى تنشيط خاصية "display: flex" css على الواجهة الخلفية والتي تسمح لـ "margin: auto" بمحاذاة محتوى العمود بشكل عمودي داخل الصف الذي يبلغ الحد الأدنى للارتفاع فيه 350 بكسل. تعرف على المزيد حول هذا المفهوم في مقالتنا الكاملة حول كيفية محاذاة المحتوى عموديًا في Divi.

تحقق من النتيجة النهائية.

إضافة المزيد من الصور إلى المعرض

يمكنك أيضًا إضافة 4 صور أخرى إلى المعرض وزيادة الحد الأدنى لارتفاع صفك إلى 475 بكسل للنتيجة التالية.

كيف يبدو على الهاتف المحمول

هذا ما سيبدو عليه المعرض على الهاتف المحمول. تأثير التمرير الموسع غير نشط.

افكار اخيرة

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

أتطلع إلى تلقي رد منك في التعليقات أدناه.

هتافات!