วิธีสร้างการออกแบบมุมลอยสำหรับเนื้อหาใน Divi

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

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

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

แอบมอง

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

ดาวน์โหลดเค้าโครงตัวอย่างการออกแบบเส้นขอบลอยได้ฟรี

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

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

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

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

ดาวน์โหลด

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

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

ตอนนี้ขอได้รับการกวดวิชาเราจะ?

เริ่มต้น

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

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

ตอนนี้คุณพร้อมที่จะไป!

การสร้างเทมเพลตเลย์เอาต์การออกแบบมุมลอย

เนื่องจากการออกแบบนี้มีความเป็นไปได้มากมายนับไม่ถ้วน การสร้างเลย์เอาต์พื้นฐาน (หรือเทมเพลต) เพื่อใช้งานจึงเหมาะสม

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

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

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

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

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

ขนาดข้อความ: 20px
ความสูงของบรรทัดข้อความ: 1.8em
ระยะขอบที่กำหนดเอง: -25px บน, -25px ล่าง, 25px ซ้าย, 25px ขวา
Custom Padding (เดสก์ท็อป): 10% บน, 10% ล่าง, 10% ซ้าย, 10% ขวา
Custom Padding (โทรศัพท์): 20% บน, 20% ล่าง
ความกว้างของเส้นขอบ: 4px
สีขอบ: #eeeeee

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

การเพิ่มตัวแบ่งมุมลอยสองตัวบน

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

สร้างโมดูลตัวแบ่งใหม่และลากไปที่ด้านบนของโมดูลข้อความ

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

แสดงตัวแบ่ง: NO

สีพื้นหลัง: #7cda24 (หรือสีอะไรก็ได้ที่คุณต้องการ)
ส่วนสูง: 50px
ความกว้าง: 50px

ความสูงและความกว้าง 50px ทำให้เราได้สี่เหลี่ยมจัตุรัสที่สมบูรณ์แบบสำหรับเส้นขอบลอย

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

กล่องเงา: ดูภาพหน้าจอ
ตำแหน่งแนวตั้งเงาของกล่อง: 0px
ความแรงของกล่องเงาเบลอ: 0px
ความแรงของการกระจายเงาของกล่อง: 20px
สีเงา: #ffffff

เพื่อให้แน่ใจว่าโมดูลตัวแบ่งอยู่เหนือโมดูลข้อความ (และไม่ถูกซ่อนอยู่เบื้องหลัง) เราจำเป็นต้องเพิ่มข้อมูลโค้ด CSS ให้กับองค์ประกอบหลักดังนี้:

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

position: relative

จากนั้นอัปเดตดัชนี Z เป็น 1

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

การจัดตำแหน่งโมดูล: right
ระยะขอบที่กำหนดเอง: -50px ด้านบน

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

การเพิ่มตัวแบ่งมุมด้านล่าง

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

แค่นั้นแหละ! มาดูการออกแบบขั้นสุดท้ายของเลย์เอาต์พื้นฐานของเรากัน

สำรวจการออกแบบมุมลอยใหม่

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

รูปทรงเพชรพร้อมพื้นหลังไล่ระดับ

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

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

พื้นหลังไล่ระดับสีซ้าย: #7cda24
พื้นหลังไล่ระดับสีด้านขวา: #edf000
ทิศทางการไล่ระดับสี: 45deg

จากนั้นใช้ตัวเลือกการแปลงเพื่อหมุนตัวแบ่งให้เป็นรูปทรงเพชร

แปลงหมุนแกน Z: 45deg

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

วงเวียนเบ้

คุณยังสามารถใช้ตัวเลือกการเอียงของการแปลงเพื่อเอียงตัวแบ่งเพื่อการออกแบบที่ไม่เหมือนใคร คุณสามารถเพิ่มการออกแบบเอียงแยกกันสำหรับแต่ละตัวแบ่ง หรือใช้การเลือกหลายรายการเพื่ออัปเดตการเอียงของการแปลงสำหรับทั้งสี่พร้อมกันโดย -37deg บนแกน X และ Y

นี่คือสิ่งที่จะมีลักษณะ

การออกแบบพื้นหลังสีเข้ม

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

มุมขอบมน

ในการวางมุมโค้งมนบนการออกแบบ คุณสามารถเพิ่มมุมโค้งมนให้กับแถวได้ดังนี้:

มุมโค้งมน: 20px

มุมลอยน้ำ

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

border-radius: 50%;

เนื่องจากตัวแบ่งมีขนาด 50px x 50px นี่จะสร้างการออกแบบวงกลมที่สมบูรณ์แบบ

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

ตอนนี้ มาสำรวจกันโดยใช้ไอคอนการนำเสนอสำหรับมุมลอยแทนโมดูลตัวแบ่ง

การสร้างมุมลอยด้วยไอคอน Blurb

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

ไปข้างหน้าและรับสำเนาแม่แบบเค้าโครงส่วนที่ใช้งาน

จากนั้นลบโมดูลตัวแบ่งด้านบนและด้านล่างโมดูลข้อความ

การเพิ่มมุมไอคอนประกาศ 2 อันดับแรก

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

เพิ่มโมดูลการนำเสนอเหนือโมดูลข้อความและนำชื่อเรื่องและเนื้อหาออก จากนั้นคลิกเพื่อใช้ไอคอนแทนรูปภาพและเลือกไอคอนวงกลม facebook

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

สีพื้นหลัง: #ffffff
ขนาดตัวอักษรของไอคอน: 50px
ความกว้าง: 50px
มาร์จิ้นที่กำหนดเอง: 0px ด้านล่าง
มุมโค้งมน: 50%
กล่องเงา: ดูภาพหน้าจอ
ตำแหน่งแนวตั้งเงาของกล่อง: 0px
ความแรงของกล่องเงาเบลอ: 0px
ความแรงของการกระจายเงาของกล่อง: 20px
สีเงา: #ffffff

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

position: relative;

CSS รูปภาพนำเสนอ:

margin-bottom: 0px

ดัชนี Z: 1

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

การจัดตำแหน่งโมดูล: right
ระยะขอบที่กำหนดเอง: -50px ด้านบน

จากนั้นคัดลอกโมดูลการนำเสนอสองรายการด้านบนแล้ววางไว้ใต้โมดูลข้อความ (ตรวจสอบให้แน่ใจว่าข้อความแจ้งด้านซ้ายวางซ้อนกันเหนือคำบรรยายด้านขวา)

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

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

สำรวจการออกแบบเพิ่มเติมด้วยมุมลอยไอคอน Blurb

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

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

ทำงานในรูปแบบหลายคอลัมน์

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

ห่อ

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

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

ไชโย!