كيفية إنشاء صفحة تمرير أفقية بالكامل باستخدام Divi

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

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

معاينة

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

سطح المكتب

متحرك

مقاربة

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

لنبدأ في إعادة التكوين

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

لون الخلفية

قم بإنشاء صفحة جديدة وإضافة قسم عادي إليها. افتح إعدادات القسم وقم بتغيير لون الخلفية.

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

تباعد

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

• الحشوة العلوية: 10.5vw (سطح المكتب) ، 15vw (الكمبيوتر اللوحي) ، 10vw (الهاتف)
• الحشوة السفلية: 3vw (سطح المكتب والكمبيوتر اللوحي) ، 10vw (الهاتف)

أضف الصف رقم 1

هيكل العمود

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

تحجيم

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

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

تباعد

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

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

معرف CSS

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

• معرف CSS: انتقاد -1

لغة تنسيق ويب حسب الطلب

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

scroll-snap-align: start;

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

حدد أيقونة

يمكننا الآن البدء في إضافة وحدات! ابدأ بوحدة Blurb Module في العمود 1. افتح إعدادات الوحدة النمطية وحدد رمز السهم الأيسر.

إعدادات الرمز

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

• لون الأيقونة: rgba (255،255،255،0)
• وضع الصورة / الرمز: علوي
• استخدام حجم خط الأيقونة: نعم
• حجم خط الرمز: 5vw (سطح المكتب) ، 13vw (الجهاز اللوحي) ، 21vw (الهاتف)

تباعد

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

• الهامش العلوي: 14vw (سطح المكتب) ، -11vw (جهاز لوحي) ، -17vw (هاتف)
• الهامش الأيسر: 60vw (الجهاز اللوحي والهاتف)

الرؤية

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

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

أضف محتوى H2

الوحدة التالية التي نحتاجها هي وحدة نصية في العمود 2. أضف بعض محتوى H2.

إعدادات نص H2

بعد ذلك ، انتقل إلى علامة تبويب التصميم وقم بتعديل إعدادات نص H2.

• خط العنوان 2: Source Serif Pro
• العنوان 2 محاذاة النص: اليسار
• حجم نص العنوان 2: 3vw (سطح المكتب) ، 7vw (الجهاز اللوحي والهاتف)

تحجيم

قم بتعديل العرض في إعدادات التحجيم التالية.

• العرض: 77٪

تباعد

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

• الهامش السفلي: 15vw (الجهاز اللوحي والهاتف)

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

إضافة محتوى

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

إعدادات الزر

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

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

• لون حدود الزر: # 000000
• نصف قطر حدود الزر: 0 بكسل
• خط الزر: Mukta
• وزن الخط: عريض
• نمط الخط: أحرف كبيرة

تباعد

أضف بعض الهامش المخصص والحشو بعد ذلك.

• الهامش العلوي: 6vw (سطح المكتب) ، 4vw (الجهاز اللوحي والهاتف)
• الحشوة العلوية: 15 بكسل
• الحشو السفلي: 15 بكسل
• الحشو الأيسر: 50 بكسل
• الحشوة اليمنى: 50 بكسل

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

حدد أيقونة

الوحدة التالية والأخيرة التي نحتاجها في هذا الصف هي وحدة Blurb Module أخرى في العمود 3. حدد رمزًا من اختيارك.

وصلة

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

• عنوان URL لرابط الوحدة النمطية: https://www.yourwebsite.com/page/#swipe-2

إعدادات الرمز

انطلق وقم بتغيير إعدادات الرمز أيضًا.

• لون الايقونة: # 333333
• وضع أيقونة الصورة: علوي
• استخدام حجم خط الأيقونة: نعم
• حجم خط الرمز: 5vw (سطح المكتب) ، 13vw (الجهاز اللوحي) ، 21vw (الهاتف)

تباعد

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

• الهامش العلوي: 14vw (سطح المكتب) ، -11vw (جهاز لوحي) ، -17vw (هاتف)
• الهامش الأيسر: 60vw (الجهاز اللوحي والهاتف)

أضف الصف رقم 2

هيكل العمود

يستخدم الصف الثاني الذي نحتاجه بنية العمود التالية:

لون الخلفية

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

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

تحجيم

قم بتعديل إعدادات التحجيم بعد ذلك.

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

تباعد

جنبًا إلى جنب مع قيم الحشو والهامش المخصصة في إعدادات التباعد.

• الهامش العلوي: -3.5vw (سطح المكتب) ، -10vw (جهاز لوحي) ، -17vw (الهاتف)
• الحشوة العلوية: 8vw (سطح المكتب) ، 15vw (كمبيوتر لوحي) ، 20vw (هاتف)
• الحشوة السفلية: 8vw (سطح المكتب) ، 15vw (الكمبيوتر اللوحي) ، 20vw (الهاتف)
• الحشو الأيسر: 24vw (سطح المكتب) ، 5vw (الكمبيوتر اللوحي والهاتف)
• الحشو الأيمن: 24vw (سطح المكتب) ، 5vw (الجهاز اللوحي والهاتف)
• الحشوة اليمنى للعمود 1: 2vw (سطح المكتب) ، 0vw (الكمبيوتر اللوحي والهاتف)
• العمود 2 ، الحشوة اليسرى: 2vw (سطح المكتب) ، 0vw (الكمبيوتر اللوحي والهاتف)

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

إضافة محتوى

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

إعدادات النص

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

• خط النص: Open Sans
• حجم النص: 0.65vw (سطح المكتب) ، 1.8vw (الجهاز اللوحي) ، 2.7vw (الهاتف)
• ارتفاع خط النص: 1.8em

إعدادات نص H3

جنبا إلى جنب مع إعدادات النص H3.

• خط العنوان 3: Mukta
• وزن خط العنوان 2: غامق
• نمط خط العنوان 3: أحرف كبيرة
• حجم نص العنوان 3: 0.8vw (سطح المكتب) ، 3vw (جهاز لوحي) ، 4vw (هاتف)
• ارتفاع سطر العنوان 3: 1.8em

تباعد

أضف بعض الهامش السفلي لأحجام الشاشة الأصغر أيضًا.

• الهامش السفلي: 5vw (الجهاز اللوحي والهاتف)

استنساخ وحدة النص ووضعها في العمود 2

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

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

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

استنساخ الصف رقم 1 ثلاث مرات

بمجرد الانتهاء من كلا الصفوف ، يمكنك استنساخ الصف الأول 3 مرات.

تغيير تكرار # 1

تغيير معرف CSS للصف

سنحتاج إلى تغيير معرف CSS للنسخة الأولى.

• معرف CSS: انتقاد -2

تغيير لون رمز الوحدة النمطية Blurb (العمود 1)

جنبًا إلى جنب مع لون أول وحدة Blurb Module.

• لون الايقونة: # 333333

قم بتغيير ارتباطات كلا الوحدتين النمطية للدليل

لجعل روابط الارتساء تعمل ، سيتعين عليك تغيير ارتباط كل سهم وفقًا لذلك:

• عنوان URL لرابط الوحدة النمطية: https://www.yourwebsite.com/page/#swipe-1

• عنوان URL لرابط الوحدة النمطية: https://www.yourwebsite.com/page/#swipe-3

تغيير تكرار # 2

تغيير معرف CSS للصف

قم بتغيير معرف CSS للنسخة الثانية.

• معرف CSS: انتقاد -3

تغيير لون رمز الوحدة النمطية Blurb (العمود 1)

جنبًا إلى جنب مع لون رمز أول وحدة Blurb Module.

• لون الايقونة: # 333333

قم بتغيير ارتباطات كلا الوحدتين النمطية للدليل

ومرة أخرى ، قم بتغيير روابط كل وحدة Blurb Module وفقًا لذلك:

• عنوان URL لرابط الوحدة النمطية: https://www.yourwebsite.com/page/#swipe-2

• عنوان URL لرابط الوحدة النمطية: https://www.yourwebsite.com/page/#swipe-4

تغيير تكرار # 3

تغيير معرف CSS

قم بتغيير معرف CSS للصف الثالث المكرر أيضًا.

• معرف CSS: انتقاد -4

تغيير رمز الوحدة النمطية Blurb (العمود 2)

وحدد رمزًا آخر لـ Blurb Module في العمود 3.

تغيير رابط الوحدة النمطية للدعاية والإعلان (العمود 2)

تأكد من أنه عند النقر ، سيتم إعادة توجيه الزائر إلى عمود القسم الأول عن طريق تعديل عنوان URL لرابط الوحدة وفقًا لذلك:

• عنوان URL لرابط الوحدة النمطية: https://www.yourwebsite.com/page/#swipe-1

استنساخ الصف رقم 2 ثلاث مرات

إلى الصف التالي. استنساخ هذا الصف ثلاث مرات أيضًا.

تغيير لون خلفية الصف من تكرار # 1

قم بتغيير لون الخلفية لأول نسخة مكررة.

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

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

النسخة الثانية تستخدم لون الخلفية التالي:

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

تغيير لون خلفية الصف للنسخ المكرر # 3

قم بتغيير لون الخلفية للصف الثالث المكرر أيضًا.

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

أضف معرف CSS وكود CSS إلى القسم

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

• معرف CSS: شريط التمرير القسم

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

overflow-y: scroll;
display: grid;
grid-template-columns: repeat(4, 100%);
scroll-behavior: smooth;
scroll-snap-type: x mandatory;

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

grid-template-columns: repeat(7, 100%);

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

إخفاء شريط التمرير

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

#section-scrollbar::-webkit-scrollbar {
display: none;
}

معاينة

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

سطح المكتب

متحرك

افكار اخيرة

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