كيفية جعل محتوى الصف المخفي يظهر عند التمرير باستخدام Divi (تنزيل مجاني!)

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

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

دعنا نذهب اليها!

معاينة

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

سطح المكتب

متحرك

لنبدأ في الإنشاء!

إضافة قسم جديد

لون الخلفية الافتراضي

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

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

لون الخلفية تحوم

قم بتعديل لون الخلفية هذا عند التمرير.

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

تباعد

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

• الهامش العلوي: 5vw
• الهامش السفلي: 5vw
• الهامش الأيسر: 3vw
• الهامش الأيمن: 3vw
• الحشوة العلوية: 0 بكسل
• الحشو السفلي: 0 بكسل

أضف الصف رقم 1

هيكل العمود

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

خلفية متدرجة

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

• اللون 1: # ff5b79
• اللون 2: rgba (255،255،255،0)
• نوع التدرج: شعاعي
• اتجاه شعاعي: المركز
• موقف البداية: 15٪
• المركز النهائي: 15٪

تحجيم

قم بإجراء بعض التغييرات على إعدادات تغيير حجم الصف أيضًا.

• جعل هذا الصف بعرض كامل: نعم
• استخدام عرض مزراب مخصص: نعم
• عرض الحضيض: 1

تباعد

وأضف بعض قيم الحشو المخصصة في إعدادات التباعد.

• الحشوة العلوية: 9vw
• الحشوة السفلية: 9vw
• العمود 1 الحشوة اليسرى: 5vw
• العمود 1 الحشوة اليمنى: 5vw
• العمود 2 الحشوة اليسرى: 5vw
• العمود 2 الحشوة اليمنى: 5vw

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

إضافة محتوى

حان الوقت لبدء إضافة الوحدات! الوحدة الأولى التي سنحتاجها هي وحدة نصية في العمود 1. أضف محتوى H3 ورابط.

إعدادات نص الارتباط

بعد ذلك ، انتقل إلى إعدادات نص الرابط وقم بإجراء بعض التغييرات على مظهر الارتباط.

• خط الارتباط: Didact Gothic
• نمط خط الارتباط: تسطير
• نمط تسطير الرابط: صلب
• لون نص الرابط: #ffffff
• حجم نص الرابط: 20 بكسل

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

قم بتعديل إعدادات نص H3 أيضًا.

• عنوان الخط 3: Didact Gothic
• لون نص العنوان 3: #ffffff
• حجم نص العنوان 3: 50 بكسل

الرؤية

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

أضف وحدة Divider إلى العمود 2

الرؤية

الوحدة الثانية والأخيرة المطلوبة في العمود 1 هي وحدة Divider Module. تأكد من تمكين خيار "إظهار الحاجز".

• إظهار الحاجز: نعم

اللون

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

• اللون: #ffffff

تباعد

أضف بعض قيم الهامش المخصصة إلى Divider Module أيضًا.

• الهامش العلوي: 11vw (سطح المكتب) ، 80 بكسل (جهاز لوحي) ،
• الهامش السفلي: 50 بكسل (الجهاز اللوحي والهاتف)

أضف وحدة النص رقم 1 إلى العمود 2

إضافة محتوى

إلى العمود الثاني! أضف وحدة نصية مع بعض محتوى H4 المفضل.

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

بعد ذلك ، انتقل إلى إعدادات النص H4 وقم بإجراء بعض التغييرات.

• خط العنوان 4: Didact Gothic
• وزن خط العنوان 4: غامق
• لون نص العنوان 4: #ffffff
• حجم نص العنوان 4: 2vw (سطح المكتب) ، 40 بكسل (جهاز لوحي) ، 30 بكسل (هاتف)

أضف وحدة النص رقم 2 إلى العمود 2

إضافة محتوى

أسفل وحدة النص السابقة مباشرةً ، امض قدمًا وأضف واحدًا آخر به بعض محتويات الفقرة المختارة.

إعدادات النص

انتقل إلى إعدادات النص بعد ذلك وقم بإجراء بعض التغييرات.

• خط النص: Didact Gothic
• لون النص: #ffffff
• حجم النص: 0.9vw (سطح المكتب) ، 18 بكسل (الجهاز اللوحي والهاتف)
• ارتفاع خط النص: 2em

تباعد

أضف بعض قيم الهامش المخصصة أيضًا.

• الهامش العلوي: 2vw
• الهامش الأيمن: 15vw

أضف الصف رقم 2

هيكل العمود

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

تحجيم

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

• جعل هذا الصف بعرض كامل: نعم
• استخدام عرض مزراب مخصص: نعم
• عرض الحضيض: 1

تباعد

قم بإزالة جميع الحشو الافتراضي في إعدادات تباعد الصفوف أيضًا.

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

الرؤية

أخيرًا وليس آخرًا ، قم بإخفاء هذا الصف على الجهاز اللوحي والهاتف.

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

إضافة محتوى

الوحدة الوحيدة التي نحتاجها في هذا الصف هي وحدة نصية. أضف بعض محتوى H3 ورابط.

لون الخلفية الافتراضي

بعد ذلك ، انتقل إلى إعدادات الخلفية وأضف لونًا للخلفية إلى وحدة النص.

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

لون الخلفية تحوم

قم بتعديل لون الخلفية هذا عند التمرير.

• لون الخلفية: rgba (255،255،255،0)

الإعدادات الافتراضية للنص

بعد ذلك ، انتقل إلى إعدادات النص وقم بإجراء بعض التغييرات.

• خط الارتباط: Didact Gothic
• نمط خط الارتباط: تسطير
• نمط تسطير الرابط: صلب
• لون نص الرابط: #ffffff
• حجم نص الرابط: 0 بكسل
• تباعد حرف الارتباط: -1 بكسل

تحوم إعدادات نص الارتباط

قم بتعديل حجم نص الرابط عند التمرير أيضًا.

• حجم نص الرابط: 1.7vw

الإعدادات الافتراضية لنص العنوان

تابع عن طريق إجراء بعض التغييرات على إعدادات نص H3.

• عنوان الخط 3: Didact Gothic
• وزن خط العنوان 3: غامق
• لون نص العنوان 3: # 000000
• حجم نص العنوان 3: 12vw
• العنوان 3 تباعد الأحرف: -0.8vw

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

قم بتعديل بعض إعدادات نص H3 عند المرور بالماوس.

• لون نص العنوان 3: #ffffff
• حجم نص العنوان 3: 4vw
• العنوان 3 تباعد الأحرف: -0.2vw

تباعد

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

• الهامش العلوي: -34.3vw
• الهامش السفلي: -5vw
• الحشوة العلوية: 10vw
• الحشو السفلي: 10vw
• الحشوة اليسرى: 26.5vw

تحوم التباعد

قم بتعديل قيم التباعد عند التمرير.

• الهامش العلوي: -34.1vw
• الهامش السفلي: -5vw
• الحشوة العلوية: 12vw
• الحشوة السفلية: 12vw
• الحشوة اليسرى: 11.5vw

الانتقالات

قم بزيادة مدة انتقال وحدة النص أيضًا.

• مدة الانتقال: 400 مللي ثانية

قسم الاستنساخ

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

تغيير لون خلفية تمرير القسم

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

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

تغيير خلفية الصف الأول المتدرجة

قم بتغيير خلفية التدرج للصف رقم 1 أيضًا.

• اللون 1: # 000000

تغيير لون النص ونسخه

جنبا إلى جنب مع لون النص وجميع النسخ.

• لون نص العنوان 3: # ff5b79

تغيير تباعد وحدة النص

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

• الحشو الأيسر: 21vw

قم بتنزيل The Layout مجانًا

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

قم بتنزيل الملفات

تنزيل مجاني

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

تحميل

لقد تم اشتراكك بنجاح. يرجى التحقق من عنوان بريدك الإلكتروني لتأكيد اشتراكك والحصول على حزم تخطيط Divi الأسبوعية المجانية!

معاينة

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

سطح المكتب

متحرك

افكار اخيرة

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