كيفية تصميم منطقة القطعة للوظائف الأخيرة القابلة للتمرير في Divi

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

هيا بنا نبدأ!

نظرة خاطفة

إليك نظرة خاطفة سريعة على التصميم الذي سنقوم ببنائه في هذا البرنامج التعليمي.

قم بتنزيل مخطط المشاركات الأخيرة القابل للتمرير مجانًا

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

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

تنزيل مجاني

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

تحميل

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

لاستيراد التخطيط إلى صفحتك ، ما عليك سوى استخراج ملف مضغوط واسحب ملف json إلى Divi Builder.

دعنا نصل إلى البرنامج التعليمي ، فهل نحن؟

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

إنشاء منطقة القطعة المنشورات الأخيرة

نظرًا لأننا سنقوم بإضافة عنصر واجهة مستخدم حديثًا إلى تخطيط Divi الخاص بنا ، فإن أول شيء نحتاج إلى القيام به هو إنشاء منطقة عناصر واجهة مستخدم جديدة (مع عنصر واجهة مستخدم المنشورات الأخيرة) لاستخدامها مع وحدة Divi Sidebar.

لإنشاء منطقة عناصر واجهة استخدام المشاركات الأخيرة ، انتقل إلى المظهر> الأدوات. ثم قم بإنشاء منطقة عنصر واجهة مستخدم جديدة من خلال إعطاء اسم لمنطقة عنصر واجهة المستخدم (أطلق عليها اسم "المشاركات الأخيرة" إذا كنت تريد) والنقر على زر إنشاء. قم بتحديث الصفحة لرؤية منطقة الأدوات الجديدة المتاحة.

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

ثم افتح منطقة عناصر واجهة استخدام المنشورات الأخيرة وقم بتحديث أداة المشاركات الحديثة بعنوان. قم بتعيين عدد المنشورات التي سيتم عرضها على عدد كبير بحيث يكون لدينا عدد كافٍ من المنشورات للتمرير خلالها عند اكتمال تصميمنا.

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

إنشاء قسم "من مدونتنا" مع منطقة القطعة للوظائف الأخيرة القابلة للتمرير

تصميم قسم العنوان

أنشئ قسمًا عاديًا جديدًا بصف عمود واحد.

قبل إضافة وحدة نمطية ، قم بتحديث القسم بما يلي:

لون الخلفية: # 333333
الحشو المخصص: أسفل 0 بكسل

ثم أخرج الحشوة السفلية للصف أيضًا عن طريق تحديث إعدادات الصف:

الحشو المخصص: أسفل 0 بكسل

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

ثم قم بتحديث إعدادات النص التالية:

بالنسبة للمحتوى ، أضف عنوان h2 التالي html:

<h2>From our Blog</h2>

ثم قم بتحديث إعدادات النص التالية:

خط العنوان 2: Roboto
نمط خط العنوان 2: TT
لون نص العنوان 2: #ffffff
حجم نص العنوان 2: 40 بكسل
العنوان 2 تباعد الأحرف: 2 بكسل

هذا يعتني بالعنوان لمخططنا. حان الوقت الآن لإنشاء باقي التخطيط باستخدام قسم خاص.

إنشاء قسم التخصص

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

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

ثم أضف صف عمود واحد إلى القسم.

قبل إضافة وحدة نمطية ، دعنا نقوم بتحديث إعدادات القسم والصف.

تخصيص إعدادات القسم

افتح إعدادات قسم التخصص وقم بتحديث ما يلي:

لون الخلفية: # 333333
عرض المزراب: 2
الحشو المخصص: أعلى 0 بكسل
حشوة مخصصة للعمود 2: 0 بكسل للأعلى و 0 بكسل للأسفل

تخصيص إعدادات الصف

افتح بعد ذلك إعدادات الصف وقم بتحديث ما يلي:

الارتفاع: 640 بكسل
عرض الحد العلوي: 8 بكسل
لون الحد العلوي: # 444444
عرض الحد السفلي: 8 بكسل
لون الحد السفلي: # 444444

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

إضافة وحدة المدونة

في الصف المكون من عمود واحد على اليسار ، أضف وحدة مدونة.

ثم قم بتحديث إعدادات وحدة المدونة على النحو التالي:

عدد المشاركات: 2

التخطيط: الشبكة
خط العنوان: Roboto
خط التعريف: Roboto
وزن الخط الميتا: خفيف
نمط الخط الميتا: TT
خط ترقيم الصفحات: Roboto
نمط خط ترقيم الصفحات: TT
لون نص ترقيم الصفحات: #ffffff
حجم نص ترقيم الصفحات: 18 بكسل
تباعد ترقيم الصفحات: 2 بكسل

إضافة منطقة عنصر واجهة مستخدم المنشورات الأخيرة القابلة للتمرير

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

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

ثم قم بتحديث تصميم نص العنوان والجسم كما يلي:

خط العنوان: Roboto
نمط خط العنوان: TT
لون نص العنوان: #ffffff
تباعد حروف العنوان: 2 بكسل
خط الجسم: Roboto
نمط خط النص: تسطير

بعد ذلك ، قم بإخفاء فاصل الحدود كما يلي:

إظهار فاصل الحدود: NO

ثم امنح وحدة الشريط الجانبي أقصى ارتفاع وحشو مخصص على النحو التالي:

أقصى ارتفاع: 640 بكسل
الحشو المخصص: 30 بكسل للأعلى ، 30 بكسل للأسفل ، 5٪ يمين

الحد الأقصى للارتفاع 640 بكسل يطابق الارتفاع المخصص 640 بكسل الممنوح للصف المجاور.

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

تجاوز عمودي: التمرير

النتيجة النهائية

هذا كل شيء! الآن دعنا نتحقق من النتيجة النهائية.

خيار المكافأة: إضافة CSS مخصص إلى Design Scrollbar (غير مدعوم من قبل جميع المتصفحات)

يعد تصميم شريط التمرير في WordPress نوعًا من الألم إذا كنت تريد دعمًا متقاطعًا للمتصفح. لذلك في معظم الحالات ، سترغب في ترك الأمر للأنماط الافتراضية للمتصفح وتسميته يوميًا. ولكن إذا كنت ترغب في تخصيص شريط التمرير لمطابقة تصميم صفحتك ، فيمكنك إضافة بعض CSS المخصص. لسوء الحظ ، يقتصر دعم المتصفح على المتصفحات التي تدعم خصائص CSS مسبوقة بـ :: webkit (أساسًا Safari و Chrome فقط). هيريس كيفية القيام بذلك.

افتح إعدادات قسم التخصص وأضف فئة CSS التالية:

فئة CSS: التمرير التمرير

ثم افتح صيغة إعدادات الصفحة وأضف CSS المخصص التالي إلى الصفحة.

/* width */
.cust-scroll ::-webkit-scrollbar {
  width: 8px;
}

/* Track */
.cust-scroll ::-webkit-scrollbar-track {
  background: #444444; 
}
 
/* Handle */
.cust-scroll ::-webkit-scrollbar-thumb {
  background: #888888; 
}

/* Handle on hover */
.cust-scroll ::-webkit-scrollbar-thumb:hover {
  background: #ffffff;
}

يؤدي ذلك إلى تغيير عرض شريط التمرير إلى 8 بكسل وضبط ألوان المسار والمقبض. لا تتردد في تجربة المزيد من التصميمات والألوان بنفسك.

وفي حال كنت تتساءل ، فإن الرجوع إلى المتصفحات الأخرى سيكون النمط الافتراضي للمتصفحات لأشرطة التمرير.

افكار اخيرة

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

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

أتطلع إلى تلقي رد منك في التعليقات أدناه.

هتافات!