วิธีสร้างบทส่วนโดยใช้ตัวเลือกการออกแบบใหม่ของ Divi

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

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

ผลลัพธ์

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

รูปแบบบทของมาตรา #1

มาตรา รูปแบบของบท #2

ส่วน บท ลักษณะ #3

ส่วน บท ลักษณะ #4

วิธีสร้างบทส่วนโดยใช้ตัวเลือกการออกแบบใหม่ของ Divi

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

รูปแบบบทของมาตรา #1

ตัวเลือกแถว

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

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

โมดูลแบ่ง

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

ไปที่แท็บ Design และใช้ '#000000' เป็นสีตัวแบ่งของคุณ

จากนั้น เปิดหมวดหมู่ย่อยของสไตล์แล้วเลือก 'จุด' เป็นรูปแบบตัวแบ่ง และ 'บนสุด' เป็นตำแหน่งตัวแบ่ง

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

• น้ำหนักตัวแบ่ง: 3px
• ส่วนสูง: 23px
• ความกว้าง: 62%
• การจัดตำแหน่งโมดูล: ซ้าย

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

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

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

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

• แบบอักษรของข้อความ: Happy Monkey
• ขนาดตัวอักษรของข้อความ: 53 (เดสก์ท็อปและแท็บเล็ต), 25 (โทรศัพท์)
• สีข้อความ: #000000
• ความสูงของบรรทัดข้อความ: 1em
• การวางแนวข้อความ: ศูนย์

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

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

• ขอบบน: -40px
• ช่องว่างภายในด้านบน: 40px
• ช่องว่างภายในด้านขวา: 50px
• ช่องว่างภายในด้านล่าง: 40px
• ช่องว่างภายในด้านซ้าย: 50px

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

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

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

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

สุดท้าย เพิ่มระยะขอบบนเป็น '-15px' ด้วย

โมดูลข้อความที่สาม

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

• แบบอักษรของข้อความ: Arimo
• รูปแบบตัวอักษรของข้อความ: ตัวหนา
• ขนาดตัวอักษรของข้อความ: 19px
• สีข้อความ: #000000
• ความสูงของบรรทัดข้อความ: 1em
• การวางแนวข้อความ: ศูนย์

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

สิ่งสุดท้ายที่คุณต้องทำสำหรับบทของส่วนนี้คือการเพิ่มระยะขอบบนเป็น '-20px'

มาตรา รูปแบบของบท #2

ตัวเลือกแถว

ตัวอย่างที่สองจะอยู่ทางด้านขวาของหน้าจอ เพิ่มแถวสองคอลัมน์อีกครั้ง แต่เลือกการจัดแนวแถวที่ถูกต้องแทน

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

โมดูลแบ่ง

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

เราจะใช้พื้นหลังไล่ระดับต่อไปนี้สำหรับตัวแบ่ง:

• สีแรก: rgba(132,132,132,0.61)
• สีที่สอง: rgba(224,43,32,0.86)
• ประเภทการไล่ระดับสี: เชิงเส้น
• ทิศทางการไล่ระดับสี: 180deg
• ตำแหน่งเริ่มต้น: 43%
• ตำแหน่งสุดท้าย: 100%

ไปที่แท็บออกแบบและเลือก 'rgba(0,0,0,0.26)' เป็นสีตัวแบ่ง

ถัดไป ใช้ 'ทึบ' เป็นลักษณะตัวแบ่ง และ 'บนสุด' เป็นตำแหน่งตัวแบ่ง

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

• น้ำหนักตัวแบ่ง: 3px
• ส่วนสูง: 11px
• ความกว้าง: 68%
• การจัดตำแหน่งโมดูล: ขวา

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

โมดูลข้อความแรกมีการตั้งค่าประเภทย่อยข้อความต่อไปนี้:

• แบบอักษรของข้อความ: Cantata One
• ขนาดตัวอักษรของข้อความ: 100px
• สีข้อความ: #000000
• ความสูงของบรรทัดข้อความ: 1.7em
• การวางแนวข้อความ: ขวา

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

• ขอบบน: -95px
• ช่องว่างภายในด้านบน: 40px
• ช่องว่างภายในด้านขวา: 50px
• ช่องว่างภายในด้านล่าง: 40px
• ช่องว่างภายในด้านซ้าย: 50px

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

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

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

ถัดไป เพิ่มระยะขอบบนเป็น '-50px'

โมดูลข้อความที่สาม

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

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

สุดท้าย เพิ่มระยะขอบบนเป็น '-30px'

ส่วน บท ลักษณะ #3

ตัวเลือกแถว

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

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

ไปที่แท็บออกแบบแล้วเลือกการจัดตำแหน่งแถวด้านซ้าย

อีกครั้ง เราจะใช้ '0px' สำหรับระยะขอบด้านบน ด้านขวา ด้านล่าง และด้านซ้าย

โมดูลแบ่ง

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

เปิดหมวดหมู่ย่อย พื้นหลัง และใช้พื้นหลังไล่ระดับสีต่อไปนี้:

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

เปิดแท็บ Design แล้วเลือก '#000000' เป็นสีตัวแบ่ง

ภายในหมวดหมู่ย่อยของสไตล์ ให้ใช้ 'ทึบ' เป็นสไตล์ตัวแบ่ง และ 'บนสุด' เป็นตำแหน่งตัวแบ่ง

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

• น้ำหนักตัวแบ่ง: 6px
• ส่วนสูง: 100px
• ความกว้าง: 70%
• การจัดตำแหน่งโมดูล: ซ้าย

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

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

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

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

• แบบอักษรของข้อความ: Poiret One
• รูปแบบตัวอักษรของข้อความ: ตัวหนา
• ขนาดตัวอักษรของข้อความ: 69px
• สีข้อความ: #000000
• ความสูงของบรรทัดข้อความ: 1.7em
• การวางแนวข้อความ: ศูนย์

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

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

• ขอบบน: 124px
• ช่องว่างภายในด้านบน: 60px
• ช่องว่างภายในด้านล่าง: 150px
• ช่องว่างภายในด้านซ้าย: 50px

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

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

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

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

สุดท้าย เพิ่มระยะขอบบนเป็น '-150px'

โมดูลข้อความที่สาม

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

• แบบอักษรของข้อความ: Arimo
• รูปแบบตัวอักษรของข้อความ: ตัวหนา
• ขนาดตัวอักษรของข้อความ: 20px
• สีข้อความ: #000000
• ความสูงของบรรทัดข้อความ: 1em
• การวางแนวข้อความ: ศูนย์

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

สุดท้าย เลือกระยะขอบด้านบน '-20px' และช่องว่างภายในด้านล่าง '50px'

ส่วน บท ลักษณะ #4

ตัวเลือกแถว

สำหรับตัวอย่างสุดท้าย เราจะใช้การจัดแนวแถวที่ถูกต้องอีกครั้ง

จากนั้น เปิดหมวดหมู่ย่อย Spacing และกำหนด '0px' ให้กับช่องว่างด้านบน ด้านขวา ด้านล่าง และด้านซ้าย

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

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

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

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

• แบบอักษรของข้อความ: Cantata One
• ขนาดตัวอักษรของข้อความ: 220 (เดสก์ท็อปและแท็บเล็ต), 100px (โทรศัพท์)
• สีข้อความ: #f2f2f2 (ตรงกับสีพื้นหลังของส่วน)
• ความสูงของบรรทัดข้อความ: 1.7em
• การวางแนวข้อความ: ขวา

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

สุดท้าย ใช้ช่องว่างภายในแบบกำหนดเองต่อไปนี้:

• ด้านบน: 60px
• ขวา: 50px
• ด้านล่าง: 60px
• ซ้าย: 50px

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

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

• แบบอักษรของข้อความ: Arimo
• ขนาดตัวอักษรของข้อความ: 20px
• สีข้อความ: #000000
• ความสูงของบรรทัดข้อความ: 1em
• การวางแนวข้อความ: ขวา

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

สุดท้าย เพิ่ม '-130px' ที่ระยะขอบด้านบน

โมดูลข้อความที่สาม

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

• แบบอักษรของข้อความ: สคริปต์เต้นรำ
• ขนาดตัวอักษรของข้อความ: 45px
• สีข้อความ: #000000
• ความสูงของบรรทัดข้อความ: 1em
• การวางแนวข้อความ: ขวา

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

สุดท้ายแต่ไม่ท้ายสุด เลือกช่องว่างภายในด้านบน '-30px' เท่านี้ก็เรียบร้อย!

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

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

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

ภาพเด่นโดย Kwok Design / shutterstock.com