วิธีสร้างบล็อกเลย์เอาต์รูปภาพที่ใช้ซ้ำได้เพื่อเพิ่มรูปภาพสไตล์ Divi ให้กับ Gutenberg Posts

Layout Block ของ Divi สามารถใช้เป็นบล็อกเลย์เอาต์รูปภาพที่ใช้ซ้ำได้เพื่อเพิ่มรูปภาพในสไตล์ Divi ในโพสต์บล็อกของ Gutenberg ซึ่งรวมตัวเลือกการออกแบบอันทรงพลังและฟังก์ชันการทำงานของ Divi (สำหรับการสร้างภาพที่สวยงาม) เข้ากับความสะดวกในการเขียนโพสต์ (และเพิ่มบล็อก) ด้วย Gutenberg

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

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

แอบมอง

ดาวน์โหลดบล็อกเค้าโครงรูปภาพที่นำกลับมาใช้ใหม่ได้ฟรี

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

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

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

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

ดาวน์โหลด

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

วิธีใช้การดาวน์โหลดเพื่อนำเข้าบล็อคเลย์เอาต์เหล่านี้บนไซต์ของคุณ

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

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

จากนั้นคลิกปุ่มนำเข้าจาก JSON เลือกไฟล์ JSON จากโฟลเดอร์ดาวน์โหลดแล้วคลิกปุ่มนำเข้า

ทำขั้นตอนนี้ซ้ำเพื่อนำเข้าไฟล์ JSON ทั้งสามไฟล์

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

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

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

สิ่งที่เราต้องเริ่มต้น

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

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

หลังจากนั้นเราก็พร้อมที่จะเริ่มต้น

ส่วนที่ 1: การสร้างภาพขนาดเต็มพร้อมคำอธิบายภาพ Divi Layout Block

เพิ่ม Divi Layout Block

ในการเริ่มต้น ให้เพิ่ม Divi Layout Block ในโพสต์ของคุณ

จากนั้นคลิก "สร้างเค้าโครงใหม่"

การออกแบบเค้าโครงภาพ Divi

ใน Layout Block Editor ให้เริ่มออกแบบเลย์เอาต์โดยเพิ่มแถวหนึ่งคอลัมน์

โมดูลภาพ

เพิ่มโมดูลรูปภาพในแถว

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

• เปิดในไลท์บ็อกซ์: ใช่

ซึ่งจะทำให้ภาพของเราแสดงในไลท์บ็อกซ์เมื่อคลิก

• ภาพซ้อนทับ: ON
• สีไอคอนซ้อนทับ: #ffffff
• โฮเวอร์โอเวอร์เลย์สี: rgba(120,47,130,0.57)

หากต้องการสร้างพื้นที่รอบๆ รูปภาพของเรา ให้อัปเดตการตั้งค่าแถวดังนี้:

• ใช้ความกว้างของรางน้ำแบบกำหนดเอง: ใช่
• ความกว้างของรางน้ำ: 1
• ความกว้าง: 90%
• ความกว้างสูงสุด: 90%
• Padding: 5% บน, 5% ด้านล่าง

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

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

• ไล่สีพื้นหลังซ้ายสี: #782f82
• ไล่สีพื้นหลังขวาสี: #fe756b
• ทิศทางการไล่ระดับสี: 90deg

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

• ความกว้าง: 110%
• ความกว้างสูงสุด: 100%
• มาร์จิ้น: -5% เหลือ
• ช่องว่างภายใน: 0px บน, 0px ด้านล่าง

สุดท้าย เพิ่มความสร้างสรรค์ให้กับส่วนนี้ด้วยการเพิ่มเงากล่องด้านในดังนี้:

• กล่องเงา: ดูภาพหน้าจอ
• กล่องเงาตำแหน่งแนวนอน: 5vw
• กล่องเงาตำแหน่งแนวตั้ง: 5vw
• เงาสี: rgba(255,255,255,0.7)

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

จากนั้นเพิ่มเนื้อหาฟิลเลอร์เพื่อใช้เป็นข้อความคำอธิบายภาพ

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

• แบบอักษรของข้อความ: มอนต์เซอร์รัต
• น้ำหนักแบบอักษรของข้อความ: กึ่งหนา
• สีข้อความ: #ffffff
• ความกว้าง: 80%
• การจัดตำแหน่งโมดูล: right
• มาร์จิ้น: 5% ด้านบน

เมื่อเสร็จแล้ว อย่าลืมบันทึกเลย์เอาต์ด้วย Ctrl + S หรือเปิดแถบการตั้งค่าที่ด้านล่างแล้วคลิก "บันทึก & ออก"

การเพิ่มเค้าโครงรูปภาพลงในบล็อกที่นำกลับมาใช้ใหม่ได้

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

ตั้งชื่อบล็อกที่ใช้ซ้ำได้และคลิก "บันทึก"

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

อย่าลืมอัปเดต/บันทึกโพสต์เพื่อบันทึกการเปลี่ยนแปลง

ส่วนที่ 2: การสร้างภาพด้านซ้ายพร้อมคำอธิบายภาพ Divi Layout Block

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

แปลงบล็อกที่นำกลับมาใช้ใหม่เป็นบล็อกปกติ

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

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

อัปเดตเค้าโครง

เมื่อบล็อกเป็นปกติแล้ว ให้คลิกปุ่มแก้ไขเค้าโครงเหนือบล็อก

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

• ความกว้าง: อัตโนมัติ
• ความกว้างสูงสุด: 500px

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

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

• เพิ่มคลาส CSS: alignleft

คลาสนี้เป็นของ WordPress และจะลอยบล็อกไปทางซ้ายซึ่งจะทำให้รูปภาพของเราลอยไปทางด้านซ้ายของเนื้อหาภายในโพสต์ของเรา

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

ตั้งชื่อบล็อกที่นำกลับมาใช้ใหม่ได้ (เช่น “รูปภาพด้านซ้ายพร้อมคำบรรยาย”) แล้วคลิกบันทึก

ตอนนี้บล็อกเลย์เอาต์ภาพด้านซ้ายพร้อมคำบรรยายได้ถูกเพิ่มลงในรายการบล็อกที่นำกลับมาใช้ใหม่ได้เพื่อให้เข้าถึงได้ง่าย

ส่วนที่ 3: การสร้าง "รูปภาพที่เหมาะสมพร้อมคำบรรยาย" Divi Layout Block

จนถึงตอนนี้ เรามีรูปภาพแบบเต็มความกว้างพร้อมบล็อกเลย์เอาต์คำอธิบายภาพ และรูปภาพด้านซ้ายพร้อมบล็อกเลย์เอาต์คำบรรยาย ตอนนี้เราเพิ่มรูปภาพที่เหมาะสมด้วยบล็อกเลย์เอาต์คำอธิบายภาพได้แล้ว

แปลงบล็อกที่นำกลับมาใช้ใหม่เป็นบล็อกปกติ

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

อัปเดตเค้าโครง

เมื่อบล็อกนั้นเป็นบล็อกเลย์เอาต์ปกติแล้ว ให้คลิกเพื่อแก้ไขเลย์เอาต์

จากนั้นเปิดการตั้งค่าส่วนและนำระยะขอบด้านซ้ายออก

บันทึกและออกจากตัวแก้ไขเค้าโครง

จากนั้นอัปเดตคลาส CSS เพิ่มเติมของบล็อกดังนี้:

• คลาส CSS เพิ่มเติม: alignright

หลังจากเพิ่มคลาสแล้ว ให้เพิ่มบล็อกเลย์เอาต์ไปยังบล็อกที่นำกลับมาใช้ใหม่ได้

และตั้งชื่อบล็อกที่นำกลับมาใช้ใหม่ได้ (เช่น “รูปภาพที่ถูกต้องพร้อมคำบรรยาย”) และบันทึก

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

ส่วนที่ 4: การใช้บล็อกเลย์เอาต์รูปภาพที่ใช้ซ้ำได้บนโพสต์

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

นี่คือวิธีการทำ

ขั้นตอนที่ 1: เพิ่มบล็อกเลย์เอาต์ที่ใช้ซ้ำได้

เพิ่มหนึ่งในบล็อกเลย์เอาต์รูปภาพ Divi ที่นำกลับมาใช้ใหม่ได้ในโพสต์

ขั้นตอนที่ 2: แปลงเป็นบล็อกปกติ

เปิดเมนู "ตัวเลือกเพิ่มเติม" และเลือก "แปลงเป็นบล็อกปกติ"

ขั้นตอนที่ 3: แก้ไข Layout Block ด้วยรูปภาพและคำอธิบายภาพใหม่

เมื่อบล็อกเป็นปกติแล้ว ให้คลิกเพื่อแก้ไขเค้าโครง

อัปเดตเลย์เอาต์ด้วยรูปภาพที่คุณเลือก

จากนั้นอัปเดตข้อความคำอธิบายภาพภายในโมดูลข้อความ

ขั้นตอนที่ 4: บันทึก Layout Block

เมื่อเสร็จแล้ว ให้บันทึกและออกจากตัวแก้ไขเค้าโครง

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

ผลสุดท้าย

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

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

หวังว่านี่จะเป็นแรงบันดาลใจในการนำภาพบล็อกของคุณไปสู่อีกระดับหนึ่ง

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

ไชโย!