كيفية الكشف عن المحتوى مع تأثير Shutter Hover في Divi

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

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

نظرة خاطفة

إليك نظرة سريعة على ما سنبنيه معًا.

ابدء

اشترك في قناتنا على اليوتيوب

للبدء ، أنشئ صفحة جديدة ، وأعطيك عنوانًا للصفحة ، ثم انشر Divi Builder للبناء على الواجهة الأمامية. حدد خيار "اختيار تخطيط مسبق الصنع". ثم من مكتبة Divi المنبثقة ، حدد حزمة Day Spa Layout وانقر لاستخدام تخطيط الصفحة المقصودة.

بمجرد تحميل التصميم على الصفحة ، تكون جاهزًا للبدء!

إضافة فواصل إلى الجزء العلوي والسفلي من الدعاية

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

إضافة الحاجز الأول

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

أضف وحدة فاصل أعلى الدعاية المعلنة في العمود الأول وقم بتحديث ما يلي:

لون الخلفية: #ffffff
اللون (للمقسم): #ffffff
وزن الحاجز: 100 بكسل
الارتفاع: 100 بكسل
الهامش المخصص: 0 بكسل للأسفل

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

إضافة الحاجز الثاني (البرتقالي)

بعد ذلك ، قم بإنشاء فاصل آخر أسفل الحاجز الذي أنشأته للتو وقم بتحديث ما يلي:

اللون: # ff7a6b
وزن الحاجز: 2 بكسل
الارتفاع: 2 بكسل
الهامش المخصص: 0 بكسل للأسفل

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

احفظ صفحتك.

نسخ ولصق فواصل حول دعاية مغالى فيها

نحن الآن جاهزون لنسخ ولصق فواصلنا أعلى وأسفل كل من الدعاية في كل عمود. لجعل هذه العملية أسهل قليلاً ، انشر وضع الإطار الشبكي عن طريق فتح قائمة الإعدادات في أسفل الصفحة والنقر فوق رمز الإطار السلكي. (أو استخدم shft + w)

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

بعد ذلك ، ارجع إلى عرض سطح المكتب (shft + w) لإنهاء التصميم. يجب أن تبدو الصفحة هكذا.

تخصيص وحدات Blurb

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

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

ضمن علامة تبويب المحتوى ، أضف بضعة أسطر من المحتوى الوهمي.

ثم قم بتعطيل ظل مربع الصورة تمامًا.

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

الهامش المخصص (افتراضي): -100 بكسل للأعلى ، -65 بكسل للأسفل
الهامش المخصص (التمرير): 0 بكسل للأعلى و 0 بكسل للأسفل

الحشو المخصص (التمرير): 10 بكسل للأعلى و 10 بكسل للأسفل

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

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

لاحظ أن الجزء العلوي والسفلي من كل وحدة مخفية خلف الفواصل حتى تحوم فوقها.

تنظيف تأثير مصراع التمرير

توسيط الوحدات عموديًا

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

افتح إعدادات الصف وقم بمعادلة ارتفاعات العمود.

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

align-items: center;

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

إعطاء الصف ارتفاعًا ثابتًا

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

هنا هو ما عليك القيام به.

بادئ ذي بدء ، في إعدادات الصف ، امنح صفك معرف CSS:

معرف CSS: ثابت الارتفاع

ثم افتح إعدادات الصفحة (ضمن علامة التبويب خيارات متقدمة) وأضف CSS المخصص التالي:

@media (min-width: 980px) {
#fixed-height {
  height: 600px;
}
}

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

هذا كل شيء!

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

تحقق من التصميم النهائي.

وها هو تأثير مصراع الكاميرا.

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

الهامش المخصص (الجهاز اللوحي): 0 بكسل للأعلى و 0 بكسل للأسفل

افكار اخيرة

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

هتافات!