การใช้การควบคุมการแปลงของ Divi เพื่อสร้างเค้าโครงโมดูล Blurb ที่ไม่ซ้ำใคร

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

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

มาเริ่มกันเลย.

การเริ่มต้นใช้งาน

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

ตอนนี้คุณพร้อมที่จะเริ่มต้นแล้ว

การสร้างการออกแบบเค้าโครง Blurb #1

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

สร้างแถวแรก

ในการเริ่มต้น ให้สร้างส่วนปกติ จากนั้นเพิ่มเค้าโครงคอลัมน์ต่อไปนี้สำหรับแถว: 1/2 1/6 1/6 1/6

เพิ่มและจัดรูปแบบโมดูลข้อความ

ในคอลัมน์ 1/2 ทางด้านซ้าย ให้เพิ่มโมดูลข้อความที่มีเนื้อหาต่อไปนี้:

<h2>Our Services</h2>
<p>Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.</p>

จากนั้นอัปเดตการตั้งค่าการออกแบบต่อไปนี้:

สีพื้นหลัง: #ffffff
ความกว้าง: 500px
มาร์จิ้นที่กำหนดเอง (เดสก์ท็อป): -70px left
มาร์จิ้นที่กำหนดเอง (แท็บเล็ต): เหลือ 20px
ช่องว่างภายในแบบกำหนดเอง: บน 20px ล่าง 20px

อัปเดตส่วนเสริม

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

Custom Padding: 20vw ด้านบน

อัปเดตการตั้งค่าสำหรับแถวแรก

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

ความกว้างของรางน้ำ: 1
แพ็ดดิ้งแบบกำหนดเอง: บน 10vw ล่าง 0px
ความกว้างของเส้นขอบ: 5px
สีขอบ: #eeeeee

เพิ่มแถวที่สอง

ถัดไป เพิ่มอีกหนึ่งแถวใต้แถวที่คุณเพิ่งปรับแต่ง ให้เค้าโครงหกคอลัมน์

สร้างและจัดรูปแบบโมดูล Blurb

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

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

อัปเดตการตั้งค่าการนำเสนอที่เหลือดังนี้:

สีไอคอน: #ffffff
ไอคอนวงกลม: ใช่
วงกลม สี: #5e89fb
แบบอักษรของชื่อเรื่อง: Nunito
การจัดตำแหน่งข้อความชื่อเรื่อง: Center
ขนาดข้อความชื่อเรื่อง: 16px
Custom Padding: บน 1vw, 1vw ล่าง, 1vw ซ้าย, 1vw ขวา

จากนั้นอัปเดตระยะขอบเริ่มต้นภายใต้ไอคอนการนำเสนอโดยเพิ่ม CSS ต่อไปนี้ลงในกล่อง CSS รูปภาพ Blurb ใต้แท็บขั้นสูง:

margin-bottom: 5px

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

เพิ่มเอฟเฟกต์การแปลงเพื่อปรับขนาดและวางตำแหน่ง Blurbs

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

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

เปลี่ยนมาตราส่วนแกน X: 242%
เปลี่ยนสเกลแกน Y: 242%

แปลงแกน X แปล: -96px
แปลงแปลแกน Y: -44px

ถัดไป อัปเดตการตั้งค่าของโมดูล Blurb ด้านบนในคอลัมน์ 3 ของแถวแรกดังนี้:

เปลี่ยนขนาดแกน X: 192%
เปลี่ยนสเกลแกน Y: 192%

แปลงแกน X แปล: -70px
แปลงแกน Y แปล: -13px

จากนั้นอัปเดตโมดูลการนำเสนอในคอลัมน์ 4 ของแถวบนสุดดังนี้:

เปลี่ยนสเกลแกน X: 158%
เปลี่ยนสเกลแกน Y: 158%

แปลงแกน X แปล: 33px
แปลงแกน Y แปล: -13px

ถัดไป อัปเดตโมดูลประกาศด้านล่างในคอลัมน์ 3 ของแถวบนสุดดังนี้:

เปลี่ยนสเกลแกน X: 132%
เปลี่ยนสเกลแกน Y: 132%

แปลงแกน X แปล: 89px
แปลงแกน Y แปล: 39px

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

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

แค่นั้นแหละ!

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

การปรับเปลี่ยนมือถือ

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

ในโมดอลการตั้งค่าองค์ประกอบ ให้อัปเดตสิ่งต่อไปนี้:

เปลี่ยนสเกลแกน X: 100%
เปลี่ยนสเกลแกน Y: 100%

แปลงแกน X แปล: 0px
แปลงแปลแกน Y: 0px

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

ผลสุดท้าย

นี่คือการออกแบบขั้นสุดท้าย

การสร้างเค้าโครงโมดูล Blurb #2

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

สร้างหัวเรื่อง

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

<h2>Our Process</h2>
<p>Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.</p>

จากนั้นอัปเดตการตั้งค่าโมดูลข้อความที่เหลือดังนี้:

หัวข้อ 2 แบบอักษร: Nunito
หัวข้อ 2 น้ำหนักแบบอักษร: กึ่งหนา
หัวเรื่อง 2 ขนาดข้อความ: 50px
หัวเรื่อง 2 ระยะห่างตัวอักษร: 7px
ความกว้าง: 500px

การสร้างเค้าโครง Blurb ด้วยแถวหกคอลัมน์

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

จัดแต่งทรงผมโมดูล Blurb

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

ลบเนื้อหาในกล่องเนื้อหาและอัปเดตข้อความชื่อด้วยคำว่า "ขั้นตอน"

จากนั้น คลิกเพื่อใช้ไอคอน และเลือกไอคอนกาเครื่องหมายวงกลม

กำหนดสีพื้นหลังของ Blurb เป็นสีขาวดังนี้:

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

จากนั้นอัปเดตการตั้งค่าการออกแบบ:

สีไอคอน: #ffffff
ไอคอนวงกลม: ใช่
วงกลม สี: #3d0dad
แบบอักษรของชื่อเรื่อง: Nunito
น้ำหนักแบบอักษรของชื่อเรื่อง: ตัวหนา
รูปแบบตัวอักษรของชื่อเรื่อง: TT
การจัดตำแหน่งข้อความชื่อเรื่อง: Center
ระยะห่างของตัวอักษรชื่อเรื่อง: 4px

จากนั้นให้เงาของกล่องข้อความดังต่อไปนี้:

กล่องเงา: ดูภาพหน้าจอ
เงาสี: rgba(0,0,0,0.12)

และสุดท้าย เพิ่มเอฟเฟกต์การแปลงการหมุนให้กับโมดูลการนำเสนอ:

เปลี่ยนแกน X หมุน: -3deg
เปลี่ยนแกน Y หมุน: -10deg
เปลี่ยนแกน Z หมุน: 31deg

ที่ดูแลโมดูลการนำเสนอครั้งแรกของเรา

อัปเดตการตั้งค่าแถว

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

ความกว้างของรางน้ำ: 2
ช่องว่างภายในที่กำหนดเอง: บน 11vw, 0px ด้านล่าง

ซึ่งจะช่วยในการเว้นระยะห่างของคำประกาศในเลย์เอาต์

ทำซ้ำและจัดรูปแบบ ส่วนที่เหลือของ Blurbs

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

ตอนนี้เปิดการตั้งค่าโมดูลการนำเสนอในคอลัมน์ 2 และอัปเดตสิ่งต่อไปนี้:

วงกลม สี: #62de9d

เปลี่ยนมาตราส่วนแกน X: 120%
เปลี่ยนสเกลแกน Y: 120%

Transform Translate แกน Y: -10% (อย่าลืมพิมพ์ค่าเปอร์เซ็นต์ที่นี่)

ถัดไป อัปเดตโมดูลการนำเสนอในคอลัมน์ 3 ดังนี้:

วงกลม สี: #5e89fb

เปลี่ยนมาตราส่วนแกน X: 140%
เปลี่ยนสเกลแกน Y: 140%

เปลี่ยนแปลแกน Y: -20%
แปลงแกน X แปล: 10%

อัปเดตโมดูลการนำเสนอในคอลัมน์ 4 ดังนี้:

วงกลมสี: #2a3fc9

เปลี่ยนมาตราส่วนแกน X: 160%
แปลงมาตราส่วนแกน Y: 160%

แปลงแกน Y แปล: -30%
แปลงแกน X แปล: 30%

และสุดท้าย อัปเดตโมดูลการนำเสนอในคอลัมน์ 5 ดังนี้:

วงกลม สี: #62de9d

เปลี่ยนสเกลแกน X: 180%
เปลี่ยนสเกลแกน Y: 180%

แปลงแกน Y แปล: -40%
แปลงแกน X แปล: 55%

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

เนื่องจากการออกแบบล้นในคอลัมน์สุดท้าย (คอลัมน์ 6) เราจะเว้นว่างไว้ แต่คุณสามารถเพิ่มการนำเสนออื่นในคอลัมน์ 6 ได้เสมอหากคุณเพิ่มขนาดของแถว

การเพิ่มคุณสมบัติเปอร์สเปคทีฟให้กับแต่ละคอลัมน์

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

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

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

perspective: 1000px

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

perspective: 1000px

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

perspective: 1000px

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

perspective: 1000px

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

perspective: 1000px

ในกรณีนี้ การเปลี่ยนแปลงนั้นละเอียดอ่อนมาก แต่ก็คุ้มค่ากับความพยายามเพิ่มเติมในความคิดของฉัน

นี่คือการออกแบบเลย์เอาต์โมดูลการนำเสนอโดยไม่มีมุมมอง

และนี่คือมุมมองที่ลงตัว

หากคุณต้องการให้ข้อความแจ้งปรากฏใกล้ผู้ใช้มากขึ้น คุณสามารถลดค่าเปอร์สเปคทีฟ ตัวอย่างเช่น นี่คือลักษณะของการนำเสนอโดยเพิ่ม "มุมมอง: 400px" ในแต่ละคอลัมน์

การเพิ่มพื้นหลังตัวแบ่งในส่วน

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

สไตล์ตัวแบ่งด้านล่าง: ดูภาพหน้าจอ
ตัวแบ่งสีด้านล่าง: #dddddd
ความสูงของตัวแบ่งด้านล่าง: 27vw
ตัวแบ่งแนวนอน ทำซ้ำแนวนอน: 0.8x
พลิกตัวแบ่งด้านล่าง: แนวนอน

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

เปลี่ยนสเกลแกน X: 100%
เปลี่ยนสเกลแกน Y: 100%

แปลงแปลแกน Y: 0%
แปลงแกน X แปล: 0%

ผลสุดท้าย

ตอนนี้ มาดูผลลัพธ์สุดท้ายของเค้าโครงโมดูลการนำเสนอกัน

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

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

สำหรับแรงบันดาลใจเพิ่มเติม ลองดูการออกแบบโมดูลประกาศ 5 แบบที่สร้างสรรค์เหล่านี้

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

ไชโย!