تحويل وحدة المدونة الخاصة بك إلى منصة متطورة قابلة للسحب / التمرير باستخدام Divi & Slick

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

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

معاينة

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

سطح المكتب

متحرك

قم بتنزيل وحدة المدونة Draggable Swipe Carousel Layout مجانًا

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

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

تنزيل مجاني

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

تحميل

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

1. إنشاء صفحة مدونة

أضف صفحة جديدة

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

تحميل مخطط صفحة مدونة شركة التصميم الداخلي

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

2. إنشاء تصميمات الأسهم السابقة والتالية باستخدام الوحدات النمطية

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

هيكل العمود

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

تحجيم

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

• العرض: 100٪
• العرض الأقصى: 100٪

أضف الوحدة النمطية Blurb

أضف عنوانا

بعد ذلك ، أضف وحدة Blurb Module وأدخل عنوانًا.

حدد أيقونة

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

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

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

• لون الأيقونة: # 000000
• رمز الدائرة: نعم
• لون الدائرة: # f2f2f2
• وضع الصورة / الرمز: علوي
• محاذاة الصورة / الرمز: الوسط

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

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

• خط العنوان: Muli
• وزن خط العنوان: شبه عريض
• محاذاة نص العنوان: الوسط
• لون نص العنوان: # 000000

تحجيم

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

• العرض: 10٪ (كمبيوتر مكتبي) ، 20٪ (جهاز لوحي) ، 30٪ (هاتف)
• محاذاة الوحدة: صحيح

فئة CSS

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

• فئة CSS: الزر الخلفي

العنصر الرئيسي CSS

أخيرًا وليس آخرًا ، سنضيف أيضًا سطرًا واحدًا من كود CSS إلى العنصر الرئيسي للوحدة النمطية لتغيير المؤشر إلى مؤشر.

cursor: pointer;

صف الاستنساخ والمكان في الجزء السفلي من القسم

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

غير العنوان

افتح الوحدة النمطية Blurb في الصف المكرر وقم بتغيير العنوان.

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

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

تغيير فئة CSS

وتعديل فئة CSS أيضًا.

• فئة CSS: زر التالي

3. قم بإعداد وحدة المدونة

افتح الصف الذي يحتوي على وحدة المدونة

تحجيم

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

• العرض: 100٪
• العرض الأقصى: 100٪

الرؤية

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

• الفائض الأفقي: مخفي
• الفائض العمودي: مخفي

تعديل وحدة المدونة

إخفاء ترقيم الصفحات

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

• إظهار ترقيم الصفحات: لا

تخطيط

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

• التخطيط: عرض كامل

تراكب

نحن نضيف تراكبًا أيضًا.

• تراكب الصور المميز: تشغيل
• لون أيقونة التراكب: #ffffff
• تراكب لون الخلفية: rgba (1،0،66،0.33)

فئة CSS

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

• فئة CSS: وحدة مدونة

Post Meta CSS

وسننشئ بعض المسافة بين ما بعد النشر والمقتطف عن طريق إضافة بعض الهامش السفلي لعنصر meta CSS المنشور في علامة التبويب المتقدمة.

margin-bottom: 50px;

4. إضافة وظيفة Slick JS

أضف وحدة التعليمات البرمجية أدناه وحدة المدونة

بمجرد أن تكون جميع إعدادات Divi في مكانها الصحيح ، فقد حان الوقت لإضافة وظيفة js slick! أضف وحدة رمز مباشرةً أسفل وحدة المدونة (أو في أي مكان آخر على الصفحة).

أضف علامات Slick JS Script

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

src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js

أضف Slide CSS Code

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

.slick-slide {
float: left;
margin: 2vw;
}

أضف كود JQuery

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

jQuery(function($){
  
var backButton = $('.back-button');
var nextButton = $('.next-button');
var postContainer = $('.blog-module .et_pb_ajax_pagination_container');
  
postContainer.addClass('slider'); 
postContainer.addClass('blog-carousel'); 

$('.blog-carousel').slick({
    infinite: true,
    slidesToShow: 3,
    slidesToScroll: 1,
    centerMode: true,
    centerPadding: '10%',
    swipe: true,
    prevArrow: backButton,
    nextArrow: nextButton,
  
    responsive: [{
    breakpoint: 1079, settings: {
    slidesToShow: 1
    }
    }]

});
});

5. حفظ الصفحة والخروج من Visual Builder لعرض النتيجة

داخل Visual Builder ، لن ترى النتيجة. لذلك ، بمجرد الانتهاء ، احفظ صفحتك ، واخرج من Visual Builder واعرض النتيجة على موقع الويب الخاص بك!

معاينة

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

سطح المكتب

متحرك

افكار اخيرة

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

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