كيفية إنشاء مكتبة قابلة للنقر لوحدات Divi

تم تقديم منشور اليوم بواسطة Michelle Nunan من Divi Soup ، موطن "Divi Kitchen" حيث تقوم باستمرار بإعداد دروس ودورات إلكترونية جديدة ومفيدة لـ Divi.

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

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

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

نتيجة

هذا ما يجب أن ينتهي بك الأمر بعد إنشاء دائرة باستخدام وحدة المدونة

يمكنك مشاهدة عرض توضيحي مباشر هنا يوضح التأثير باستخدام وحدات Divi Builder المختلفة.

لذلك دعونا نبدأ.

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

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

أضف قسمًا جديدًا

أضف قسمًا قياسيًا جديدًا إلى صفحتك بعمود واحد. ثم افتح إعدادات القسم وفي علامة التبويب خيارات متقدمة ، أضف القسم ds-carousel للفئة في حقل CSS Class.

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

ثم احفظ واخرج من القسم.

افتح الآن إعدادات الصف وفي علامة التبويب خيارات متقدمة ، أضف صف دائري للفئة في حقل فئة CSS. ثم احفظ واخرج من الصف.

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

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

إذا كنت تريد فتح صورك في Lightbox ، فحدد هذا الخيار في الإعدادات.

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

آخر شيء يتعين علينا القيام به للوحدة هو إضافة فصل دراسي. انقر فوق علامة التبويب خيارات متقدمة وأضف وحدة ds-carousel للفئة في حقل فئة CSS. ثم احفظ واخرج من الوحدة.

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

باستخدام ميزة استنساخ Divi ، قم بتكرار وحدة الصورة عدة مرات كما تريد أن يتم عرض الصور في الرف الدائري الخاص بك.

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

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

لقد اكتمل إعداد المحتوى ، وسنقوم الآن بإنشاء التنقل.

أضف قسمًا جديدًا

أضف قسمًا جديدًا أسفل قسم الصور مباشرةً ، هذه المرة بعمودين.

افتح إعدادات الصف وفي علامة التبويب خيارات متقدمة أضف صف السهم ds للفئة في حقل فئة CSS. ثم احفظ واخرج من الصف.

أضف الملاحة

بعد ذلك ، أضف وحدة نصية إلى كل من العمودين في هذا الصف.

الآن نحن بحاجة إلى إنشاء حقول الإدخال لتكون بمثابة أزرار التنقل الخاصة بنا. افتح وحدة النص في العمود الأيسر وفي منطقة المحتوى ، الصق HTML التالي:

<input id="ds-arrow-left" type="button" value="8">

ثم احفظ واخرج من الوحدة.

بعد ذلك ، افتح وحدة النص في العمود الأيمن والصق HTML التالي:

<input id="ds-arrow-right" type="button" value="9">

ثم احفظ واخرج من الوحدة.

نمنح حقول الإدخال هذه معرفات فريدة لـ ds-arrow-left و ds-arrow-right حتى نتمكن من تصميمها باستخدام CSS واستهدافها باستخدام JavaScript لإخبارهم بما نريدهم أن يفعلوه عند النقر عليهم.

تشير قيمتا 8 و 9 إلى الأسهم المزدوجة اليمنى واليسرى من عائلة خطوط ET Modules.

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

أضف CSS

أنصح بإضافة CSS التالية إلى السمة الخاصة بك ، ولكن إذا كنت لا تستخدم سمة فرعية ، فلا بأس من إضافتها إلى Divi> Theme Options> General> Custom CSS وتأكد من الضغط على حفظ.

/*Hide the section overflow*/
.ds-carousel-section {
    width: 100%;
    overflow: hidden;
}

/*Set the row width*/
.ds-carousel-row {
    overflow: hidden;
    width: 1000vw;
    max-width: 1000vw;
}

@media all and (max-width: 1024px) {
/*Override Divi's width setting on tablets*/
    .ds-carousel-section .ds-carousel-row {
        max-width: 1000vw !important;
    }
}

@media all and (max-width: 479px) {
/*Override Divi's width setting on mobiles*/
    .ds-carousel-section .ds-carousel-row {
        max-width: 1000vw !important;
    }
}

/*Style the navigation arrows*/
#ds-arrow-left,
#ds-arrow-right {
    color: #fff;
    background: gray;
    font-family: 'ETModules';
    font-size: 30px;
    padding: 5px 30px;
    border-style: none;
    border-radius: 0;
    cursor: pointer;
    -webkit-box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.3);
    box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.3);
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}

/*Position the left arrow*/
#ds-arrow-left {
    float: right;
    margin-right: 5px;
}

/*Position the right arrow*/
#ds-arrow-right {
    float: left;
    margin-left: 5px;
}

/*Style navigation arrows on hover*/
#ds-arrow-left:hover,
#ds-arrow-right:hover {
    -webkit-box-shadow: 3px 3px 6px 1px rgba(0, 0, 0, 0.2);
    box-shadow: 3px 3px 6px 1px rgba(0, 0, 0, 0.2);
}

/*Style navigation arrows on click*/
#ds-arrow-left:active,
#ds-arrow-right:active {
    -webkit-box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, 0.2) inset;
    box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, 0.2) inset;
}

/*Make sure the modules span their entire container*/
.ds-carousel-module .column {
    float: left;
    width: 100% !important;
    margin-right: 0 !important;
}

/*Set the module width*/
.ds-carousel-module {
    width: 20vw; /*Change this value to increase or decrease the module displayed per page*/
    padding: 0 30px;
    float: left;
    position: relative;
    margin-bottom: 0 !important;
}

/*Adjust for smaller screens*/
@media all and (max-width: 1024px) {
    /*Show 3 modules per page on tablets*/
    .ds-carousel-module {
        width: 33.33vw;
    }
    /*Align the navigation on smaller screens*/
    #ds-arrow-row .et_pb_column {
        width: 50% !important;
    }
}

@media all and (max-width: 479px) {
    /*Show 1 module per page on mobiles*/
    .ds-carousel-module {
        width: 100vw;
    }
}

قم بتحرير CSS لاحتياجاتك

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

الآن قليلا من الرياضيات!

يحدد هذا الإعلان عرض الصف الذي يحتوي على الوحدات النمطية.

/*Set the row width*/
.ds-carousel-row {
    overflow: hidden;
    width: 1000vw;
    max-width: 1000vw;
}

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

إذا كنت تعرض إجمالي 15 وحدة مع 5 لكل صفحة ، فسينتهي بك الأمر بثلاث صفحات. لذلك يجب أن يكون العرض المرئي للصف كما يلي:

(15/5) × 100 = 300.

لذلك ستحتاج إلى تغيير قيم 1000vw إلى 300vw كحد أدنى. (لا يهم إذا قمت بإدخال رقم أكبر لأن JavaScript سيهتم بعدم عرض أي صفحات فارغة إضافية). لذلك ستبدو CSS المعدلة كما يلي:

/*Set the row width*/
.ds-carousel-row {
    overflow: hidden;
    width: 300vw;
    max-width: 300vw;
}

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

(15/3) × 100 = 500 (للأجهزة اللوحية)
(15/1) × 100 = 1500 (للجوال)

ستبدو CSS المعدلة كما يلي:

@media all and (max-width: 1024px) {
/*Override Divi's width setting on tablets*/
    .ds-carousel-section .ds-carousel-row {
        max-width: 500vw !important;
    }
}

@media all and (max-width: 479px) {
/*Override Divi's width setting on mobiles*/
    .ds-carousel-section .ds-carousel-row {
        max-width: 1500vw !important;
    }
}

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

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

/*Set the module width*/
.ds-carousel-module {
    width: 20vw; /*Change this value to increase or decrease the modules displayed per page*/
    padding: 0 30px;
    float: left;
    position: relative;
    margin-bottom: 0 !important;
}

تعرض قيمة العرض 20vw 5 صور لكل صفحة ، وهي مجرد نسبة 100. لذا سيعرض 25vw 4 صور لكل صفحة و 16.66vw سيعرض 6 صور لكل صفحة ، وهكذا.

يمكنك أن تفعل الشيء نفسه مع استعلامات الوسائط:

/*Adjust for smaller screens*/
@media all and (max-width: 1024px) {
    /*Show 3 modules per page on tablets*/
    .ds-carousel-module {
        width: 33.33vw;
    }
    /*Align the navigation on smaller screens*/
    #ds-arrow-row .et_pb_column {
        width: 50% !important;
    }
}

@media all and (max-width: 479px) {
    /*Show 1 module per page on mobiles*/
    .ds-carousel-module {
        width: 100vw;
    }
}

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

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

أضف JavaScript

انسخ الكود التالي والصقه في Divi> Theme Options> Integrations> أضف رمزًا إلى <head> في مدونتك وتأكد من حفظ.

<script type="text/javascript">
(function ($) {

var mn_index = 0; //Starting index
var mn_visible = 5;
var mn_end_index = 0;

function mn_next_slide(item) {
		mn_end_index = ( item.length / mn_visible ) - 1; //End index
	
		if (mn_index < mn_end_index ) {
			mn_index++;
			item.animate({'left':'-=100vw'}, 1000);
		}
}

function mn_previous_slide(item) {
		if (mn_index > 0) {
			 mn_index--; 
			 item.animate({'left':'+=100vw'}, 1000);
		}
}

function mn_first_slide(item) {
		if (mn_index > 0) {
			 var move_vw = (100 * mn_index);
			 item.animate({'left':'+='+move_vw+'vw'}, 1000);
			 mn_index = 0; 
		}
}

function mn_set_visible() {
	if ($(window).width() < 480) {      
		mn_visible = 1;
	} else if ($(window).width() < 1025) {
		mn_visible = 3;
	}
}

function mn_carousel_init() {
	mn_set_visible();

	var item = $('.ds-carousel-module');
 
	$('#ds-arrow-right').click(function() {
		mn_next_slide(item);
	});
 
	$('#ds-arrow-left').click(function() {
		mn_previous_slide(item);
	});
	 
	$(window).resize(function() {
		mn_set_visible();
	  	mn_first_slide(item);
	});

}

$(document).ready(function() {
	mn_carousel_init();
});

})(jQuery)
</script>

يضيف هذا الرمز وظائف لأزرارنا ، حيث ينقل الصف إلى اليسار واليمين عند النقر لعرض الوحدات.

هناك منطقتان قد ترغب في تعديلهما:

var mn_index = 0; //Starting index
var mn_visible = 5;
var mn_end_index = 0;

و mn_visible = 5 ؛ متغير يتوافق مع عدد الوحدات المعروضة لكل صفحة على سطح المكتب. لذلك إذا قمت بتغيير هذا في CSS كما ذكرنا سابقًا ، فستحتاج أيضًا إلى تغيير هذه القيمة أيضًا.

وبالمثل ، تقوم هذه الوظيفة بضبط عدد الصور المعروضة على الأجهزة اللوحية والهواتف المحمولة. لذلك إذا قمت بتغيير هذا في CSS ، فاضبط قيم mn_visible هنا أيضًا.

function mn_set_visible() {
	if ($(window).width() < 480) {      
		mn_visible = 1;
	} else if ($(window).width() < 1025) {
		mn_visible = 3;
	}
}

أخيرًا ، لدينا السرعة التي تتحرك بها الدائرة. تم ضبطه هنا على 1000. هذه هي السرعة بالمللي ثانية: 1000 مللي ثانية = 1 ثانية.

يمكنك ضبط هذه القيمة لتسريع الرسوم المتحركة أو إبطائها.

function mn_next_slide(item) {
		mn_end_index = ( item.length / mn_visible ) - 1; //End index
	
		if (mn_index < mn_end_index ) {
			mn_index++;
			item.animate({'left':'-=100vw'}, 1000);
		}
}

function mn_previous_slide(item) {
		if (mn_index > 0) {
			 mn_index--; 
			 item.animate({'left':'+=100vw'}, 1000);
		}
}

function mn_first_slide(item) {
		if (mn_index > 0) {
			 var move_vw = (100 * mn_index);
			 item.animate({'left':'+='+move_vw+'vw'}, 1000);
			 mn_index = 0; 
		}
}

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

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

نظرًا لأن وحدة المدونة تسحب المنشورات وتعرض تلك في أعمدة متعددة (عند استخدام ميزة الشبكة) ، فقد يتطلب ذلك تعديل إعدادات الوحدة وقليلًا من CSS الإضافي.

دائري باستخدام وحدة المدونة

اتبع نفس الخطوات لإعداد القسم والصف.

بدلاً من إضافة وحدة صورة ، اختر وحدة المدونة وأضف فئة ds-carousel-module في علامة التبويب Advanced في إعدادات الوحدة النمطية.

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

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

نحتاج الآن إلى ضبط بعض الإعدادات في علامة التبويب "المحتوى".

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

كما فعلنا من قبل ، استخدم وظيفة استنساخ Divi لتكرار الوحدة عدة مرات حسب حاجتك.

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

لذلك ستبدو إعداداتك كما يلي:

الأول = رقم الإزاحة: 0
الثاني = رقم الإزاحة: 1
الثالث = رقم الإزاحة: 2
الرابع = رقم الإزاحة: 3
إلخ.

القليل من CSS الإضافي

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

@media all and (max-width: 980px) {
    /*Set post to fullwidth on smaller screens*/
    .ds-carousel-section .et_pb_blog_grid .column.size-1of2 {
        width: 100% !important;
        margin: 0 !important;
    }
}

إذا قررت استخدام وحدة المدونة في وضع Fullwidth ، فلن تحتاج إلى إضافة هذا.

نتيجة

تحقق الآن من صفحتك وشاهد حلقة المدونة الجديدة الرائعة

افكار اخيرة

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

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

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

صورة مميزة بواسطة aunaauna / Shutterstock.com