เกี่ยวกับโปสเตอร์er บล็อกของคุณ Divi ในรูปแบบม้าหมุนที่คุณสามารถเลื่อนดูบทความได้อย่างง่ายดาย?
สำหรับเว็บไซต์หลายแห่ง การเขียนบล็อกกลายเป็นส่วนสำคัญของกลยุทธ์ทางการตลาด SEO.
แต่นอกเหนือจากการสร้างเนื้อหาคุณภาพสูงแล้ว ยังต้องทำให้กระบวนการเรียกดูโพสต์สำหรับผู้เยี่ยมชมของคุณง่ายขึ้นด้วย ด้วยวิธีนี้ พวกเขาสามารถข้ามจากบทความหนึ่งไปอีกบทความหนึ่ง และใช้เวลากับเว็บไซต์ของคุณมากขึ้นในการอ่านเนื้อหาที่คุณโพสต์ที่นั่น
ใน Divi มีโมดูลบล็อกที่คุณสามารถใช้เพื่อแสดงบทความของคุณแบบไดนามิกและปรับแต่งได้เช่นกัน หากคุณกำลังมองหาวิธีที่จะยกระดับประสบการณ์การค้นหาโพสต์ไปอีกระดับ คุณจะต้องชอบบทความนี้
เราจะแสดงวิธีเปลี่ยนโมดูลบล็อกที่ผสานรวมของ Divi ให้เป็นภาพหมุนโดยใช้องค์ประกอบที่ผสานรวมของ Divi และ ไลบรารี js ฟรี .
Let 's go
การสำรวจ
ก่อนดำดิ่งสู่บทช่วยสอน มาดูผลลัพธ์กันอย่างรวดเร็ว
สร้างหน้าบล็อกด้วย Divi Theme Builder
เริ่มต้นด้วยการเพิ่มหน้าใหม่ในเว็บไซต์ที่คุณกำลังทำงานอยู่
ตั้งชื่อเพจของคุณ เผยแพร่เพจแล้วคลิก 'ใช้ Divi Builder'
ดาวน์โหลด 'Interior Design Company' หน้าบล็อกเค้าโครงที่ออกแบบไว้ล่วงหน้า
ในบทช่วยสอนนี้ เราจะใช้หน้าบล็อกจากเลย์เอาต์ 'Interior Design Company' แต่คุณสามารถใช้เลย์เอาต์อื่นได้ตามต้องการ
สร้างเทมเพลตลูกศร 'ก่อนหน้า' และ 'ถัดไป' โดยใช้โมดูลสรุปของ Divi
เมื่ออยู่ในหน้าบล็อก เราสามารถเริ่มสร้างภาพหมุนได้
ส่วนแรกมีไว้สำหรับการสร้างลูกศรที่เราต้องการเพื่อให้ผู้เยี่ยมชมสามารถนำทางระหว่างบทความต่างๆ
อ่าน: วิธีสร้างส่วนหัวส่วนกลางที่ติดหนึบใน DIVI
ในการออกแบบลูกศร เราจะใช้โมดูลสรุปของ Divi แต่คุณสามารถใช้โมดูลอื่นๆ ได้ตามต้องการ
เพิ่มบรรทัดใหม่ที่ด้านบนของส่วน บล็อกของคุณ โดยใช้โครงสร้างคอลัมน์ดังต่อไปนี้:
ปรับขนาด
โดยไม่ต้องเพิ่มโมดูลใด ๆ ให้เปิดการตั้งค่าบรรทัดและให้เส้นสัมผัสด้านซ้ายและด้านขวาของส่วนโดยเปลี่ยนการตั้งค่าการปรับขนาดดังนี้:
- ความกว้างสูงสุด: 100%
- ความกว้างสูงสุด: 100%
เพิ่มโมดูลสรุป
เพิ่มโมดูลสรุปและแทรกชื่อ
จากนั้นเลือกไอคอน
- ใช้ไอคอน: ใช่
การตั้งค่าไอคอน
สลับไปที่แท็บสไตล์และแก้ไขการตั้งค่าไอคอนดังต่อไปนี้:
- ไอคอนสี: #000000
- ตำแหน่งรูปภาพ/ไอคอน: Vertex
- การจัดตำแหน่งรูปภาพ/ไอคอน: กึ่งกลาง
การตั้งค่าข้อความหัวข้อ
ถัดไป เปลี่ยนการตั้งค่าข้อความชื่อเรื่อง
- แบบอักษรของชื่อเรื่อง: Mulish
- ชื่อแสงอ่อน: กึ่งหนา
- การจัดตำแหน่งข้อความ: center
- สีข้อความชื่อเรื่อง: #000000
ปรับขนาด
จากนั้นเราจะเปลี่ยนการตั้งค่าการปรับขนาดโมดูลตามขนาดหน้าจอต่างๆ
- ความกว้างสูงสุด: 10% (เดสก์ท็อป), 20% (แท็บเล็ต), 30% (โทรศัพท์)
- การจัดตำแหน่งข้อความ: right
มาเพิ่มคลาส CSS กัน คลาส CSS นี้จะช่วยให้เราทริกเกอร์การทำงานของภาพหมุนเมื่อคลิก
- คลาส CSS: ปุ่มย้อนกลับ
สุดท้าย เราจะเพิ่มบรรทัดของโค้ด CSS ให้กับองค์ประกอบหลักของโมดูลเพื่อเปลี่ยนเคอร์เซอร์เป็นตัวชี้
cursor: pointer;
ลอกเส้นแล้ววางไว้ที่ด้านล่างของส่วน
เมื่อคุณทำลูกศรแรกเสร็จแล้ว คุณสามารถโคลนคอนเทนเนอร์แถวทั้งหมดแล้ววางแถวที่ซ้ำกันที่ส่วนท้ายของส่วนบล็อก
เปิดโมดูลสรุปในแถวที่ซ้ำกันและแก้ไขชื่อ
ใช้ไอคอน: ใช่
แก้ไขคลาส CSS ด้วย
- คลาส CSS: ปุ่มถัดไป
เตรียมโมดูลบล็อก
ปรับขนาด
เมื่อลูกศรเข้าที่ ก็ถึงเวลาเริ่มปรับแต่งโมดูล Blog โดยเริ่มจากแถวที่วางอยู่ เปิดการตั้งค่าเส้นและเปลี่ยนการตั้งค่าขนาดตามนั้น:
- ความกว้างสูงสุด: 100%
- ความกว้างสูงสุด: 100%
จากนั้นตั้งค่าบรรทัดโอเวอร์โฟลว์เป็น 'ซ่อน' ซึ่งจะช่วยให้มั่นใจได้ว่าภาพหมุนจะไม่ทำให้แถบเลื่อนแนวนอนปรากฏในหน้าเว็บของเรา
- ล้นแนวนอน: ซ่อน
- ล้นแนวตั้ง: ซ่อน
ซ่อนการแบ่งหน้า
เมื่อตั้งค่าบรรทัดเรียบร้อยแล้ว ให้เปิดการตั้งค่าโมดูลบล็อก ตรวจสอบให้แน่ใจว่าเพจถูกปิดใช้งานในการตั้งค่ารายการ
- แสดงเลขหน้า: ไม่
ถัดไป สลับไปที่แท็บสไตล์และเปลี่ยนเลย์เอาต์เป็น 'เต็มหน้าจอ'
- รุ่น: เต็มจอ
เราจะเพิ่มการซ้อนทับ
- แสดงภาพซ้อนทับ: ACTIVE
- สีไอคอนซ้อนทับ: #ffffff
- สีพื้นหลังซ้อนทับ: rgba (1,0,66,0.33)
ต่อไป เราจะเพิ่มคลาส CSS ในบล็อกของเรา ซึ่งจะช่วยให้เราเปิดใช้งานภาพหมุนได้ในภายหลังในบทช่วยสอน
- คลาส CSS: บล็อกโมดูล
และเราจะสร้างช่องว่างระหว่าง meta ของโพสต์และข้อความที่ตัดตอนมาโดยเพิ่มระยะขอบด้านล่างในองค์ประกอบ CSS ของ Post Metadata ในแท็บขั้นสูง
ค้นพบยัง: วิธีสร้างเมนูเลื่อนและกดใน DIVI
margin-bottom: 50px;
เพิ่มฟังก์ชัน Slick JS
เมื่อตั้งค่า Divi ทั้งหมดแล้ว ก็ถึงเวลาเพิ่มฟังก์ชัน slick js! เพิ่มโมดูลโค้ดด้านล่างโมดูลบล็อก (หรือที่อื่นในหน้า)
จากนั้นเพิ่มไลบรารี js เนียน ในแท็กสคริปต์ (ดังที่คุณเห็นในหน้าจอการพิมพ์ด้านล่าง) คุณสามารถเพิ่มลงในส่วนหัวของเว็บไซต์ของคุณได้ฟรีในการตั้งค่าของ ธีม Divi.
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
}
}]
});
});
บันทึกหน้าและออกจาก Visual Builder ของ Divi เพื่อแสดงผล
ใน Visual Builder คุณจะไม่เห็นผลลัพธ์
ดังนั้น ทันทีที่คุณทำเสร็จแล้ว ให้บันทึกเพจของคุณ ออกจาก Visual Builder และดูผลลัพธ์บนเว็บไซต์ของคุณ!
การสำรวจ
ตอนนี้เราได้ทำตามขั้นตอนทั้งหมดแล้วเรามาดูขั้นสุดท้ายกันว่าจะมีหน้าตาเป็นอย่างไรในขนาดหน้าจอต่างๆ
ดาวน์โหลด DIVI ทันที!!!
สรุป
ดังนั้น ! เพียงเท่านี้สำหรับบทความนี้ เราได้แสดงวิธีนำการออกแบบโมดูลบล็อกของคุณไปสู่อีกระดับ โดยเฉพาะอย่างยิ่ง เราได้แสดงวิธีเปลี่ยนโมดูลบล็อกในตัวของ Divi ให้เป็นภาพหมุนโดยใช้ไลบรารี js ฟรี
หากคุณต้องการทราบข้อมูลเพิ่มเติมเกี่ยวกับ Divi อย่าลังเลที่จะเยี่ยมชมแคตตาล็อกของเรา บทเรียน Divi ปรึกษาได้นะคะ วิธีสร้างหน้าบล็อกด้วยโมดูล Divi Blog
ดูเพิ่มเติม ทรัพยากรของเราหากคุณต้องการองค์ประกอบเพิ่มเติมเพื่อดำเนินโครงการสร้างเว็บไซต์อินเทอร์เน็ตของคุณโดยปรึกษากับเราใน การสร้างบล็อก WordPress หรือที่อยู่บน Divi: ธีม WordPress ที่ดีที่สุดตลอดกาล.
แต่ในขณะเดียวกัน แบ่งปันบทความนี้ในเครือข่ายโซเชียลต่าง ๆ ของคุณ.
...
