إنشاء عمود التنقل الجانبي المخصص لجهاز الاستدعاء الواحد مع Divi

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

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

معاينة

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

سطح المكتب

متحرك

قم بتنزيل مخطط التنقل الجانبي للعمود مجانًا

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

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

تنزيل مجاني

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

تحميل

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

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

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

إنشاء صفحة فارغة جديدة

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

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

لون الخلفية

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

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

تباعد

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

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

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

هيكل العمود

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

تحجيم

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

• معادلة ارتفاعات العمود: نعم
• العرض: 100٪
• العرض الأقصى: 100٪
• الارتفاع: 100 فولت

تباعد

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

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

إعدادات العمود 1

بمجرد الانتهاء من إعدادات الصف العامة ، افتح إعدادات العمود 1.

لون الخلفية

أضف لون خلفية بيضاء.

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

مربع الظل

جنبا إلى جنب مع الظل مربع خفية.

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

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

نحن أيضًا بصدد تقليص حجم العمود على سطح المكتب.

• السفلي: 75٪ (سطح المكتب) ، 100٪ (الجهاز اللوحي والهاتف)
• اليمين: 75٪ (سطح المكتب) ، 100٪ (الجهاز اللوحي والهاتف)

تحويل الترجمة

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

• الجزء السفلي: -5vw (سطح المكتب) ، 0 بكسل (الجهاز اللوحي والهاتف)
• اليمين: 0 بكسل

إعدادات العمود 2

استمر بفتح إعدادات العمود 2.

تباعد

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

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

فئة CSS

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

• فئة CSS: عمود التمرير

الرؤية

ستمثل الوحدات التي نضيفها في العمود الثاني محتوى صفحتنا. للسماح بالتمرير ، سنقوم بتغيير إعدادات تجاوز السعة.

• الفائض الأفقي: مخفي
• تجاوز عمودي: التمرير

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

أضف نسخة

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

إضافة رابط

أضف ارتباطًا إلى عنصر القائمة.

• عنوان URL لرابط الوحدة النمطية: www.yourwebsite.com/yourpage/#home

إعدادات النص

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

• خط النص: مونتسيرات
• محاذاة النص: الوسط
• لون النص: # 383838
• حجم النص: 3vw
• تباعد حروف النص: -3 بكسل (سطح المكتب) ، -2 بكسل (جهاز لوحي) ، -1 بكسل (الهاتف)

تباعد

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

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

استنساخ عنصر القائمة مرتين

بمجرد الانتهاء من عنصر القائمة الأول ، قم بنسخه مرتين.

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

قم بتغيير محتوى عنصر القائمة لكل من التكرارات.

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

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

• تكرار 1: / # about
• تكرار 2: / # خدمات

تغيير تباعد كلا التكرارات

أكمل التكرارات عن طريق تغيير قيم التباعد وفقًا لذلك:

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

أضف وحدة Divider Module إلى العمود 1

الرؤية

أضف وحدة Divider Module مباشرة بين الوحدات النصية الأولى والثانية في العمود 1. تأكد من تمكين الخيار "إظهار الحاجز".

• إظهار الحاجز: نعم

خط

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

• لون الخط: # ffebc9

تحجيم

جنبا إلى جنب مع إعدادات التحجيم.

• وزن الحاجز: 1vw
• الارتفاع: 0 بكسل

وحدة استنساخ مقسم

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

أضف وحدة متابعة الوسائط الاجتماعية إلى العمود 1

أضف الشبكات الاجتماعية

الوحدة التالية والأخيرة التي نحتاجها في العمود 1 هي وحدة متابعة الوسائط الاجتماعية. أضف الشبكات الاجتماعية التي تختارها.

انتقام

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

• محاذاة الوحدة: المركز

تباعد

قم بتعديل قيم الهامش بعد ذلك.

• الهامش العلوي: 12vw (سطح المكتب) ، 5vw (الجهاز اللوحي والهاتف)
• الهامش السفلي: 3vw (الجهاز اللوحي والهاتف)

الحدود

وأضف "50vw" إلى كل ركن من الزوايا لإنشاء شكل دائري.

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

تحميل الصور

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

انتقام

انتقل إلى علامة تبويب التصميم واختر محاذاة الصورة اليسرى.

• محاذاة الصورة: يسار

تحجيم

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

• فرض عرض كامل: نعم

تباعد

وأضف بعض الحشو الصحيح.

• الحشوة اليمنى: 20vw

معرف CSS

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

• معرف CSS: الصفحة الرئيسية

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

أضف محتوى H2

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

إعدادات نص H2

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

• خط العنوان 2: مونتسيرات
• العنوان 2 محاذاة النص: اليسار
• لون نص العنوان 2: # 383838
• حجم نص العنوان 2: 2vw (سطح المكتب) ، 4vw (جهاز لوحي) ، 5vw (هاتف)
• العنوان 2 تباعد الأحرف: -1 بكسل

تباعد

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

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

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

الرؤية

الوحدة التالية التي نحتاجها هي وحدة Divider Module. تأكد من تمكين خيار "إظهار الحاجز".

• إظهار الحاجز: نعم

خط

قم بتعديل لون الخط.

• لون الخط: # ffebc9

تحجيم

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

• وزن الحاجز: 15 بكسل
• العرض: 16٪
• محاذاة الوحدة: يسار

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

إضافة محتوى

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

إعدادات النص

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

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

تباعد

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

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

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

إضافة محتوى

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

انتقام

حدد محاذاة الزر الأيسر في علامة تبويب التصميم.

• محاذاة الزر: يسار

زر

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

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

تباعد

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

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

استنساخ جميع الوحدات في العمود 2 مرتين ووضعها في نفس الترتيب

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

تغيير وحدة الصورة المكررة رقم 1 CSS ID

قم بتغيير معرف CSS لأول وحدة صورة مكررة.

• معرف CSS: حول

تغيير وحدة الصورة المكررة # 2 CSS ID

افعل الشيء نفسه مع وحدة الصورة المكررة الثانية.

• معرف CSS: الخدمات

إخفاء شريط التمرير وإضافة تمرير ناعم

افتح إعدادات الصفحة

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

أضف CSS مخصص

بعد ذلك ، انتقل إلى علامة التبويب خيارات متقدمة وأضف بعض رموز CSS. بمجرد الانتهاء من هذه الخطوة ، تكون قد انتهيت!

.scroll-column::-webkit-scrollbar {
display: none;
}

.scroll-column {
scroll-behavior: smooth;
}

معاينة

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

سطح المكتب

متحرك

افكار اخيرة

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

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