Divi: كيفية عرض صفحة مدونة كمنصة دائرية

ماذا عنملصقer بلوق الخاص بك Divi على شكل دائري حيث يمكنك التمرير بسهولة عبر المقالات؟

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

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

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

سنوضح لك كيفية تحويل وحدة مدونة Divi المتكاملة إلى دائرة باستخدام عناصر Divi المتكاملة و مكتبة js المجانية .

دعونا نذهب.

مسح

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

قم بإنشاء صفحة مدونة باستخدام Divi Theme Builder

ابدأ بإضافة صفحة جديدة إلى موقع الويب الذي تعمل عليه. 

امنح صفحتك عنوانًا ، وانشر الصفحة وانقر فوق "استخدم Divi Builder".

قم بتنزيل صفحة مدونة التصميم الداخلي المصممة مسبقًا لـ "شركة التصميم الداخلي"

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

قم بإنشاء قوالب سهم "السابق" و "التالي" باستخدام وحدة ملخص Divi

بمجرد الدخول إلى صفحة المدونة ، يمكننا البدء في إنشاء المكتبة. 

الجزء الأول مخصص لإنشاء الأسهم التي نحتاجها للسماح للزوار بالتنقل بين المقالات.

اقرأ أيضا: كيفية إنشاء رأس عام ثابت في DIVI

لتصميم الأسهم ، سنستخدم وحدة ملخص Divi ، لكن لك مطلق الحرية في استخدام أي وحدة نمطية أخرى من اختيارك. 

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

التحجيم

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

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

أضف وحدة الملخص

أضف وحدة ملخص وأدخل عنوانًا.

ثم حدد رمزًا.

• استخدام الرموز: نعم

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

قم بالتبديل إلى علامة تبويب النمط وقم بتعديل إعدادات الرمز كما يلي:

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

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

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

• خط العنوان: Mulish
• عنوان ضوء خافت: شبه غامق
• محاذاة النص: الوسط
• لون نص العنوان: # 000000

التحجيم

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

• أقصى عرض: 10٪ (كمبيوتر مكتبي) ، 20٪ (كمبيوتر لوحي) ، 30٪ (هاتف)
• محاذاة النص: صحيح

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

• فئة CSS: زر الرجوع

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

cursor: pointer;

استنساخ الخط وضعه في الجزء السفلي من القسم

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

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

استخدام الرموز: نعم.

قم أيضًا بتعديل فئة CSS.

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

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

التحجيم

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

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

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

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

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

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

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

بعد ذلك ، قم بالتبديل إلى علامة التبويب "النمط" وقم بتغيير التنسيق إلى "ملء الشاشة".

• الموديل: شاشة كاملة

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

• تم عرض صورة التراكب: نشط
• لون رمز التراكب: #ffffff
• تراكب لون الخلفية: rgba (1,0,66,0.33،XNUMX،XNUMX،XNUMX)

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

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

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

اكتشف أيضًا: كيفية إنشاء قائمة منزلقة ودفع في DIVI

margin-bottom: 50px;

أضف وظيفة Slick JS

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

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

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

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

اقرأ أيضا: كيفية إنشاء صفحة المدونة باستخدام وحدة المدونة في DIVI

تأكد من وضع الرمز بين علامات النمط كما هو موضح في الصورة أدناه.

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

وأخيرًا ، سنضيف بعض رموز 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
    }
    }]
 
});
});

احفظ الصفحة واخرج من Divi's Visual Builder لعرض النتيجة

في Visual Builder لن ترى النتيجة. 

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

مسح

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

تحميل DIVI Now !!!

وفي الختام

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

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

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

ولكن في هذه الأثناء ، شارك هذا المقال على الشبكات الاجتماعية المختلفة.

...