5 ตัวอย่างเค้าโครงส่วนรูปแบบบรรณาธิการที่สร้างด้วย Divi

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

มาดูตัวอย่างห้าตัวอย่างที่เราจะแสดงให้คุณเห็นถึงวิธีการสร้าง

ตัวอย่างแรก

เดสก์ทอป

มือถือ

ตัวอย่างที่สอง

เดสก์ทอป

มือถือ

ตัวอย่างที่สาม

เดสก์ทอป

มือถือ

ตัวอย่างที่สี่

เดสก์ทอป

มือถือ

ตัวอย่างที่ห้า

เดสก์ทอป

มือถือ

5 ตัวอย่างเค้าโครงส่วนรูปแบบบรรณาธิการที่สร้างด้วย Divi

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

เริ่มสร้างตัวอย่างแรก

มาเริ่มกันเลยโดยการสร้างเลย์เอาต์สไตล์เอดิเตอร์ตัวแรกของเรา

เพิ่มมาตราใหม่

เพิ่มหน้าใหม่ เปิดใช้งาน Divi Builder และสลับไปยัง Visual Builder เมื่อคุณอยู่ใน Visual Builder แล้ว ให้เพิ่มส่วนมาตรฐาน

เพิ่มแถวสามคอลัมน์

ภายในส่วนมาตรฐานนั้น เราจะต้องมีแถวสามคอลัมน์

พื้นหลังไล่โทนสี

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

• สีแรก: #636363
• สีที่สอง: rgba(255,255,255,0)
• ประเภทการไล่ระดับสี: เรเดียล
• ทิศทางเรเดียล: ศูนย์กลาง
• ตำแหน่งเริ่มต้น: 0%
• ตำแหน่งสุดท้าย: 47%

คอลัมน์ 2 สีพื้นหลัง

เราจะต้องตั้งค่า '#d8d8d8' เป็นสีพื้นหลังของคอลัมน์ 2 ด้วย

ขนาด

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

• ใช้ความกว้างที่กำหนดเอง: ใช่
• ความกว้างที่กำหนดเอง: 100%
• ใช้ความกว้างของรางน้ำแบบกำหนดเอง: ใช่
• ความกว้างของรางน้ำ: 1

ระยะห่าง

เปิดหมวดหมู่ย่อย Spacing และเพิ่ม '50px' ที่ด้านบน ขวา ล่าง และซ้ายของคอลัมน์ที่สอง

โมดูลรูปภาพคอลัมน์แรก

พื้นหลังไล่โทนสี

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

• สีแรก: rgba(255,255,255,0)
• สีที่สอง: #086191
• ประเภทการไล่ระดับสี: เชิงเส้น
• ทิศทางการไล่ระดับสี: 107deg
• ตำแหน่งเริ่มต้น: 60%
• ตำแหน่งสุดท้าย: 60%

การจัดตำแหน่ง

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

ระยะห่าง

จากนั้น เปิดหมวดหมู่ย่อย Spacing และใช้การตั้งค่าระยะขอบและช่องว่างภายในต่อไปนี้:

• ขอบบน: 100px (เดสก์ท็อป), 0px (แท็บเล็ตและโทรศัพท์)
• ช่องว่างภายในด้านบน: 20px
• ช่องว่างภายในด้านล่าง: 20px

โมดูลข้อความคอลัมน์ที่สอง

การตั้งค่าข้อความ

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

• ขนาดตัวอักษรของข้อความ: 12px
• สีข้อความ: #000000
• การวางแนวข้อความ: ศูนย์

ขนาด

เปิดหมวดหมู่ย่อยการปรับขนาด ใช้ความกว้าง '84%' และเลือกการจัดตำแหน่งโมดูลตรงกลาง

ระยะห่าง

สุดท้าย เพิ่ม '50px' ที่ระยะขอบด้านบนและด้านล่าง

โมดูลรูปภาพคอลัมน์ที่สาม

พื้นหลังไล่โทนสี

เพิ่ม Image Module อื่นในคอลัมน์ที่สามและใช้พื้นหลังไล่ระดับสีต่อไปนี้:

• สีแรก: #a36100
• สีที่สอง: rgba(255,255,255,0)
• ประเภทการไล่ระดับสี: เชิงเส้น
• ทิศทางการไล่ระดับสี: 73deg
• ตำแหน่งเริ่มต้น: 40%
• ตำแหน่งสุดท้าย: 40%

การจัดตำแหน่ง

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

ระยะห่าง

สุดท้าย เพิ่มระยะขอบแบบกำหนดเองและช่องว่างภายในต่อไปนี้:

• ขอบบน: 300px (เดสก์ท็อป), 0px (แท็บเล็ตและโทรศัพท์)
• ช่องว่างภายในด้านบน: 20px
• ช่องว่างภายในด้านล่าง: 20px

ผลลัพธ์

ลองดูผลลัพธ์บนเดสก์ท็อปอีกครั้ง:

และบนมือถือ:

เริ่มสร้างตัวอย่างที่สอง

ตัวอย่างที่สองมีลักษณะดังนี้บนเดสก์ท็อป:

เพิ่มมาตราใหม่

ประการแรก เพิ่มส่วนมาตรฐานใหม่

เพิ่มแถวสองคอลัมน์

จากนั้น เพิ่มแถวสองคอลัมน์เข้าไป

คอลัมน์ 2 สีพื้นหลัง

เปิดการตั้งค่าแถวและเพิ่ม '#ededed' เป็นสีพื้นหลังของคอลัมน์ 2

ขนาด

ไปที่แท็บออกแบบและทำการเปลี่ยนแปลงต่อไปนี้นำไปใช้กับประเภทย่อยการปรับขนาด:

• ใช้ความกว้างที่กำหนดเอง: ใช่
• ความกว้างที่กำหนดเอง: 100%
• ใช้ความกว้างของรางน้ำแบบกำหนดเอง: ใช่
• ความกว้างของรางน้ำ: 1

โมดูลรูปภาพคอลัมน์แรก

การจัดตำแหน่ง

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

ระยะห่าง

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

• ขอบบน: 100px (เดสก์ท็อป), 0px (แท็บเล็ตและโทรศัพท์)
• ช่องว่างภายในด้านบน: 0px
• ช่องว่างภายในด้านล่าง: 0px

โมดูลข้อความคอลัมน์ที่สอง

การตั้งค่าข้อความ

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

• แบบอักษรของข้อความ: Lato
• ขนาดตัวอักษรของข้อความ: 12px
• สีข้อความ: #000000
• ความสูงของบรรทัดข้อความ: 2.2em
• การวางแนวข้อความ: ศูนย์

ขนาด

เปิดหมวดหมู่ย่อย Sizing และใช้ความกว้าง '75%'

ระยะห่าง

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

• ขอบบน: 120px (เดสก์ท็อป), -80 (แท็บเล็ตและโทรศัพท์)
• ระยะขอบซ้าย: -240px (เดสก์ท็อป), 80 (แท็บเล็ต), 45 (โทรศัพท์)
• ช่องว่างบน ขวา ล่าง และซ้าย: 50px (เดสก์ท็อปและแท็บเล็ต), 20px (โทรศัพท์)

ผลลัพธ์

เมื่อเสร็จแล้ว คุณจะสังเกตเห็นการออกแบบต่อไปนี้บนเดสก์ท็อป:

และบนมือถือ:

เริ่มสร้างตัวอย่างที่สาม

ต่อไป เรามีตัวอย่างต่อไปนี้ซึ่งมีลักษณะดังนี้:

เพิ่มมาตราใหม่

เพิ่มส่วนมาตรฐานใหม่อีกครั้ง

เพิ่มแถวสองคอลัมน์

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

คอลัมน์ 1 สีพื้นหลัง

เปิดการตั้งค่าแถวและใช้ '#e8e8e8' เป็นสีพื้นหลังของคอลัมน์ 1

พื้นหลังไล่ระดับคอลัมน์ 2

พื้นหลังไล่ระดับสีที่จำเป็นสำหรับคอลัมน์ที่สองมีดังต่อไปนี้:

• สีแรก: #e8e8e8
• สีที่สอง: rgba(255,255,255,0)
• คอลัมน์ 2 ประเภทการไล่ระดับสี: เชิงเส้น
• คอลัมน์ 2 ทิศทางการไล่ระดับสี: 147deg
• คอลัมน์ 2 ตำแหน่งเริ่มต้น: 25%
• คอลัมน์ 2 ตำแหน่งสิ้นสุด: 9%

ขนาด

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

• ใช้ความกว้างที่กำหนดเอง: ใช่
• ความกว้างที่กำหนดเอง: 100%
• ใช้ความกว้างของรางน้ำแบบกำหนดเอง: ใช่
• ความกว้างของรางน้ำ: 1

ระยะห่าง

สุดท้าย เพิ่ม '70px' ลงในช่องว่างด้านบนและด้านล่างของคอลัมน์แรก

โมดูลรูปภาพคอลัมน์แรก

การจัดตำแหน่ง

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

ระยะห่าง

เปิดหมวดหมู่ย่อย Spacing และเพิ่ม '-300px' ที่ระยะขอบด้านซ้าย

โมดูลข้อความคอลัมน์ที่สอง

สีพื้นหลัง

เพิ่มโมดูลข้อความในคอลัมน์ที่สองและใช้ '#3d3d3d' เป็นสีพื้นหลัง

การตั้งค่าข้อความ

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

• แบบอักษรของข้อความ: Lato
• ขนาดตัวอักษรของข้อความ: 12px
• สีข้อความ: #FFFFFF
• ความสูงของบรรทัดข้อความ: 2.2em
• การวางแนวข้อความ: ศูนย์

ขนาด

เปิดหมวดหมู่ย่อยการปรับขนาดและใช้ '75%' สำหรับความกว้าง

ระยะห่าง

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

• ขอบบน: 130px (เดสก์ท็อป), -200 (แท็บเล็ตและโทรศัพท์)
• ระยะขอบซ้าย: -180px (เดสก์ท็อป), 80 (แท็บเล็ต), 50 (โทรศัพท์)
• ช่องว่างบน ขวา ล่าง และซ้าย: 50px (เดสก์ท็อปและแท็บเล็ต), 20px (โทรศัพท์)

ผลลัพธ์

เมื่อเสร็จแล้ว ผลลัพธ์บนเดสก์ท็อปจะมีลักษณะดังนี้:

และแบบนี้บนมือถือ:

เริ่มสร้างตัวอย่างที่สี่

ตัวอย่างที่สี่ที่เราจะสร้างมีลักษณะดังนี้:

เพิ่มมาตราใหม่

เริ่มต้นด้วยการเพิ่มส่วนมาตรฐานในหน้าที่คุณกำลังทำงานอยู่

เพิ่มแถวสองคอลัมน์

จากนั้น เพิ่มแถวสองคอลัมน์เข้าไป

ขนาด

เปิดหมวดหมู่ย่อย Sizing และทำการเปลี่ยนแปลงต่อไปนี้:

• ใช้ความกว้างที่กำหนดเอง: ใช่
• ความกว้างที่กำหนดเอง: 60%
• ใช้ความกว้างของรางน้ำแบบกำหนดเอง: ใช่
• ความกว้างของรางน้ำ: 1

คอลัมน์แรก โมดูลรูปภาพแรก

การจัดตำแหน่ง

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

ขนาด

ไปที่หมวดย่อย Sizing ของ Image Module นั้น ใช้ความกว้าง '89%' และเลือก Module Alignment ที่เหมาะสม

ทัศนวิสัย

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

โมดูลรูปภาพที่สองของคอลัมน์แรก

การจัดตำแหน่ง

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

ชายแดน

เลื่อนลงมาและใช้เส้นขอบต่อไปนี้:

• ใช้เส้นขอบ: ใช่
• สีเส้นขอบ: #FFFFFF
• ความกว้างของเส้นขอบ: 5px
• สไตล์เส้นขอบ: ของแข็ง

ทัศนวิสัย

สุดท้าย ไปที่แท็บขั้นสูงและปิดใช้งาน Image Module บนโทรศัพท์และแท็บเล็ต

โมดูลรูปภาพแรกคอลัมน์ที่สอง

การจัดตำแหน่ง

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

ชายแดน

เลื่อนลงมา เปิดหมวดหมู่ย่อย Border และทำการตั้งค่าต่อไปนี้:

• ใช้เส้นขอบ: ใช่
• สีเส้นขอบ: #FFFFFF
• ความกว้างของเส้นขอบ: 4px
• สไตล์เส้นขอบ: ของแข็ง

โมดูลรูปภาพที่สองของคอลัมน์ที่สอง

การจัดตำแหน่ง

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

ขนาด

จากนั้น เปิดหมวดหมู่ย่อยการปรับขนาด ใช้ความกว้าง '89%' และเลือกการจัดตำแหน่งโมดูลด้านซ้าย

ทัศนวิสัย

ปิดใช้งาน Image Module นี้บนโทรศัพท์และแท็บเล็ตด้วย

เพิ่มแถวหนึ่งคอลัมน์

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

ขนาด

ไปที่แท็บออกแบบของการตั้งค่าแถว เปิดใช้งานตัวเลือก 'ใช้ความกว้างที่กำหนดเอง' และใช้ '581px' เป็นความกว้างที่กำหนดเอง

โมดูลข้อความ

สีพื้นหลัง

เพิ่มโมดูลข้อความในแถวใหม่และเลือก 'rgba(255,255,255,0.92)' เป็นสีพื้นหลัง

การตั้งค่าข้อความ

ย้ายไปที่แท็บ ออกแบบ และทำให้การตั้งค่าต่อไปนี้นำไปใช้กับหมวดหมู่ย่อยข้อความ:

• แบบอักษรของข้อความ: Lato
• ขนาดตัวอักษรของข้อความ: 12px
• สีข้อความ: #000000
• ความสูงของบรรทัดข้อความ: 2.2em
• การวางแนวข้อความ: ศูนย์

ขนาด

จากนั้น เปิดหมวดหมู่ย่อยการปรับขนาด เพิ่ม '75%' ให้กับความกว้าง และเลือกการจัดตำแหน่งโมดูลตรงกลาง

ระยะห่าง

สุดท้าย ทำการตั้งค่าต่อไปนี้กับหมวดหมู่ย่อยการเว้นวรรค:

• ขอบบน: -580px (เดสก์ท็อป), -200 (แท็บเล็ตและโทรศัพท์)
• ระยะขอบซ้าย: – 180px (เดสก์ท็อป), 80 (แท็บเล็ต), 50 (โทรศัพท์)
• ช่องว่างบน ขวา ล่าง และซ้าย: 50px

ผลลัพธ์

เมื่อเสร็จแล้ว คุณจะสามารถเห็นผลลัพธ์ต่อไปนี้บนเดสก์ท็อป:

และต่อไปนี้บนมือถือ:

เริ่มสร้างตัวอย่างที่ห้า

ตัวอย่างสุดท้ายที่เราจะแสดงให้คุณเห็นถึงวิธีการสร้างใหม่มีดังนี้:

เพิ่มมาตราเต็มความกว้าง

เริ่มต้นด้วยการเพิ่มส่วนเต็มความกว้างในหน้าของคุณ

โมดูลรูปภาพแบบเต็มความกว้าง

ภายในส่วน Fullwidth นั้น ให้เพิ่ม Fullwidth Image Module

เพิ่มมาตราใหม่

ด้านล่างส่วนก่อนหน้า เพิ่มส่วนอื่น คราวนี้ ส่วนนี้จะต้องเป็นแบบมาตรฐานแทนที่จะเป็นขนาดเต็มความกว้าง

เพิ่มแถวสามคอลัมน์

เพิ่มแถวสามคอลัมน์ในส่วนมาตรฐานใหม่นั้น

คอลัมน์ 1, 2 และ 3 สีพื้นหลัง

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

• คอลัมน์ 1: #eaeaea
• คอลัมน์ 2: rgba(12,113,195,0.17)
• คอลัมน์ 3: rgba(131,0,233,0.09)

ขนาด

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

• ทำให้แถวนี้เต็มความกว้าง: ใช่
• ใช้ความกว้างของรางน้ำแบบกำหนดเอง: ใช่
• ความกว้างของรางน้ำ: 1

ระยะห่าง

จากนั้นเปิดหมวดหมู่ย่อยการเว้นวรรค เพิ่ม '-60px' ที่ระยะขอบด้านบน และ '50px' ที่ช่องว่างภายในด้านล่างของแต่ละคอลัมน์

โมดูลข้อความคอลัมน์แรก

สีพื้นหลัง

ดำเนินการต่อโดยเพิ่มโมดูลข้อความในคอลัมน์แรกและใช้ 'rgba(255,255,255,0.89)' เป็นสีพื้นหลัง

การตั้งค่าข้อความ

ไปที่แท็บ ออกแบบ และทำให้การตั้งค่าต่อไปนี้นำไปใช้กับหมวดหมู่ย่อยข้อความ:

• แบบอักษรของข้อความ: Lato
• ขนาดตัวอักษรของข้อความ: 12px
• สีข้อความ: #000000
• ความสูงของบรรทัดข้อความ: 2.2em
• การวางแนวข้อความ: ศูนย์

ชายแดน

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

• ใช้เส้นขอบ: ใช่
• สีเส้นขอบ: #FFFFFF
• ความกว้างของเส้นขอบ: 17px
• สไตล์เส้นขอบ: ของแข็ง

ขนาด

จากนั้น ใช้ความกว้าง '75%' และเลือกการจัดตำแหน่งโมดูลตรงกลางภายในหมวดหมู่ย่อยการปรับขนาด

ระยะห่าง

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

• ขอบบน: -300px (เดสก์ท็อป), 0px (แท็บเล็ตและโทรศัพท์)
• ด้านบน ขวา ล่าง ด้านซ้าย: 50px (เดสก์ท็อปและแท็บเล็ต) 20px (โทรศัพท์)

โคลนโมดูลข้อความสองครั้ง & วางในอีกสองคอลัมน์

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

เปลี่ยนการเว้นวรรคโมดูลข้อความคอลัมน์ที่สอง

เราจะต้องเปลี่ยนขอบด้านบนของโมดูลข้อความที่วางอยู่ภายในคอลัมน์ที่สองเป็น '-220px'

เปลี่ยนการเว้นวรรคโมดูลข้อความคอลัมน์ที่สาม

จำนวนเท่ากันสำหรับโมดูลข้อความในคอลัมน์ที่สาม แต่ค่าเป็น '-140px' แทน

ผลลัพธ์

และที่นี่คุณมีผลลัพธ์บนเดสก์ท็อป:

และบนมือถือ:

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

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

อย่าลืมสมัครรับจดหมายข่าวทางอีเมลและช่อง YouTube ของเรา เพื่อที่คุณจะได้ไม่พลาดประกาศสำคัญ เคล็ดลับที่เป็นประโยชน์ หรือ Divi freebie!

ภาพเด่นโดย Julia Tim / shutterstock.com