วิธีสร้างป้ายบอกคะแนนเกมด้วย Divi's Soccer Club Layout Pack

ทุกสัปดาห์ เรามอบชุดเค้าโครง Divi ใหม่และฟรีให้คุณ ซึ่งคุณสามารถใช้สำหรับโครงการต่อไปของคุณได้ สำหรับชุดเลย์เอาต์ชุดใดชุดหนึ่ง เรายังแชร์กรณีการใช้งานที่จะช่วยให้คุณยกระดับเว็บไซต์ของคุณไปอีกระดับ ในสัปดาห์นี้ โดยเป็นส่วนหนึ่งของการริเริ่มการออกแบบ Divi ที่กำลังดำเนินอยู่ เราจะแสดงวิธีสร้างป้ายบอกคะแนนเกมสุดเจ๋งโดยใช้ Divi's Soccer Club Layout Pack เราจะสร้างกระดานคะแนนเกมล่าสุดนี้โดยใช้ตัวเลือกในตัวของ Divi เท่านั้น ไปกันเลย!

ดูตัวอย่าง

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

อัปโหลด Layout Pack ของ Soccer Club Layout Pack

ในการสร้างบทช่วยสอนนี้ เราจะใช้หน้า Landing Page ของ Soccer Club Layout Pack ดังนั้นให้เพิ่มหน้าใหม่โดยใช้เลย์เอาต์นี้

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

จากนั้น เพิ่มส่วนใหม่ที่นี่:

สีพื้นหลัง

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

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

ระยะห่าง

เล่นกับค่าระยะห่างเช่นกัน

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

โคลนแถว & วางในส่วน

ค้นหาแถวและสร้างโคลน

เพื่อเป็นการประหยัดเวลา เราจะทำการโคลนแถวชื่อเรื่องในส่วนถัดไป

อยู่ในมาตราใหม่

เปลี่ยนข้อความ

เปลี่ยนสำเนาของโมดูลข้อความในแถวให้ตรงกับส่วนใหม่

เพิ่มแถว #2

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

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

สีพื้นหลัง

เปิดการตั้งค่าแถวและเปลี่ยนสีพื้นหลัง

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

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

เพิ่มสีพื้นหลังของคอลัมน์ 1 ด้วย

• คอลัมน์ 1 สีพื้นหลัง: #fcfcfc

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

ทำซ้ำขั้นตอนเดียวกันสำหรับคอลัมน์ 3

• คอลัมน์ 3 สีพื้นหลัง: #fcfcfc

ขนาด

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

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

ระยะห่าง

ลบช่องว่างภายในเริ่มต้นทั้งหมดถัดไป

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

ชายแดน

หากต้องการจับคู่ชุดเค้าโครง ให้เพิ่มเส้นขอบด้านบนและด้านล่างของแถว

• ความกว้างขอบล่าง: 8px
• สีขอบล่าง: #00aaff

กล่องเงา

สุดท้าย เพิ่มเงาของกล่องเพื่อสร้างความลึกให้กับหน้า

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

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

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

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

สีพื้นหลัง

เปลี่ยนสีพื้นหลังต่อไป

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

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

เล่นต่อด้วยการตั้งค่าข้อความ

• แบบอักษรของข้อความ: Squada One
• รูปแบบตัวอักษรของข้อความ: ตัวพิมพ์ใหญ่
• สีข้อความ: #333333
• ขนาดตัวอักษร: 20px
• การวางแนวข้อความ: ศูนย์

ระยะห่าง

จากนั้น เพิ่มค่าการเว้นวรรคแบบกำหนดเอง

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

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

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

เพิ่มโมดูลข้อความใหม่ด้านล่างโมดูลข้อความก่อนหน้าในคอลัมน์ 1 เมื่อคุณทำเสร็จแล้ว ให้เพิ่มเนื้อหาลงในกล่องเนื้อหา

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

เปลี่ยนการตั้งค่าข้อความถัดไป

• แบบอักษรข้อความ: เปิด Sans
• น้ำหนักแบบอักษรของข้อความ: ตัวหนา
• สีข้อความ: #333333
• ขนาดตัวอักษร: 18px
• การวางแนวข้อความ: ศูนย์

ระยะห่าง

เล่นกับค่าระยะห่างเช่นกัน

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

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

อัพโหลดโลโก้คลับ

โมดูลสุดท้ายที่จำเป็นในคอลัมน์ 1 คือโมดูลรูปภาพที่มีโลโก้สโมสรของหนึ่งในทีมที่แข่งขันกัน

ขนาด

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

• ความกว้าง: 45% (เดสก์ท็อป), 16% (แท็บเล็ต), 28% (โทรศัพท์)
• การจัดตำแหน่งโมดูล: ศูนย์

ระยะห่าง

ดำเนินการต่อโดยเพิ่มค่าระยะขอบแบบกำหนดเองในการตั้งค่าระยะห่าง

• ขอบบน: 20px
• ขอบล่าง: 50px

โคลนโมดูล & วางซ้ำในคอลัมน์ 3

เมื่อคุณทำทั้งสามโมดูลในคอลัมน์ 1 เสร็จแล้ว คุณสามารถโคลนและวางโมดูลที่ซ้ำกันในคอลัมน์ที่สามได้

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

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

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

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

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

สีพื้นหลัง

เพิ่มสีพื้นหลังที่ตรงกับชุดเค้าโครงถัดไป

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

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

เปลี่ยนการตั้งค่าข้อความด้วย

• แบบอักษรของข้อความ: Squada One
• รูปแบบตัวอักษรของข้อความ: ตัวพิมพ์ใหญ่
• สีข้อความ: #FFFFFF
• ขนาดตัวอักษร: 42px
• การวางแนวข้อความ: ศูนย์

ระยะห่าง

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

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

ทัศนวิสัย

สุดท้าย ปิดการใช้งานโมดูลบนโทรศัพท์และแท็บเล็ต

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

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

โมดูลข้อความที่สองในคอลัมน์ 2 ต้องมีคะแนนของเกม

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

หลังจากเพิ่มเนื้อหาแล้ว ให้เปลี่ยนการตั้งค่าข้อความ

• แบบอักษรของข้อความ: Squada One
• สีข้อความ: #333333
• ขนาดตัวอักษร: 150px
• ความสูงของบรรทัดข้อความ: 1em
• การวางแนวข้อความ: ศูนย์

ระยะห่าง

ดำเนินการต่อโดยแก้ไขค่าการเว้นวรรค

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

ทัศนวิสัย

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

โคลนทั้งสองโมดูล & วางในคอลัมน์ 1

โคลนทั้งสองโมดูลที่คุณพบได้ในคอลัมน์ 2 และวางรายการที่ซ้ำกันในคอลัมน์แรกเหนือโมดูลอื่นๆ

เปลี่ยนการมองเห็น

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

เพิ่มแถว #3

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

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

สีพื้นหลัง

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

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

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

เปลี่ยนสีพื้นหลังของคอลัมน์ 2 ด้วย

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

ขนาด

ลบช่องว่างระหว่างคอลัมน์ในการตั้งค่าการปรับขนาดถัดไป

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

ระยะห่าง

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

• ช่องว่างภายในด้านบน: 0px
• ช่องว่างภายในด้านล่าง: 0px
• ช่องว่างภายในคอลัมน์ 1 ด้านล่าง: 100px
• คอลัมน์ 1 ช่องว่างภายในด้านขวา: 10px
• คอลัมน์ 3 ช่องว่างภายในด้านซ้าย: 10px

ชายแดน

จากนั้นเพิ่มเส้นขอบด้านล่างที่ละเอียดอ่อนลงในแถว

• ความกว้างขอบล่าง: 8px
• สีขอบล่าง: #00aaff

กล่องเงา

ในการสร้างความลึกให้กับหน้า ให้เพิ่มเงาของกล่องแถว

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

ทัศนวิสัย

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

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

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

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

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

เปลี่ยนการตั้งค่าข้อความถัดไป

• แบบอักษรของข้อความ: Squada One
• รูปแบบตัวอักษรของข้อความ: ตัวพิมพ์ใหญ่
• สีข้อความ: #333333
• ขนาดตัวอักษร: 27px
• การวางแนวข้อความ: ขวา

ระยะห่าง

เล่นกับค่าระยะห่างเช่นกัน

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

ชายแดน

ดำเนินการต่อโดยเพิ่มเส้นขอบด้านล่างที่ละเอียดอ่อน

• ความกว้างขอบล่าง: 1px
• สีขอบล่าง: #333333

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

เปลี่ยนระยะห่างของรายการซ้ำ

โคลนโมดูลข้อความที่คุณเพิ่งสร้างขึ้นสองครั้งและเปลี่ยนค่าระยะห่างของทั้งสองรายการที่ซ้ำกัน

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

Clone Text Module #1 & วางซ้ำในคอลัมน์ 3

เปลี่ยนการตั้งค่าข้อความ

โคลนโมดูลข้อความแรกในคอลัมน์ 1 อีกครั้ง และวางสำเนาในคอลัมน์ 3 ดำเนินการโดยเปลี่ยนการวางแนวข้อความ

• การวางแนวข้อความ: ซ้าย

เปลี่ยนระยะห่าง

ขอบบนก็ต้องเพิ่มขึ้นเช่นกัน

• ขอบบน: 200px

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

ตอนนี้คุณสามารถโคลนโมดูลข้อความนี้ได้อีกครั้ง

เพิ่มแถว #4

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

ได้เวลาเพิ่มแถวสุดท้ายแล้ว! เลือกโครงสร้างคอลัมน์ต่อไปนี้:

สีพื้นหลัง

เปลี่ยนสีพื้นหลังของแถว

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

ขนาด

ลบช่องว่างทั้งหมดระหว่างคอลัมน์ถัดไป

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

ระยะห่าง

เพิ่มแผ่นรองเสริมด้านบนและด้านล่าง

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

ชายแดน

เราต้องการเส้นขอบด้านล่างที่ละเอียดอ่อนสำหรับแถวนี้ด้วย

• ความกว้างขอบล่าง: 8px
• สีขอบล่าง: #00aaff

กล่องเงา

ถัดไป เพิ่มเงาของกล่องในแถว

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

ทัศนวิสัย

สุดท้าย ซ่อนแถวบนเดสก์ท็อป

เพิ่มโมดูลข้อความ #1

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

เพิ่มโมดูลข้อความใหม่ในคอลัมน์ของแถวและเพิ่มรายละเอียดเป้าหมาย

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

เปลี่ยนการตั้งค่าข้อความถัดไป

• แบบอักษรของข้อความ: Squada One
• รูปแบบตัวอักษรของข้อความ: ตัวพิมพ์ใหญ่
• ขนาดตัวอักษร: 27px
• การวางแนวข้อความ: ขวา

ระยะห่าง

ใช้ค่าการเว้นวรรคแบบกำหนดเองถัดไป

• มารีนขวา: 150px
• ช่องว่างภายในด้านล่าง: 20px

ชายแดน

เรากำลังเพิ่มเส้นขอบด้านล่างที่ละเอียดอ่อนเช่นกัน

• ความกว้างขอบล่าง: 1px
• สีขอบล่าง: #333333

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

เปลี่ยนการตั้งค่าข้อความ

โคลนโมดูลข้อความที่คุณสร้างและเปลี่ยนการวางแนวข้อความของสำเนา

• การวางแนวข้อความ: ซ้าย

ระยะห่าง

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

• Marign ยอดนิยม: 200px
• ระยะขอบซ้าย: 150px

โคลนทั้งสองโมดูลข้อความได้หลายครั้งตามต้องการ

ตอนนี้คุณสามารถโคลนโมดูลเหล่านี้ได้หลายครั้งเท่าที่คุณต้องการเพื่อแสดงเป้าหมายที่แตกต่างกันทั้งหมด

ดูตัวอย่าง

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

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

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