كيف تروي قصتك عن التمرير مع Divi

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

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

معاينة

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

سطح المكتب

متحرك

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

قم بتنزيل The About Page Story في Scroll Layout مجانًا

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

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

تنزيل مجاني

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

تحميل

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

1. إنشاء قسم ملء الشاشة الأول للصفحة

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

لون الخلفية

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

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

تحجيم

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

• ارتفاع الحد الأدنى: 100vh

2. إضافة صف متحرك

أضف صفًا جديدًا

هيكل العمود

بعد ذلك ، أضف صفًا جديدًا إلى القسم الخاص بك باستخدام بنية العمود التالية:

تحجيم

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

• العرض: 100٪
• العرض الأقصى: 100٪

تباعد

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

• الحشو الأيسر: 20vw (سطح المكتب) ، 10vw (الكمبيوتر اللوحي والهاتف)
• الحشو الأيمن: 20vw (سطح المكتب) 10vw (Tablet & Phone)

حيوية

لزيادة تأثير سرد القصة ، سنستخدم أيضًا الرسوم المتحركة المتلاشية للصف.

• نمط الرسوم المتحركة: تتلاشى
• مدة الرسوم المتحركة: 3000 مللي ثانية
• منحنى سرعة الرسوم المتحركة: سهولة للداخل والخارج
• كرر الرسوم المتحركة: مرة واحدة

موقع

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

• الموقف: مطلق
• الموقع: المركز

3. أدخل العنوان مع تأثيرات التمرير

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

أضف محتوى H1

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

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

انتقل إلى علامة تبويب تصميم الوحدة وقم بتغيير إعدادات نص H1 على النحو التالي:

• خط العنوان: نونيتو
• وزن خط العنوان: شبه عريض
• لون نص العنوان: #ffffff
• حجم نص العنوان: 7vw (سطح المكتب) ، 9vw (جهاز لوحي) ، 11vw (هاتف)

الحركة العمودية

سنضيف رسوم متحركة عمودية دقيقة أيضًا.

• تمكين الحركة العمودية: نعم
• تعويض البدء: 0 (عند 50٪)
• تعويض متوسط: 10 (عند 100٪)
• إزاحة النهاية: 10

يتلاشى داخل وخارج تأثير التمرير

جنبا إلى جنب مع تأثير يتلاشى داخل وخارج.

• تمكين التلاشي للداخل والخارج: نعم
• بدء التعتيم: 100٪
• عتامة متوسطة: 100٪ (عند 55٪)
• عتامة النهاية: 0٪ (عند 62٪)

تحجيم تأثير التمرير لأعلى ولأسفل

أخيرًا وليس آخرًا ، سنستخدم أيضًا تأثير التمرير لأعلى ولأسفل.

• تمكين التحجيم لأعلى ولأسفل: نعم
• مقياس البدء: 100٪ (عند 40٪)
• مقياس متوسط: 95٪ (عند 74٪)
• مقياس النهاية: 90٪

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

تغيير عنوان المحتوى ونسخه

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

تعديل إعدادات نص H2 لوحدة النص

قم بتغيير إعدادات نص H2 وفقًا لذلك:

• خط العنوان 2: Nunito
• وزن خط العنوان 2: شبه عريض
• لون نص العنوان 2: #ffffff
• حجم نص العنوان 2: 5vw (سطح المكتب) ، 7vw (جهاز لوحي) ، 8vw (هاتف)
• ارتفاع سطرين العنوان: 1em (سطح المكتب) ، 1.2em (الكمبيوتر اللوحي والهاتف)

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

إضافة محتوى

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

إعدادات النص

قم بتغيير إعدادات النص في وحدة النص كما يلي:

• خط النص: Open Sans
• لون النص: #ffffff
• حجم النص: 1vw (سطح المكتب) ، 2.5vw (جهاز لوحي) ، 3vw (هاتف)
• ارتفاع سطر النص: 3.1em (سطح المكتب) ، 2.5em (الجهاز اللوحي والهاتف)

تباعد

استخدم بعض الهامش العلوي أيضًا.

• الهامش العلوي: 8vw

يتلاشى داخل وخارج تأثير التمرير

بعد ذلك ، انتقل إلى تأثيرات التمرير في علامة التبويب "خيارات متقدمة" واستخدم إعدادات التلاشي والتلاشي التالية:

• تمكين التلاشي للداخل والخارج: نعم
• بدء التعتيم: 100٪
• عتامة متوسطة: 0٪ (عند 31٪)
• تعتيم النهاية: 0٪ (عند 35٪)

تحجيم تأثير التمرير لأعلى ولأسفل

أضف تأثيرًا متدرجًا لأعلى ولأسفل أيضًا.

• تمكين التحجيم لأعلى ولأسفل: نعم
• مقياس البدء: 100٪ (عند 40٪)
• مقياس متوسط: 95٪ (عند 74٪)
• مقياس النهاية: 90٪

5. استنساخ القسم الثاني حتى عدة مرات كما تريد

تغيير المحتوى كما تذهب

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

6. صفحة كاملة مع قسم CTA

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

أكمل صفحة حول مع قسم CTA في النهاية. افتح وحدة نص الوصف وقم بتعديل الهامش العلوي والسفلي.

• الهامش العلوي: 4vw
• الهامش السفلي: 4vw

إضافة وحدة زر

أضف نسخة

بعد ذلك ، أضف وحدة زر أيضًا مع نسخة من اختيارك.

إعدادات الزر

انتقل إلى علامة تبويب تصميم الوحدة وقم بتغيير إعدادات الزر على النحو التالي:

• استخدام الأنماط المخصصة للزر: نعم
• حجم نص الزر: 1vw (سطح المكتب) ، 2.5vw (جهاز لوحي) ، 3.5vw (هاتف)
• لون نص الزر: # 000000
• لون خلفية الزر: #FFFFFF
• عرض حد الزر: 0 بكسل

• نصف قطر حدود الزر: 100 بكسل
• خط الزر: نونيتو
• وزن خط الزر: غامق

تباعد

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

• الحشوة العلوية: 1vw (سطح المكتب) ، 2vw (جهاز لوحي) ، 3vw (هاتف)
• الحشوة السفلية: 1vw (سطح المكتب) ، 2vw (جهاز لوحي) ، 3vw (هاتف)
• الحشو الأيسر: 3vw (سطح المكتب) ، 6vw (كمبيوتر لوحي) ، 8vw (هاتف)
• الحشو الأيمن: 3vw (سطح المكتب) ، 6vw (كمبيوتر لوحي) ، 8vw (هاتف)

معاينة

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

سطح المكتب

متحرك

افكار اخيرة

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

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