วิธีสร้างหน้า Landing Page การประชุมสุดยอดเสมือนจริงด้วย Divi
เผยแพร่แล้ว: 2020-07-02การโปรโมตกิจกรรมเสมือนจริงนั้นต้องใช้กลยุทธ์การส่งเสริมการขายหลายอย่าง การสร้างหน้า Landing Page ที่เชิญชวนเป็นหนึ่งในนั้น การสร้างหน้า Landing Page สำหรับการประชุมสุดยอดเสมือนจริงเป็นวิธีที่สมบูรณ์แบบในการทำให้ผู้ชมของคุณอยากรู้อยากเห็น คุณสามารถเชิญ แจ้ง และรวบรวมผู้เข้าร่วมที่ลงทะเบียนได้ด้วยการผสมผสานส่วนต่างๆ ที่ลงตัว วันนี้เราจะแสดงวิธีสร้างหน้า Landing Page ของการประชุมสุดยอดเสมือนจริงที่มีห้าส่วน การออกแบบประกอบด้วยภาพดูโอโทนและตัวแบ่งส่วนการเลื่อน เรายังได้รวมไฟล์ JSON ที่สามารถดาวน์โหลดได้ หากคุณต้องการข้ามบทแนะนำทีละขั้นตอน ในโฟลเดอร์นี้ คุณจะพบกับกราฟิกส่วนหัวและส่วนท้ายทั้งใน PNG และ AI
ไปกันเถอะ!
ดูตัวอย่าง
มาดูการออกแบบหน้า Landing Page ของหน้าจอขนาดต่างๆ กัน
เดสก์ทอป
ยาเม็ด
มือถือ
ดาวน์โหลด Virtual Summit Landing Page ฟรี
หากต้องการวางเลย์เอาต์ของหน้า Landing Page ของการประชุมสุดยอดเสมือนฟรี ก่อนอื่นคุณต้องดาวน์โหลดโดยใช้ปุ่มด้านล่าง ในการเข้าถึงการดาวน์โหลด คุณจะต้องสมัครรับรายชื่ออีเมล Divi Daily ของเราโดยใช้แบบฟอร์มด้านล่าง ในฐานะสมาชิกใหม่ คุณจะได้รับ Divi goodness และ Divi Layout pack ฟรีทุกวันจันทร์! หากคุณอยู่ในรายชื่อแล้ว เพียงป้อนที่อยู่อีเมลของคุณด้านล่างแล้วคลิกดาวน์โหลด คุณจะไม่ถูก "สมัครใหม่" หรือรับอีเมลเพิ่มเติม
ดาวน์โหลดฟรี
เข้าร่วมจดหมายข่าว Divi แล้วเราจะส่งอีเมลสำเนาชุดเค้าโครงหน้า Landing Page ของ Divi ที่ดีที่สุดให้คุณ พร้อมแหล่งข้อมูล เคล็ดลับ และลูกเล่นที่น่าตื่นตาตื่นใจและฟรีอีกมากมายของ Divi ทำตามแล้วคุณจะเป็นผู้เชี่ยวชาญ Divi ในเวลาไม่นาน หากคุณสมัครรับข้อมูลแล้ว เพียงพิมพ์ที่อยู่อีเมลของคุณด้านล่างแล้วคลิกดาวน์โหลดเพื่อเข้าถึงชุดเค้าโครง
คุณสมัครสำเร็จแล้ว โปรดตรวจสอบที่อยู่อีเมลของคุณเพื่อยืนยันการสมัครของคุณและเข้าถึงชุดเค้าโครง Divi รายสัปดาห์ฟรี!
ส่วนหน้า Landing Page ของการประชุมสุดยอดเสมือน
เพื่อให้หน้า Landing Page ทำงานได้ จำเป็นต้องมีชุดของส่วนที่เฉพาะเจาะจง นอกจากจะต้องดึงดูดสายตาของผู้ชมแล้ว หน้า Landing Page ยังต้องแปลงอีกด้วย ตัวอย่างเช่น หน้า Landing Page ของการประชุมสุดยอดเสมือนจริง จำเป็นต้องมีข้อมูลที่เกี่ยวข้องและคำกระตุ้นการตัดสินใจ ทุกส่วนต้องไหลจากส่วนหนึ่งไปยังส่วนอื่นอย่างราบรื่นเพื่อให้ผู้ดูรู้สึกได้รับแรงบันดาลใจให้ลงมือและลงชื่อสมัครใช้
เราได้รวมส่วนต่างๆ ต่อไปนี้ไว้ใน Virtual Summit Landing Page:
หัวข้อ
ส่วนหัวประกอบด้วยข้อมูลสำคัญ เช่น ชื่อของการประชุมสุดยอดและวันที่จัดงาน นี่คือข้อมูลที่สำคัญที่สุด นั่นเป็นเหตุผลว่าทำไมจึงอยู่ด้านบนสุด ส่วนหัวจะไม่สมบูรณ์หากไม่มีคำกระตุ้นการตัดสินใจและไปยังส่วนอื่นๆ ของหน้าได้ง่าย
ในการออกแบบของเรา เราได้รวมปุ่มสองปุ่มที่มีลิงก์สมอซึ่งนำทางไปยังวิทยากรและส่วนกำหนดการ ที่สำคัญที่สุด เราได้รวมปุ่มที่มีลิงก์ไปยังส่วนการลงทะเบียน ตลอดทั้งหน้า ปุ่ม "ลงทะเบียน" ทั้งหมดจะมีลักษณะเหมือนกัน เพื่อให้มีความสามัคคีในการออกแบบ
ข้อมูล
ส่วนที่สองเป็นส่วนข้อมูลที่กระตุ้นให้ผู้ชมพิจารณาเข้าร่วมการประชุมสุดยอดเสมือนจริง ในการออกแบบ เราได้เพิ่มคำประกาศสี่แบบและภาพที่สามารถเปลี่ยนเป็นวิดีโอได้อย่างง่ายดาย คำแถลงแสดงเหตุผลสี่ประการในการเข้าร่วมการประชุมสุดยอดและภาพ (หรือวิดีโอ) เป็นภาพเพื่อสนับสนุนการตัดสินใจ
ลำโพง
ในส่วนถัดไป คุณจะพบชุดโมดูลบุคคลหกชุด นี่คือที่ที่คุณนำเสนอวิทยากรที่จะเข้าร่วมในการประชุมสุดยอด แต่ละโมดูลประกอบด้วยองค์ประกอบต่อไปนี้:
- ภาพ
- ชื่อ
- ตำแหน่ง
- คำอธิบาย
- ลิงค์โซเชียลมีเดีย
ตรวจสอบให้แน่ใจว่าได้ป้อนข้อมูลที่เกี่ยวข้องทั้งหมดสำหรับผู้พูดแต่ละคน นอกจากนี้ ให้ลองใช้จำนวนบรรทัดเท่ากันในข้อความเนื้อหาเพื่อให้การออกแบบดูคมชัด อย่างที่คุณเห็น เราใช้เอฟเฟกต์สีดูโอโทนกับรูปภาพของลำโพงทั้งหมดเพื่อให้การออกแบบมีรูปลักษณ์และความรู้สึกที่น่าสนใจ มีการสอนทีละขั้นตอนด้านล่างเกี่ยวกับวิธีการบรรลุผลนี้ใน Photoshop
หากคุณมีลำโพงมากกว่า 6 ตัว ให้ทำซ้ำแถวหรือโมดูลโคลนเป็นแถวที่มีคอลัมน์มากหรือน้อย
กำหนดการ
ส่วนกำหนดการอยู่ถัดไป ในพื้นที่นี้ เราได้แชร์กำหนดการของการประชุมสุดยอดอย่างหรูหรา และทำให้แน่ใจว่ามีโครงสร้าง เพื่อรักษาสไตล์ของการออกแบบข้อความ อย่าลืมเปลี่ยนเนื้อหาแต่อย่าเปลี่ยนระดับหัวเรื่อง พยายามรักษาเนื้อหาให้มีความยาวเท่ากันเพื่อให้การออกแบบดูเรียบร้อย
แถวถูกจัดเรียงตามวันด้วยรูปภาพชื่อและกลุ่มของคำประกาศ ที่ด้านล่างของคอลัมน์สุดท้าย คุณจะพบปุ่มเรียกร้องให้ดำเนินการเพื่อให้ผู้ชมลงทะเบียน
ลงทะเบียน
สุดท้ายแต่ไม่ท้ายสุดคือส่วนการลงทะเบียน เราได้ใส่นาฬิกาจับเวลาถอยหลังเพื่อเพิ่มความรู้สึกเร่งด่วน แบบฟอร์มการติดต่อควรเชื่อมโยงโดยตรงกับรายการ RSVP ของคุณ เพื่อให้ผู้ได้รับเชิญแต่ละคนลงทะเบียนโดยอัตโนมัติ
ตลอดการออกแบบหน้า Landing Page ของการประชุมสุดยอดเสมือนจริง คุณจะพบปุ่มสามปุ่มที่นำทางไปยังส่วนนี้เพื่อเพิ่มประสิทธิภาพการสร้างลูกค้าเป้าหมาย
สร้างแผนที่ไล่โทนสี Duotone ด้วย Photoshop
เปิดรูปภาพใน Adobe Photoshop
หากคุณต้องการเลียนแบบภาพดูโอโทนในการออกแบบของเรา ให้ทำตามขั้นตอนด้านล่าง ขั้นแรก เปิดรูปภาพใน Photoshop
เปิดการปรับและเลือกแผนที่การไล่ระดับสี
เปิดแถบเครื่องมือการปรับแล้วคลิกแผนที่การไล่ระดับสี ในแท็บคุณสมบัติ ดับเบิลคลิกที่แถบการไล่ระดับสีเพื่อเปิดป๊อปอัปการตั้งค่า
ปรับสีไล่โทนสี
ในการตั้งค่าการไล่ระดับสี ให้ดับเบิลคลิกที่แต่ละสีเพื่อปรับแต่งการตั้งค่า
เพื่อให้ได้ผลการออกแบบของเรา ให้ปรับการไล่ระดับสีดังนี้:
- ประเภทการไล่ระดับสี: Solid
- ความเรียบเนียน: 100%
- ความทึบหยุด #1: 100%
- คัลเลอร์สต็อป #2
- ม่วงเข้ม #202060
- ตำแหน่ง: 19%
- จุดกึ่งกลาง:
- จุดกึ่งกลางความทึบ: 85%
- จุดกึ่งกลางของสี: 50%
- ความทึบหยุด #2: 55%
- หยุดสี #
- ไวโอเล็ต #f895f8
- ตำแหน่ง: 100%
บันทึกเป็นแผนที่การไล่ระดับสีแบบกำหนดเอง
เพิ่มชื่อสำหรับการไล่ระดับสีของคุณแล้วคลิกใหม่เพื่อบันทึก จากนั้นจะถูกเก็บไว้ในไลบรารีการไล่ระดับสีของคุณ บันทึกรูปภาพสำหรับเว็บที่ความสูง 700px ทำซ้ำขั้นตอนด้วยรูปภาพได้มากเท่าที่คุณต้องการ หลังจากใช้แผนที่การไล่ระดับสี ให้เลือกการไล่ระดับสีที่คุณบันทึกไว้
1. สร้างส่วนหัว
เพิ่มมาตราใหม่
พื้นหลัง
มาเริ่มสร้างหน้า Landing Page ของการประชุมสุดยอดเสมือนจริงกัน สร้างหน้าใหม่และเปิดด้วย Divi Builder ก่อนเพิ่มแถว ให้เพิ่มภาพพื้นหลังและการไล่ระดับสีในส่วนใหม่ คุณจะพบกราฟิกพื้นหลังในโฟลเดอร์ที่ดาวน์โหลดได้ด้านบน
- พื้นหลังไล่โทนสี
- สี 1: #1f4068
- สี 2: #202040
- ภาพพื้นหลัง: Header Graphic
ขนาด
ปรับความสูงขั้นต่ำถัดไป
- ความสูงขั้นต่ำ: 1050px
ระยะห่าง
การเว้นระยะเช่นกัน
- แผ่นรองด้านบนและด้านล่าง
- โต๊ะและโทรศัพท์: 90px
ทัศนวิสัย
สุดท้าย ปรับการตั้งค่าการมองเห็นในแท็บขั้นสูง
- ล้นแนวนอนและแนวตั้ง: ซ่อน
เพิ่มแถวใหม่
โครงสร้างคอลัมน์
เพิ่มแถวที่มีสามคอลัมน์ เลือกโครงสร้างคอลัมน์ 1/2, 1/4, 1/4
ขนาด
ปรับขนาดของแถวดังนี้:
- ความกว้าง: 90%
- ความกว้างสูงสุด: 1800px
- การจัดตำแหน่ง: ศูนย์
ระยะห่าง
\ เพิ่มระยะขอบด้านบนด้วย
- ขอบบน: 200px
คอลัมน์ 2, 3 การตั้งค่า
ระยะห่าง
ปรับการตั้งค่าสำหรับคอลัมน์ 2 และ 3 ขั้นแรกให้เว้นวรรค
- ขอบบน: 30px
ทัศนวิสัย
จากนั้นซ่อนคอลัมน์ในโทรศัพท์
- ปิดการใช้งานเมื่อ: โทรศัพท์
เพิ่มโมดูลข้อความที่ 1 ลงในคอลัมน์ 1
ข้อความ
เพิ่มโมดูลข้อความแรกในคอลัมน์ 1 แทรกชื่อเป็นเนื้อหา H1
- เนื้อหา: เนื้อหา H1
ข้อความหัวเรื่อง
ในแท็บออกแบบ ให้กำหนดสไตล์ข้อความหัวเรื่องถัดไป
- ระดับหัวเรื่อง: H1
- แบบอักษร: Alata
- น้ำหนัก: หนา
- การจัดตำแหน่ง: ศูนย์
- สี : ออฟไวท์ #eaeaea
- ขนาด
- เดสก์ท็อป: 85px
- แท็บเล็ต: 70px
- โทรศัพท์: 44px
- ระยะห่างระหว่างตัวอักษร: 2px
- ความสูงของเส้น: 1.1em
- เงาข้อความ: ตัวเลือกที่ 1
- เงาสี: rgba(o,0,0,0.26)
เพิ่มโมดูลข้อความที่ 2 ลงในคอลัมน์ 1
ข้อความ
เพิ่มโมดูลข้อความที่สอง แทรกวันที่เป็นเนื้อหา H2
- เนื้อหา: H2 Content, 15+16 กรกฎาคม 2020
ข้อความหัวเรื่อง
จัดรูปแบบข้อความหัวเรื่องถัดไป
- ระดับหัวเรื่อง: H2
- แบบอักษร: Alata
- น้ำหนัก: ปกติ
- การจัดตำแหน่ง: ศูนย์
- สี: ม่วง #b030b0
- ขนาด
- เดสก์ท็อปและแท็บเล็ต: 60px
- โทรศัพท์: 45 px
- ความสูงของสาย: 1.3em
ระยะห่าง
เพิ่มระยะห่างด้วย
- ช่องว่างภายในด้านล่าง: 20px
เพิ่มโมดูลปุ่มไปที่คอลัมน์ 1
ข้อความ
เพิ่มโมดูลปุ่มสำหรับการเรียกร้องให้ดำเนินการ
- ปุ่ม: ลงทะเบียน
ลิงค์
เพิ่มลิงค์สมอ.
- ลิงค์ URL: #ลงทะเบียน
การจัดตำแหน่ง
ย้ายไปยังแท็บการออกแบบและตั้งค่าการจัดตำแหน่ง
- การจัดตำแหน่งปุ่ม: กึ่งกลาง
ปุ่มรูปแบบที่กำหนดเอง
สไตล์ปุ่มเกินไป
- ขนาดตัวอักษร
- เดสก์ท็อป: 30px
- แท็บเล็ต: 25 px
- โทรศัพท์: 20px
- สีข้อความ: ขาว #ffffff
- พื้นหลัง: สีม่วง #602080
- รัศมีเส้นขอบ: 35px
- ระยะห่างระหว่างตัวอักษร: 1px
- แบบอักษร: Alata
ระยะห่าง
สุดท้าย ปรับระยะห่าง
- มาร์จิ้นสูงสุด
- แท็บเล็ตและโทรศัพท์: 15px
- ช่องว่างภายในด้านบน: 2px
เพิ่มโมดูลปุ่มไปที่คอลัมน์ 2
ข้อความ
ย้ายไปที่คอลัมน์ 2 และเพิ่มโมดูลปุ่ม เพิ่มสำเนาที่คุณเลือก
- ปุ่ม: ลำโพง
ลิงค์
ถัดไป เพิ่มลิงก์สมอ
- ลิงค์ URL: #Speakers
การจัดตำแหน่ง
ในแท็บการออกแบบ ให้ตั้งค่าการจัดตำแหน่ง
- การจัดตำแหน่งปุ่ม
- เดสก์ท็อป: ถูกต้อง
- แท็บเล็ตและโทรศัพท์: ศูนย์
ปุ่มสไตล์กำหนดเอง
ปรับสไตล์ปุ่มแบบกำหนดเองด้วย
- ขนาดตัวอักษร: 24px
- สีข้อความ: ขาว #ffffff
- พื้นหลัง: โปร่งใส
- ระยะห่างระหว่างตัวอักษร: 1px
- แบบอักษรของปุ่ม: Alata
- รัศมีเส้นขอบ: 0px
กล่องเงา
สุดท้ายเพิ่มเงาของกล่อง
- กล่องเงา: ตัวเลือกที่ 4
- ตำแหน่งแนวนอน: 0px
- ตำแหน่งแนวตั้ง: 5 px
- เงา สี: Fuchsia: #b030b0
โมดูลปุ่มโคลนเป็นคอลัมน์ 3
ปุ่มโคลน
โคลนปุ่มในคอลัมน์ 2 และวางโมดูลที่ซ้ำกันในคอลัมน์ 3
ปรับโมดูลปุ่ม
ข้อความ
เปลี่ยนข้อความในปุ่มโคลน
- ปุ่ม: กำหนดการ
ลิงค์
เปลี่ยนลิงค์สมอด้วย
- ลิงค์ URL: #Schedule
การจัดตำแหน่ง
อย่าลืมเปลี่ยนการจัดตำแหน่งด้วย
- การจัดตำแหน่งปุ่ม
- เดสก์ท็อปด้านซ้าย
เพิ่มแถวใหม่
โครงสร้างคอลัมน์
เพิ่มแถวใหม่ที่มีสองคอลัมน์เท่ากัน
ขนาด
ปรับความกว้างของรางน้ำก่อน
- ความกว้างของรางน้ำแบบกำหนดเอง: 2
ระยะห่าง
เพิ่มระยะห่างต่อไป
- มาร์จิ้นสูงสุด
- โทรศัพท์: -35px
ทัศนวิสัย
จากนั้นปรับการมองเห็นของแถว
- ปิดใช้งานเมื่อ: แท็บเล็ตและเดสก์ท็อป
โมดูลปุ่มโคลน & วางซ้ำในคอลัมน์ 1
ปุ่มโคลน
โคลนโมดูลปุ่มในคอลัมน์ 2 ของแถวก่อนหน้า และวางโมดูลที่ซ้ำกันในคอลัมน์ 1 ของแถวใหม่
ปรับโมดูลปุ่ม
ปุ่มสไตล์กำหนดเอง
ปรับข้อความในปุ่มใหม่
- ขนาดตัวอักษร: 20px
กล่องเงา
แก้ไขเงาของกล่องด้วย
- ตำแหน่งแนวตั้ง: 4px
เพิ่มโมดูลปุ่มโคลนลงในคอลัมน์ 2
ปุ่มโคลน
โมดูลปุ่มซ้ำจากคอลัมน์ 3 ในแถวก่อนหน้า วางลงในคอลัมน์ 2 ของแถวนี้
ปรับโมดูลปุ่ม
ข้อความ
ปรับเนื้อหาข้อความในปุ่มโคลน
- ข้อความ: กำหนดการ
2. สร้างส่วนข้อมูล
เพิ่มมาตราใหม่
พื้นหลัง
หากต้องการสร้างส่วนข้อมูล ให้เพิ่มส่วนใหม่และจัดรูปแบบพื้นหลังก่อน
- พื้นหลังไล่โทนสี
- สี 1: #202040
- สี 2: #202060
ระยะห่าง
เพิ่มเบาะด้วย
- ช่องว่างภายในด้านบน: 170px
- ช่องว่างภายในด้านล่าง: 5px
ทัศนวิสัย
สุดท้าย ปรับการตั้งค่าการมองเห็นในแท็บขั้นสูง
- ล้นแนวนอนและแนวตั้ง: ซ่อน
เพิ่มแถวใหม่
โครงสร้างคอลัมน์
เพิ่มแถวใหม่ที่มีหนึ่งคอลัมน์ เราจะเรียกสิ่งนี้ว่าแถวหัวเรื่อง
ขนาด
กำหนดขนาดต่อไป
- ความกว้าง: 80%
- ความกว้างสูงสุด: 1800px
เพิ่มโมดูลข้อความ
ข้อความ
เพิ่มโมดูลข้อความ
- Body: H2 Content – ทำไมต้องเข้าร่วม Digital Marketing Virtual Summit?
ข้อความหัวเรื่อง
ในแท็บออกแบบ กำหนดสไตล์ข้อความหัวเรื่อง
- ระดับหัวเรื่อง: H2
- แบบอักษร: Alata
- สีข้อความ: ขาว #ffffff
- ขนาด
- เดสก์ท็อป: 55px
- แท็บเล็ต: 45px
- โทรศัพท์: 40px
- ระยะห่างระหว่างตัวอักษร: 2px
- ความสูงของสาย: 1.1 em
เพิ่มโมดูลตัวแบ่ง
เส้น
ตอนนี้เพิ่มโมดูลตัวแบ่งและจัดรูปแบบเส้นในแท็บออกแบบ
- สีของเส้น: Fuchsia #b030b0
ขนาด
ปรับขนาดต่อไป
- น้ำหนักตัวแบ่ง: 50px
- ความสูงสูงสุด: 50px
เอฟเฟกต์เลื่อน
ในแท็บขั้นสูง เพิ่มเอฟเฟกต์การเลื่อนแนวนอน
- เปิดใช้งานการเคลื่อนไหวในแนวนอน
- เดสก์ทอป
- ออฟเซ็ตเริ่มต้น: -6
- ออฟเซ็ตกลาง: 50% / 0
- ออฟเซ็ตสิ้นสุด: 6
- แท็บเล็ตและโทรศัพท์
- ออฟเซ็ตที่ระบุ: -4
- ออฟเซ็ตกลาง: 50% /0
- ออฟเซ็ตสิ้นสุด: 4
เพิ่มแถวใหม่
โครงสร้างคอลัมน์
ตอนนี้เพิ่มแถวใหม่ที่มีสามคอลัมน์ เลือกโครงสร้างคอลัมน์ 1/2, 1/4, 1/4
ขนาด
ก่อนเพิ่มโมดูล ให้ปรับขนาดแถว
- ความกว้าง: 80%
- ความกว้างสูงสุด: 1800px
คอลัมน์ 1 การตั้งค่า
ระยะห่าง
นอกจากนี้ ให้ปรับระยะห่างของคอลัมน์แรกด้วย
- ช่องว่างภายในด้านบน: 20px
เพิ่มโมดูลรูปภาพในคอลัมน์ 1
ภาพ
ตอนนี้เพิ่มโมดูลรูปภาพลงในคอลัมน์ 1 ใช้รูปภาพของคุณที่มีเอฟเฟกต์ดูโอโทน
- ภาพ: ภาพถ่ายพร้อมเอฟเฟกต์ดูโอโทน
ชายแดน
ปรับขอบด้วย
- มุมโค้งมน: 15px
เพิ่มโมดูล Blurb ลงในคอลัมน์ 2
ข้อความ
ไปที่คอลัมน์ 2 และเพิ่มโมดูลการนำเสนอ แทรกเนื้อหา
- ชื่อเรื่อง: สร้างการเชื่อมต่อใหม่
- เนื้อหา: เนื้อหาอธิบาย
ภาพ
อัปโหลดรูปภาพหมายเลข 1 ซึ่งคุณสามารถหาได้ในโฟลเดอร์ที่ดาวน์โหลดได้
- ภาพ: PNG ของ #1
รูปภาพ & ไอคอน
ปรับตำแหน่งของภาพต่อไป
- ตำแหน่ง: Top
- การจัดตำแหน่ง: ซ้าย
ข้อความชื่อเรื่อง
จัดรูปแบบข้อความชื่อเรื่องด้วย
- ระดับหัวเรื่อง: H4
- แบบอักษร: Alata
- สี: ขาว #ffffff
- ขนาด: 23px
เนื้อความ
อย่าลืมจัดรูปแบบข้อความเนื้อหา
- แบบอักษร: เปิด Sans
- สี: ขาว #ffffff
- ขนาด: 14px
- ระยะห่างระหว่างตัวอักษร: 1px
CSS ที่กำหนดเอง
สุดท้าย เพิ่มช่องว่างภายในเพิ่มเติมด้วย CSS ที่กำหนดเองให้กับชื่อประกาศในแท็บขั้นสูง
- หัวข้อประกาศ: padding-bottom: 15px;
padding-bottom: 15px;
โคลนโมดูล Blurb & วางซ้ำในคอลัมน์ 2
โคลน Blurb
ทำซ้ำคำประกาศที่ 1 ในคอลัมน์ 2
เนื้อหา
ปรับปรุงเนื้อหา
- ชื่อเรื่อง: ชื่อเรื่องใหม่
- เนื้อหา: คำอธิบายข้อความใหม่
ภาพ
จากนั้นเปลี่ยนภาพตัวเลข คุณสามารถค้นหาไฟล์ใหม่ในโฟลเดอร์ที่ดาวน์โหลดได้
- ภาพ: PNG ของ #2
ลบคอลัมน์ 3 & คอลัมน์โคลน 2
คอลัมน์โคลน
ในการตั้งค่าแถว ให้ลบคอลัมน์ที่ 3 และทำซ้ำคอลัมน์ที่ 2 ตรวจสอบให้แน่ใจว่าคุณคืนโครงสร้างคอลัมน์เป็น 1/2, 1/4, 1/4
ปรับ Blurb 1 ในคอลัมน์ 3
เนื้อหา
อัปเดตเนื้อหาข้อความในการนำเสนอแบบโคลน
- ชื่อเรื่อง: ชื่อเรื่องใหม่
- เนื้อหา: คำอธิบายข้อความใหม่
ภาพ
เปลี่ยนรูปตัวเลขด้วย
- ภาพ: PNG ของ #3
ปรับ Blurb 2 ในคอลัมน์ 3
เนื้อหา
แก้ไขเนื้อหาของประกาศนี้ด้วย ข้อความแรก
- ชื่อเรื่อง: ชื่อเรื่องใหม่
- เนื้อหา: คำอธิบายข้อความใหม่
ภาพ
จากนั้นเปลี่ยนภาพตัวเลข
- ภาพ: PNG ของ #4
3. สร้างส่วนวิทยากร
เพิ่มมาตราใหม่
พื้นหลัง
ไปต่อในส่วนของวิทยากร เพิ่มส่วนใหม่และจัดรูปแบบพื้นหลัง
- พื้นหลังไล่โทนสี
- สี 1: #202060
- สี 2: #162447
ทัศนวิสัย
ปรับการตั้งค่าการมองเห็นในแท็บขั้นสูง
- ล้นแนวนอนและแนวตั้ง: ซ่อน
โคลนแถวชื่อเรื่อง & วางซ้ำในส่วนใหม่
แถวที่ซ้ำกัน
ทำซ้ำแถวชื่อเรื่องจากส่วนด้านบนแล้ววางที่ซ้ำกันในส่วนที่ลอกแบบมา เราจะเรียกสิ่งนี้ว่า แถวหัวเรื่อง 2
ปรับโมดูลข้อความ
ข้อความ
จากนั้นกำหนดรูปแบบการตั้งค่าข้อความ H3 ในแท็บออกแบบ ปรับ CSS ID ในโมดูลข้อความที่ลอกแบบด้วย ถัดไป เปลี่ยนสีเส้นของโมดูลตัวแบ่ง ตอนนี้เพิ่มแถวใหม่ที่มีโมดูลขนาดเท่ากัน 5 โมดูล ปรับขนาดของแถวดังนี้: เพิ่มระยะห่างด้วย เพิ่มโมดูลคนแรกในคอลัมน์ 1 อัปโหลดรูปภาพของผู้พูดพร้อมเอฟเฟกต์สี เราขอแนะนำขนาดรูปภาพ 550 x 770 px เพิ่มมุมโค้งมนให้กับรูปภาพถัดไป จากนั้นจัดรูปแบบข้อความชื่อเรื่อง จัดรูปแบบข้อความเนื้อหาด้วย อย่าลืมข้อความตำแหน่ง สุดท้าย เพิ่ม CSS ที่กำหนดเองสำหรับการขยายเพิ่มเติม ในการตั้งค่าแถว ให้ลบคอลัมน์ 2-5 ทำซ้ำคอลัมน์ 1 สี่ครั้ง อัปเดตเนื้อหาในโมดูลที่โคลนทั้งหมด ข้อความแรก แล้วภาพ. ตอนนี้เราจะสร้างส่วนกำหนดการ เพิ่มส่วนใหม่และจัดรูปแบบพื้นหลังดังนี้: ปรับการตั้งค่าการมองเห็นในแท็บขั้นสูง โคลนแถวชื่อเรื่องจากส่วนด้านบนแล้ววางลงในส่วนนี้ เปลี่ยนเนื้อหาชื่อเรื่อง เปลี่ยน CSS ID ในโมดูลข้อความที่โคลน เปลี่ยนสีของตัวแบ่งด้วย ตอนนี้ เพิ่มแถวใหม่ที่มีสามคอลัมน์ที่มีขนาดเท่ากัน ปรับขนาดของแถว เพิ่มระยะห่างด้วย เพิ่มโมดูลข้อความในคอลัมน์แรก แทรกเนื้อหา ย้ายไปที่แท็บออกแบบและจัดรูปแบบข้อความหัวเรื่อง เพิ่มระยะห่างต่อไป ตอนนี้เพิ่มโมดูลการเรียกร้องให้ดำเนินการพร้อมเนื้อหาบางส่วนที่คุณเลือก เพิ่มภาพพื้นหลังด้วย ในแท็บออกแบบ กำหนดสไตล์ข้อความหัวเรื่อง จัดรูปแบบข้อความเนื้อหาถัดไป เพิ่มระยะห่างด้วย จากนั้นจัดรูปแบบเส้นขอบ สุดท้าย เพิ่ม CSS ที่กำหนดเองสำหรับการจัดสไตล์เพิ่มเติม ย้ายไปที่คอลัมน์ 2 และเพิ่มโมดูลข้อความ ทำตามโครงสร้างเนื้อหานี้: ในแท็บออกแบบ ให้จัดรูปแบบข้อความ จากนั้นจัดรูปแบบระดับหัวเรื่องทั้งหมด จัดรูปแบบเส้นขอบด้วย ทำซ้ำโมดูลข้อความที่ 1 สองครั้ง เปลี่ยนเนื้อหาในโมดูลข้อความที่โคลน ลบเส้นขอบของโมดูลสุดท้ายในคอลัมน์ ในการตั้งค่าแถว ให้ลบคอลัมน์ 3 ทำซ้ำคอลัมน์ 2 ลบโมดูลข้อความที่ 3 ในคอลัมน์ที่โคลน อัปเดตเนื้อหาในแต่ละโมดูลข้อความใหม่ คัดลอกปุ่ม "ลงทะเบียน" ในส่วนหัวแล้ววางที่ด้านล่างของโมดูลข้อความสุดท้ายในคอลัมน์ 3 เปลี่ยนการจัดตำแหน่งของปุ่มไปทางซ้าย ปรับขนาดตัวอักษรเล็กน้อย ทำซ้ำแถวที่ 1 ในส่วนกำหนดการ เปลี่ยนเนื้อหาในโมดูลข้อความที่โคลน ปรับเนื้อหาของโมดูลการเรียกร้องให้ดำเนินการ เปลี่ยนภาพพื้นหลังด้วย ปรับเนื้อหาในโมดูลข้อความด้วย ส่วนสุดท้ายมีไว้สำหรับการลงทะเบียน เพิ่มส่วนใหม่และจัดรูปแบบพื้นหลังดังนี้ คุณจะพบกราฟิกส่วนท้ายในโฟลเดอร์ดาวน์โหลดด้านบน ปรับระยะห่างของส่วนด้วย และเปลี่ยนการตั้งค่าการมองเห็นในแท็บขั้นสูง ตอนนี้เพิ่มแถวใหม่ด้วยหนึ่งคอลัมน์ เพิ่มตัวแบ่งที่มองไม่เห็นเพื่อทำหน้าที่เป็นจุดยึดสำหรับส่วน ใส่รหัส CSS ที่เชื่อมโยงกับปุ่ม "ลงทะเบียน" ทั้งหมด เพิ่มแถวที่สองที่มีสองคอลัมน์เท่ากัน ปรับการตั้งค่าขนาดของแถว เพิ่มโมดูลตัวนับเวลาถอยหลังลงในคอลัมน์แรก เพิ่มเนื้อหาและวันที่ของกิจกรรม จัดรูปแบบพื้นหลังต่อไป ในแท็บออกแบบ กำหนดสไตล์ข้อความชื่อเรื่อง จัดรูปแบบข้อความตัวเลขด้วย อีกทั้งข้อความฉลาก จากนั้นปรับขนาดของแถว เพิ่มเบาะด้วย สุดท้าย จัดรูปแบบเส้นขอบ เพิ่มโมดูลแบบฟอร์มการติดต่อใหม่ในคอลัมน์ 2 เอาฟิลด์ข้อความออก ป้อนการตั้งค่าสำหรับแต่ละฟิลด์ ในแท็บการออกแบบ ใต้เค้าโครง ให้คลิกที่ "ทำให้เต็มความกว้าง" ทำเช่นเดียวกันสำหรับฟิลด์ที่สอง กลับไปที่การตั้งค่าแบบฟอร์มติดต่อทั่วไปและเพิ่มเนื้อหาบางส่วน จากนั้น จัดรูปแบบฟิลด์ดังนี้: จัดรูปแบบข้อความชื่อเรื่องด้วย ปรับสไตล์ที่กำหนดเองของปุ่มด้วย อย่าลืมปรับรัศมีขอบ สุดท้าย เพิ่ม CSS ที่กำหนดเองสำหรับช่องว่างภายในเพิ่มเติม เสร็จแล้ว! มาดูการออกแบบหน้า Landing Page อีกครั้งในขนาดหน้าจอต่างๆ คุณทำมัน! หน้า Landing Page ของการประชุมสุดยอดเสมือนจริงของคุณมีลักษณะอย่างไร ใช้การออกแบบนี้สำหรับการประชุมสุดยอดเสมือนจริงของคุณเองหรือสำหรับลูกค้าออกแบบเว็บ การนำทางได้รับการปรับให้เหมาะสมสำหรับการแปลงโดยมีข้อมูลในปริมาณที่เหมาะสม เราได้เพิ่มตัวแบ่งส่วนการเลื่อนเพื่อเพิ่มภาพเล็กน้อยด้วย แจ้งให้เราทราบว่าคุณคิดอย่างไรในความคิดเห็น คุณดาวน์โหลดเลย์เอาต์หรือทำตามขั้นตอนหรือไม่?
ข้อความหัวเรื่อง
CSS ที่กำหนดเอง
ปรับตัวแบ่ง
เส้น
เพิ่มแถวใหม่
โครงสร้างคอลัมน์
ขนาด
ระยะห่าง
เพิ่มโมดูลบุคคลในคอลัมน์ 1
ข้อความ
ภาพ
ภาพ
ข้อความชื่อเรื่อง
เนื้อความ
ข้อความตำแหน่ง
CSS ที่กำหนดเอง
padding-bottom: 10px;
padding-bottom: 20px;
padding-bottom: 20px;
คอลัมน์ที่ซ้ำกัน 1
คอลัมน์โคลน
ปรับเนื้อหาสำหรับโมดูลคนใหม่
ข้อความ
ภาพ
4. สร้างส่วนกำหนดการ
เพิ่มมาตราใหม่
พื้นหลัง
ทัศนวิสัย
โคลนชื่อเรื่องแถว2
แถวที่ซ้ำกัน
ปรับโมดูลข้อความ
ข้อความ
CSS ที่กำหนดเอง
ปรับตัวแบ่ง
เส้น
เพิ่มแถวใหม่
โครงสร้างคอลัมน์
ขนาด
ระยะห่าง
เพิ่มโมดูลข้อความลงในคอลัมน์ 1
ข้อความ
ข้อความหัวเรื่อง
ระยะห่าง
เพิ่มคำกระตุ้นการตัดสินใจในคอลัมน์ 1
ข้อความ
พื้นหลัง
ข้อความหัวเรื่อง
เนื้อความ
ระยะห่าง
ชายแดน
CSS ที่กำหนดเอง
border-radius: 15px;
background-color: #162447;
margin-top: 500px;
padding-bottom: 40px;
padding-bottom: 40px;
background-color: #q62447;
margin-top: 500px;
padding-bottom: 40px;
padding-bottom: 40px;
เพิ่มโมดูลข้อความในคอลัมน์ 2
ข้อความ
ข้อความ
ข้อความหัวเรื่อง
ชายแดน
โมดูลข้อความโคลน 2 ครั้ง
โมดูลข้อความโคลน
ปรับโมดูลข้อความใหม่
ข้อความ
ลบเส้นขอบของโมดูลข้อความที่ 3
ชายแดน
ลบคอลัมน์ 3 & คอลัมน์โคลน 2
คอลัมน์โคลน
ลบและปรับโมดูลข้อความ
ลบโมดูลข้อความ
ปรับเนื้อหา
โมดูลปุ่มโคลน & วางซ้ำในคอลัมน์ 3
ปุ่มโคลน
ปรับโมดูลปุ่ม
การจัดตำแหน่ง
ปุ่มสไตล์กำหนดเอง
โคลนแถวที่ 1 ของส่วนกำหนดการ
โคลนโรว์
ปรับโมดูลข้อความในคอลัมน์ 1
ข้อความ
ปรับโมดูลการเรียกร้องให้ดำเนินการ
ข้อความ
พื้นหลัง
ปรับโมดูลข้อความ
ข้อความ
5. สร้างส่วนลงทะเบียน
เพิ่มมาตราใหม่
พื้นหลัง
ระยะห่าง
ทัศนวิสัย
เพิ่มแถวใหม่
โครงสร้างคอลัมน์
เพิ่มโมดูลตัวแบ่ง
ทัศนวิสัย
CSS ID
เพิ่มแถวใหม่
โครงสร้างคอลัมน์
ขนาด
เพิ่มโมดูลตัวจับเวลาถอยหลังลงในคอลัมน์ 1
ข้อความ
พื้นหลัง
ข้อความชื่อเรื่อง
ข้อความตัวเลข
ป้ายข้อความ
ขนาด
ระยะห่าง
ชายแดน
เพิ่มโมดูลแบบฟอร์มการติดต่อในคอลัมน์ 2
องค์ประกอบ
เค้าโครงฟิลด์
ข้อความ
ทุ่งนา
ข้อความชื่อเรื่อง
ปุ่มรูปแบบที่กำหนดเอง
ชายแดน
CSS ที่กำหนดเอง
padding-bottom: 30px;
ดูตัวอย่าง
เดสก์ทอป
ยาเม็ด
มือถือ
นั่นมันแรป