วิธีสร้างเกมส์มือถือด้วยโมดูลตัวเลื่อนของ Divi (ดาวน์โหลดฟรี!)

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

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

ไปกันเถอะ!

ดูตัวอย่าง

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

คงที่

GIF

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

วิธีสร้างเกมส์มือถือด้วยโมดูลตัวเลื่อนของ Divi

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

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

ระยะห่าง

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

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

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

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

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

พื้นหลังไล่โทนสี

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

• สี 1: #f9f9f9
• สี 2: rgba (255,255,255,0)
• ประเภทการไล่ระดับสี: เรเดียล
• ทิศทางเรเดียล: ด้านบน
• ตำแหน่งเริ่มต้น: 40%
• ตำแหน่งสุดท้าย: 40%

ขนาด

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

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

ระยะห่าง

เรากำลังเพิ่มช่องว่างภายในบางส่วนลงในแถว

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

ชายแดน

ถัดไป เพิ่ม '20px' ในแต่ละมุมในการตั้งค่าเส้นขอบ

กล่องเงา

สุดท้ายแต่ไม่ท้ายสุด ให้เพิ่มเงากล่องเล็กๆ ให้กับแถวเพื่อสร้างความลึกให้กับหน้า

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

เพิ่มโมดูลตัวเลื่อน

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

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

• สีพื้นหลัง: rgba(255,255,255,0)

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

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

• การวางแนวข้อความ: ศูนย์
• เงาสี: rgba(0,0,0,0)

การตั้งค่าข้อความเนื้อหา

แก้ไขการตั้งค่าข้อความเนื้อหาต่อไป

• แบบอักษรของร่างกาย: ค่าเริ่มต้น (Open Sans)
• ขนาดตัวอักษร: 0.6vw (เดสก์ท็อป), 1.5vw (แท็บเล็ต), 2.4vw (โทรศัพท์)
• ความสูงของเส้นร่างกาย: 2.2em (เดสก์ท็อป), 2.3em (แท็บเล็ต), 2.4em (โทรศัพท์)

ระยะห่าง

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

• ช่องว่างภายในด้านบน: 2vw
• แผ่นรองด้านล่าง: 2vw

ปุ่ม CSS ที่กำหนดเอง

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

padding-left: 80px;
padding-right: 80px;
padding-top: 8px;
padding-bottom: 8px;
margin-bottom: 80px;

ลบ Active Sliders

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

ปรับแต่งสไลด์แรก

ปรับแต่งเนื้อหาในกล่องเนื้อหา

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

ปุ่มลิงค์

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

พื้นหลังไล่โทนสี

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

• สี 1: #aaacff
• สี 2: rgba (255,255,255,0)
• ประเภทการไล่ระดับสี: เรเดียล
• ทิศทางเรเดียล: ด้านบน
• ตำแหน่งเริ่มต้น: 30%
• ตำแหน่งสุดท้าย: 30%

การนำทาง

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

• ลูกศรสีที่กำหนดเอง: #f4f4f4
• Dot Nav กำหนดสีเอง: #000000

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

และเปลี่ยนสีข้อความในการตั้งค่าข้อความของสไลด์

• สีข้อความ: Dark

ปุ่ม

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

• ใช้สไตล์ที่กำหนดเองสำหรับปุ่ม: ใช่
• ขนาดข้อความของปุ่ม: 0.8vw (เดสก์ท็อป), 2vw (แท็บเล็ต), 3vw (โทรศัพท์)
• สีข้อความของปุ่ม: #ffffff
• สีพื้นหลังของปุ่ม: #aacff
• ความกว้างของขอบปุ่ม: 0px
• รัศมีเส้นขอบของปุ่ม: 10px

โคลนสไลด์ได้มากเท่าที่ต้องการ

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

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

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

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

เปลี่ยนลิงค์ปุ่มด้วย

แก้ไขพื้นหลังไล่ระดับสี

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

• สี 1: #ffccaa

เปลี่ยนสีพื้นหลังของปุ่ม

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

• สีพื้นหลังของปุ่ม: #ffccaa

ดาวน์โหลดส่วนเกมส์มือถือฟรี

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

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

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

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

ดาวน์โหลด

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

ดูตัวอย่าง

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

คงที่

GIF

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

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