วิธีตัดข้อความรอบรูปภาพใน Divi (3 วิธี)

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

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

1. วิธีตัดข้อความรอบๆ รูปภาพ (และ Blockquotes) ภายในโมดูลข้อความด้วย WYSIWYG Editor
2. วิธีตัดข้อความรอบรูปภาพโดยการลอยโมดูลรูปภาพถัดจากโมดูลข้อความใน Divi
3. วิธีตัดข้อความรอบรูปภาพที่อยู่กึ่งกลางสำหรับเค้าโครงสองคอลัมน์ที่ไม่ซ้ำ

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

แอบมอง

นี่คือตัวอย่างคร่าวๆ ของการออกแบบหลักที่เราจะสร้างในวันนี้

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

สมัครสมาชิกช่อง Youtube ของเรา

ดาวน์โหลดเค้าโครงข้อความล้อมรอบรูปภาพได้ฟรี

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

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

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

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

ดาวน์โหลด

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

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

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

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

ในการเริ่มต้น สิ่งที่คุณต้องมีคือ Divi และรูปภาพบางส่วน

• Divi – ตรวจสอบให้แน่ใจว่าได้ติดตั้งและใช้งานธีม Divi แล้ว เราจะสร้างการออกแบบของเราตั้งแต่เริ่มต้นโดยใช้ Divi Builder ที่ส่วนหน้า (ตัวสร้างภาพ)
• รูปภาพ – นอกจากนี้ ตรวจสอบให้แน่ใจว่าต้องมีรูปภาพอย่างน้อยหนึ่งภาพที่มีขนาด 400px x 250px เพื่อใช้สำหรับบทช่วยสอน

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

วิธีตัดข้อความรอบๆ รูปภาพและบล็อคโควตภายในโมดูลข้อความด้วย WYSIWYG Editor

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

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

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

อัปเดตเนื้อหาของโมดูลข้อความด้วยสำเนาของคุณ ตอนนี้ฉันกำลังใช้ lorem ipsum อยู่สองสามย่อหน้า

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

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

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

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

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

จากนั้นกำหนดรูปแบบ blockquote โดยใช้การตั้งค่าโมดูลข้อความในตัวสำหรับ blockquote

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

<blockquote style="margin: 0 15px 15px 0; float:left;">This is a <br> blockquote</blockquote>

ตอนนี้ข้อความจะล้อมรอบ blockquote

วิธีตัดข้อความรอบ ๆ รูปภาพโดยการลอยโมดูลรูปภาพถัดจากโมดูลข้อความใน Divi

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

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

สร้างส่วนปกติใหม่ด้วยแถวหนึ่งคอลัมน์ จากนั้นเพิ่มโมดูลรูปภาพในแถวที่มีรูปภาพที่คุณเลือก รูปภาพที่ฉันใช้มาจาก Charity Layout Pack และมีขนาด 400px x 250px

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

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

float:left;

จากนั้นอัปเดตระยะขอบที่กำหนดเองของรูปภาพเพื่อสร้างบัฟเฟอร์ที่เราต้องการสำหรับข้อความที่ล้อมรอบรูปภาพ:

มาร์จิ้นที่กำหนดเอง: 2% บน 2% ล่าง 2% ขวา

นี่คือผลลัพธ์

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

float:right;

และอัปเดตระยะห่างระยะขอบดังต่อไปนี้:

มาร์จิ้นที่กำหนดเอง: 2% บน, 2$ ล่าง, 2% เหลือ

นี่คือผลลัพธ์

การใช้การออกแบบนี้กับหลายคอลัมน์

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

จากนั้นให้ค่าเปอร์เซ็นต์ความกว้างสูงสุดแก่รูปภาพเพื่อตอบสนองต่อความกว้างของเบราว์เซอร์ที่แตกต่างกัน

ความกว้างสูงสุด: 33.33% (เดสก์ท็อป), 100% (โทรศัพท์)

คัดลอกรูปภาพและโมดูลข้อความจากคอลัมน์แรก และวางลงในคอลัมน์ 2 จากนั้นอัปเดตเนื้อหาและรูปภาพตามต้องการ

แค่นั้นแหละ. นี่คือผลลัพธ์

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

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

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

การสร้างเนื้อหาแถวบนสุดด้วยภาพกึ่งกลาง

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

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

ความกว้างสูงสุด: 400px (เดสก์ท็อป), 100% (แท็บเล็ต)
การจัดตำแหน่งโมดูล: ศูนย์
ช่องว่างภายในแบบกำหนดเอง: บน 2% ล่าง 2% ซ้าย 2% ขวา 2%

จากนั้นบันทึกการตั้งค่าของคุณและเปิดการตั้งค่าแถว นำแผ่นรองด้านล่างของแถวออก

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

สร้างแถวข้อความสองคอลัมน์

ใต้แถวที่มีรูปภาพ ให้สร้างแถวใหม่ที่มีเค้าโครงสองคอลัมน์

ในคอลัมน์ 1 เพิ่มโมดูลข้อความที่มีเนื้อหาจำลอง

จากนั้นคัดลอกโมดูลข้อความแล้ววางลงในคอลัมน์ 2 สำหรับคอลัมน์ที่สองของข้อความ

การสร้างพื้นที่ว่างด้วยวงเวียนลอย

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

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

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

แสดงตัวแบ่ง: NO
ความกว้าง: 200px
ส่วนสูง: 250px

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

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

เมื่อสร้างตัวแบ่งแรกของเราแล้ว ให้คัดลอกโมดูลตัวแบ่งแล้ววางเหนือโมดูลข้อความในคอลัมน์ 2

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

float: right;

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

float: left;

การย้ายรูปภาพเข้าที่ด้วย Custom Margin

ตอนนี้สิ่งที่เราต้องทำคือดึงภาพของเราลงในแถวแรกเพื่อให้พอดีกับพื้นที่ที่เราสร้างด้วยตัวแบ่งของเรา

เปิดการตั้งค่าโมดูลรูปภาพและเพิ่มระยะขอบแบบกำหนดเองต่อไปนี้:

ระยะขอบที่กำหนดเอง: -250px ด้านล่าง (เดสก์ท็อป), 20px (แท็บเล็ต)

นี่คือผลลัพธ์จนถึงตอนนี้

การเพิ่มชื่อเรื่องในส่วน

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

จากนั้นเพิ่มเนื้อหาต่อไปนี้ในโมดูลข้อความ:

<h2>Learn more about how to give</h2>

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

สีพื้นหลัง: #000000
แบบอักษรของหัวเรื่อง 2: Playfair Display
การจัดตำแหน่งข้อความหัวเรื่อง 2: center
หัวเรื่อง 2 สีข้อความ: #ffffff
ส่วนหัว 2 ความสูงของบรรทัด: 2em

ปรับข้อความเพื่อการออกแบบการตัดข้อความที่สะอาดขึ้น

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

ผลสุดท้าย

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

และนี่คือการแสดงผลบนแท็บเล็ตและโทรศัพท์

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

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

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

ไชโย!