كيفية إنشاء مقاطع إرشادية للجوال باستخدام وحدة Divi's Slider Module (تنزيل مجاني!)

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

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

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

معاينة

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

ثابتة

GIF

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

كيفية إنشاء تجول للجوال باستخدام وحدة Divi Slider Module

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

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

تباعد

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

• الحشوة العلوية: 4vw (سطح المكتب) ، 5vw (جهاز لوحي) ، 3vw (هاتف)
• الحشوة السفلية: 4vw (سطح المكتب) ، 5vw (الكمبيوتر اللوحي) ، 3vw (الهاتف)
• الحشو الأيسر: 30vw (سطح المكتب) ، 18vw (كمبيوتر لوحي) ، 3vw (هاتف)
• الحشو الأيمن: 30vw (سطح المكتب) ، 18vw (كمبيوتر لوحي) ، 3vw (هاتف)

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

هيكل العمود

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

خلفية متدرجة

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

• اللون 1: # f9f9f9
• اللون 2: rgba (255،255،255،0)
• نوع التدرج: شعاعي
• اتجاه شعاعي: أعلى
• موقف البداية: 40٪
• موضع النهاية: 40٪

تحجيم

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

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

تباعد

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

• الحشو السفلي: 30 بكسل

الحدود

بعد ذلك ، أضف "20 بكسل" لكل زاوية في إعدادات الحدود.

مربع الظل

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

• مربع قوة طمس الظل: 80 بكسل
• لون الظل: rgba (0،0،0،0.07)

إضافة وحدة شريط التمرير

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

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

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

إعدادات النص

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

• اتجاه النص: الوسط
• لون الظل: rgba (0،0،0،0)

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

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

• خط النص الأساسي: افتراضي (فتح Sans)
• حجم نص النص: 0.6vw (سطح المكتب) ، 1.5vw (الجهاز اللوحي) ، 2.4vw (الهاتف)
• ارتفاع خط الجسم: 2.2em (سطح المكتب) ، 2.3em (جهاز لوحي) ، 2.4em (هاتف)

تباعد

أضف بعض الحشو العلوي والسفلي المخصص أيضًا.

• الحشوة العلوية: 2vw
• الحشوة السفلية: 2vw

زر CSS مخصص

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

padding-left: 80px;
padding-right: 80px;
padding-top: 8px;
padding-bottom: 8px;
margin-bottom: 80px;

إزالة النشطة المتزلجون

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

تخصيص الشريحة الأولى

تخصيص المحتوى في Content Box

أضف شريحة جديدة إلى Slider Module وابدأ في تخصيص المحتوى في مربع المحتوى. في شاشات الطباعة أدناه ، ستلاحظ أننا نضيف الصورة إلى مربع المحتوى بدلاً من إعدادات الصورة. سيسمح لنا ذلك بوضع الصورة فوق المحتوى المكتوب. يمكنك العثور على الرسوم التوضيحية التي استخدمناها من خلال الانتقال إلى منشور Graphic Illustrator Layout Pack وتنزيل الصور في نهايته. نحن أيضًا نضيف ونصمم عنوان H3 في مربع المحتوى بدلاً من حقل العنوان ليظهر بالضبط في المكان الذي نريده.

ارتباط الزر

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

خلفية متدرجة

ثم أضف خلفية متدرجة باستخدام الإعدادات التالية:

• اللون 1: #aaacff
• اللون 2: rgba (255،255،255،0)
• نوع التدرج: شعاعي
• اتجاه شعاعي: أعلى
• موقف البداية: 30٪
• موضع النهاية: 30٪

التنقل

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

• لون مخصص للسهام: # f4f4f4
• اللون المخصص لـ Dot Nav: 000000 #

إعدادات النص

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

• لون النص: غامق

زر

أخيرًا وليس آخرًا ، قم بتعديل الزر لجعله يبدو بالطريقة التي تريدها بالضبط.

• استخدام الأنماط المخصصة للزر: نعم
• حجم نص الزر: 0.8vw (سطح المكتب) ، 2vw (جهاز لوحي) ، 3vw (هاتف)
• لون نص الزر: #ffffff
• لون خلفية الزر: #aaacff
• عرض حد الزر: 0 بكسل
• نصف قطر حدود الزر: 10 بكسل

استنساخ الشرائح عدة مرات حسب الحاجة

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

تغيير المحتوى في Content Box

أول شيء ستحتاج إلى تغييره هو المحتوى الموجود في مربع المحتوى. يتضمن ذلك الصورة / الرسم التوضيحي الذي يتم استخدامه. يمكنك العثور على كل من الرسوم التوضيحية التي تم استخدامها في هذا البرنامج التعليمي من خلال الانتقال إلى منشور Graphic Illustrator Layout Pack وتنزيل الصور في نهايته.

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

قم بتغيير رابط الزر أيضًا.

تعديل الخلفية المتدرجة

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

• اللون 1: #ffccaa

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

استخدم نفس اللون لتغيير لون خلفية الزر. كرر هذه الخطوات لكل واحد من التكرارات التي تقوم بإنشائها وتكون قد انتهيت!

• لون خلفية الزر: #ffccaa

قم بتنزيل قسم إرشادات الجوال مجانًا

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

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

تنزيل مجاني

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

تحميل

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

معاينة

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

ثابتة

GIF

افكار اخيرة

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