วิธีสลับข้อความที่ตัดตอนมาของบล็อกโพสต์บน Hover ใน Divi

เผยแพร่แล้ว: 2021-08-02

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

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

มาเริ่มกันเลย!

แอบมอง

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

ดาวน์โหลดเค้าโครงฟรี

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

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

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

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

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

ในการนำเข้าเค้าโครงส่วนไปยังไลบรารี Divi ของคุณ ให้ไปที่ Divi Library

คลิกปุ่มนำเข้า

ในป๊อปอัปการพกพา ให้เลือกแท็บนำเข้าและเลือกไฟล์ดาวน์โหลดจากคอมพิวเตอร์ของคุณ

จากนั้นคลิกปุ่มนำเข้า

กล่องแจ้งเตือน Divi

เมื่อเสร็จแล้ว เค้าโครงส่วนจะพร้อมใช้งานใน Divi Builder

ไปกวดวิชากันเถอะ

สิ่งที่คุณต้องการเพื่อเริ่มต้น

ขยายแท็บมุม

ในการเริ่มต้น คุณจะต้องทำสิ่งต่อไปนี้:

  1. หากคุณยังไม่ได้ติดตั้ง ให้ติดตั้งและเปิดใช้งานธีม Divi
  2. สร้างหน้าใหม่ใน WordPress และใช้ Divi Builder เพื่อแก้ไขหน้าในส่วนหน้า (ตัวสร้างภาพ)
  3. เลือกตัวเลือก "สร้างตั้งแต่เริ่มต้น"

หลังจากนั้น คุณจะมีผืนผ้าใบเปล่าเพื่อเริ่มออกแบบใน Divi

วิธีสลับข้อความที่ตัดตอนมาของบล็อกโพสต์บน Hover ใน Divi

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

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

สร้างแถว

เพิ่มแถวหนึ่งคอลัมน์ในส่วน

ความกว้างของแถว

ในโมดอลการตั้งค่าแถว ให้อัปเดตการตั้งค่าการออกแบบต่อไปนี้เพื่อปรับความกว้าง

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

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

ภายในคอลัมน์ของแถว ให้เพิ่มโมดูลบล็อกใหม่

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

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

ภายใต้แท็บออกแบบ เลือกเค้าโครงตารางสำหรับบล็อก

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

  • คลาส CSS: toggle-blog-excerpt

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

เพิ่ม CSS ที่กำหนดเองด้วย Code Module

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

ในการเพิ่ม CSS เราจะใช้โมดูลโค้ด เพิ่มโมดูลโค้ดใหม่ด้านล่างโมดูลบล็อก

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

@media all and (min-width: 981px) {
  /* add transition for post content*/
  .toggle-blog-excerpt .et_pb_post .post-content {
    -webkit-transition: all 500ms !important;
    transition: all 500ms !important;
  }
  /* keep post content visible in visual builder */
  body.et-fb .toggle-blog-excerpt .et_pb_post .post-content {
    visibility:visible;
    opacity: 1;
    max-height:none;
  }
  /* hide post content */
  .toggle-blog-excerpt .et_pb_post .post-content {
    visibility: hidden;
    opacity: 0;
    max-height:0px;
  }
  /* show post content when hovering over post item */
  .toggle-blog-excerpt .et_pb_post:hover .post-content {
    visibility: visible;
    opacity:1;
    max-height: 500px;
  }
  /* set min-height for all post items */
  .toggle-blog-excerpt .et_pb_post {
    min-height: 400px;  
  }
}

มาเช็คผลกันได้เลยที่หน้าสด

ผลลัพธ์

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

เพิ่มรูปแบบเพิ่มเติมให้กับโมดูลบล็อกด้วย Divi Builder

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

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

ชื่อโพสต์สไตล์

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

สไตล์ อ่านเพิ่มเติม Text

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

การแบ่งหน้าสไตล์

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

ลบขอบ

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

สไตล์กล่องเงาบนโฮเวอร์

  • กล่องเงา: ดูภาพหน้าจอ
  • ตำแหน่งแนวตั้งเงาของกล่อง: 0px
  • ความชัดเจนของเงากล่อง: 38px
  • Shadow Color (เดสก์ท็อป): โปร่งใส
  • สีเงา (โฮเวอร์): rgba(109,106,126,0.25)

ผลสุดท้าย

เกี่ยวกับโค้ด CSS

หากคุณสนใจในรายละเอียดของ CSS แบบกำหนดเองที่เพิ่มลงในโมดูลโค้ดก่อนหน้านี้ ให้ดำเนินการดังนี้

อันดับแรก เราต้องรวม CSS ทั้งหมดในคิวรี่สื่อที่จะใช้ CSS กับเบราว์เซอร์เดสก์ท็อปเท่านั้น 

@media all and (min-width: 981px) {

}

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

  /* add transition for post content*/
  .toggle-blog-excerpt .et_pb_post .post-content {
    -webkit-transition: all 500ms !important;
    transition: all 500ms !important;
  }

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

  /* keep post content visible in visual builder */
  body.et-fb .toggle-blog-excerpt .et_pb_post .post-content {
    visibility:visible;
    opacity: 1;
    max-height:none;
  }

ประการที่สี่ เราต้องซ่อนเนื้อหาโพสต์/ข้อความที่ตัดตอนมาโดยค่าเริ่มต้นเมื่อโหลดหน้าเว็บ ในการดำเนินการนี้ เราใช้การมองเห็น:ซ่อนเพื่อซ่อนเนื้อหา จากนั้นเราจะเพิ่ม opacity:0 เพื่อให้เราได้เอฟเฟกต์การเปลี่ยนภาพและเฟดเอาต์เมื่อเราเพิ่มความทึบ:1 ให้กับสถานะโฮเวอร์ เรายังใช้ max-height:0px เพื่อรับเอฟเฟกต์การสลับแบบเลื่อนเมื่อเราเพิ่ม max-height:500px ให้กับสถานะโฮเวอร์

  /* hide post content */
  .toggle-blog-excerpt .et_pb_post .post-content {
    visibility: hidden;
    opacity: 0;
    max-height:0px;
  }

ประการที่ห้า เราแสดงเนื้อหาโพสต์/ข้อความที่ตัดตอนมาเมื่อรายการโพสต์ (.et_pb_post) อยู่ในสถานะโฮเวอร์ ในการทำเช่นนี้ เราเปลี่ยนการมองเห็นเป็นแบบมองเห็นได้ ความทึบเป็น 1 และความสูงสูงสุดเป็น 500px

  /* show post content when hovering over post item */
  .toggle-blog-excerpt .et_pb_post:hover .post-content {
    visibility: visible;
    opacity:1;
    max-height: 500px;
  }

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

  /* set min-height for all post items */
  .toggle-blog-excerpt .et_pb_post {
    min-height: 400px;  
  }

มาดูโค้ดสุดท้ายกันอีกครั้ง 

@media all and (min-width: 981px) {
  /* add transition for post content*/
  .toggle-blog-excerpt .et_pb_post .post-content {
    -webkit-transition: all 500ms !important;
    transition: all 500ms !important;
  }
  /* keep post content visible in visual builder */
  body.et-fb .toggle-blog-excerpt .et_pb_post .post-content {
    visibility:visible;
    opacity: 1;
    max-height:none;
  }
  /* hide post content */
  .toggle-blog-excerpt .et_pb_post .post-content {
    visibility: hidden;
    opacity: 0;
    max-height:0px;
  }
  /* show post content when hovering over post item */
  .toggle-blog-excerpt .et_pb_post:hover .post-content {
    visibility: visible;
    opacity:1;
    max-height: 500px;
  }
  /* set min-height for all post items */
  .toggle-blog-excerpt .et_pb_post {
    min-height: 400px;  
  }
}

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

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

ฉันหวังว่าจะได้ยินจากคุณในความคิดเห็น

ไชโย!