สร้างเว็บไซต์ WordPress ที่สวยงามโดยใช้ Divi และ Divi Builder

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

Rifat Oct 10, 2021

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

เอาล่ะ ไปลุยกันเลย!

การออกแบบเหลือบ

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

ส่วนการออกแบบส่วนที่ 1: โครงสร้างตู้คอนเทนเนอร์

สร้างหน้าใหม่จากแดชบอร์ดและดำเนินการต่อด้วย Edit with Divi จากนั้นเลือก Build From Scratch และเริ่มสร้าง

สร้างเว็บไซต์ที่น่าทึ่ง

ด้วย Elementor ตัวสร้างหน้าฟรีที่ดีที่สุด

เริ่มเลย

การเพิ่มแถว

เริ่มจากแถวสองคอลัมน์กันก่อน จำไว้ว่าเรากำลังสร้างสิ่งนี้ในส่วนเริ่มต้น

การตั้งค่า: คอลัมน์ 1

สีพื้นหลัง

จากนั้นไปที่ตัวเลือกของคอลัมน์ 1 และกำหนดพื้นหลังสีขาว

  • สีพื้นหลัง: #ffffff

ชายแดนและช่องว่างภายใน

ตอนนี้ เพิ่มช่องว่างภายในคอลัมน์และเพิ่มเส้นขอบ

  • ช่องว่างภายใน: 25px (บน ล่าง ซ้าย ขวา)
  • มุมโค้งมน: 20px
  • ความกว้างของเส้นขอบ: 30px
  • สีเส้นขอบ: #000000

กล่องเงา

เพื่อให้การออกแบบนี้มีรายละเอียดและความลึกมากขึ้น ให้เพิ่มเงาโค้งลงไป

  • กล่องเงา: ดูภาพหน้าจอ
  • ตำแหน่งแนวนอนของกล่องเงา: 5px
  • ตำแหน่งแนวตั้งเงาของกล่อง: 5px
  • สีเงา : #555555

ความสูงและความกว้างที่กำหนดเองโดยใช้ CSS

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

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

height:650px;
max-width: 488px;

ตอนนี้เพิ่มรหัสไปยังรุ่นมือถือ

max-height: 500px;
max-width: 375px;
float:none;
margin: 0 auto;

ล้นแนวตั้ง: เลื่อน

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

  • ล้นแนวตั้ง: เลื่อน

ส่วนการออกแบบ 2: เพิ่มเนื้อหาลงในแท็บเล็ต

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

ปุ่ม CTA พร้อมพื้นหลังรูปภาพ

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

การตั้งค่าโมดูล Blurb

ทำการปรับเปลี่ยนต่อไปนี้กับโมดูลการนำเสนอ

  • ชื่อเรื่อง: Scroll to Preview
  • ใช้ไอคอน: ใช่
  • ไอคอน: ดูภาพหน้าจอ
  • พื้นหลังไล่ระดับสีซ้าย: โปร่งใส
  • ไล่สีพื้นหลังด้านขวา: #ffffff
  • ตำแหน่งเริ่มต้น: 20%
  • ตำแหน่งสุดท้าย: 85%
  • วางการไล่ระดับสีเหนือภาพพื้นหลัง: ใช่

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

  • ไอคอนสี: #000000
  • ขนาดตัวอักษรของไอคอน: 80px (เดสก์ท็อปและแท็บเล็ต), 70px (โทรศัพท์)
  • แบบอักษรของชื่อเรื่อง: Montserrat
  • การจัดตำแหน่งข้อความชื่อเรื่อง: center
  • ชื่อข้อความสี: #000000

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

หากต้องการกำหนดขนาดและเว้นวรรค ให้อัปเดตสิ่งต่อไปนี้:

  • ส่วนสูง: 100%
  • ขอบ: 25px ด้านล่าง
  • ช่องว่างภายใน: 400px (เดสก์ท็อปและแท็บเล็ต), 270px (โทรศัพท์)

ภาพปกหนังสือ

รายการต่อไปที่เราจะเพิ่มคือภาพหน้าปก เพิ่มโมดูลรูปภาพภายใต้โมดูลประกาศก่อนหน้า

ใช้ภาพเดียวกันกับที่ใช้ในโมดูลประกาศ

เนื้อหาข้อความ

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

จากนั้นเพิ่มโค้ดต่อไปนี้ลงในเนื้อหาจากส่วน ข้อความ

>h3/h3h3/h3

จากแท็บออกแบบ ให้อัปเดตสไตล์ต่อไปนี้

  • หัวข้อ 3 แบบอักษร: มอนต์เซอร์รัต
  • หัวเรื่อง 3 น้ำหนักแบบอักษร: Ultra Bold
  • การจัดแนวข้อความหัวเรื่อง 3: Center
  • ส่วนหัว 3 ความสูงของบรรทัด: 1.3em
  • ช่องว่างภายใน: 10% (บนและล่าง)

ส่วนการออกแบบตอนที่ 3: Final Touch Up

การตั้งค่าแถว - อัปเดต

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

  • ความกว้าง: 100% (เดสก์ท็อป), 90% (แท็บเล็ตและโทรศัพท์)
  • ความกว้างสูงสุด: 1080px (เดสก์ท็อป), 488px (แท็บเล็ตและโทรศัพท์)

คอลัมน์ 2 เนื้อหา

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

ผลลัพธ์สุดท้าย

ดังนั้นนี่คือแท็บเล็ตแสดงตัวอย่างเนื้อหาที่สวยงามที่สร้างโดย Divi

ห่อ

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