คู่มือที่เป็นประโยชน์สำหรับการออกแบบองค์ประกอบวงกลมใน Divi

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

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

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

ตรวจสอบออก!

แอบมอง

ดาวน์โหลดตัวอย่างเค้าโครงองค์ประกอบวงกลมฟรี

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

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

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

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

ดาวน์โหลด

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

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

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

สิ่งที่คุณต้องการเพื่อเริ่มต้น

ในการเริ่มต้น ให้สร้างหน้าใหม่ใน Divi จากนั้นให้ชื่อหน้าและปรับใช้ตัวสร้าง Divi ที่ส่วนหน้า เลือกตัวเลือก "สร้างตั้งแต่เริ่มต้น"

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

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

สามขั้นตอนพื้นฐานในการสร้างองค์ประกอบวงกลม

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

ขั้นตอนที่ 1: องค์ประกอบขนาดที่มีค่าความสูงและความกว้างเท่ากัน

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

ขั้นตอนที่ 2: เพิ่มรัศมีขอบ 50% สำหรับทั้งสี่มุม

ขั้นตอนที่สองคือการกำหนดรัศมีเส้นขอบขององค์ประกอบ (หรือโมดูล) เป็น 50% ที่มุมทั้งสี่ ใน Divi คุณสามารถเปลี่ยนรัศมีเส้นขอบขององค์ประกอบภายใต้ตัวเลือกที่ระบุว่า "มุมโค้งมน"

ขั้นตอนที่ 3: จัดแนวเนื้อหาภายในองค์ประกอบวงกลม

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

ในตัวอย่างนี้ เราสามารถเพิ่มช่องว่างภายในต่อไปนี้เพื่อให้เนื้อหาของเราอยู่ใกล้กับศูนย์กลางขององค์ประกอบวงกลมมากขึ้น:

Custom Padding: 18vw บน, 3vw ซ้าย, 3vw ขวา

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

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

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

การใช้หน่วยความยาว VW สำหรับความสูงและความกว้าง

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

มาดูกันว่าโมดูลการเรียกร้องให้ดำเนินการแบบวงกลมของเรามีลักษณะอย่างไรขณะที่ฉันลดความกว้างของเบราว์เซอร์

การใช้หน่วยความยาว VW สำหรับเนื้อหาองค์ประกอบวงกลม

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

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

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

ขนาดข้อความชื่อเรื่อง: 4vw
ความกว้าง (โทรศัพท์): 70vw
ส่วนสูง (โทรศัพท์: 70vw

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

แล้วพิกเซลล่ะ?

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

ตัวอย่างเช่น ลองใช้โมดูลการเรียกร้องให้ดำเนินการเดียวกันและใช้พิกเซล (แทน vw) เพื่อกำหนดขนาดและพื้นที่โมดูลของเรา

คุณสามารถอัปเดตความสูง ความกว้าง และช่องว่างภายในได้ดังนี้:

ความกว้าง: 500px
ส่วนสูง: 500px
ช่องว่างภายในที่กำหนดเอง: ด้านบน 200px, ด้านซ้าย 20px, ด้านขวา 20px

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

Tนั่นเป็นเหตุผลสำคัญที่ต้องปรับความกว้างและค่าพิกเซลของช่องว่างภายในหน้าจอมือถือ ตัวอย่างเช่น คุณอาจต้องเปลี่ยนความกว้างและความสูงเป็น 300px แทน

เหตุใดหน่วยความยาว % จึงใช้งานไม่ได้กับการปรับขนาดองค์ประกอบวงกลม

หากคุณต้องการโซลูชันที่ตอบสนองมากขึ้นสำหรับองค์ประกอบแบบวงกลม คุณอาจคิดว่าการใช้เปอร์เซ็นต์คือคำตอบ อย่างไรก็ตาม เมื่อปรับขนาดองค์ประกอบบนหน้าเว็บ หน่วยความยาวเปอร์เซ็นต์สำหรับความสูงจะไม่ทำงานเหมือนกับหน่วยความยาวเปอร์เซ็นต์สำหรับความกว้าง เนื่องจากความสูงเริ่มต้นขององค์ประกอบมักจะปล่อยให้เป็นค่าเริ่มต้น (ความสูง: อัตโนมัติ) ตัวอย่างเช่น หากคุณกำลังพยายามตั้งค่าความสูง 100% ให้กับโมดูล Divi โมดูลจะไม่ปรับเนื่องจากคอนเทนเนอร์หลัก (คอลัมน์ แถว ส่วน ฯลฯ…) ล้วนมีค่าความสูงที่ไม่ได้กำหนดไว้ โดยพื้นฐานแล้วเบราว์เซอร์ไม่ได้พยายามตั้งค่าโมดูลเป็น 100% ของความว่างเปล่า (ซึ่งไม่สามารถทำได้) นี่ไม่ใช่กรณีของความกว้าง ความกว้างเริ่มต้นขององค์ประกอบบล็อก (หรือ div) คือ 100% ดังนั้นทุกส่วน แถว และโมดูลจึงมีความกว้างเริ่มต้น 100% เว้นแต่จะเปลี่ยนโดยการตั้งค่า นี่คือสาเหตุที่หน่วยความยาว % ไม่ใช่ตัวเลือกที่ดีที่สุดที่จะใช้เมื่อพยายามสร้างองค์ประกอบวงกลมที่ตอบสนอง องค์ประกอบทรงกลมต้องมีความสูงและความกว้างเท่ากันในทุกขนาดเบราว์เซอร์ ดังนั้นจึงเป็นเรื่องยากที่จะทำสิ่งนี้ให้สำเร็จโดยใช้หน่วยความยาวเป็นเปอร์เซ็นต์สำหรับความสูง อย่างไรก็ตาม มีหลายวิธีที่จะทำให้ความสูงและความกว้างทำงานได้ 100% โดยใช้ CSS ที่กำหนดเองมากขึ้นซึ่งนำไปใช้กับองค์ประกอบหลัก แต่สำหรับการสร้างองค์ประกอบวงกลมใน Divi คุณอาจพบว่าหน่วยความยาว vw ใช้งานได้ง่ายกว่า

การจัดแนวเนื้อหาภายในองค์ประกอบวงกลม

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

การจัดแนวเนื้อหาองค์ประกอบแบบวงกลมด้วยการเติม

ในการจัดแนวเนื้อหาภายในองค์ประกอบวงกลมโดยใช้ช่องว่างภายใน ฉันขอแนะนำให้ใช้หน่วยความยาวสัมพัทธ์ (เช่น % หรือ vw) เพื่อให้ช่องว่างภายในเพิ่มขึ้นหรือลดลงตามขนาดของคอนเทนเนอร์หรือความกว้างของเบราว์เซอร์ คุณไม่ต้องการใช้หน่วยความยาวสัมบูรณ์สำหรับการเติมภายในองค์ประกอบวงกลมที่มีขนาดโดยใช้หน่วยสัมพัทธ์ ผลที่ได้จะไม่สอดคล้องกันและการออกแบบจะพังบนมือถือ ตัวอย่างเช่น หากคุณมีองค์ประกอบวงกลมที่มีความสูง 10vw และความกว้าง 10vw องค์ประกอบนั้นจะลดขนาดลงเมื่อเบราว์เซอร์ลดความกว้างลง หากคุณเพิ่มช่องว่างภายใน 100px ที่ด้านบนขององค์ประกอบ 100px จะยังคงอยู่ทุกครั้งที่คุณปรับความกว้างของเบราว์เซอร์และทำให้การออกแบบเสียหาย อย่างไรก็ตาม หากคุณเพิ่มช่องว่างภายใน 3vw ช่องว่างภายในนี้จะปรับให้เข้ากับองค์ประกอบได้ดี

นี่คือเหตุผลที่ฉันแนะนำให้ใช้ vw padding ในตัวอย่างโมดูลการเรียกร้องให้ดำเนินการของเรา

การจัดแนวเนื้อหาองค์ประกอบแบบวงกลมด้วยคุณสมบัติ Flex

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

นี่คือสิ่งที่ฉันหมายถึง

ใช้ตัวอย่างของเรา เปิดการตั้งค่าโมดูลการเรียกร้องให้ดำเนินการ

จากนั้นตั้งค่า padding ด้านบนและด้านล่างเป็น 0px

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

display:flex;
align-items: center;

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

padding-bottom: 0px

ดูโพสต์นี้เกี่ยวกับวิธีจัดแนวเนื้อหาในแนวตั้งเพื่อดูข้อมูลเพิ่มเติม

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

เมื่อคุณมีความเข้าใจมากขึ้นเกี่ยวกับวิธีสร้างองค์ประกอบวงกลมใน Divi แล้ว มาดูกันว่าจะได้ผลอย่างไรกับการออกแบบเลย์เอาต์จริง สำหรับตัวอย่างนี้ ฉันจะใช้ Divi's Farmer Landing Page จาก Farmer Layout Pack

โหลดเค้าโครงหน้า Landing Page ของเกษตรกรไปยังหน้าของคุณ

ในการเริ่มต้น ให้เพิ่มเค้าโครงหน้า Landing Page ของเกษตรกรลงในหน้าก่อน ในการดำเนินการนี้ ให้เปิดเมนูการตั้งค่าและที่ด้านล่างของ Divi Builder แล้วคลิกปุ่มโหลดจากไลบรารี ในป๊อปอัปการโหลดจากไลบรารี ให้ค้นหา Farmer Layout Pack แล้วเลือก จากนั้นคลิกเพื่อใช้หน้า Landing Page ของเกษตรกร

การดำเนินการนี้จะโหลดเค้าโครงไปยังหน้า

การทำหัวเรื่องแบบวงกลม

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

1: องค์ประกอบขนาดที่มีค่าความสูงและความกว้างเท่ากัน
2: เพิ่มรัศมีขอบ 50% สำหรับทั้งสี่มุม
3: จัดเนื้อหาภายในองค์ประกอบวงกลม

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

ความกว้าง: 70vw (เดสก์ท็อป), 70vw (แท็บเล็ต), 80vw (โทรศัพท์)
ความกว้างสูงสุด: 1080px
การจัดตำแหน่งส่วน: ศูนย์
ความสูง: 70vw (เดสก์ท็อป), 70vw (แท็บเล็ต), 80vw (โทรศัพท์)
ความสูงสูงสุด: 1080px

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

ตอนนี้เราต้องเพิ่มรัศมีขอบ 50% ทั้งสี่มุม

มุมโค้งมน: 50% (ทั้งสี่มุม)

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

ขั้นแรก เปิดการตั้งค่าของโมดูลข้อความบนสุดในคอลัมน์ 1 ที่มีชื่อเรื่องของส่วน จากนั้นอัปเดตขนาดข้อความของชื่อเรื่องดังนี้:

หัวเรื่อง ขนาดข้อความ: 4vw

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

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

มาร์จิ้นที่กำหนดเอง: 10vw บน (เดสก์ท็อป), 5vw (แท็บเล็ต), 0vw (โทรศัพท์)
แพ็ดดิ้งแบบกำหนดเอง: 3vw ซ้าย 3vw ขวา

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

ทีนี้มาดูผลลัพธ์กัน

การทำโมดูล Blurb แบบวงกลม

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

จากนั้นอัปเดตขนาดของโมดูลดังนี้:

ความกว้างของภาพ: 7vw
ความกว้าง: 50vw (เดสก์ท็อป), 80vw (โทรศัพท์)
ความกว้างสูงสุด: 400px
การจัดตำแหน่งโมดูล: ศูนย์
ความสูง: 50vw (เดสก์ท็อป), 80vw (โทรศัพท์)
ความสูงสูงสุด: 400px

ถัดไป เพิ่มรัศมีเส้นขอบหรือมุมโค้งมน:

มุมโค้งมน: 50%

หลังจากนั้นมาอัพเดทการออกแบบเนื้อหาและการเว้นวรรคดังนี้ครับ

ตำแหน่งรูปภาพ/ไอคอน: ด้านบน
ขนาดข้อความชื่อเรื่อง: 2vw (เดสก์ท็อป), 20px (แท็บเล็ต)
การวางแนวข้อความ: center

ช่องว่างภายในที่กำหนดเอง: 0vw บน, 0vw ล่าง, 4vw ซ้าย, 4vw ขวา

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

display: flex;
align-items: center;

ขยายรูปแบบหนังสือเวียนไปยังการนำเสนอทั้งหมดในส่วน

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

ผลสุดท้าย

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

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

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

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

ไชโย!