Divi: วิธีแสดงข้อความที่ตัดตอนมาบนโฮเวอร์

ต้องการทราบวิธีแสดงตัวอย่างบทความเมื่อวางเมาส์เหนือใน Divi ?

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

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

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

ขอเริ่มต้น!

การสำรวจ

อันดับแรก ต่อไปนี้คือภาพรวมของสิ่งที่เราจะสร้างในบทช่วยสอนนี้

การสร้างเค้าโครงโมดูลบล็อก

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

สร้างไลน์

ในการเริ่มต้น ให้แทรกแถวของคอลัมน์หนึ่งไปที่ส่วน

ความกว้างของเส้น

จากนั้นไปที่การตั้งค่าไลน์ จากนั้น ในแท็บ ลักษณะ ภายใต้ การปรับขนาด ให้แก้ไขความกว้างดังนี้:

• ความกว้างสูงสุด: 90%
• ความกว้างสูงสุด: 1200px

เพิ่มโมดูลบล็อก

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

การตั้งค่าโมดูลบล็อก

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

ไปที่แท็บ สไตล์ ภายใต้ เทมเพลต เลือกเทมเพลต "กริด" เป็นเลย์เอาต์สำหรับบล็อก

สุดท้ายไปที่แท็บขั้นสูงและเพิ่มคลาส CSS ต่อไปนี้: 

คลาส CSS: toggle-blog-excerpt

ต่อจากนี้ เราจะใช้คลาสนี้เป็นตัวเลือกสำหรับโค้ด CSS ที่กำหนดเองในขั้นตอนต่อไป

เพิ่ม CSS ที่กำหนดเองด้วยโมดูลโค้ด

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

ในการเพิ่ม CSS เราจะใช้โมดูลโค้ด เมื่อต้องการทำเช่นนี้ เพิ่มโมดูลโค้ดภายใต้โมดูลบล็อก

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

1. @media all and (min-width: 981px) {
2.   /* add transition for post content*/
3.   .toggle-blog-excerpt .et_pb_post .post-content {
4.     -webkit-transition: all 500ms !important;
5.     transition: all 500ms !important;
6.   }
7.   /* keep post content visible in visual builder */
8.   body.et-fb .toggle-blog-excerpt .et_pb_post .post-content {
9.     visibility:visible;
10.     opacity: 1;
11.     max-height:none;
12.   }
13.   /* hide post content */
14.   .toggle-blog-excerpt .et_pb_post .post-content {
15.     visibility: hidden;
16.     opacity: 0;
17.     max-height:0px;
18.   }
19.   /* show post content when hovering over post item */
20.   .toggle-blog-excerpt .et_pb_post:hover .post-content {
21.     visibility: visible;
22.     opacity:1;
23.     max-height: 500px;
24.   }
25.   /* set min-height for all post items */
26.   .toggle-blog-excerpt .et_pb_post {
27.     min-height: 400px; 
28.   }
29. }

มาดูผลลัพธ์ที่ได้รับกัน

ผล

มาเพิ่มสไตล์พิเศษให้กับโมดูลบล็อกด้วยตัวสร้าง Divi

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

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

แบบชื่อบทความ

• ชื่อแสงสลัว: ข้อความตัวหนา
• สีข้อความชื่อเรื่อง: #6D6A7E
• ขนาดข้อความชื่อเรื่อง: 20px
• ความสูงของบรรทัดหัวเรื่อง: 1.3em

รูปแบบข้อความ "อ่านต่อ"

• อ่านเพิ่มเติม แสงสลัว: ข้อความตัวหนา
• อ่านเพิ่มเติม Copy Style: TT
• สีข้อความ อ่านเพิ่มเติม: #6D6A7E
• ระยะห่างระหว่างตัวอักษร อ่านเพิ่มเติม: 1px
• ความสูงของเส้น อ่านเพิ่มเติม: 3.5em

เปลี่ยนการแสดงการแบ่งหน้าข้อความ

• แสดงเลขหน้า แสงสลัว: ข้อความตัวหนา
• สีข้อความ แสดงเลขหน้า: #6D6A7E
• ระยะห่างตัวอักษรแสดงการแบ่งหน้า: 1px
• แสดงการแบ่งหน้า รูปแบบการคัดลอก: TT

ลบขอบ

• ความกว้างเส้นขอบของเค้าโครงตาราง: 0px

วางเมาส์สไตล์กล่องเงา

• กล่องเงา: ดูภาพหน้าจอ
• ตำแหน่งเริ่มต้น: 0px
• ความแรงของกล่องเงาเบลอ: 38px
• สีแบบอักษรของคำบรรยาย: rgba (109,106,126,0.25)

ผลสุดท้าย

สรุป

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

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

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