วิธีเปลี่ยนโมดูลบล็อก Divi ให้เป็นโพสต์บล็อกแบบหมุน

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

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

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

เปลี่ยนโมดูล Divi Blog เป็น Carousel

ขั้นตอนที่ 1: สร้างหน้าหรือแก้ไขหน้าที่มีอยู่

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

ขั้นตอนที่ 2: สร้างปุ่มก่อนหน้าและถัดไปสำหรับ Carousel

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

เพิ่มแถวใหม่สำหรับปุ่มนำทาง

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

โดยไม่ต้องเพิ่มโมดูลใดๆ ให้เปิดการ ตั้งค่าแถว จากนั้นตั้งค่าความกว้างของแถวเป็น 100% ของความกว้างของส่วนโดยไปที่แท็บ ออกแบบ → บล็อก การปรับขนาด และตั้งค่าทั้ง ความกว้าง และความ กว้างสูงสุด เป็น 100%

เพิ่มโมดูล Blurb สำหรับปุ่ม

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

เปิดการ ตั้งค่า Blurb เมื่อคุณเพิ่มโมดูลแล้ว ใช้การตั้งค่าต่อไปนี้กับโมดูล:

• เปลี่ยน ชื่อเรื่อง เป็น "ก่อนหน้า"
• ลบข้อความ เนื้อหา
• เปิดบล็อก รูปภาพและไอคอน สลับตัวเลือก ใช้ไอคอน เป็น ใช่ แล้ว เลือกไอคอนลูกศรซ้าย

• ย้ายไปยังแท็บ Design จากนั้นเปิดบล็อก Image & Icon เพื่อเปลี่ยนการตั้งค่าไอคอนดังนี้:
  • ไอคอนสี : #000000
  • สีพื้นหลังของรูปภาพ/ไอคอน : #f2f2f2
  • รูปภาพ/ไอคอน มุมโค้งมน : 50px สำหรับทุกมุม

• เปิดบล็อก ข้อความชื่อ เพื่อจัดรูปแบบข้อความชื่อดังต่อไปนี้:
  • น้ำหนักแบบอักษรของชื่อเรื่อง : กึ่งหนา
  • การจัดตำแหน่งข้อความชื่อเรื่อง: Center

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

• เพิ่มคลาส CSS แบบกำหนดเองให้กับโมดูลเพื่อทริกเกอร์การดำเนินการแบบหมุนในภายหลังโดยไปที่แท็บ ขั้นสูง → บล็อก CSS ID & คลาส จากนั้นเพิ่มคลาส CSS แบบกำหนดเอง "ปุ่มย้อนกลับ" ลงในฟิลด์ CSS Class

• เปลี่ยนเคอร์เซอร์เป็นตัวชี้โดยเพิ่มข้อมูลโค้ด CSS ต่อไปนี้ใน Custom CSS → Main Element :
  • cursor: pointer;

โคลนแถวปุ่มและย้ายไปด้านล่างแถวบล็อก

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

• บนแท็บ เนื้อหา เปลี่ยนค่าของ:
  • ชื่อเรื่อง: Next
  • ไอคอน: ลูกศรขวา
• จากนั้นย้ายไปที่แท็บ ขั้นสูง เพื่อเปลี่ยนคลาส CSS
  • CSS ID & คลาส → คลาส CSS : ปุ่มถัดไป

ขั้นตอนที่ 3: เตรียมโมดูลบล็อกให้พร้อม

เตรียมแถวสำหรับโพสต์บล็อกม้าหมุน

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

• ไปที่แท็บ Design → Sizing block จากนั้นตั้งค่า:
  • ความกว้าง: 100%
  • ความกว้างสูงสุด: 100%

• ย้ายไปที่แท็บ ขั้นสูง → บล็อก การมองเห็น :
  • แนวนอนล้น : ซ่อน
  • ล้นแนวตั้ง: ซ่อน

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

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

เมื่อคุณเตรียมแถวแล้ว ก็ถึงเวลาเริ่มปรับแต่งโมดูลบล็อก เริ่มต้นด้วยการเปิดการ ตั้งค่าบล็อก จากนั้นทำการเปลี่ยนแปลงในการตั้งค่าดังต่อไปนี้:

• บนแท็บ เนื้อหา → บล็อก องค์ประกอบ ตั้งค่า แสดง การแบ่งหน้าเป็น No

• ย้ายไปที่แท็บ ออกแบบ → บล็อกเลย์เอาต์เพื่อเปลี่ยนเลย์เอาต์โพสต์บล็อกเป็นแบบเต็มความกว้าง
  • เลย์เอาต์: เต็มความกว้าง

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

• ยังคงอยู่บนแท็บ ออกแบบ เปิดบล็อก รูปภาพ และเลือกเอฟเฟกต์เงากล่องใดกล่องหนึ่งจากตัวเลือก Image Box Shadow เพื่อเพิ่มเอฟเฟกต์เงาให้กับรูปภาพเด่นและใช้สีต่อไปนี้:
  • rgba(1,0,66,0.33)

• ย้ายไปที่แท็บ ขั้นสูง เพิ่มคลาส CSS ที่กำหนดเองให้กับโมดูลบล็อกเพื่อเปิดใช้งานภาพหมุนในภายหลังโดยเปิดบล็อก CSS ID & Classes จากนั้นเพิ่มคลาส CSS ต่อไปนี้:
  • CSS Class: wpblog-module

• เพิ่มช่องว่างระหว่างรูปภาพเด่นและชื่อ และช่องว่างระหว่าง meta ของโพสต์และข้อความที่ตัดตอนมาโดยเพิ่มระยะขอบ โดยเพิ่มข้อมูลโค้ด CSS ต่อไปนี้ในบล็อก CSS ที่กำหนดเอง :
  • ชื่อเรื่อง: margin-top: 10px;
  • โพสต์ Meta : margin-bottom: 30px;

และนั่นคือทั้งหมดสำหรับการตั้งค่าโมดูลบล็อก มาเปลี่ยนเป็นม้าหมุนที่ลากและเลื่อนได้กันเถอะ

ขั้นตอนที่ 4: เปลี่ยนโพสต์ในบล็อกให้เป็นภาพหมุนที่ลากและกวาดนิ้วได้

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

เพิ่มฟังก์ชัน Slick JS และสไลด์ CSS

Slick JS เป็นปลั๊กอิน jQuery สำหรับสร้างภาพหมุนที่ปรับแต่งได้อย่างเต็มที่ ตอบสนองและเป็นมิตรกับมือถือ หากต้องการเพิ่มฟังก์ชันของ Slick JS ให้เพิ่มโมดูลโค้ดลงในคอลัมน์ใดๆ ในหน้า หรือคุณสามารถเพิ่มสคริปต์ต่อไปนี้พร้อม URL ที่ส่วนหัวของเว็บไซต์ของคุณโดยไปที่ Divi → Divi Theme Options → Integrations :

 <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>

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

 <สไตล์>
	.slick-สไลด์ {
	ลอย: ซ้าย;
	ระยะขอบ: 2vw;
	}
</style> 

ให้ม้าหมุนเข้ารูป

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

 <script>
  jQuery(ฟังก์ชัน($){
   
var backButton = $('.back-button');
var nextButton = $('.next-button');
var postContainer = $('.wpblog-module .et_pb_ajax_pagination_container');
   
postContainer.addClass('ตัวเลื่อน'); 
postContainer.addClass('บล็อก-ภาพหมุน'); 
 
$('.blog-carousel').slick({
    อนันต์: จริง,
    slidesToShow: 3,
    slidesToScroll: 1,
    centerMode: จริง,
    ตรงกลาง: '10%',
    รูด: จริง
    prevArrow: ปุ่มย้อนกลับ,
    nextArrow: nextButton,
   
    ตอบสนอง: [{
    เบรกพอยต์: 1079 การตั้งค่า: {
    slidesToShow: 1
    }
    }]
 
});
});
</script>

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

ขั้นตอนที่ 5: ดูโพสต์บล็อกแบบหมุนของคุณแบบสด

ตอนนี้ โค้ดที่จำเป็นทั้งหมดมีอยู่แล้ว อย่างไรก็ตาม โมดูลบล็อกยังคงอยู่ในเลย์เอาต์แบบเต็มความกว้างในตัวสร้าง Divi ของเรา มาได้ยังไง?

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

บรรทัดล่าง

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