วิธีจัดรูปแบบโมดูลตัวเลื่อนโพสต์ของ Divi เช่น Post Slider ของห้องข่าว Facebook

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

ก่อนและหลัง: Divi Post Slider Module

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

ก่อน

หลังจาก

แนวคิดและแรงบันดาลใจ

ดังที่กล่าวไว้ รูปแบบสำหรับสไตล์ตัวเลื่อนโพสต์ของวันนี้มาจาก Facebook Newsroom นี่คือบล็อกข่าวที่อุทิศให้กับทุกสิ่งอย่างที่คุณอาจเดาได้บน Facebook ในขณะที่พวกเราส่วนใหญ่รู้จัก facebook ในฐานะสื่อสังคมออนไลน์ยักษ์ใหญ่ แต่การดูบล็อกนี้อย่างรวดเร็วจะทำให้มุมมองของคุณกว้างขึ้น ด้วยรายรับ 8.8 พันล้านดอลลาร์ในไตรมาสที่แล้วและผู้ใช้งาน 1.23 พันล้านรายต่อวัน ตัวเลื่อนโพสต์บล็อกบนหน้าห้องข่าวของ Facebook ให้รูปแบบที่คุ้มค่าสำหรับโครงการในปัจจุบัน

การเตรียมองค์ประกอบการออกแบบ

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

การออกแบบตัวเลื่อนนี้จะทำงานได้ดีที่สุดหากรูปภาพเด่นแต่ละรูปมีขนาด 600px x 400px แต่ขนาดที่แน่นอนนั้นไม่สำคัญ

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

การนำการออกแบบไปใช้ Divi

สมัครสมาชิกช่อง Youtube ของเรา

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

เราเริ่มต้นด้วยการเพิ่มส่วนปกติด้วยแถวโครงสร้าง 1 คอลัมน์

จากนั้นเพิ่ม Post Slider Module ลงในแถว

การปรับเปลี่ยนของเราเริ่มต้นด้วยการตั้งค่า "เนื้อหา" ซึ่งเป็นที่ที่คุณอยู่โดยค่าเริ่มต้นหลังจากเพิ่มโมดูลใหม่ใน Visual Builder

ทำการเปลี่ยนแปลงต่อไปนี้กับการตั้งค่าเนื้อหาเริ่มต้น:

ตั้งค่า "หมายเลขโพสต์" เป็นจำนวนโพสต์ที่คุณต้องการ สำหรับตัวอย่างนี้ ฉันใช้ 3

จากนั้นตั้งค่า "ใช้ Post Excerpt if Defined" เป็น yes และตั้งค่า "Automatic Excerpt Length" เป็น 180

ตอนนี้เราพร้อมที่จะย้ายไปที่การตั้งค่าการออกแบบโดยคลิกที่แท็บที่ด้านบนของโมดอลการตั้งค่าโมดูล

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

เปลี่ยน "สีซ้อนทับพื้นหลัง" เป็นสีขาว (#ffffff)

เปลี่ยน "Dot Nav Custom Color" เป็น #576d90

เปลี่ยน "สีข้อความ" เป็นสีเข้ม

ตอนนี้ทำให้ "Header Font" เป็นตัวหนา ตั้งค่า "Header Font Size" เป็น 34px ตั้งค่า "Header text Color" เป็น #3b5998 และ "Header Line Height" เป็น 42px

ตอนนี้ตั้งค่า "สีข้อความเนื้อหา" เป็น #141924 และ "ความสูงของเส้นร่างกาย" เป็น 24px

ตอนนี้คลิกที่ "ใช้สไตล์ที่กำหนดเองสำหรับปุ่ม" เพื่อเปลี่ยนเป็นใช่ เปลี่ยน "ขนาดข้อความของปุ่ม" เป็น 16px, "ความกว้างของขอบปุ่ม" เป็น 0px, "สีข้อความของปุ่มโฮเวอร์" เป็น #666666 และ "สีพื้นหลังของปุ่มโฮเวอร์" เป็น rgba (0,0,0,0)

ตอนนี้คลิกแท็บ "ขั้นสูง" ที่ด้านบนของโมดอลการตั้งค่าโมดูล ในการป้อนข้อความภายใต้ CSS ID ให้เพิ่ม "fb-post-slider" ซึ่งช่วยให้เราเพิ่มสไตล์ให้กับโมดูลเฉพาะนี้ได้โดยไม่มีผลกระทบต่อโมดูลโพสต์อื่นๆ ที่อาจแสดงบนหน้าเว็บ

เพิ่มโค้ด CSS ให้กับองค์ประกอบต่างๆ ดังนี้:

ก่อน

position:absolute;
top:57px;
right:-6px;
content:"";
border:4px solid transparent;
border-top-color:#2C477F;
border-left-color:#2C477F;

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

border-radius: 3px;
border:1px solid #dedede; 

หลังจาก

position:absolute;
top:25px;
right:-7px;
display:block;
content:"Top Stories";
color:#F9F4F7;
background-color:#4573CC;
padding:4px 15px;
border-radius:2px;
z-index:2!important;

คำอธิบายสไลด์

min-height:460px;
width: 35%;
min-width: 300px;
float:left;
padding: 57px 45px 50px 35px!important;
font-family: 'Alegreya Sans', sans-serif;
text-align:left

ชื่อสไลด์

font-family: 'Alegreya Sans', sans-serif;

ปุ่มสไลด์

padding:0!important;
margin-top:0;

ตัวควบคุมสไลด์

margin-bottom:-55px;

ลูกศรสไลด์

color:#ffffff!important;
background-color:rgba(0,0,0,.4);
font-weight:bold;
border-radius:2px;
 -ms-transform: scale(1.2, 2.5); /* IE 9 */
 -webkit-transform: scale(1.2, 2.5); /* Safari */
 transform: scale(1.2, 2.5);

ตอนนี้ให้บันทึกการตั้งค่าโมดูลโดยคลิกที่เครื่องหมายถูกที่มุมล่างขวาของโมดอล

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

ไม่มีอะไรที่ CSS ดูแลไม่ได้ และเราจะสามารถดูรูปร่างได้โดยการเพิ่มโค้ดที่เหลือในการตั้งค่าหน้าจาก Visual Builder ในการไปที่นั่น ให้คลิกที่ไอคอน Expand Settings ที่กึ่งกลางด้านล่างของหน้า จากนั้นคลิกไอคอน "Page Settings"

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

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

#fb-post-slider.et_pb_post_slider_0 .et_pb_slide {
    background-size: 70%;
    background-position: top right;
    padding-left: 0;
    overflow: visible!important;
}
 
#fb-post-slider.et_pb_slider_with_overlay .et_pb_slide_overlay_container {
    width: 30%;
    min-width: 300px;
}

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

#fb-post-slider .et_pb_slide_content .post-meta {
    height: 0px;
    overflow: hidden
}
#fb-post-slider .et_pb_slide_content .post-meta .published {
    position: absolute;
    top: 32px;
    left: 35px;
    color: #898f9c;
    font-size: 16px
}

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

#fb-post-slider .et-pb-arrow-prev {
    display: none
}

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

#fb-post-slider.et_pb_post_slider_0 .et-pb-controllers a {
    height: 8px;
    width: 8px;
    order-radius: 50%
}
#fb-post-slider.et_pb_slider {
    overflow: visible!important
}

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

.et-pb-active-slide .et_pb_slide_description {
    animation-name: fadeIn;
}
.et_pb_slide.et-pb-active-slide {
    transition: opacity 2.5s!important
}
 
@media all and (max-width: 1252px) {
    #fb-post-slider.et_pb_post_slider_0 .et_pb_slide {
        background-size: 90%
    }
}
@media all and (max-width: 980px) {
    #fb-post-slider.et_pb_post_slider_0 .et_pb_slide {
        background-size: 100%;
        background-position: top center;
    }
}

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

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

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