วิธีสร้างม้าหมุนที่คลิกได้ของโมดูล Divi

โพสต์ของวันนี้ส่งโดย Michelle Nunan แห่ง Divi Soup ซึ่งเป็นที่ตั้งของ “Divi Kitchen” ซึ่งเธอกำลังปรุงบทเรียน Divi และ ecourses ที่มีประโยชน์ใหม่ๆ อยู่เสมอ

ภาพหมุนเป็นคุณลักษณะเว็บไซต์ยอดนิยม ช่วยให้คุณแสดงเนื้อหาได้มากขึ้นโดยไม่ต้องใช้พื้นที่เพิ่มเติม และยังเพิ่มองค์ประกอบของการโต้ตอบในเว็บไซต์ของคุณ ซึ่งสามารถกระตุ้นให้ผู้เยี่ยมชมมีส่วนร่วมกับเนื้อหาของคุณมากขึ้น

มีปลั๊กอินที่ยอดเยี่ยมจำนวนหนึ่งที่สามารถช่วยในการแสดงเนื้อหาของคุณในแบบภาพหมุน แต่ในโพสต์นี้ ฉันจะแสดงวิธีสร้างภาพหมุนที่คลิกได้ของโมดูล Divi โดยใช้ CSS และ Javascript เท่านั้น

เอฟเฟกต์นี้สามารถใช้ได้กับโมดูล Divi มาตรฐานเกือบทุกชนิด หรือชุดรวมของโมดูล ฉันจะแสดงวิธีสร้างภาพหมุนนี้โดยใช้โมดูลรูปภาพ จากนั้นใช้โมดูลบล็อกเนื่องจากกระบวนการนี้จะแตกต่างกันเล็กน้อย จากตรงนั้น คุณควรทำความเข้าใจว่าคุณสามารถสร้างภาพหมุนของคุณเองได้อย่างไรด้วยโมดูลมาตรฐานแทบทุกชนิด

ผลลัพธ์

นี่คือสิ่งที่คุณควรทำหลังจากสร้างภาพหมุนด้วยโมดูลบล็อก

คุณสามารถดูการสาธิตสดได้ที่นี่ซึ่งแสดงผลโดยใช้ Divi Builder Modules ต่างๆ

มาเริ่มกันเลยดีกว่า

เพิ่มหน้าใหม่

เราจะเริ่มต้นด้วยการสร้างภาพหมุนด้วยโมดูลรูปภาพ เพิ่มหน้าใหม่หรือเปิดหน้าที่คุณต้องการเพิ่มภาพหมุน

เพิ่มส่วนใหม่

เพิ่มส่วนมาตรฐานใหม่ให้กับเพจของคุณด้วยคอลัมน์เดียว จากนั้นเปิดการตั้งค่าส่วนและในแท็บขั้นสูง เพิ่มส่วนคลาส ds-carousel ในช่องคลาส CSS

ในขณะที่เรากำลังจะเปลี่ยนวิธีการแสดงส่วนและแถว เราเพียงต้องการใช้การเปลี่ยนแปลงเหล่านี้กับภาพหมุนของเรา ดังนั้นเราจึงเพิ่มคลาสที่กำหนดเองเพื่อป้องกันไม่ให้โค้ดของเราส่งผลกระทบต่อองค์ประกอบอื่นๆ บนไซต์ของเรา

จากนั้นบันทึกและออกจากส่วน

ตอนนี้เปิดการตั้งค่าแถวและในแท็บขั้นสูง เพิ่มคลาส ds-carousel-row ในฟิลด์ CSS Class จากนั้นบันทึกและออกจากแถว

ต่อไปเราจะเพิ่มโมดูลรูปภาพในแถวของเรา คลิก แทรกโมดูล และเลือก โมดูลรูปภาพ จากรายการ

ในแท็บเนื้อหาของโมดูลรูปภาพ ให้คลิกอัปโหลดรูปภาพ แล้วเลือกรูปภาพที่คุณต้องการจากไลบรารีสื่อหรืออัปโหลดรูปภาพใหม่

หากคุณต้องการให้รูปภาพของคุณเปิดในไลท์บ็อกซ์ ให้เลือกตัวเลือกนี้ในการตั้งค่า

หรือคุณสามารถเพิ่ม URL เพื่อเปิดหน้าใหม่เมื่อคลิกรูปภาพได้หากต้องการ

สิ่งสุดท้ายที่เราต้องทำกับโมดูลคือการเพิ่มคลาส คลิกที่แท็บ Advanced และเพิ่มคลาส ds-carousel-module ในฟิลด์ CSS Class จากนั้นบันทึกและออกจากโมดูล

นั่นเป็นหนึ่งในโมดูลของเราที่เสร็จสิ้น แต่เราต้องการมากกว่าหนึ่งภาพเพื่อสร้างภาพหมุน รหัสที่ฉันจะให้ในภายหลังในโพสต์นี้จะแสดงภาพครั้งละ 5 ภาพ ดังนั้นเราต้องการอย่างน้อย 6 ภาพเพื่อให้ปุ่มแบบหมุนของเรามีผลใดๆ และเลื่อนเนื้อหาของเรา

ใช้คุณสมบัติโคลนของ Divi ทำซ้ำโมดูลรูปภาพหลาย ๆ ครั้งตามที่คุณต้องการให้รูปภาพแสดงในภาพหมุนของคุณ

เมื่อคุณทำเสร็จแล้ว ส่วนของคุณควรมีลักษณะเช่นนี้ โดยโมดูลรูปภาพของคุณจะซ้อนกันในแถวเดียว

คุณจะต้องเปิดการตั้งค่าสำหรับแต่ละโมดูลและสลับรูปภาพและ URL หากคุณเพิ่มเข้าไป

นั่นคือการตั้งค่าเนื้อหาที่เสร็จสมบูรณ์ ตอนนี้เรากำลังจะสร้างการนำทาง

เพิ่มส่วนใหม่

เพิ่มส่วนใหม่ใต้ส่วนรูปภาพของคุณโดยตรง คราวนี้มีสองคอลัมน์

เปิดการตั้งค่าแถวและในแท็บขั้นสูงให้เพิ่มคลาส ds-arrow-row ในฟิลด์ CSS Class จากนั้นบันทึกและออกจากแถว

เพิ่มการนำทาง

ถัดไป เพิ่มโมดูลข้อความให้กับแต่ละสองคอลัมน์ในแถวนี้

ตอนนี้เราต้องสร้างช่องป้อนข้อมูลเพื่อทำหน้าที่เป็นปุ่มนำทางของเรา เปิดโมดูลข้อความในคอลัมน์ด้านซ้ายและในพื้นที่เนื้อหา วาง HTML ต่อไปนี้:

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

จากนั้นบันทึกและออกจากโมดูล

ถัดไปเปิดโมดูลข้อความในคอลัมน์ด้านขวาและวาง HTML ต่อไปนี้:

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

จากนั้นบันทึกและออกจากโมดูล

เรากำลังให้ ID เฉพาะสำหรับฟิลด์อินพุตเหล่านี้ของ ds-arrow-left และ ds-arrow-right เพื่อให้เราสามารถจัดรูปแบบพวกมันด้วย CSS และกำหนดเป้าหมายด้วย JavaScript เพื่อบอกว่าเราต้องการให้พวกเขาทำอะไรเมื่อถูกคลิก

ค่า 8 และ 9 หมายถึงลูกศรซ้ายและขวาคู่จากตระกูลฟอนต์ ET Modules

นั่นคือทั้งหมดที่เราต้องทำในตัวสร้าง หากคุณตรวจสอบส่วนหน้าของหน้าของคุณตอนนี้ มันจะเป็นเพียงแค่คอลัมน์เดียวของรูปภาพ จากนั้นปุ่มสีเทาเล็กๆ สองปุ่มที่มี 8 และ 9 อยู่บนนั้น และจะไม่ทำอะไรเลย ไปที่ส่วนสนุก ๆ โดยเพิ่มรหัสของเรา

เพิ่ม CSS

ฉันขอแนะนำให้เพิ่ม CSS ต่อไปนี้ในธีมลูกของคุณ แต่ถ้าคุณไม่ได้ใช้ธีมลูก คุณสามารถเพิ่ม Divi > ตัวเลือกธีม > ทั่วไป > 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 โมดูลต่อหน้า คุณจะพบกับ 3 หน้า ดังนั้นความกว้างที่มองเห็นได้ของแถวจะต้องเป็น:

(15 / 5) x 100 = 300

ดังนั้น คุณจะต้องเปลี่ยนค่า 1000vw เป็นขั้นต่ำ 300vw (ไม่สำคัญว่าคุณจะใส่ตัวเลขที่มากกว่านั้นหรือไม่ เนื่องจาก JavaScript จะไม่แสดงหน้าว่างเพิ่มเติม) ดังนั้น CSS ที่ปรับแล้วของคุณจะมีลักษณะดังนี้:

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

ด้วยแบบสอบถามสื่อจะแตกต่างกันเล็กน้อย เนื่องจาก CSS ได้รับการกำหนดค่าให้แสดง 3 ภาพต่อหน้าบนหน้าจอกว้าง 1024px และน้อยกว่า และ 1 ภาพต่อหน้าบนหน้าจอกว้าง 479px หรือน้อยกว่า เราจำเป็นต้องปรับการคำนวณเพื่อสะท้อนว่า:

(15 / 3) x 100 = 500 (สำหรับแท็บเล็ต)
(15 / 1) x 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 > ตัวเลือกธีม > 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 นี่คือความเร็วเป็นมิลลิวินาที: 1,000 มิลลิวินาที = 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 มาตรฐานเกือบทุกชนิด แต่คุณอาจต้องปรับการตั้งค่าด้วยโมดูลที่ออกแบบมาเพื่อแสดงฟีดบางประเภท เช่น โมดูลบล็อก

เนื่องจากโมดูลบล็อกดึงโพสต์และแสดงบทความเหล่านั้นในหลายคอลัมน์ (เมื่อใช้คุณลักษณะกริด) จึงต้องปรับการตั้งค่าโมดูลและ CSS เพิ่มเติมเล็กน้อย

ภาพหมุนโดยใช้โมดูลบล็อก

ทำตามขั้นตอนเดียวกันเพื่อตั้งค่าส่วนและแถวของคุณ

แทนที่จะเพิ่มโมดูลรูปภาพ ให้เลือกโมดูลบล็อกและเพิ่มคลาส ds-carousel-module ในแท็บขั้นสูงของการตั้งค่าโมดูล

ถัดไป ในแท็บออกแบบ ให้เลือก Grid จากเมนูดร็อปดาวน์ของเลย์เอาต์

คุณสามารถปล่อยให้เป็นแบบเต็มความกว้างได้หากต้องการ แต่ตัวเลือก Grid จะเพิ่มสไตล์ที่เข้ากับเค้าโครงภาพหมุนโดยอัตโนมัติ

ตอนนี้เราต้องปรับการตั้งค่าบางอย่างในแท็บเนื้อหา

สำหรับโมดูลแรกนี้ เราจำเป็นต้องตั้งค่า Posts Number เป็น 1 และ Offset Number ตั้งค่าเป็น 0
วิธีปรับการตั้งค่าที่เหลือและเนื้อหาที่คุณแสดงนั้นขึ้นอยู่กับคุณ จากนั้นบันทึกและออก

อย่างที่เราทำก่อนหน้านี้ ใช้ฟังก์ชันโคลนของ Divi เพื่อทำซ้ำโมดูลได้มากเท่าที่คุณต้องการ

เมื่อคุณมีจำนวนโมดูลบล็อกที่ต้องการแล้ว ให้เปิดโมดูลแต่ละโมดูลและเพิ่มจำนวนออฟเซ็ตทีละ 1 โมดูลเพื่อให้แต่ละโมดูลบล็อกแสดงโพสต์ถัดไปในฟีด

ดังนั้นการตั้งค่าของคุณจะมีลักษณะดังนี้:

ที่ 1 = จำนวนออฟเซ็ต: 0
2nd = จำนวนออฟเซ็ต: 1
ที่ 3 = จำนวนออฟเซ็ต: 2
4th = จำนวนออฟเซ็ต: 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;
    }
}

หากคุณตัดสินใจใช้โมดูลบล็อกในโหมดเต็มความกว้าง คุณไม่จำเป็นต้องเพิ่มโมดูลนี้

ผลลัพธ์

ตอนนี้ตรวจสอบหน้าของคุณและดูบล็อก Carousel ใหม่ที่น่ารักของคุณ

ความคิดสุดท้าย

มีหลายวิธีที่คุณสามารถใช้เอฟเฟกต์ภาพหมุนนี้เพื่อแสดงเนื้อหาเพิ่มเติมโดยไม่ต้องเพิ่มความยาวของหน้า

คุณสามารถแสดงการออกแบบไซต์ของคุณ คำรับรองจากลูกค้า ชีวประวัติพนักงาน วิดีโอ พอดแคสต์ หรือแม้แต่ผลิตภัณฑ์จากร้านค้าของคุณ

ฉันชอบที่จะได้ยินว่าคุณใช้บทช่วยสอนนี้อย่างไรเพื่อสร้างภาพหมุนที่คลิกได้ของโมดูล Divi ดังนั้นโปรดแสดงความคิดเห็นในส่วนด้านล่าง!

ภาพเด่นโดย aunaauna / Shutterstock.com