วิธีสร้างโมดูลลอยตัวที่ชนกันในอวกาศ 3 มิติใน Divi

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

แน่นอน บทช่วยสอนนี้จะไม่เปรียบเทียบกับสิ่งที่ฉันคิดว่าการสำรวจอวกาศในชีวิตจริงจะเป็นเช่นไร แต่หวังว่าคุณนักสำรวจ Divi ที่อาจได้เรียนรู้บางสิ่งไปพร้อมกัน

แอบมอง

นี่คือตัวอย่างคร่าวๆ ของการออกแบบที่เราจะสร้างร่วมกัน

ดาวน์โหลดโมดูลลอยน้ำที่ชนกันในเค้าโครงอวกาศ 3 มิติฟรี

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

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

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

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

ดาวน์โหลด

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

ในการนำเข้าเลย์เอาต์ไปยังเพจของคุณ เพียงแตกไฟล์ zip แล้วลากไฟล์ json ไปที่ Divi Builder

ไปที่บทช่วยสอนกันไหม

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

เริ่มต้นใช้งานเลย์เอาต์ที่สร้างไว้ล่วงหน้า

ในการเริ่มต้น ตรวจสอบให้แน่ใจว่าคุณได้ติดตั้งและใช้งานธีม Divi แล้ว จากนั้นสร้างหน้าใหม่ ตั้งชื่อหน้า และปรับใช้ Divi Builder (ที่ส่วนหน้า) เลือกตัวเลือก "เลือกรูปแบบที่สร้างไว้ล่วงหน้า" จากนั้นเลือกเค้าโครงหน้า Landing Page ของวิดีโอเกมและนำเข้าไปยังหน้าใหม่ของคุณ

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

การใช้ Blurbs แบบลอยตัวในการออกแบบอวกาศ 3 มิติใน Divi

การสร้างแถวแรกของ Blurbs

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

ตอนนี้ใช้คุณสมบัติการเลือกหลายรายการของ Divi (กด ctrl/cmd ค้างไว้ขณะเลือกการนำเสนอแต่ละรายการ) ให้เลือก 5 การนำเสนอในสองคอลัมน์ด้านล่างแล้วลากไปไว้ในแถวคอลัมน์ใหม่ที่ด้านบนของส่วน

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

การเพิ่มมุมมองให้กับส่วนของเรา

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

เปิดการตั้งค่าส่วนและเพิ่ม CSS ที่กำหนดเองต่อไปนี้ในองค์ประกอบหลัก:

perspective: 1000px;

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

ดูข้อมูลเพิ่มเติมว่าเปอร์สเปคทีฟทำงานอย่างไรกับตัวเลือกการแปลงใน Divi

การปรับแต่งแถว

ก่อนที่เราจะเริ่มต้นจัดรูปแบบการนำเสนอของเรา มากำหนดการตั้งค่าแถวของเราก่อน มีสามสิ่งสำคัญที่เราต้องเปลี่ยนที่ระดับแถวสำหรับการออกแบบนี้:

1. เราจำเป็นต้องจัดแนวการนำเสนอของเราในแนวนอนโดยใช้ "display:flex" ซึ่งจะทำให้การออกแบบของเราสอดคล้องและตอบสนองในทุกอุปกรณ์ (ต่างจากการใช้รูปแบบ 5 คอลัมน์ที่จะใช้งานบนแท็บเล็ตและโทรศัพท์)
2. เราจำเป็นต้องกำจัดระยะขอบคอลัมน์เริ่มต้นโดยการตั้งค่าความกว้างของรางน้ำเป็น 1
3. เราจำเป็นต้องใช้การแปลงแบบหมุนเพื่อหมุนแถว 45 องศาบนแกน X ด้วยคุณสมบัติเปอร์สเปคทีฟที่เพิ่มไปยังพาเรนต์ (ส่วน) แถวและองค์ประกอบทั้งหมดจะมีเอฟเฟกต์ 3 มิติที่เราต้องการ

เปิดการตั้งค่าแถวและอัปเดตสิ่งต่อไปนี้:

ความกว้างของรางน้ำ: 1
ความกว้าง: 80% (เดสก์ท็อป), 100% (แท็บเล็ต), 100% (โทรศัพท์)
เปลี่ยนแกนหมุน X: 45deg

CSS องค์ประกอบหลักของคอลัมน์:

display: flex;
justify-content: center;

การปรับรูปแบบการนำเสนอและระยะห่าง

ตอนนี้ก็ถึงเวลาที่จะปรับเนื้อหาและรูปแบบของการนำเสนอของเราเล็กน้อย

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

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

จากนั้นเพิ่มสีพื้นหลัง:

สีพื้นหลัง: rgba(20,241,217,0.16)

จากนั้นอัปเดตระยะห่างต่อไปนี้:

Custom Margin (เดสก์ท็อป): 2vw right
Custom Margin (แท็บเล็ตและโทรศัพท์): 0vw right

ช่องว่างภายในแบบกำหนดเอง: บน 2% ล่าง 2% ซ้าย 3% ขวา 3%

ถัดไป เพิ่มเส้นขอบดังนี้:

ความกว้างของเส้นขอบ: 2px
เส้นขอบสี: rgba(20,241,217,0.66)

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

การสร้างแถวที่สองของ blurbs

หากต้องการสร้างข้อความแจ้งในแถวที่สอง ให้ทำซ้ำแถวที่มีข้อความแจ้ง 5 รายการที่คุณเพิ่งปรับแต่ง

ในการสร้างเอฟเฟกต์การชนกัน เราสามารถหมุนแถวที่ซ้ำกันไปในทิศทางตรงกันข้าม (-45deg)

เปิดแถวที่ซ้ำกันและอัปเดตสิ่งต่อไปนี้:

เปลี่ยนแกนหมุน X: -45deg

เพิ่มช่องว่างด้านบนและด้านล่าง

ณ จุดนี้ ข้อความด้านหน้าอาจขยายออกไปนอกส่วน ในการแก้ไขปัญหานี้ ให้เพิ่มช่องว่างภายในต่อไปนี้ในส่วนของคุณ:

Custom Padding: บน 15%, 15% ล่าง

การใช้ตัวเลือกการแปลงขนาดและตำแหน่งแต่ละ Blurb แยกกัน

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

เพื่อให้ง่ายขึ้น ฉันจะนับคำประกาศจาก 1-10 โดยเริ่มจากข้อความแจ้งด้านซ้ายสุดในแถวบนสุด (คำประกาศ #1) และลงท้ายด้วยคำประกาศที่ด้านขวาสุดในแถวที่สอง (คำประกาศ #10)

ประกาศ#1

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

มาตราส่วนการแปลง (แกน x และ y): 90%

ประกาศ #2

เปิดการตั้งค่าสำหรับ Blurb #2 และอัปเดตสิ่งต่อไปนี้:

มาตราส่วนการแปลง (แกน x และ y): 80%
แปลงแกน X แปล: -10%

ประกาศ #3

มาตราส่วนการแปลง (แกน x และ y): 80%
แปลงแกน X แปล: 20%

ประกาศ #4

มาตราส่วนการแปลง (แกน x และ y): 85%
แปลงแกน X แปล: -30%

ประกาศ #5

มาตราส่วนการแปลง (แกน x และ y): 60%

เมื่อเสร็จแล้ว แถวแรกของคุณควรมีลักษณะดังนี้

ปรับแต่งตัวเลือกการแปลงสำหรับการนำเสนอ 6-10 ต่อไปโดยเริ่มจากคำประกาศ #6 ทางด้านซ้ายสุดของแถวที่สอง

ประกาศ #6

มาตราส่วนการแปลง (แกน x และ y): 60%
แปลงแกน X แปล: -40%
แปลงแกนแปล Y: -20%

ประกาศ #7

มาตราส่วนการแปลง (แกน x และ y): 90%
แปลงแกน X แปล: 20%

ประกาศ #8

มาตราส่วนการแปลง (แกน x และ y): 70%
แปลงแกน X แปล: -50%

ประกาศ #9

มาตราส่วนการแปลง (แกน x และ y): 80%
แปลงแกน X แปล: -20%

ประกาศ #10

มาตราส่วนการแปลง (แกน x และ y): 70%
แปลงแกน X แปล: -60%

ตอนนี้เรามาดูกันว่าแถวที่สองมีลักษณะอย่างไรเมื่อชนกับแถวแรกของเราในพื้นที่ 3 มิติ

เพื่อให้การออกแบบสมบูรณ์ เราสามารถเพิ่มภาพพื้นหลังพื้นที่ 3 มิติที่สวยงามในส่วน ฉันใช้ภาพพื้นหลังส่วนบนที่มาพร้อมกับเค้าโครงหน้า Landing Page ของวิดีโอเกมที่เราใช้สำหรับบทช่วยสอนนี้

การออกแบบขั้นสุดท้าย

ตอนนี้ มาดูการออกแบบขั้นสุดท้ายของโมดูลลอยตัว 3 มิติของเรากัน

เดสก์ทอป

ยาเม็ด

โทรศัพท์

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

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

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

ขอให้สนุกกับการสำรวจ

ฉันหวังว่าจะได้ยินจากคุณในความคิดเห็น

ไชโย!