วิธีสร้างส่วนฮีโร่แยกเนื้อหาแบบเคลื่อนไหวบนมือถือด้วย Divi

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

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

ไปกันเถอะ!

ดูตัวอย่าง

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

มือถือ

เดสก์ทอป

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

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

ระยะห่าง

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

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

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

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

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

สีพื้นหลัง

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

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

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

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

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

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

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

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

ขนาด

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

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

ระยะห่าง

นอกจากนี้ เรายังลบช่องว่างด้านบนและด้านล่างเริ่มต้นทั้งหมดของแถวออกด้วย

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

แสดง

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

display: flex;

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

ปล่อยให้กล่องรูปภาพว่าง

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

เพิ่มสีพื้นหลัง

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

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

เพิ่มภาพพื้นหลัง

เพิ่มภาพพื้นหลังที่คุณเลือกและแก้ไขการตั้งค่าพื้นหลังตามนั้น:

• ขนาดภาพพื้นหลัง: ปก
• ตำแหน่งภาพพื้นหลัง: Center
• เล่นซ้ำภาพพื้นหลัง: ไม่เล่นซ้ำ
• การผสมผสานภาพพื้นหลัง: ทวีคูณ

ขนาด

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

• ความกว้าง: 88%
• การจัดตำแหน่งโมดูล: ซ้าย

ระยะห่าง

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

• ด้านบน: 26.3vw (เดสก์ท็อป), 48vw (แท็บเล็ต), 72vw (โทรศัพท์)
• ช่วงล่าง: 26.3vw (เดสก์ท็อป), 48vw (แท็บเล็ต), 72vw (โทรศัพท์)

แอนิเมชั่น

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

• สไตล์แอนิเมชั่น: สไลด์
• ภาพเคลื่อนไหวซ้ำ: Once
• ทิศทางของแอนิเมชั่น: ซ้าย
• ระยะเวลาของแอนิเมชั่น: 1450ms
• ความเข้มของแอนิเมชั่น: 60%
• ภาพเคลื่อนไหวเริ่มต้นความทึบ: 100%

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

เพิ่มสำเนา

โมดูลถัดไปที่เราต้องการในคอลัมน์ 1 คือโมดูลปุ่ม ป้อนสำเนาที่คุณเลือก

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

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

• ใช้สไตล์ที่กำหนดเองสำหรับปุ่ม: ใช่
• ขนาดข้อความของปุ่ม: 1.5vw (เดสก์ท็อป), 2.5vw (แท็บเล็ต), 4vw (โทรศัพท์)
• สีข้อความของปุ่ม: #ffffff
• สีพื้นหลังของปุ่ม: #e02b20
• ความกว้างของขอบปุ่ม: 0px
• รัศมีเส้นขอบของปุ่ม: 1px
• แบบอักษรของปุ่ม: Poppins
• น้ำหนักแบบอักษร: หนัก

ระยะห่าง

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

• ขอบบน: -3.3vw (เดสก์ท็อป), -6vw (แท็บเล็ต), -9.1vw (โทรศัพท์)
• ช่องว่างภายในด้านซ้าย: 8vw
• ช่องว่างภายในด้านขวา: 8vw

กล่องเงา

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

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

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

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

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

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

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

• แบบอักษรของหัวเรื่อง: Poppins
• หัวเรื่องสีข้อความ: #ffffff
• ขนาดข้อความของหัวเรื่อง: 4vw (เดสก์ท็อป), 5vw (แท็บเล็ต), 6vw (โทรศัพท์)

ระยะห่าง

เปลี่ยนค่าการเว้นวรรคด้วย

• อัตรากำไรขั้นต้น: 12vw
• ระยะขอบซ้าย: -20vw
• ระยะขอบขวา: 17vw (เดสก์ท็อป), 15vw (แท็บเล็ต), 1vw (โทรศัพท์)

แอนิเมชั่น

และเพิ่มแอนิเมชั่นที่ละเอียดอ่อน

• สไตล์แอนิเมชั่น: สไลด์
• ภาพเคลื่อนไหวซ้ำ: Once
• ทิศทางของแอนิเมชั่น: ลง
• ระยะเวลาของแอนิเมชั่น: 1450ms
• ความเข้มของแอนิเมชั่น: 10%
• ภาพเคลื่อนไหวเริ่มต้นความทึบ: 100%

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

ทัศนวิสัย

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

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

สี

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

• สี: #e02b20

แอนิเมชั่น

เพิ่มแอนิเมชั่นไปยังโมดูลตัวแบ่งถัดไป

• สไตล์แอนิเมชั่น: สไลด์
• ภาพเคลื่อนไหวซ้ำ: Once
• ทิศทางของแอนิเมชั่น: ขวา
• ระยะเวลาของแอนิเมชั่น: 1450ms
• ความเข้มของแอนิเมชั่น: 83%
• ภาพเคลื่อนไหวเริ่มต้นความทึบ: 100%

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

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

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

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

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

• แบบอักษรของข้อความ: Poppins
• น้ำหนักแบบอักษรของข้อความ: เบา
• สีข้อความ: #919191
• ขนาดตัวอักษร: 0.7vw (เดสก์ท็อป), 1.8vw (แท็บเล็ต), 2.2vw (โทรศัพท์)
• ระยะห่างของตัวอักษรข้อความ: 0.1vw
• ความสูงของบรรทัดข้อความ: 2.2em

ระยะห่าง

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

• ขอบบน: 9vw (เดสก์ท็อป), 19vw (แท็บเล็ต), 23vw (โทรศัพท์)
• ขอบล่าง: 12vw (เดสก์ท็อป), 19vw (แท็บเล็ต), 23vw (โทรศัพท์)
• ระยะขอบซ้าย: -3vw
• ระยะขอบขวา: 20vw (เดสก์ท็อป), 6vw (แท็บเล็ต), 3vw (โทรศัพท์)

แอนิเมชั่น

สุดท้ายแต่ไม่ท้ายสุด เพิ่มแอนิเมชั่นเฟดลงในโมดูล เท่านี้ก็เสร็จเรียบร้อย!

• สไตล์แอนิเมชั่น: Fade
• ภาพเคลื่อนไหวซ้ำ: Once
• ระยะเวลาแอนิเมชั่น: 1450ms
• ภาพเคลื่อนไหวล่าช้า: 1000ms
• ภาพเคลื่อนไหวเริ่มต้นความทึบ: 0%

ดูตัวอย่าง

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

มือถือ

เดสก์ทอป

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

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