كيفية إنشاء التمرير الجميل في التذييل يكشف أدناه فواصل أقسام ديفي

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

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

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

معاينة

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

سطح المكتب

متحرك

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

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

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

تنزيل مجاني

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

تحميل

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

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

1. إنشاء صفحة فارغة جديدة وتحميل تخطيط الاختيار

أضف صفحة فارغة جديدة

أول شيء عليك القيام به هو إنشاء صفحة فارغة جديدة.

تحميل الصفحة المقصودة لحزمة تخطيط شركة SaaS

قم بالتبديل إلى Visual Builder وتحميل الصفحة المقصودة الخاصة بـ SaaS Company Layout Pack. على الرغم من أننا نستخدم هذا التنسيق المحدد ، إلا أنه يمكنك جعل التقنية تعمل على أي نوع من الصفحات التي تعمل عليها.

2. أضف فهرس Z إلى كل قسم وإزالة الرسوم المتحركة للقسم

أضف فهرس Z إلى قسم الأبطال

تابع عن طريق تغيير الفهرس z لقسم البطل على الصفحة.

• الفهرس Z: 3

انسخ الفهرس Z والصقه في جميع الأقسام الأخرى في الصفحة

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

إزالة الرسوم المتحركة قسم البطل

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

• نمط الرسوم المتحركة: لا شيء

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

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

3. تعديل القسم الأخير في الصفحة

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

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

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

4. أضف القسم العادي رقم 1 إلى أسفل الصفحة

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

لون الخلفية

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

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

أعلى الحاجز

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

• نمط الحاجز: البحث في القائمة
• ارتفاع الحاجز: 250 بكسل (سطح المكتب) ، 150 بكسل (جهاز لوحي) ، 100 بكسل (هاتف)
• تكرار المقسم الأفقي: 2x

فهرس Z.

يحتاج هذا القسم الجديد إلى زيادة مؤشر z أيضًا.

• الفهرس Z: 3

5. أضف القسم العادي رقم 2 إلى أسفل الصفحة

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

لون الخلفية

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

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

تحجيم

انتقل إلى علامة تبويب التصميم وتأكد من أن العرض "100٪".

• العرض: 100٪

تباعد

سنحتاج أيضًا إلى زيادة المساحة المتروكة العلوية للقسم.

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

فهرس Z.

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

• الفهرس Z: 2

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

هيكل العمود

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

تحجيم

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

• استخدام عرض مزراب مخصص: نعم
• عرض الحضيض: 1
• معادلة ارتفاعات العمود: نعم

تباعد العمود

افتح إعدادات العمود 1 بعد ذلك وأضف بعض المساحة المتروكة اليسرى.

• الحشو الأيسر: 20 بكسل

عمود الحد الأيمن

أضف حدًا أيمنًا إلى العمود أيضًا.

• عرض الحد الأيمن: 1 بكسل
• لون الحد الأيمن: # 515151

نسخ ولصق أنماط الأعمدة

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

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

تحميل الصور

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

تحجيم

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

• العرض: 35٪ (كمبيوتر مكتبي) ، 30٪ (كمبيوتر لوحي) ، 25٪ (هاتف)
• محاذاة الوحدة: يسار

تباعد

أضف بعض الهامش السفلي أيضًا.

• عرض المساحة أسفل الصورة: نعم
• الهامش السفلي: 50 بكسل

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

إضافة محتوى

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

إعدادات النص

قم بتعديل إعدادات النص.

• خط النص: Nunito Sans
• وزن خط النص: شبه عريض
• لون النص: #ffffff
• حجم النص: 19 بكسل

تباعد

وأضف بعض الهامش العلوي والسفلي المخصص عبر أحجام الشاشات المختلفة.

• الهامش العلوي: 15 بكسل (سطح المكتب والجهاز اللوحي) ، 10 بكسل (الهاتف)
• الهامش السفلي: 15 بكسل (سطح المكتب والكمبيوتر اللوحي) ، 10 بكسل (الهاتف)

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

إضافة محتوى

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

إضافة رابط

أضف ارتباطًا يطابق عنصر التذييل.

• عنوان URL لارتباط الوحدة النمطية: #

إعدادات النص

عدّل إعدادات النص بعد ذلك.

• خط النص: Nunito Sans
• لون النص: #dbdbdb
• حجم النص: 17 بكسل

تباعد

وأضف بعض الحشو العلوي والسفلي المخصص عبر أحجام الشاشات المختلفة.

• الهامش العلوي: 15 بكسل (سطح المكتب والجهاز اللوحي) ، 10 بكسل (الهاتف)
• الهامش السفلي: 15 بكسل (سطح المكتب والكمبيوتر اللوحي) ، 10 بكسل (الهاتف)

استنساخ وحدة النص رقم 2 عدة مرات حسب الحاجة

استنساخ وحدة النص الثانية في العمود 2 عدة مرات حسب الحاجة.

تغيير المحتوى

تأكد من تغيير المحتوى.

تغيير الروابط

جنبا إلى جنب مع الروابط.

• عنوان URL لارتباط الوحدة النمطية: #

استنساخ الوحدات النمطية في العمود 2 ووضعها في الأعمدة المتبقية

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

تغيير المحتوى

قم بتغيير محتوى كل نسخة.

تغيير الروابط

جنبا إلى جنب مع الارتباط.

• عنوان URL لارتباط الوحدة النمطية: #

6. اجعل القسم رقم 2 ثابتًا في أسفل الصفحة

أضف CSS مخصص

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

position: fixed;
bottom: 0;

7. أضف الهامش السفلي إلى القسم رقم 1 لإنشاء تأثير الكشف

أضف الهامش السفلي عبر أحجام الشاشات المختلفة

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

• الهامش السفلي: 400 بكسل (سطح المكتب) ، 700 بكسل (جهاز لوحي) ، 800 بكسل (هاتف)

معاينة

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

سطح المكتب

متحرك

افكار اخيرة

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

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