วิธีออกแบบบทวิจารณ์หนังสือที่สะดุดตาสำหรับหน้า Landing Page ของ Divi Ebook

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

ในสัปดาห์นี้ โดยเป็นส่วนหนึ่งของการริเริ่มการออกแบบ Divi ที่กำลังดำเนินอยู่ เราจะแสดงวิธีออกแบบบทวิจารณ์หนังสือที่สะดุดตาสำหรับหน้า Landing Page ของ ebook ที่กำลังจะมีขึ้นโดยใช้ Divi's Ebook Layout Pack และตัวเลือกในตัวของ Divi เท่านั้น นี่เป็นวิธีที่ยอดเยี่ยมในการเพิ่มหลักฐานทางสังคมในหน้า Landing Page เพิ่มความน่าเชื่อถือ และแบ่งปันบทวิจารณ์สั้นๆ ของผู้คนอย่างสง่างาม

ไปกันเถอะ!

ดูตัวอย่าง

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

เดสก์ทอป

มือถือ

ดาวน์โหลดเค้าโครงส่วนบทวิจารณ์หนังสือได้ฟรี

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

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

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

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

ดาวน์โหลด

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

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

อัปโหลดเค้าโครงหน้า Landing Page ของ Ebook Layout Pack ไปยังหน้าใหม่

สิ่งแรกที่คุณต้องทำคือสร้างหน้าใหม่โดยใช้เค้าโครงหน้า Landing Page ของ Ebook Layout Pack ที่คุณจะพบได้ภายในเค้าโครงที่สร้างไว้ล่วงหน้า

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

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

เพิ่มแถวใหม่

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

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

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

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

• สี 1: #ffffff
• สี 2: #f4f4f4
• คอลัมน์ 1 ตำแหน่งเริ่มต้น: 12%
• คอลัมน์ 1 ตำแหน่งสิ้นสุด: 12%

คอลัมน์ 2 สีพื้นหลัง

เพิ่มสีพื้นหลังที่กำหนดเองให้กับคอลัมน์ที่สองด้วย

• คอลัมน์ 2 สีพื้นหลัง: #9400ff

ขนาด

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

• ใช้ความกว้างของรางน้ำแบบกำหนดเอง: ใช่
• ความกว้างของรางน้ำ: 1

ระยะห่าง

เรากำลังแก้ไขการตั้งค่าระยะห่างระหว่างแถว

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

เพิ่มโมดูลรูปภาพในคอลัมน์ 1

อัพโหลด 1:1 รูปภาพ

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

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

เลือกการจัดตำแหน่งรูปภาพด้านซ้ายในแท็บการออกแบบ

• การจัดตำแหน่งภาพ: ซ้าย

ขนาด

เรากำลังเปลี่ยนความกว้างของโมดูลนี้ตามขนาดหน้าจอต่างๆ

• ความกว้าง: 20% (เดสก์ท็อปและแท็บเล็ต), 30% (โทรศัพท์)

ระยะห่าง

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

• ระยะขอบซ้าย: -30px

ชายแดน

เพื่อให้การออกแบบรูปภาพสมบูรณ์ เรายังเพิ่ม '50vw' ให้กับแต่ละมุมในการตั้งค่าเส้นขอบ เพื่อให้แน่ใจว่ารูปภาพจะคงรูปทรงกลมตามขนาดหน้าจอต่างๆ

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

เพิ่มสัญลักษณ์ดาวลงในกล่องเนื้อหา

ไปยังโมดูลถัดไป ซึ่งเป็นโมดูลข้อความการให้คะแนน เพื่อแสดงการให้คะแนนดาว เราจะใช้สัญลักษณ์ ไปข้างหน้าและคัดลอกสัญลักษณ์ต่อไปนี้แล้ววางลงในกล่องเนื้อหาของโมดูลข้อความใหม่: ★★★★✰

สีพื้นหลัง

เปลี่ยนพื้นหลังของโมดูลต่อไป

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

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

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

• แบบอักษรของข้อความ: มอนต์เซอร์รัต
• น้ำหนักแบบอักษรของข้อความ: หนัก
• ขนาดตัวอักษร: 45px (เดสก์ท็อป), 30px (แท็บเล็ต), 25px (โทรศัพท์)
• ความสูงของบรรทัดข้อความ: 1em
• การจัดตำแหน่งข้อความ: กึ่งกลาง

ขนาด

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

• ความกว้าง: 35%

ระยะห่าง

และเพิ่มระยะห่างที่กำหนดเอง

• ระยะขอบซ้าย: 50px
• ระยะขอบขวา: 50px
• ช่องว่างภายในด้านบน: 20px
• ช่องว่างภายในด้านล่าง: 20px

กล่องเงา

เพื่อเน้นกล่องการให้คะแนน เราจะเพิ่มเงาของกล่องที่ละเอียดอ่อน

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

แปลงแปล

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

• ขวา: 360px (เดสก์ท็อป), -84px (แท็บเล็ต), -70px (โทรศัพท์)
• ด้านล่าง: -113px (เดสก์ท็อป), 190px (แท็บเล็ต), 141px (โทรศัพท์)

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

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

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

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

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

• แบบอักษรของข้อความ: มอนต์เซอร์รัต
• ขนาดตัวอักษร: 18px

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

เปลี่ยนสีข้อความลิงค์ด้วย

• ลิงค์สีข้อความ: #9400ff

ระยะห่าง

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

• ขอบบน: -100px (เดสก์ท็อป), 0px (แท็บเล็ตและโทรศัพท์)
• ระยะขอบซ้าย: 200px (เดสก์ท็อป), 50px (แท็บเล็ต), 20px (โทรศัพท์)
• ระยะขอบขวา: 50px (แท็บเล็ต), 20px (โทรศัพท์)

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

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

ไปยังโมดูลถัดไป ซึ่งเป็นโมดูลข้อความที่มีชื่อบทวิจารณ์ H3

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

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

• หัวข้อ 3 แบบอักษร: มอนต์เซอร์รัต
• ส่วนหัว 3 น้ำหนักแบบอักษร: ตัวหนา
• หัวเรื่อง 3 สีข้อความ: #000000

ระยะห่าง

เพิ่มระยะขอบแบบกำหนดเองด้วย

• ขอบบน: 80px (เดสก์ท็อป), 50px (แท็บเล็ตและโทรศัพท์)
• ระยะขอบซ้าย: 50px (เดสก์ท็อปและแท็บเล็ต), 20px (โทรศัพท์)
• ระยะขอบขวา: 50px (เดสก์ท็อปและแท็บเล็ต), 20px (โทรศัพท์)

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

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

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

ระยะห่าง

ไปที่การตั้งค่าระยะห่างของโมดูลนี้และใช้การตั้งค่าต่อไปนี้:

• ขอบบน: 20px
• ขอบล่าง: 50px
• ระยะขอบซ้าย: 50px (เดสก์ท็อปและแท็บเล็ต), 20px (โทรศัพท์)
• ระยะขอบขวา: 50px (เดสก์ท็อปและแท็บเล็ต), 20px (โทรศัพท์)

เพิ่มโมดูลรูปภาพในคอลัมน์ 2

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

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

ขนาด

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

• ความกว้าง: 79% (เดสก์ท็อป), 40% (แท็บเล็ตและโทรศัพท์)

ระยะห่าง

แก้ไขการตั้งค่าระยะห่างด้วย

• ขอบบน: 60px
• ขอบล่าง: 60px

กล่องเงา

และเพิ่มเงากล่องเพื่อเน้นปกหนังสือ

• ตำแหน่งแนวตั้งเงาของกล่อง: 40px
• ความแรงของกล่องเงาเบลอ: 80px
• ความแรงของการกระจายเงาของกล่อง: -20px
• เงาสี: rgba(0,0,0,0.8)

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

เพิ่มสำเนา

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

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

ไปที่แท็บออกแบบแล้วเปลี่ยนการจัดตำแหน่งปุ่ม

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

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

แก้ไขการตั้งค่าปุ่มเพื่อให้เข้ากับรูปลักษณ์ของชุดเลย์เอาต์

• ใช้สไตล์ที่กำหนดเองสำหรับปุ่ม: ใช่
• ขนาดข้อความของปุ่ม: 16px
• สีข้อความของปุ่ม: #ffffff
• สีพื้นหลังของปุ่ม: #000000
• ความกว้างของขอบปุ่ม: 0px
• รัศมีเส้นขอบของปุ่ม: 0px
• แบบอักษรของปุ่ม: มอนต์เซอร์รัต
• น้ำหนักแบบอักษรของปุ่ม: ตัวหนา

ระยะห่าง

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

• ช่องว่างภายในด้านบน: 16px
• ช่องว่างภายในด้านล่าง: 16px
• ช่องว่างภายในด้านซ้าย: 38px
• ช่องว่างภายในด้านขวา: 38px

โคลนแถวขึ้นไปหลาย ๆ ครั้งตามต้องการ

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

อัปโหลดรูปภาพที่แตกต่างกัน

เปลี่ยนรูปภาพของผู้ตรวจสอบ

เปลี่ยนปกหนังสือ

พร้อมกับปกหนังสือถ้าจำเป็น

เปลี่ยนสำเนา

และแก้ไขสำเนาทั้งหมดด้วย

ค้นหาและแทนที่สีพื้นหลังของคอลัมน์ 2 ในแถว

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

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

• ภายใน: แถวนี้
• แทนที่ด้วย: #31d190

ดูตัวอย่าง

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

เดสก์ทอป

มือถือ

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

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

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