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

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

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

• เมื่อขายหนังสือ
• เมื่อแชร์ ebook ฟรีกับผู้เยี่ยมชมของคุณและต้องการสนับสนุนให้พวกเขาดาวน์โหลดเวอร์ชันเต็ม (โดยสมัครรับข้อมูล)
• เมื่อแชร์กรณีศึกษาหรือคำรับรอง

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

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

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

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

สร้างและแก้ไขส่วน

สิ่งแรกที่เราจะต้องสร้างตัวอย่างที่เราสร้างขึ้นใหม่คือส่วน เพื่อให้ง่าย เราจะเพิ่มส่วนนี้ในหน้าใหม่และสลับไปที่ Visual Builder เพื่ออธิบายขั้นตอนทั้งหมดที่ใช้ในการสร้างผลลัพธ์

เพิ่มหน้าใหม่

หากต้องการเพิ่มหน้าใหม่ ไปที่ WordPress Dashboard > Pages > Add New เมื่อคุณเพิ่มหน้าใหม่แล้ว ให้เปิดใช้งาน Divi Builder และสลับไปยัง Visual Builder ทันที

เพิ่มส่วนที่มีแถวสองคอลัมน์

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

เพิ่มพื้นหลังไล่ระดับ

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

• #e02b20
• #f2f2f2

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

• ประเภทการไล่ระดับสี: เชิงเส้น
• ทิศทางการไล่ระดับสี: 143deg
• ตำแหน่งเริ่มต้น: 28%
• ตำแหน่งสุดท้าย: 28%

คอลัมน์แรก: เพิ่มโมดูลโค้ดและแท็บเล็ตแสดงตัวอย่างข้อความ

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

เพิ่มโมดูลโค้ด

เริ่มต้นด้วยการเพิ่ม Code Module ลงในคอลัมน์แรกของแถวที่คุณสร้างขึ้น

เพิ่มโค้ด HTML

ถัดไป เปิด Code Module นั้นและเพิ่มบรรทัดต่อไปนี้ภายใน Content Box:

<div id="tab-container">
<div class="tablet">
<div class="tab">

<h1 class="title">Chapter 1</h1>

<p>
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?
</p>

<h1 class="title">Chapter 2</h1>

<p>

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?
</p>
<footer>
 2017 *Author*
</footer>
</div>
</div>
</div>

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

เพิ่มโค้ด CSS ที่จำเป็น

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

จากนั้นไปที่แท็บ CSS และวางโค้ด CSS ต่อไปนี้ลงในฟิลด์ Custom CSS:

*{ box-sizing: border-box; }

.tablet {
position: relative;
background: #1c1c1c;
width: 100%;
height: 600px;
max-width: 450px;
max-height: 600px;
margin: 0 auto 0;
padding: 30px 24px 30px 24px;
border-radius: 18px;
border-top:2px solid #3C3F45;
border-right:2px solid #202227;
border-bottom:2px solid #202227;
border-left:2px solid #3C3F45;
box-shadow:11px 11px 24px rgba(0,0,0,0.5);
}

@media only screen and (max-width:768px) {
height: 400px;
}

.tablet .tab {
background: #f9f9f9;
color: black;
padding: 50px 40px 50px 40px;
overflow: scroll;
height: 100%;
text-align: justify;
}

.tablet .tab h1 {
font-size: 30px;
font-family: "Dancing script";
font-weight: bold;
font-style: italic;
text-align: center;
margin: 0 0 20px 0;
padding: 4px;
font-size: 25px;
}

.tablet .tab p {
margin: 0 0 20px 0;
font-family: "Arial";
font-size: 13px;
}

footer {
background: black;
color: white;
margin-bottom: 8px;
}

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

• รูปลักษณ์ภายนอกของแท็บเล็ต
• รูปลักษณ์ภายในแท็บเล็ต
• ชื่อเรื่อง
• ย่อหน้า
• ส่วนท้าย

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

คอลัมน์ที่สอง: เพิ่มโมดูลข้อความสองโมดูล & CTA

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

โมดูลข้อความแรก

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

• แบบอักษรของข้อความ: สคริปต์เต้นรำ
• รูปแบบตัวอักษรข้อความ: ตัวหนา & ตัวเอียง
• ขนาดตัวอักษรของข้อความ: 40 (เดสก์ท็อป), 35 (แท็บเล็ต), 30 (โทรศัพท์)
• สีข้อความ:#1c1c1c
• ความสูงของบรรทัดข้อความ: 1.7em

เลื่อนลงมาที่แท็บเดิมและเพิ่ม '40%' ไปที่ขอบบน

โมดูลข้อความที่สอง

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

• แบบอักษรของข้อความ: Arimo
• ขนาดตัวอักษรของข้อความ: 14
• ความสูงของบรรทัดข้อความ: 1.7em

โมดูลปุ่ม

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

• ใช้สไตล์ที่กำหนดเองสำหรับปุ่ม: ใช่
• ข้อความขนาดปุ่ม: 14 (เดสก์ท็อปและแท็บเล็ต), 12 (โทรศัพท์)
• สีข้อความของปุ่ม: #f9f9f9
• สีพื้นหลังของปุ่ม: #e02b20
• ความกว้างของขอบปุ่ม: 0
• รัศมีเส้นขอบของปุ่ม: 3
• แบบอักษรของปุ่ม: Arimo

เคล็ดลับ: หากคุณกำลังโปรโมต ebook ของคุณผ่านการแสดงตัวอย่างข้อความ คุณยังสามารถเชื่อมโยงแบบฟอร์มการเลือกใช้ Trigger on Click Bloom ตามที่อธิบายไว้ในโพสต์ต่อไปนี้

ผลลัพธ์

หากคุณทำตามขั้นตอนทั้งหมดในโพสต์นี้ คุณควรได้รับผลลัพธ์ต่อไปนี้สำหรับการแสดงตัวอย่างหนังสือของคุณ:

ห่อ

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

อย่าลืมสมัครรับจดหมายข่าวทางอีเมลและช่อง YouTube ของเรา เพื่อที่คุณจะได้ไม่พลาดประกาศสำคัญ เคล็ดลับที่เป็นประโยชน์ หรือ Divi freebie!