كيفية إنشاء قائمة دعاية في التمرير / انقر لصفحتك مع Divi

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

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

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

معاينة

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

وضع التحويم

سطح المكتب

متحرك

انقر فوق Modus

سطح المكتب

متحرك

1. إنشاء صفحة فارغة وتحميل الصفحة المقصودة لمشاهدة معالم المدينة

أضف صفحة فارغة جديدة وقم بتمكين Divi Builder

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

تحميل الصفحة المقصودة لمشاهدة معالم المدينة

بمجرد تمكين Divi Builder ، قم بتحميل تخطيط الصفحة المقصودة لـ Sightseeing Layout Pack.

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

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

لون الخلفية

افتح إعدادات القسم وأضف لون خلفية بيضاء شفافة قليلاً.

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

تباعد

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

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

ظل المربع الافتراضي

أضف ظل مربع إلى القسم التالي.

• مربع قوة طمس الظل: 18 بكسل
• لون الظل: # 383838

تحوم مربع الظل

وتغيير مربع الظل طمس القوة عند التحويم.

• مربع قوة طمس الظل: 1000 بكسل

إخفاء فائض القسم وزيادة مؤشر Z.

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

• الفائض الأفقي: مخفي
• الفائض العمودي: مخفي
• الفهرس Z: 9999

3. تأكد من إنشاء محتوى قائمة الأقسام بالكامل باستخدام Vw & Fits في 100 ارتفاع منفذ العرض عبر جميع أحجام الشاشة

أضف الصف رقم 1

هيكل العمود

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

تحجيم

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

• استخدام عرض مزراب مخصص: نعم
• عرض الحضيض: 1
• العرض: 100٪
• العرض الأقصى: 100٪

تباعد

انتقل إلى إعدادات التباعد وقم بإزالة جميع الحشوة الافتراضية العلوية والسفلية.

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

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

أضف الرمز

تابع عن طريق إضافة وحدة نصية إلى عمود الصف. أضف الرمز "=" إلى مربع المحتوى أو لا تتردد في استخدام أي رمز آخر من اختيارك.

لون الخلفية

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

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

إعدادات النص

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

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

تباعد

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

• الحشوة العلوية: 2.5vw (سطح المكتب) ، 3.5vw (Tablet) ، 5vw (الهاتف)
• الحشوة السفلية: 2.5vw (سطح المكتب) ، 3.5vw (الكمبيوتر اللوحي) ، 5vw (الهاتف)

أضف الصف رقم 2

هيكل العمود

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

تحجيم

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

• استخدام عرض مزراب مخصص: نعم
• عرض الحضيض: 1
• العرض: 100٪
• العرض الأقصى: 100٪

تباعد

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

• الحشوة العلوية: 2vw (سطح المكتب) ، 4vw (جهاز لوحي) ، 6vw (هاتف)
• الحشوة السفلية: 2vw (سطح المكتب) ، 4vw (جهاز لوحي) ، 6vw (هاتف)

عرض

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

display: flex;

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

إضافة محتوى

حان الوقت لبدء إضافة عناصر القائمة! أضف وحدة Blurb Module جديدة إلى العمود الأول من الصف وأدخل بعض المحتوى الذي تختاره.

حدد أيقونة

اختر رمزًا بعد ذلك.

إضافة رابط

وأدخل رابط الصفحة الذي يطابق عنصر القائمة.

• عنوان URL لارتباط العنوان: #

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

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

• لون الأيقونة: # ff3314
• وضع الرمز: الأعلى
• استخدام حجم خط الأيقونة: نعم
• حجم خط الرمز: 2vw (سطح المكتب) ، 3vw (الجهاز اللوحي) ، 4vw (الهاتف)

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

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

• خط العنوان: PT Serif
• نمط خط العنوان: تسطير
• لون تسطير العنوان: # ff3314
• محاذاة نص العنوان: الوسط
• حجم نص العنوان: 1.8vw (Desktop) ، 2.3vw (Tablet) ، 3.3vw (Phone)

إعدادات النص الأساسي

بعد ذلك ، قم بتغيير إعدادات النص الأساسي.

• خط الجسم: لاتو
• محاذاة النص الأساسي: الوسط
• لون النص الأساسي: # c6c6c6
• حجم نص الجسم: 0.9vw (سطح المكتب) ، 1.7vw (جهاز لوحي) ، 2.1vw (هاتف)
• ارتفاع خط الجسم: 1.8em

تحجيم

وقم بتغيير عرض الوحدة عبر أحجام الشاشات المختلفة باستخدام القيم التالية:

• العرض: 60٪ (كمبيوتر مكتبي) ، 65٪ (كمبيوتر لوحي) ، 80٪ (هاتف)

حيوية

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

• الرسوم المتحركة للرمز: لا توجد رسوم متحركة

استنساخ وحدة Blurb ووضع نسخة مكررة في العمود 2

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

تغيير النسخ

تأكد من تغيير النسخة.

تغيير الايقونة

جنبا إلى جنب مع الرمز.

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

ورابط الصفحة الذي يتطابق مع عنصر القائمة الجديد.

صف استنساخ مرتين

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

قم بتغيير النسخ والأيقونة والارتباط لكل نسخة دليلية مكررة على حدة

تأكد من تغيير النسخة والأيقونة والارتباط لكل عنصر من عناصر قائمة المعلومات الدعائية بشكل فردي.

4. اجعل القسم مثبتًا

تقصير

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

position: fixed;
top: 0;

تحوم (هام!)

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

position: fixed;

5. اختر طريقة: أ) قائمة على تحوم أو ب) قائمة عند النقر

أ) القائمة على تحوم

تحجيم القسم الافتراضي

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

• العرض: 8vw (Desktop) ، 12vw (Tablet) ، 20vw (Phone)
• الارتفاع: 7.4vw (سطح المكتب) ، 12vw (Tablet) ، 16vw (Phone)

تحوم القسم التحجيم

قم بتعديل القيم الموجودة في التمرير لإنشاء قائمة موسعة.

• العرض: 80٪
• الارتفاع: 100 فولت

ب) القائمة عند النقر

أضف فئة CSS إلى وحدة النص

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

• فئة CSS: عرض كامل مفتوح

أضف فئة CSS إلى القسم

افتح إعدادات القسم بعد ذلك وأضف فئة CSS مختلفة.

• فئة CSS: تحويل سلس

قسم التحجيم

سنقوم بتعديل عرض وارتفاع القسم الخاص بنا بعد ذلك.

• العرض: 8vw (Desktop) ، 12vw (Tablet) ، 20vw (Phone)
• الارتفاع: 7.4vw (سطح المكتب) ، 12vw (Tablet) ، 16vw (Phone)

أضف رمز إلى الصفحة

أضف صفًا جديدًا إلى أسفل القسم

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

أضف وحدة التعليمات البرمجية إلى قسم وأدخل JQuery Toggle Code

انسخ الأسطر التالية من كود JQuery والصقها في مربع الشفرة:

<script>
jQuery(function($){
$(".fullwidth-open").click(function() {
 $('.smooth-transform').toggleClass('smooth-transform-active');
});

});
</script>

أضف كود CSS مخصص إلى إعدادات الصفحة

أخيرًا وليس آخرًا ، افتح إعدادات الصفحة التالية وأضف الأسطر التالية من كود CSS:

.smooth-transform-active {
height: 100vh;
width: 80%;
}

.smooth-transform {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}

معاينة

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

وضع التحويم

سطح المكتب

متحرك

انقر فوق Modus

سطح المكتب

متحرك

افكار اخيرة

في هذا المنشور ، أوضحنا لك كيفية إنشاء وحدة دعاية دعاية جميلة تتوسع عند النقر / التمرير (حسب تفضيلاتك). هذه طريقة رائعة لإضافة تفاعل إضافي إلى قائمتك مع الحفاظ على نتيجة سريعة الاستجابة عبر جميع أحجام الشاشات. إذا كان لديك أي أسئلة أو اقتراحات ، فتأكد من ترك تعليق في قسم التعليقات أدناه!

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