Divi: วิธีสร้างแท็บเล็ตที่มีเนื้อหาทีเซอร์แบบเลื่อนได้

คุณต้องการเพิ่มเนื้อหาทีเซอร์ลงในแท็บเล็ตที่เลื่อนได้บน Divi หรือไม่

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

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

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

คุณสามารถใช้สำหรับ ส่งเสริม บทแรกของ eBook ใด ๆ แสดงตัวอย่างการออกแบบจากแฟ้มผลงานของคุณหรือเนื้อหาประเภทอื่น ๆ

ขอเริ่มต้น!

การสำรวจ

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

สร้างหน้าใหม่ด้วย Divi Builder

ในแดชบอร์ด WordPress ให้ไปที่ “หน้า > เพิ่มใหม่”

ตั้งชื่อเรื่องที่เหมาะกับคุณ แล้วคลิก “ใช้ DiviBuilder”

จากนั้นคลิกที่ “เริ่มสร้าง”

การออกแบบแท็บเล็ตพร้อมเนื้อหาทีเซอร์แบบเลื่อนได้ใน Divi

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

เพิ่มแถว

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

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

สีพื้นหลัง

เปิดการตั้งค่าคอลัมน์ 1 และเพิ่มพื้นหลังสีขาวลงในคอลัมน์

• ความเป็นมา: #ffffff

เส้นขอบและระยะขอบ

ไปที่แท็บ ออกแบบ ตัวเลือกแบบเลื่อนลง การเว้นวรรค และเปลี่ยนการตั้งค่าดังนี้:

• ช่องว่างภายใน (บน ล่าง ซ้ายและขวา): 25px (บน ล่าง ซ้าย ขวา)

จากนั้นดึงตัวเลือกลง ชายแดน และเปลี่ยนการตั้งค่าตามนี้:

• มุมโค้งมน: 20px
• ความกว้างของเส้นขอบ: 30px
• สีเส้นขอบ: #000000

กล่องเงา

เพื่อให้การออกแบบแท็บเล็ตมีความลึก ให้ดึงตัวเลือกลง กล่องเงา และเพิ่มเงากล่องต่อไปนี้:

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

ความสูงและความกว้างของคอลัมน์ที่กำหนดเองด้วย CSS

กุญแจสำคัญในการทำให้เนื้อหาคอลัมน์เลื่อนได้คือการกำหนดความสูงที่กำหนดไว้ ซึ่งจะทำให้เนื้อหาล้นความสูงของคอลัมน์ 

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

หากต้องการกำหนดความสูงและความกว้างที่กำหนดเองให้กับคอลัมน์ ให้ไปที่แท็บ ระดับสูง และอัปเดตสิ่งต่อไปนี้:

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

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

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

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

ล้นแนวตั้ง: scroll

ดังที่ได้กล่าวไว้ก่อนหน้านี้ ขณะนี้คอลัมน์มีความสูงที่กำหนดไว้ ซึ่งจะทำให้เนื้อหาของคอลัมน์ล้นในแนวตั้งอย่างหลีกเลี่ยงไม่ได้

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

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

เพิ่มเนื้อหาทีเซอร์ลงในคอลัมน์ดรอปดาวน์

ณ จุดนี้ คอลัมน์ (หรือชั้นวาง) พร้อมสำหรับเนื้อหา คุณสามารถใช้โมดูล Divi ในคอลัมน์นี้เพื่อสร้างเนื้อหาตัวอย่างของคุณ 

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

การเลื่อน CTA (คำกระตุ้นการตัดสินใจ) พร้อมพื้นหลังปกหนังสือ

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

เราจะใช้ไอคอนการนำเสนอ ชื่อเรื่อง และพื้นหลังที่มีปกหนังสือเป็นภาพพื้นหลังและซ้อนทับแบบไล่ระดับสี

ในคอลัมน์แท็บเล็ต เพิ่มโมดูล การประกาศแจ้งความ.

อัพเดทเนื้อหาดังนี้

• ชื่อเรื่อง: เลื่อนเพื่ออ่านข้อความที่ตัดตอนมา

ตัวเลือกแบบเลื่อนลง “รูปภาพและไอคอน”

• ใช้ไอคอน: ใช่
• ไอคอน: ดูภาพหน้าจอ

จากนั้นดึงตัวเลือกลง พื้นหลัง และเพิ่มการไล่ระดับสี

• สีด้านซ้าย: rbga(0,0,0,0,0.0)
• สีด้านขวา: #ffffff
• ตำแหน่งเริ่มต้น: 20%
• ตำแหน่งสุดท้าย: 85%
• สี่เหลี่ยมไล่ระดับสีเหนือภาพพื้นหลัง : ใช่

จากนั้นเพิ่มภาพปกหนังสือ เพื่อผลลัพธ์ที่ดีที่สุด ให้เพิ่มรูปภาพขนาดประมาณ 600px x 850px .

บนแท็บ ออกแบบ ให้อัปเดตสไตล์ต่อไปนี้สำหรับไอคอนและชื่อเรื่อง:

• ไอคอนสี: #000000
• ขนาดแบบอักษรของไอคอน: 80px (เดสก์ท็อปและแท็บเล็ต), 70px (โทรศัพท์)

• แบบอักษรของชื่อเรื่อง: Montserrat
• การจัดตำแหน่งข้อความชื่อเรื่อง: กึ่งกลาง
• สีข้อความ: #000000

จากนั้นเราสามารถย้ายไอคอนและชื่อลงคอลัมน์โดยเพิ่มระยะขอบด้านบน

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

•  ส่วนสูง: 100%

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

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

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

จากนั้นอัปโหลดภาพเดียวกันกับที่ใช้สำหรับพื้นหลังประกาศ

เนื้อหาของการแสดงตัวอย่างข้อความ

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

จากนั้นวางโค้ด HTML ต่อไปนี้ลงในแท็บข้อความเนื้อหา:

<h3>Chapitre 1</h3>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
 
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
 
<h3>Chapitre 2</h3>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

ภายใต้แท็บ ออกแบบ ให้อัปเดตสไตล์หัวเรื่องและระยะห่างดังนี้ (หัวเรื่อง 3):

• แบบอักษร: มอนต์เซอร์รัต
• น้ำหนักแบบอักษร: Ultra Bold
• การจัดตำแหน่งข้อความ: กึ่งกลาง
• ความสูงของสาย: 1,3 em

• ช่องว่างภายใน: 10% (บนและล่าง)

สัมผัสสุดท้ายเล็กน้อย

อัพเดตพารามิเตอร์บรรทัด

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

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

เพิ่มเนื้อหาเพิ่มเติมในคอลัมน์ 2

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

ดาวน์โหลด DIVI ทันที!!!

ผลสุดท้าย

ตอนนี้เรามาดูผลสุดท้าย

ตรวจสอบเนื้อหาแบบเลื่อนลงที่มีอยู่ในแท็บเล็ตแล็ปท็อป

และนี่คือการออกแบบที่วางซ้อนกันบนหน้าจอแท็บเล็ตและโทรศัพท์

สรุป

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

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

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

หากคุณมีคำถามหรือข้อเสนอแนะอย่าลังเลที่จะแสดงความคิดเห็นในส่วนความคิดเห็นด้านล่าง

อย่างไรก็ตามคุณสามารถปรึกษาได้ ทรัพยากรของเรา, หากคุณต้องการองค์ประกอบเพิ่มเติมเพื่อดำเนินโครงการสร้างเว็บไซต์อินเทอร์เน็ตของคุณโดยปรึกษากับเราใน การสร้างบล็อก WordPress หรือที่อยู่บน Divi: ธีม WordPress ที่ดีที่สุดตลอดกาล.

แต่ในขณะเดียวกัน, แบ่งปันบทความนี้ในเครือข่ายโซเชียลต่าง ๆ ของคุณ.

...