ดาวน์โหลดตัวอย่างหนังสือฟรี เค้าโครงหน้า Landing Page ของ Divi รวมถึง Anchor Links & CTAs

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

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

ไปกันเถอะ!

ดูตัวอย่าง

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

เดสก์ทอป

มือถือ

ดาวน์โหลดเค้าโครงหน้า Landing Page สำหรับดูตัวอย่างหนังสือได้ฟรี

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

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

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

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

ดาวน์โหลด

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

มาเริ่มสร้างใหม่กันเถอะ!

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

เพิ่มมาตราปกติใหม่

ระยะห่าง

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

• ช่องว่างภายในด้านบน: 0px
• ช่องว่างภายในด้านล่าง: 0px

เพิ่มแถว

โครงสร้างคอลัมน์

ดำเนินการต่อโดยเพิ่มแถวใหม่ในส่วนโดยใช้โครงสร้างคอลัมน์ต่อไปนี้:

สีพื้นหลัง

โดยไม่ต้องเพิ่มโมดูลใดๆ ให้เปิดการตั้งค่าแถวและเพิ่มสีพื้นหลังสีขาว

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

พื้นหลังไล่ระดับคอลัมน์ 3

เพิ่มพื้นหลังไล่ระดับไปยังคอลัมน์ที่สามด้วย

• สี 1: #6a30ff
• สี 2: #a202ff
• คอลัมน์ 3 ประเภทการไล่ระดับสี: เชิงเส้น
• คอลัมน์ 3 ทิศทางการไล่ระดับสี: 166deg

ขนาด

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

• ใช้ความกว้างของรางน้ำแบบกำหนดเอง: ใช่
• ความกว้างของรางน้ำ: 1
• ปรับความสูงของคอลัมน์ให้เท่ากัน: ใช่
• ความกว้าง: 100%
• ความกว้างสูงสุด: 100%

ระยะห่าง

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

• ช่องว่างภายในด้านบน: 0vw
• ช่องว่างภายใน: 0vw
• คอลัมน์ 1 ด้านบน: 15vw (เดสก์ท็อป), 10vw (แท็บเล็ตและโทรศัพท์)
• คอลัมน์ที่ 2 ช่องว่างภายใน: 15vw (เดสก์ท็อป), 10vw (แท็บเล็ตและโทรศัพท์)
• คอลัมน์ 1 ช่องว่างภายในด้านซ้าย: 7vw

คอลัมน์ 2 CSS ID

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

• คอลัมน์ 2 CSS ID: style-scrollbar

คอลัมน์ 2 องค์ประกอบหลัก

สิ่งต่อไปที่เราจะทำคืออนุญาตให้คอลัมน์สามารถเลื่อนได้โดยการเพิ่มบรรทัดของโค้ด CSS ต่อไปนี้ในองค์ประกอบหลักของคอลัมน์ 2:

overflow-y: scroll;
height: 57.87vw;
scroll-behavior: smooth;

เพิ่มโมดูลข้อความ #1 ลงในคอลัมน์ 1

เพิ่มเนื้อหา

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

การตั้งค่าข้อความ

ไปที่การตั้งค่าข้อความของโมดูลและทำการเปลี่ยนแปลงบางอย่าง

• แบบอักษรของข้อความ: Lato
• สี: #666666
• ขนาดตัวอักษร: 1.6vw (เดสก์ท็อป), 3vw (แท็บเล็ต), 4vw (โทรศัพท์)
• ความสูงของบรรทัดข้อความ: 2vw

เพิ่มโมดูลตัวแบ่งในคอลัมน์ 1

ทัศนวิสัย

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

• แสดงตัวแบ่ง: ใช่

สี

จากนั้นไปที่แท็บออกแบบและเปลี่ยนสี

• สี: #5802ed

ขนาด

เล่นกับค่าการปรับขนาดด้วย

• น้ำหนักตัวแบ่ง: 4px
• ความกว้าง: 3vw (เดสก์ท็อป), 6vw (แท็บเล็ต), 9vw (โทรศัพท์)
• ส่วนสูง: 0px

ระยะห่าง

และเพิ่มช่องว่างด้านบนและด้านล่างที่กำหนดเองเพื่อสร้างพื้นที่

• ขอบบน: 1vw (เดสก์ท็อป), 3vw (แท็บเล็ต), 4vw (โทรศัพท์)
• ระยะขอบล่าง: 7vw

เพิ่มโมดูลข้อความ #2 ไปยังคอลัมน์ 1

เพิ่มเนื้อหา

ไปยังโมดูลที่สาม ซึ่งเป็นโมดูลข้อความอื่น เราได้เพิ่มสัญลักษณ์ (►) ตามด้วยชื่อบทแรกในกล่องเนื้อหา

เพิ่มลิงค์

เรากำลังเชื่อมโยงโมดูลนี้ทั้งหมดกับ anchor ID ซึ่งเราจะเพิ่มในภายหลังในโพสต์นี้

• URL ลิงก์โมดูล: https://yourwebsite.com/pagetitle/#chapter-1

การตั้งค่าข้อความ

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

• แบบอักษรของข้อความ: Lato
• น้ำหนักแบบอักษรของข้อความ: เบา
• สีข้อความ: #666666
• ขนาดตัวอักษร: 1.3vw (เดสก์ท็อป), 2vw (แท็บเล็ต), 3.3vw (โทรศัพท์)

ระยะห่าง

เพิ่มช่องว่างภายในด้านบนและด้านล่างแบบกำหนดเองด้วย

• ช่องว่างภายในด้านบน: 1vw
• ช่องว่างภายใน: 1vw

โมดูลข้อความโคลน #2 Twice

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

เปลี่ยนเนื้อหา

แก้ไขเนื้อหาของรายการที่ซ้ำกันแต่ละรายการ

เปลี่ยนลิงค์

พร้อมกับรหัส anchor ที่ส่วนท้ายของ URL ลิงก์โมดูล ในกรณีนี้ นั่นหมายถึงการเพิ่ม '#chapter-2' ให้กับสำเนาแรกและ '#chapter-3' ในส่วนที่สอง

เพิ่มโมดูลข้อความในคอลัมน์ 2

เพิ่มเนื้อหา

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

สีพื้นหลัง

จากนั้นไปที่การตั้งค่าพื้นหลังและเพิ่มสีพื้นหลังสีขาว

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

การตั้งค่าข้อความ

แก้ไขการตั้งค่าข้อความด้วย

• แบบอักษรของข้อความ: Lato
• ขนาดตัวอักษร: 0.8vw (เดสก์ท็อป), 1.6vw (แท็บเล็ต), 2.1vw (โทรศัพท์)
• ความสูงของบรรทัดข้อความ: 1.7vw (เดสก์ท็อป), 3.3vw (แท็บเล็ต), 3.8vw (โทรศัพท์)

การตั้งค่าข้อความ H2

ลองใช้การตั้งค่าข้อความ H2 ด้วย

• หัวข้อ 2 แบบอักษร: Lato
• หัวข้อ 2 น้ำหนักแบบอักษร: หนัก
• หัวเรื่อง 2 สีข้อความ: #5802ed
• หัวเรื่อง 2 ขนาดข้อความ: 2vw (เดสก์ท็อป), 2.5vw (แท็บเล็ต), 2.9vw (โทรศัพท์)
• ส่วนหัว 2 ความสูงของเส้น: 2.3vw

ระยะห่าง

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

• ขอบบน: 2vw (เดสก์ท็อป), 7vw (แท็บเล็ต), 10vw (โทรศัพท์)
• ระยะขอบล่าง: 2vw (เดสก์ท็อป), 7vw (แท็บเล็ต), 10vw (โทรศัพท์)
• ระยะขอบซ้าย: 5vw
• ระยะขอบขวา: 5vw
• แผ่นรองด้านบน: 6vw
• แผ่นรองด้านล่าง: 6vw
• ช่องว่างภายในด้านซ้าย: 6vw
• ช่องว่างภายในด้านขวา: 6vw

กล่องเงา

กำหนดรูปร่างโมดูลข้อความโดยเพิ่มเงากล่องที่ละเอียดอ่อน

• ความแรงของกล่องเงาเบลอ: 50px
• เงาสี: rgba(0,0,0,0.09)

CSS ID

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

• CSS ID: บทที่-1

โคลนโมดูลข้อความสองครั้ง

เมื่อคุณจัดรูปแบบโมดูลข้อความแล้ว ให้โคลนได้มากเท่าที่คุณต้องการ

เปลี่ยนเนื้อหา

เปลี่ยนเนื้อหาของแต่ละโมดูลข้อความที่ซ้ำกัน

เปลี่ยน CSS IDs

พร้อมกับรหัส CSS

• CSS ID: บทที่-2
• CSS ID: ตอนที่-3

เพิ่มโมดูลข้อความในคอลัมน์ 3

เพิ่มเนื้อหา

ไปยังคอลัมน์ถัดไปและคอลัมน์สุดท้าย! เพิ่มโมดูลข้อความพร้อมเนื้อหาบางส่วนที่คุณเลือก

การตั้งค่าข้อความ

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

• แบบอักษรของข้อความ: Lato
• น้ำหนักแบบอักษรของข้อความ: หนัก
• สีข้อความ: #ffffff
• ขนาดตัวอักษร: 2vw (เดสก์ท็อป), 3vw (แท็บเล็ต), 4vw (โทรศัพท์)
• ความสูงของบรรทัดข้อความ: 2vw
• การวางแนวข้อความ: ศูนย์

ระยะห่าง

เพิ่มช่องว่างภายในด้านซ้ายและขวาที่กำหนดเองต่อไป

• ซ้าย: 2vw
• ขวา: 2vw

เพิ่มโมดูลปุ่มไปที่คอลัมน์ 3

เพิ่มสำเนา

ดำเนินการต่อโดยเพิ่มโมดูลปุ่มในคอลัมน์ที่สามพร้อมสำเนาที่คุณเลือก

การจัดตำแหน่ง

เปลี่ยนการจัดตำแหน่งปุ่มถัดไป

• การจัดตำแหน่งปุ่ม: กึ่งกลาง

การตั้งค่าปุ่ม

แก้ไขการตั้งค่าปุ่มด้วย

• ใช้สไตล์ที่กำหนดเองสำหรับปุ่ม: ใช่
• ขนาดข้อความของปุ่ม: 1vw (เดสก์ท็อป), 1.5vw (แท็บเล็ต), 2.4vw (โทรศัพท์)
• สีข้อความของปุ่ม: #5802ed
• สีพื้นหลังของปุ่ม: #ffffff
• ความกว้างของขอบปุ่ม: 0px
• รัศมีเส้นขอบของปุ่ม: 10vw
• ระยะห่างระหว่างตัวอักษรของปุ่ม: 0px
• น้ำหนักแบบอักษร: Ultra Bold
• รูปแบบตัวอักษร: ตัวพิมพ์ใหญ่

ระยะห่าง

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

• ขอบบน: 2vw (เดสก์ท็อป), 4vw (แท็บเล็ต), 5vw (โทรศัพท์)
• ด้านบน: 1vw (เดสก์ท็อป), 2vw (แท็บเล็ต), 3vw (โทรศัพท์)
• ช่วงล่าง: 1vw (เดสก์ท็อป), 2vw (แท็บเล็ต), 3vw (โทรศัพท์)
• Padding ซ้าย: 3vw (เดสก์ท็อป), 7vw (แท็บเล็ต), 9vw (โทรศัพท์)
• ช่องว่างภายในด้านขวา: 3vw (เดสก์ท็อป), 7vw (แท็บเล็ต), 9vw (โทรศัพท์)

แถบเลื่อนสไตล์

เปิดการตั้งค่าหน้า

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

เพิ่มโค้ด CSS

จากนั้นไปที่แท็บขั้นสูงและเพิ่ม CSS ที่กำหนดเองลงในกล่อง CSS ที่กำหนดเอง เท่านี้ก็เรียบร้อย!

#style-scrollbar::-webkit-scrollbar {
width: 1.1vw;
}
#style-scrollbar::-webkit-scrollbar-track {
background: #f1f1f1;
}
#style-scrollbar::-webkit-scrollbar-thumb {
background: #333333;
}

ดูตัวอย่าง

เมื่อเราได้ทำตามขั้นตอนทั้งหมดแล้ว มาดูผลลัพธ์ในขั้นสุดท้ายในหน้าจอขนาดต่างๆ

เดสก์ทอป

มือถือ

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

ในโพสต์นี้ เราได้แสดงวิธีสร้างหน้า Landing Page แสดงตัวอย่างหนังสือที่น่าทึ่งและมีประสิทธิภาพ พร้อมลิงก์สมอไปยังส่วนต่างๆ หรือบทต่างๆ ในหนังสือของคุณและ CTA ที่โดดเด่น เรายังได้แชร์เลย์เอาต์ JSON ฟรี เพื่อให้คุณสามารถเพิ่มลงในเว็บไซต์ใดๆ ที่คุณกำลังสร้างได้ทันที! หากคุณมีคำถามหรือข้อเสนอแนะโปรดแสดงความคิดเห็นในส่วนความคิดเห็นด้านล่าง

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