เปลี่ยนโมดูลบล็อกของคุณให้เป็นม้าหมุนแบบลากได้/เลื่อนขั้นสูงด้วย Divi & Slick

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

ไปกันเถอะ

ดูตัวอย่าง

ก่อนที่เราจะดำดิ่งสู่บทช่วยสอน มาดูผลลัพธ์คร่าวๆ ของหน้าจอขนาดต่างๆ

เดสก์ทอป

มือถือ

ดาวน์โหลดเลย์เอาต์ของโมดูลบล็อก Draggable Swipe Carousel Layout ฟรี

ในการวางมือบนโครงร่างม้าหมุนแบบเลื่อนที่ลากได้ของโมดูลบล็อกฟรี ก่อนอื่นคุณต้องดาวน์โหลดโดยใช้ปุ่มด้านล่าง ในการเข้าถึงการดาวน์โหลด คุณจะต้องสมัครรับรายชื่ออีเมล Divi Daily ของเราโดยใช้แบบฟอร์มด้านล่าง ในฐานะสมาชิกใหม่ คุณจะได้รับ Divi goodness และ Divi Layout pack ฟรีทุกวันจันทร์! หากคุณอยู่ในรายชื่อแล้ว เพียงป้อนที่อยู่อีเมลของคุณด้านล่างแล้วคลิกดาวน์โหลด คุณจะไม่ถูก "สมัครใหม่" หรือรับอีเมลเพิ่มเติม

ดาวน์โหลดไฟล์

ดาวน์โหลดฟรี

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

ดาวน์โหลด

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

1. สร้างหน้าบล็อก

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

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

อัปโหลดเค้าโครงหน้าบล็อกของ บริษัท ออกแบบตกแต่งภายใน

ในบทแนะนำการใช้งานนี้ เราจะใช้เลย์เอาต์บล็อกของ Interior Design Company แต่คุณสามารถใช้เลย์เอาต์อื่นได้ตามต้องการ

2. สร้างการออกแบบลูกศรก่อนหน้าและถัดไปโดยใช้โมดูล Blurb

เพิ่มแถวใหม่ที่ด้านบนของส่วน

โครงสร้างคอลัมน์

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

ขนาด

โดยไม่ต้องเพิ่มโมดูลใดๆ ให้เปิดการตั้งค่าแถวและอนุญาตให้แถวแตะด้านซ้ายและด้านขวาของส่วนโดยเปลี่ยนการตั้งค่าการปรับขนาดดังนี้:

• ความกว้าง: 100%
• ความกว้างสูงสุด: 100%

เพิ่มโมดูล Blurb

เพิ่มหัวข้อ

จากนั้นเพิ่มโมดูล Blurb และใส่ชื่อ

เลือกไอคอน

เลือกไอคอนถัดไป

การตั้งค่าไอคอน

ไปที่แท็บออกแบบและเปลี่ยนการตั้งค่าไอคอนดังนี้:

• ไอคอนสี: #000000
• ไอคอนวงกลม: ใช่
• สีวงกลม: #f2f2f2
• ตำแหน่งรูปภาพ/ไอคอน: ด้านบน
• การจัดตำแหน่งรูปภาพ/ไอคอน: กึ่งกลาง

การตั้งค่าข้อความชื่อเรื่อง

จากนั้น แก้ไขการตั้งค่าข้อความชื่อเรื่อง

• แบบอักษรของชื่อเรื่อง: Muli
• น้ำหนักแบบอักษรของชื่อเรื่อง: กึ่งหนา
• การจัดตำแหน่งข้อความชื่อเรื่อง: Center
• ชื่อข้อความสี: #000000

ขนาด

เรากำลังเปลี่ยนการตั้งค่าขนาดของโมดูลตามขนาดหน้าจอต่างๆ ต่อไป

• ความกว้าง: 10% (เดสก์ท็อป), 20% (แท็บเล็ต), 30% (โทรศัพท์)
• การจัดตำแหน่งโมดูล: ขวา

CSS Class

และเราจะเพิ่มคลาส CSS ด้วย คลาส CSS นี้จะช่วยให้เราทริกเกอร์การทำงานแบบหมุนได้เมื่อคลิกในบทช่วยสอนในภายหลัง

• CSS Class: ปุ่มย้อนกลับ

องค์ประกอบหลัก CSS

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

cursor: pointer;

โคลนแถว & วางที่ด้านล่างของมาตรา

เมื่อคุณทำลูกศรแรกเสร็จแล้ว คุณสามารถโคลนคอนเทนเนอร์แถวทั้งหมด และวางแถวที่ซ้ำกันที่ส่วนท้ายของส่วนบล็อก

เปลี่ยนชื่อ

เปิดโมดูล Blurb ในแถวที่ซ้ำกันและเปลี่ยนชื่อ

เปลี่ยนไอคอน

พร้อมกับไอค่อน

เปลี่ยนคลาส CSS

และปรับเปลี่ยนคลาส CSS ด้วยเช่นกัน

• CSS Class: ปุ่มถัดไป

3. เตรียมโมดูลบล็อก

โมดูลบล็อกที่มีแถวเปิด

ขนาด

เมื่อลูกศรเข้าที่แล้ว ก็ถึงเวลาเริ่มปรับแต่ง Blog Module โดยเริ่มจากแถวที่วางไว้ เปิดการตั้งค่าแถวและแก้ไขการตั้งค่าการปรับขนาดตามนั้น:

• ความกว้าง: 100%
• ความกว้างสูงสุด: 100%

ทัศนวิสัย

จากนั้นวางโอเวอร์โฟลว์ของแถวเพื่อซ่อน ซึ่งจะช่วยให้มั่นใจได้ว่าภาพหมุนจะไม่ทำให้แถบเลื่อนแนวนอนปรากฏขึ้นภายในหน้าเว็บของเรา

• แนวนอนล้น: ซ่อน
• ล้นแนวตั้ง: ซ่อน

แก้ไขโมดูลบล็อก

ซ่อนการแบ่งหน้า

เมื่อตั้งค่าแถวเรียบร้อยแล้ว ให้เปิดการตั้งค่าโมดูลบล็อก ตรวจสอบให้แน่ใจว่าได้ปิดใช้งานการแบ่งหน้าในการตั้งค่าองค์ประกอบ

• แสดงเลขหน้า: ไม่

เค้าโครง

จากนั้นไปที่แท็บออกแบบและเปลี่ยนเลย์เอาต์เป็นเต็มความกว้าง

• เลย์เอาต์: เต็มความกว้าง

โอเวอร์เลย์

เรากำลังเพิ่มโอเวอร์เลย์ด้วย

• การวางซ้อนรูปภาพเด่น: เปิด
• สีไอคอนซ้อนทับ: #ffffff
• สีพื้นหลังซ้อนทับ: rgba (1,0,66,0.33)

CSS Class

ต่อไป เราจะเพิ่มคลาส CSS ในบล็อกของเรา ซึ่งจะช่วยให้เราเปิดใช้งานภาพหมุนได้ในภายหลังในบทช่วยสอน

• CSS Class: บล็อกโมดูล

โพสต์ Meta CSS

และเราจะสร้างช่องว่างระหว่าง meta ของโพสต์และข้อความที่ตัดตอนมาโดยเพิ่มระยะขอบด้านล่างบางส่วนให้กับองค์ประกอบ post meta CSS ในแท็บขั้นสูง

margin-bottom: 50px;

4. เพิ่มฟังก์ชัน JS ที่ลื่นไหล

เพิ่มโมดูลโค้ดด้านล่างโมดูลบล็อก

เมื่อตั้งค่า Divi ทั้งหมดแล้ว ก็ถึงเวลาเพิ่มฟังก์ชัน slick js! เพิ่มโมดูลโค้ดด้านล่างโมดูลบล็อก (หรือที่อื่นในหน้า)

เพิ่มแท็กสคริปต์ JS เนียน

จากนั้น เพิ่มไลบรารี js แบบเนียน ภายในแท็กสคริปต์ (ดังที่คุณเห็นในหน้าจอการพิมพ์ด้านล่าง) คุณสามารถเพิ่มสิ่งเหล่านี้ลงในส่วนหัวของเว็บไซต์ของคุณในการตั้งค่าธีม Divi ได้เช่นกัน

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

เพิ่มโค้ด CSS ของสไลด์

เราจะปรับเปลี่ยนแต่ละบล็อกโพสต์ในระดับบุคคลเล็กน้อยโดยใช้โค้ด 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 แบบเรียบฟรี เราได้จัดเตรียมไฟล์ JSON ให้ฟรีเช่นกัน! หากคุณมีคำถามหรือข้อเสนอแนะโปรดแสดงความคิดเห็นในส่วนความคิดเห็นด้านล่าง

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