ทำความเข้าใจว่าโมดูล Divi Blurb มีโครงสร้างอย่างไร

เผยแพร่แล้ว: 2023-12-27

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

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

มาดำน้ำกันเถอะ!

สารบัญ
  • 1 ทำความเข้าใจว่าโมดูล Divi Blurb มีโครงสร้างอย่างไร (& คุณสามารถใช้มันเพื่ออะไร)
    • 1.1 การตั้งค่าเนื้อหา
    • 1.2 การตั้งค่าการออกแบบ
    • 1.3 การตั้งค่าขั้นสูง
  • 2 การใช้โมดูล Blurb ในการออกแบบ
    • 2.1 ดูตัวอย่าง
    • 2.2 สร้างเพจใหม่ด้วยเค้าโครงที่สร้างไว้ล่วงหน้า
    • 2.3 การสร้างเค้าโครงใหม่ด้วยโมดูล Blurb
    • 2.4 การออกแบบประกาศแจ้ง 1
    • 2.5 การออกแบบประกาศแจ้ง 2
    • 2.6 การออกแบบประกาศแจ้ง 3
    • 2.7 ผลสุดท้าย
  • 3 ความคิดสุดท้าย

ทำความเข้าใจว่าโมดูล Divi Blurb มีโครงสร้างอย่างไร (& คุณสามารถใช้มันเพื่ออะไร)

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

โมดูล Divi Blurb เพิ่มโมดูล

การตั้งค่าเนื้อหา

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

ข้อความ

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

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

รูปภาพและไอคอน

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

ไอคอนโมดูล Divi Blurb

หรือคุณสามารถแสดงภาพในการนำเสนอของคุณได้

รูปภาพโมดูล Divi Blurb

ลิงค์

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

ลิงก์โมดูล Divi Blurb

พื้นหลัง

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

พื้นหลังโมดูล Divi Blurb

การตั้งค่าการออกแบบ

ตอนนี้เรามาดูที่แท็บการออกแบบกันดีกว่า ที่นี่ คุณสามารถปรับแต่งการออกแบบทุกแง่มุมของ Blurb Module ได้

รูปภาพและไอคอน

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

การออกแบบไอคอนรูปภาพโมดูล Divi Blurb

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

เส้นขอบรูปภาพโมดูล Divi Blurb

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

เงาของกล่องรูปภาพโมดูล Divi Blurb

ข้อความ

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

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

ข้อความชื่อเรื่อง

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

ข้อความชื่อโมดูล Divi Blurb

ข้อความเนื้อหา

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

ข้อความเนื้อหาโมดูล Divi Blurb

การปรับขนาด

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

ขนาดโมดูล Divi Blurb

ระยะห่าง

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

ระยะห่างของโมดูล Divi Blurb

ชายแดน

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

ขอบโมดูล Divi Blurb

เงากล่อง

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

Divi Blurb โมดูลกล่องเงา

ตัวกรอง

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

ตัวกรองโมดูล Divi Blurb

แปลง

ที่นี่ คุณสามารถปรับขนาด แปล หมุน เอียง และกำหนดจุดกำเนิดเพื่อเปลี่ยนลักษณะที่ Blurb Module จะปรากฏในการออกแบบได้
การแปลงโมดูล Divi Blurb

แอนิเมชั่น

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

ภาพเคลื่อนไหวโมดูล Divi Blurb

ตั้งค่าขั้นสูง

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

โมดูล Divi Blurb ขั้นสูง

การใช้โมดูล Blurb ในการออกแบบ

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

ดูตัวอย่าง

นี่คือตัวอย่างสิ่งที่เราจะออกแบบ

การออกแบบประกาศแจ้ง 1

การออกแบบประกาศแจ้ง 1

การออกแบบประกาศแจ้ง 2

การออกแบบประกาศแจ้ง 2

การออกแบบประกาศแจ้ง 3

การออกแบบประกาศแจ้ง 3

สร้างเพจใหม่ด้วยเค้าโครงที่สร้างไว้ล่วงหน้า

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

เพิ่มหน้าใหม่ลงในเว็บไซต์ของคุณและตั้งชื่อ จากนั้นเลือกตัวเลือกเพื่อใช้ Divi Builder

เราจะใช้เค้าโครงที่สร้างไว้ล่วงหน้าจากไลบรารี Divi สำหรับตัวอย่างนี้ ดังนั้นให้เลือกเรียกดูเค้าโครง

ค้นหาและเลือกเค้าโครงหน้าแรกของร้านขายของเล่น

เลือกใช้เค้าโครงนี้เพื่อเพิ่มเค้าโครงให้กับเพจของคุณ

ตอนนี้เราพร้อมที่จะสร้างการออกแบบของเราแล้ว เราจะออกแบบส่วน Build, Solve และ Learn ใหม่สำหรับบทช่วยสอนนี้โดยใช้ Blurb Modules เลย์เอาต์ถูกสร้างขึ้นด้วยโมดูลรูปภาพและข้อความ แต่เราสามารถใช้โมดูล Blurb เพื่อรวมองค์ประกอบต่างๆ ให้เป็นโมดูลเดียวและจัดสไตล์เข้าด้วยกัน มาเริ่มกันเลย!

การสร้างเค้าโครงใหม่ด้วยโมดูล Blurb

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

แทรกแถว

ถัดไป เพิ่ม Blurb Module ลงในคอลัมน์แรก

เพิ่มประกาศแจ้ง

เพิ่มชื่อเรื่องและข้อความเนื้อหาบางส่วนลงในการนำเสนอ

  • หัวเรื่อง : สร้าง
  • เนื้อความ: Lorem ipsum dolor sit amet ใน nisi dolores และ atque impedit และ repellendus praesentium aut laudantium consequatur และ amet Corrupi

ประกาศแจ้งเพิ่มข้อความ

ในการตั้งค่ารูปภาพ ให้เพิ่มรูปภาพสำหรับการนำเสนอแรก

  • ภาพ: ร้านขายของเล่น-24.jpg

รูปภาพโมดูล Divi Blurb

จากนั้น ทำซ้ำโมดูล Blurb สองครั้งเพื่อสร้างโมดูล Blurb สามโมดูล จัดเรียงโมดูลใหม่เพื่อให้มีหนึ่งโมดูลในแต่ละคอลัมน์

ทำซ้ำประกาศแจ้ง

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

สำหรับคำโปรย 2:

  • หัวเรื่อง: แก้
  • ภาพ: ร้านขายของเล่น-19.jpg

สำหรับคำโปรย 3:

  • ชื่อเรื่อง: เรียนรู้
  • ภาพ: ร้านขายของเล่น-27.jpg

โมดูล Divi Blurb แก้ไขรูปภาพ

เมื่อตั้งค่าคำโปรยทั้งสามแล้ว ให้ลบแถวเดิมออก

ลบเค้าโครงเก่า

การออกแบบประกาศแจ้ง 1

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

  • รูปภาพ/ไอคอน มุมโค้งมน: 250px บนขวาและซ้าย

ไอคอนภาพประกาศแจ้ง

จากนั้น เปิดการตั้งค่าชื่อเรื่องและปรับแต่งแบบอักษรดังนี้:

  • แบบอักษรของชื่อเรื่อง: Libre Bodoni
  • น้ำหนักแบบอักษรของชื่อเรื่อง: ตัวหนา
  • ขนาดข้อความชื่อเรื่อง: เดสก์ท็อป 25px, แท็บเล็ต 20px, มือถือ 16px
  • ความสูงของบรรทัดหัวเรื่อง: 1.4em

ข้อความชื่อเรื่องประกาศแจ้ง

ในการตั้งค่าข้อความเนื้อหา ให้ตั้งค่าตัวเลือกต่อไปนี้:

  • แบบอักษรของเนื้อหา: Jost
  • สีข้อความ: rgba(0,0,0,0.58)
  • ขนาดข้อความเนื้อหา: เดสก์ท็อป 17px, แท็บเล็ต 15px, มือถือ 14px

ข้อความส่วนเนื้อหาประกาศแจ้ง

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

ประกาศแจ้งขยายสไตล์

เลือกตัวเลือกเพื่อขยายสไตล์ไปยังคำโปรยทั้งหมดทั่วทั้งแถว

ประกาศแจ้งขยายสไตล์

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

นี่คือการออกแบบที่สมบูรณ์!

ประกาศแจ้งการออกแบบ 1 เต็ม

การออกแบบประกาศแจ้ง 2

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

ไอคอนภาพประกาศแจ้ง

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

  • ภาพพื้นหลัง: toy-store-7b.png
  • การผสมผสานภาพพื้นหลัง: ภาพซ้อนทับ

ภาพพื้นหลังประกาศแจ้ง

จากนั้นตั้งค่าสีพื้นหลัง สำหรับการนำเสนอครั้งแรก เราจะเพิ่มสีน้ำเงิน

  • พื้นหลัง: RGBA(82,137,221,0.25)

สีพื้นหลังประกาศแจ้ง

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

  • สีไอคอน: #739ddd
  • การจัดแนวรูปภาพ/ไอคอน: ซ้าย

สีไอคอนประกาศแจ้ง

ในการตั้งค่าข้อความชื่อเรื่อง ให้แก้ไขสิ่งต่อไปนี้:

  • แบบอักษรของชื่อเรื่อง: Libre Bodoni
  • น้ำหนักแบบอักษรของชื่อเรื่อง: ตัวหนา
  • ขนาดข้อความชื่อเรื่อง: เดสก์ท็อป 25px, แท็บเล็ต 20px, มือถือ 16px
  • ความสูงของบรรทัดหัวเรื่อง: 1.4em

ถัดไป แก้ไขข้อความเนื้อหา

  • แบบอักษรของเนื้อหา: Jost
  • สีข้อความ: rgba(0,0,0,0.58)
  • ขนาดข้อความเนื้อหา: เดสก์ท็อป 17px, แท็บเล็ต 15px, มือถือ 14px

ข้อความส่วนเนื้อหาประกาศแจ้ง

เปิดการตั้งค่าระยะห่างและกำหนดช่องว่างภายใน:

  • ช่องว่างด้านบนและด้านล่าง: 80px
  • ช่องว่างซ้ายและขวา: 20px

ประกาศแจ้ง

สุดท้าย ให้เปิดการตั้งค่า Box Shadow และเปิดใช้งานเงาของกล่อง ตั้งค่าสีเงา

  • สีเงา: #739ddd

เงากล่องประกาศแจ้ง

ตอนนี้การออกแบบการนำเสนอเบื้องต้นเสร็จสมบูรณ์แล้ว ขยายการตั้งค่าการออกแบบไปยังส่วนอื่นๆ ของการนำเสนอ

ขยายสไตล์ประกาศแจ้ง

การปรับแต่งคำประกาศแจ้ง 2

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

ไอคอนภาพประกาศแจ้ง

จากนั้น เปิดการตั้งค่าพื้นหลังและเปลี่ยนสีพื้นหลัง

  • สีพื้นหลัง: rgba (229,167,223,0.3)

พื้นหลังประกาศแจ้ง

เปิดการตั้งค่ารูปภาพและไอคอนในแท็บการออกแบบและตั้งค่าสีไอคอน

  • สีไอคอน: #ea9ada

ไอคอนประกาศแจ้ง

สุดท้าย เปิดการตั้งค่าเงาของกล่องและเปลี่ยนสีเงา

  • สีเงา: #ea9ada

แจ้งเกิดเงา

การปรับแต่งคำประกาศแจ้ง 3

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

ไอคอนภาพประกาศแจ้ง

จากนั้น ตั้งค่าสีพื้นหลังสำหรับการนำเสนอที่สาม

  • สีพื้นหลัง: rgba (232,176,104,0.31)

พื้นหลังประกาศแจ้ง

ย้ายไปที่แท็บออกแบบและปรับแต่งสีไอคอนภายใต้รูปภาพและไอคอน

  • สีไอคอน: #e8ac5f

ไอคอนประกาศแจ้ง

สุดท้าย ปรับเปลี่ยนสีเงาของกล่อง

  • สีเงา: #e8ac5f

แจ้งเกิดเงา

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

นี่คือเค้าโครงการนำเสนอที่เสร็จสมบูรณ์

Blurb Design 2 ตัวเต็ม

การออกแบบประกาศแจ้ง 3

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

เนื้อหาประกาศแจ้ง

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

ไอคอนประกาศแจ้ง

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

  • ภาพพื้นหลัง: ร้านขายของเล่น-24.jpg
  • โหมดผสมผสานรูปภาพ: การซ้อนทับ

พื้นหลังประกาศแจ้ง

จากนั้นตั้งค่าสีพื้นหลัง

  • สีพื้นหลัง: rgba (38,67,104,0.47)

สีพื้นหลังประกาศแจ้ง

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

  • สีไอคอน: #FFFFFF

สีไอคอนประกาศแจ้ง

ในการตั้งค่าแบบอักษรของชื่อเรื่อง ให้ปรับแต่งดังต่อไปนี้:

  • แบบอักษรของชื่อเรื่อง: Libre Bodoni
  • น้ำหนักแบบอักษรของชื่อเรื่อง: ตัวหนา
  • การจัดตำแหน่งข้อความชื่อเรื่อง: กึ่งกลาง
  • สีข้อความของชื่อเรื่อง: #FFFFFF
  • ขนาดข้อความของชื่อเรื่อง: เดสก์ท็อป 75px, แท็บเล็ต 50px, อุปกรณ์เคลื่อนที่ 40px
  • ความสูงของบรรทัดหัวเรื่อง: 1.4em
  • ชื่อเรื่องเงาข้อความ: สไตล์ 3

ข้อความชื่อเรื่องประกาศแจ้ง

จากนั้น ปรับแต่งช่องว่างภายในในการตั้งค่าระยะห่าง

  • ขยายด้านบนและด้านล่าง: 70px
  • ระยะห่างจากขอบซ้ายและขวา: 30px

การเว้นวรรคประกาศแจ้ง

สุดท้าย เปิดตัวเลือกเส้นขอบและเพิ่มมุมโค้งมนให้กับข้อความนำเสนอ

  • มุมโค้งมน: 10px

แจ้งเกิดชายแดน

ตอนนี้การออกแบบการนำเสนอเบื้องต้นเสร็จสมบูรณ์แล้ว ขยายการออกแบบไปยังคำโปรยอีกสองคำ

ขยายสไตล์ประกาศแจ้ง

การปรับแต่งคำประกาศแจ้ง 2

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

เนื้อหาประกาศแจ้ง 2

จากนั้น เปิดใช้งานไอคอน และเลือกไอคอนตัวต่อ

ไอคอนประกาศแจ้ง 2

เปลี่ยนภาพพื้นหลังและตั้งค่าสีพื้นหลัง

  • สีพื้นหลัง: RGBA(188,45,105,0.3)
  • ภาพพื้นหลัง: ร้านขายของเล่น-19.jpg

ประกาศแจ้ง 2 พื้นหลัง

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

  • สีไอคอน: #FFFFFF

สีไอคอนประกาศแจ้ง 2

การปรับแต่งคำประกาศแจ้ง 3

เช่นเดียวกับที่เราทำกับการนำเสนอ 2 ให้ลบข้อความเนื้อหาออกจากการนำเสนอและเปิดใช้งานไอคอน สำหรับการนำเสนอครั้งที่ 3 ให้เลือกไอคอนรูปหลอดไฟ

ไอคอนประกาศแจ้ง 3

ตั้งค่าภาพพื้นหลังสำหรับการนำเสนอและเปลี่ยนสีพื้นหลังเป็นสีส้ม

  • สีพื้นหลัง:rgba(242,101,36,0.57)
  • ภาพพื้นหลัง: ร้านขายของเล่น-27.jpg

ประกาศแจ้ง 3 พื้นหลัง

สุดท้าย ตั้งค่าสีไอคอนในแท็บออกแบบ

  • สีไอคอน: #FFFFFF

สีไอคอนประกาศแจ้ง 3

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

นี่คือการออกแบบเค้าโครงที่ 3 ที่เสร็จสมบูรณ์

Blurb Design 3 ตัวเต็ม

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

เรามาดูการออกแบบการนำเสนอขั้นสุดท้ายอีกครั้ง

การออกแบบประกาศแจ้ง 1

การออกแบบประกาศแจ้ง 1

การออกแบบประกาศแจ้ง 2

การออกแบบประกาศแจ้ง 2

การออกแบบประกาศแจ้ง 3

การออกแบบประกาศแจ้ง 3

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

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

คุณใช้ Blurb Module ในการออกแบบของคุณเองอย่างไร? แจ้งให้เราทราบในความคิดเห็น!