วิธีสร้างกล่องเนื้อหาที่มีสไตล์ใน Divi สำหรับคำแนะนำ ข้อมูล คำเตือน และอื่นๆ (ดาวน์โหลดฟรี)

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

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

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

แอบมอง

วันนี้ เรากำลังจะสร้างการออกแบบกล่องเนื้อหาหลัก 3 แบบนี้ใน Divi

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

ต่อไปนี้คือตัวอย่าง 36 ตัวอย่างที่เรารวมไว้ในการดาวน์โหลดฟรีด้านล่าง

ดาวน์โหลดเค้าโครงฟรี

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

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

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

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

ดาวน์โหลด

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

ในการนำเข้าเค้าโครงส่วนไปยังไลบรารี Divi ของคุณ ให้ไปที่ Divi Library

คลิกปุ่มนำเข้า

ในป๊อปอัปการพกพา ให้เลือกแท็บนำเข้าและเลือกไฟล์ดาวน์โหลดจากคอมพิวเตอร์ของคุณ

จากนั้นคลิกปุ่มนำเข้า

เมื่อเสร็จแล้ว เค้าโครงส่วนจะพร้อมใช้งานใน Divi Builder

ไปกวดวิชากันเถอะ

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

ในการเริ่มต้น คุณจะต้องทำสิ่งต่อไปนี้:

1. หากคุณยังไม่ได้ติดตั้ง ให้ติดตั้งและเปิดใช้งานธีม Divi
2. สร้างหน้าใหม่ใน WordPress และใช้ Divi Builder เพื่อแก้ไขหน้าในส่วนหน้า (ตัวสร้างภาพ)
3. เลือกตัวเลือก "สร้างตั้งแต่เริ่มต้น"

หลังจากนั้น คุณจะมีผืนผ้าใบเปล่าเพื่อเริ่มออกแบบใน Divi

การสร้างการออกแบบกล่องเนื้อหาใน Divi

ก่อนที่เราจะเริ่มออกแบบกล่องเนื้อหา ให้เพิ่มแถวหนึ่งคอลัมน์ใหม่ไปที่ส่วนเริ่มต้นใน Divi Builder

การออกแบบกล่องเนื้อหา #1

ในการสร้างกล่องเนื้อหาแรก ให้เพิ่มโมดูลการนำเสนอลงในคอลัมน์

ใต้แท็บเนื้อหา ให้อัปเดตสิ่งต่อไปนี้:

• ใช้ไอคอน: ใช่
• ไอคอน: ดูภาพหน้าจอ
• สีพื้นหลัง: #ffffff
• ไล่ระดับพื้นหลังซ้ายสี: #00529b
• การไล่สีพื้นหลังด้านขวา: #bde5f8
• ทิศทางการไล่ระดับสี: 90deg
• ตำแหน่งเริ่มต้น: 3em
• ตำแหน่งสุดท้าย: 0%

ใต้แท็บออกแบบ ให้อัปเดตลักษณะไอคอนดังนี้:

• สีไอคอน: #ffffff
• การจัดตำแหน่งรูปภาพ/ไอคอน: ซ้าย
• ใช้ขนาดตัวอักษรของไอคอน: ใช่
• ขนาดตัวอักษรของไอคอน: 2em

ถัดไป อัปเดตลักษณะข้อความดังนี้:

• ชื่อข้อความสี: #00529b
• ขนาดข้อความชื่อเรื่อง: 1.5em
• ความสูงของบรรทัดหัวเรื่อง: 2em
• สีข้อความ: #bde5f8
• ขนาดข้อความเนื้อหา: 1em
• ความสูงของเส้นร่างกาย: 2em

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

• ความกว้างของเนื้อหา: 100%
• ความกว้างสูงสุด: 700px
• การจัดตำแหน่งโมดูล: ศูนย์
• Padding: บน 2em, 2em ล่าง, 5em ซ้าย, 2em ขวา

จากนั้นเพิ่มเงากล่องที่ละเอียดอ่อนให้กับการนำเสนอดังนี้:

• กล่องเงา: ดูภาพหน้าจอ
• ตำแหน่งแนวตั้งเงาของกล่อง: 0px
• Box Shadow Blur ความแรง: 88px
• ความแรงของการกระจายเงาของกล่อง: -10px
• เงาสี: rgba(0,0,0,0.17)

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

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

position:absolute;
margin-bottom: 0px;
border: 0.5em solid #00529b !important;
border-radius:50%;
background: #00529b;
transform: translateX(-3.75em);

หมายเหตุ: เมื่อเปลี่ยนรูปแบบสีของกล่องเนื้อหา (หรือโมดูลการนำเสนอ) เราจะต้องอัปเดตสีที่ใช้ใน CSS Blurb Image สำหรับเส้นขอบและพื้นหลังของไอคอนด้วย

มาดูผลสุดท้ายกัน

การออกแบบกล่องเนื้อหา #2

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

สำหรับการออกแบบนี้ เราจะจัดไอคอนให้ตรงกลางแนวตั้งทางด้านซ้ายของการนำเสนอโดยใช้คุณสมบัติกริด CSS

ภายใต้แท็บการออกแบบ ให้แทนที่ CSS Blurb Image ด้วยสิ่งต่อไปนี้:

margin-bottom: 0px;

จากนั้นเพิ่ม CSS ต่อไปนี้ลงในช่อง Blurb Content CSS:

display: grid;
align-items: center;
justify-content: center;
grid-template-columns: 5em auto;
grid-gap: 2em;

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

• ตำแหน่งเริ่มต้น: 5em

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

• การจัดตำแหน่งรูปภาพ/ไอคอน: center
• ขนาดตัวอักษรของไอคอน: 3em

ตอนนี้เราไม่ต้องการช่องว่างภายในด้านซ้ายแล้ว ถอดออก

ตอนนี้ทุกอย่างควรจะเรียงรายขึ้นอย่างสวยงาม ตรวจสอบผลลัพธ์สุดท้าย

การออกแบบกล่องเนื้อหา #3

ในการสร้างการออกแบบกล่องเนื้อหาที่สาม ให้ทำซ้ำโมดูลการนำเสนอที่สอง (กล่องเนื้อหา) ที่เราเพิ่งทำเสร็จ

เมื่อทำซ้ำการนำเสนอครั้งที่สอง ให้เปิดการตั้งค่าการนำเสนอที่ซ้ำกัน

ภายใต้แท็บ Design ให้เปลี่ยนสีไอคอน:

• ไอคอนสี: rgba(255,255,255,0.3)

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

หากต้องการเพิ่มป้ายกำกับ ให้วาง CSS ต่อไปนี้ลงในช่อง Before CSS:

content: 'key tip';
bottom:50%;
font-size: 1em;
line-height: 1em;
letter-spacing: 0.4em;
position:absolute;
transform: rotatez(-90deg) translateX(-50%) translateY(3em) !important;
transform-origin: bottom left;
color: #fff;
font-family: inherit;
font-weight: bold;
text-transform: uppercase;
z-index:1;

นอกจากนี้เรายังจะหมุนไอคอนเพื่อให้ตรงกับข้อความแนวตั้งที่หมุน เมื่อต้องการทำสิ่งนี้ ให้เพิ่ม CSS ต่อไปนี้ลงในกล่อง CSS Blurb Image:

margin-bottom: 0px;
transform: rotateZ(-90deg);

นี่คือผลลัพธ์สุดท้าย

กำลังปรับปรุงการออกแบบ

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

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

อัปเดตสี CSS ที่กำหนดเอง

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

กำลังอัปเดตข้อความป้ายกำกับ

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

ทำให้กล่องเนื้อหานำกลับมาใช้ใหม่ได้ใน Divi

บันทึกโมดูลไปยังห้องสมุด Divi

มีสองวิธีหลักในการทำให้โมดูลใช้ซ้ำได้ใน Divi วิธีแรกคือการบันทึกโมดูล (หรือองค์ประกอบใดๆ) ลงใน Divi Library

เมื่อองค์ประกอบถูกบันทึกลงในไลบรารี คุณสามารถค้นหาได้ในไลบรารี Divi เมื่อเพิ่มองค์ประกอบใหม่ในหน้า

ใช้ Global Presets

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

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

ตั้งชื่อพรีเซ็ตใหม่ตามที่คุณต้องการและบันทึก

ทำซ้ำขั้นตอนเหล่านี้สำหรับการตั้งค่าล่วงหน้าของโมดูลการนำเสนอที่คุณต้องการสร้าง

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

ผลลัพธ์สุดท้าย

นี่คือรูปลักษณ์สุดท้ายของการออกแบบกล่องเนื้อหาหลัก 3 แบบที่เราสร้างขึ้น

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

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

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

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

ไชโย!