วิธีการสร้างสรรค์ด้วยพื้นหลังไอคอน Blurb ของคุณใน Divi

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

ไปกันเถอะ

ดูตัวอย่าง

ก่อนที่เราจะดำดิ่งสู่บทช่วยสอน เรามาดูตัวอย่างสั้นๆ เกี่ยวกับผลลัพธ์ของทั้งสามตัวอย่างในขนาดหน้าจอต่างๆ กัน

ตัวอย่าง #1

เดสก์ทอป

มือถือ

ตัวอย่าง #2

เดสก์ทอป

มือถือ

ตัวอย่าง #3

เดสก์ทอป

มือถือ

ดาวน์โหลดตัวอย่างพื้นหลังไอคอน Blurb ฟรี

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

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

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

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

ดาวน์โหลด

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

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

ขั้นตอนทั่วไป

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

พื้นหลัง

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

• สีพื้นหลัง: #f7f7f7

ระยะห่าง

เพิ่มส่วนเสริมด้านบนและด้านล่างแบบกำหนดเองให้กับส่วนด้วย

• ช่องว่างด้านบนและด้านล่าง: 120px

เพิ่มแถวใหม่

โครงสร้างคอลัมน์

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

ขนาด

ก่อนเพิ่มโมดูลใดๆ ให้ปรับขนาดของแถว

• ความกว้าง: 100%
• ความกว้างสูงสุด: 100%

ระยะห่าง

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

• ช่องว่างภายในด้านบน: 8vw
• แผ่นรองด้านล่าง: 15vw
• ช่องว่างภายในซ้ายและขวา: 12vw

คอลัมน์ 1

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

พื้นหลัง

ขั้นแรก เพิ่มพื้นหลังสีขาว

• สีพื้นหลัง: ขาว #ffffff

ชายแดน

จากนั้นเพิ่มรัศมีเส้นขอบ

• มุมโค้งมน: 2vw ทั้งสี่มุม

กล่องเงา

สุดท้ายเพิ่มกล่องเงา

• กล่องเงา: ตัวเลือกแรก
• ความชัดของกล่อง-เงาเบลอ: 47px

โคลนแถวสองครั้ง

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

สร้างตัวอย่างใหม่ #1

เพิ่มโมดูล Blurb ลงในคอลัมน์ 1

ลบเนื้อหาเริ่มต้น

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

เลือกไอคอน

จากนั้นเลือกไอคอนแทนรูปภาพ

• ไอคอน: ลิงค์

พื้นหลัง

เพิ่มสีพื้นหลังสีดำให้กับโมดูลประกาศ

• สีพื้นหลัง: ดำ #000000

การตั้งค่าไอคอน

จากนั้น เปลี่ยนการตั้งค่าไอคอน

• สีไอคอน: Yellow #edf000
• ตำแหน่งไอคอน: Top
• ขนาดตัวอักษรของไอคอน:
  • เดสก์ท็อป: 3vw
  • แท็บเล็ต: 11vw
  • โทรศัพท์: 13vw

ขนาด

ดำเนินการต่อโดยปรับขนาดของโมดูล

• ความกว้างของเนื้อหา: 100%
• ความกว้าง:
  • เดสก์ท็อป: 11vw
  • แท็บเล็ต: 19vw
  • โทรศัพท์: 22vw

ระยะห่าง

เพิ่มค่าการเว้นวรรคด้วย

• ขอบบน: -5vw
• ระยะขอบล่าง: 0vw
• ระยะขอบซ้าย: -1vw
• Padding ด้านบนและ Padding ด้านล่าง: 4vw

ชายแดน

หากต้องการให้ไอคอนมีรูปร่างที่ไม่ซ้ำใคร ให้เพิ่มรัศมีของเส้นขอบให้กับแต่ละมุม ยกเว้นมุมซ้ายล่าง

• มุมโค้งมน: 50vw, 0vw ที่มุมล่างซ้าย

กล่องเงา

สุดท้ายเพิ่มเงาของกล่อง

• กล่องเงา: ตัวเลือกแรก
• ความชัดของกล่อง-เงาเบลอ: 50px

CSS ที่กำหนดเอง

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

• รูปภาพประกาศ: ขอบล่าง: 0px;

margin-bottom: 0px;

เพิ่มโมดูลข้อความลงในคอลัมน์ 1

เพิ่มเนื้อหา H3

ใต้ไอคอน เพิ่มโมดูลข้อความที่มีเนื้อหา H3 ที่คุณเลือก

พื้นหลัง

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

• พื้นหลัง: ไล่โทนสี
• สีที่หนึ่ง: โปร่งใส
• สีที่สอง: สีเหลือง #edf000
• ทิศทางการไล่ระดับสี: 180 องศา
• ตำแหน่งเริ่มต้นและสิ้นสุด: 74%

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

จากนั้นจัดรูปแบบข้อความ H3

• ระดับหัวเรื่องข้อความ: H3
• แบบอักษร H3: Josefin Sans
• การจัดตำแหน่ง H3: ศูนย์
• H3 Font Color: ดำ #oooooo
• ขนาดข้อความ H3:
  • เดสก์ท็อป: 2.4vw
  • แท็บเล็ต: 3.4vw
  • โทรศัพท์: 4.8vw
• ระยะห่างระหว่างตัวอักษร H3: 0em

ขนาด

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

• ความกว้าง:
  • แท็บเล็ต: 50%
  • โทรศัพท์: 60%

ระยะห่าง

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

• ระยะขอบซ้ายและขวา: 5vw
• ช่องว่างภายในด้านบน: 1vw

แปลง

สุดท้าย หมุนโมดูลด้วยตัวเลือกการแปลง

• แปลงแปล:
  • แกน x: -20vw
  • แกน y: 13vw
• Transform Rotate: ตัวเลือกแรก 280 องศา

เพิ่มโมดูลการเรียกร้องให้ดำเนินการในคอลัมน์ 1

ลบเนื้อหาชื่อเริ่มต้น เพิ่มปุ่มและเนื้อหาข้อความ

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

เพิ่มลิงค์

เพิ่มลิงค์ที่เกี่ยวข้องให้กับปุ่ม

พื้นหลัง

ตรวจสอบให้แน่ใจว่าพื้นหลังไม่มีสี

เนื้อความ

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

• แบบอักษรของร่างกาย: ข้อความสีแดงเข้ม
• การจัดตำแหน่งข้อความเนื้อหา: ซ้าย
• สีตัวหนังสือ: เทาเข้ม #666666
• ขนาดข้อความเนื้อหา:
  • เดสก์ท็อป: 1.2vw
  • แท็บเล็ต: 2.6vw
  • โทรศัพท์: 3.1vw
• ความสูงของเส้นร่างกาย: 1.8em

ปุ่ม

ปรับเปลี่ยนรูปแบบปุ่มด้วย

• ขนาดข้อความของปุ่ม:
  • เดสก์ท็อป: 1vw
  • แท็บเล็ต: 2vw
  • โทรศัพท์: 3vw
• สีข้อความของปุ่ม: เทาเข้มมาก #3f3f3f
• สีของขอบปุ่ม: เทาเข้มมาก #3f3f3f
• แบบอักษรของปุ่ม: Josefin Sans
• ระยะขอบของปุ่ม: 3vw
• ปุ่ม Padding บนและล่าง: 1vw
• ปุ่ม Padding ซ้ายและขวา: 3vw

ระยะห่าง

ตั้งค่าโมดูลให้เสร็จสมบูรณ์โดยเพิ่มช่องว่างภายในด้านซ้ายและขวา

• ช่องว่างภายในซ้ายและขวา: 7vw

ลบคอลัมน์ที่สองและโคลนคอลัมน์ 1

ปรับการตั้งค่าในคอลัมน์ 2

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

โมดูล Blurb

เริ่มต้นด้วยการเปลี่ยนสีไอคอนของโมดูลประกาศ

• ไอคอนสี: Aqua #00ffd4

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

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

• สีพื้นหลัง: Aqua #00ffd4
• เปลี่ยนเนื้อหา

สร้างตัวอย่างใหม่ #2

เพิ่มโมดูล Blurb ลงในคอลัมน์ 1

ลบเนื้อหาเริ่มต้น

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

เลือกไอคอน

จากนั้นเลือกไอคอน

พื้นหลัง

ตอนนี้ เพิ่มสีพื้นหลังสีเหลือง

• สีพื้นหลัง: สีเหลือง #edf000

ไอคอน

ดำเนินการต่อโดยแก้ไขการตั้งค่าไอคอนในแท็บการออกแบบ

• ไอคอนสี: ขาว #ffffff
• ตำแหน่งไอคอน: Top
• ขนาดตัวอักษรของไอคอน:
  • เดสก์ท็อป: 3vw
  • แท็บเล็ต: 11vw
  • โทรศัพท์: 12vw

ขนาด

เมื่อจัดรูปแบบสีและพื้นหลังแล้ว ให้ปรับขนาดของโมดูล

• ความกว้างของเนื้อหา: 100%

ระยะห่าง

แก้ไขการตั้งค่าระยะห่างด้วย

• ระยะขอบล่าง: 0vw
• ระยะขอบซ้ายและขวา: 3vw
• ช่องว่างภายในด้านบนและด้านล่าง: 2vw

ชายแดน

เพิ่มรัศมีเส้นขอบให้กับแต่ละมุมถัดไป

• มุมโค้งมน: 2vw ทั้งสี่มุม

กล่องเงา

ออกแบบโมดูลให้สมบูรณ์โดยเพิ่มเงาของกล่องที่ละเอียดอ่อน

• กล่องเงา: ตัวเลือกแรก

ลบเงากล่องและสีพื้นหลังของคอลัมน์ 1

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

CSS ที่กำหนดเอง

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

• รูปภาพประกาศ: ขอบล่าง: 0px;

margin-bottom: 0px;

เพิ่มโมดูลการเรียกร้องให้ดำเนินการในคอลัมน์ 1

เพิ่มเนื้อหาชื่อเรื่อง เนื้อหาเนื้อหา และเนื้อหาปุ่ม

ด้านล่างโมดูลการนำเสนอ ให้เพิ่มโมดูลการเรียกร้องให้ดำเนินการและแทรกเนื้อหาบางส่วนที่คุณเลือก

เพิ่มลิงค์

เพิ่มลิงก์ไปยังปุ่มถัดไป

พื้นหลัง

ดำเนินการต่อโดยเพิ่มพื้นหลังสีขาว

• สีพื้นหลัง: ขาว #ffffff

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

ในแท็บออกแบบ กำหนดสไตล์ข้อความชื่อ H3

• ระดับหัวเรื่อง: H3
• แบบอักษร H3: Josefin Sans
• สีแบบอักษร H3: เทาเข้มมาก #3f3f3f
• ขนาด H3:
  • เดสก์ท็อป: 2vw
  • แท็บเล็ต: 4vw
  • โทรศัพท์: 6vw
• ความสูงของเส้น H3: 2.3em

เนื้อความ

จากนั้น จัดรูปแบบข้อความเนื้อหา

• แบบอักษรของร่างกาย: ข้อความสีแดงเข้ม
• การจัดตำแหน่งข้อความเนื้อหา: ซ้าย
• สีตัวหนังสือ: เทาเข้ม #666666
• ขนาดข้อความเนื้อหา:
  • เดสก์ท็อป: 1.1vw
  • แท็บเล็ต: 2.2vw
  • โทรศัพท์: 3.1vw
• ความสูงของเส้นร่างกาย: 1.8em

ปุ่ม

ไปที่การตั้งค่าปุ่มและจัดรูปแบบปุ่มดังนี้:

• ขนาดข้อความของปุ่ม:
  • เดสก์ท็อป: 1vw
  • แท็บเล็ต: 2vw
  • โทรศัพท์: 3vw
• สีข้อความของปุ่ม: เทาเข้มมาก #3f3f3f
• แบบอักษรของปุ่ม: Josefin Sans
• ความกว้างของขอบปุ่ม: 2-x
• สีของขอบปุ่ม: เทาเข้มมาก #3f3f3f
• ปุ่มบนและล่างขอบ: 3vw
• ปุ่ม Padding บนและล่าง: 1vw
• ปุ่ม Padding ซ้ายและขวา: 3vw

ระยะห่าง

ตอนนี้ปรับระยะห่าง

• ระยะขอบล่าง: -1vw
• แผ่นรองด้านบน: 6vw
• ช่องว่างภายในซ้ายและขวา: 7vw

ชายแดน

จากนั้นปัดเศษมุมในการตั้งค่าเส้นขอบ

• มุมโค้งมน: 2vw

กล่องเงา

สุดท้ายเพิ่มเงาของกล่อง

• กล่องเงา: ตัวเลือกแรก
• ความชัดของกล่อง-เงาเบลอ: 50px

ลบคอลัมน์ที่สองและโคลนคอลัมน์ 1

ปรับการตั้งค่าในคอลัมน์ 2

คล้ายกับตัวอย่างก่อนหน้านี้ ไปที่การตั้งค่าแถวและลบคอลัมน์ที่สอง ทำซ้ำคอลัมน์แรกและปรับการตั้งค่าบางอย่าง

โมดูล Blurb

เปลี่ยนพื้นหลังของโมดูลการนำเสนอจากสีเหลืองเป็นสีน้ำ

• สีไอคอนพื้นหลัง: Aqua #00ffd4

โมดูลเรียกร้องให้ดำเนินการ

เปลี่ยนเนื้อหาและลิงก์ของโมดูลการเรียกร้องให้ดำเนินการด้วย

• เปลี่ยนเนื้อหาชื่อเรื่อง
• เปลี่ยนลิงค์

สร้างตัวอย่างใหม่ #3

เพิ่มโมดูล Blurb ลงในคอลัมน์ 1

ลบเนื้อหาเริ่มต้น

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

เลือกไอคอน

เลือกไอคอน

พื้นหลัง

เพิ่มพื้นหลังสีเหลืองสดใสให้กับโมดูล

• สีพื้นหลัง: สีเหลือง #f7f426

ไอคอน

ทำให้ไอคอนเป็นสีดำและปรับตำแหน่ง

• ไอคอนสี: Black #000000
• ตำแหน่งไอคอน: ซ้าย
• ขนาดตัวอักษรของไอคอน:
  • เดสก์ท็อป: 3vw
  • แท็บเล็ต + โทรศัพท์: 8vw

ขนาด

ดำเนินการต่อโดยแก้ไขความกว้างและความสูงของโมดูล

• ความกว้างของเนื้อหา: 100%
• ส่วนสูง: 23vw

ระยะห่าง

นอกจากนี้ ให้ปรับการตั้งค่าระยะห่าง

• ระยะขอบซ้าย: 3vw
• ระยะขอบขวา: 25vw
• ช่องว่างภายในด้านบน: 2vw
• ช่องว่างภายในด้านซ้าย: 1vw

ชายแดน

เพิ่มรัศมีเส้นขอบด้วย

• มุมโค้งมน: 2vw ทุกมุม

กล่องเงา

จากนั้นเพิ่มเงาของกล่อง

• กล่องเงา: ตัวเลือกแรก

แปลง

สุดท้าย เปลี่ยนตำแหน่งโมดูลโดยใช้ค่าการแปลการแปลงแบบกำหนดเอง

• แกน x: -6vw
• แกน y: 1vw

ลบสีพื้นหลังและเงากล่องออกจากคอลัมน์ 1

ไปที่การตั้งค่าคอลัมน์ 1 และลบสีพื้นหลังและเงาของกล่อง

เพิ่มโมดูลการเรียกร้องให้ดำเนินการในคอลัมน์ 1

เพิ่มเนื้อหาชื่อเรื่อง เนื้อหา และปุ่ม

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

เพิ่มลิงค์

จากนั้นเพิ่มลิงก์ไปยังปุ่ม

พื้นหลัง

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

• สีพื้นหลัง : ดำ #oooooo

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

ปรับการตั้งค่าข้อความ H3 ต่อไป

• ระดับหัวเรื่อง: H3
• แบบอักษร H3: Josefin Sans
• สีแบบอักษร H3: สีเหลืองสดใส #f7f426
• ขนาดตัวอักษร H3:
  • เดสก์ท็อป: 2vw
  • แท็บเล็ต: 4vw
  • โทรศัพท์: 6vw
• ความสูงของเส้น H3: 2.3em

เนื้อความ

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

• แบบอักษรของร่างกาย: ข้อความสีแดงเข้ม
• การจัดตำแหน่งข้อความเนื้อหา: ซ้าย
• สีข้อความ: ขาว #000000
• ขนาดข้อความเนื้อหา:
  • เดสก์ท็อป: 1.2vw
  • แท็บเล็ต: 2.2vw
  • โทรศัพท์: 3.1vw
• ความสูงของเส้นร่างกาย: 1.8em

ปุ่ม

จากนั้นจัดรูปแบบปุ่มดังนี้

• ขนาดข้อความของปุ่ม:
  • เดสก์ท็อป: 1vw
  • แท็บเล็ต: 2vw
  • โทรศัพท์: 3vw
• สีข้อความของปุ่ม: Aqua #00ffd4
• สีของขอบปุ่ม: Aqua #00ffd4
• แบบอักษรของปุ่ม: Josefin Sans
• ปุ่มบนและล่างระยะขอบ: 3vw
• ปุ่ม Padding บนและล่าง: 1vw
• ปุ่ม Padding ซ้ายและขวา: 3vw

ขนาด

ไปที่การตั้งค่าการปรับขนาดและทำการเปลี่ยนแปลงบางอย่าง

• ความกว้าง: 90%
• การจัดตำแหน่งโมดูล: ศูนย์

ระยะห่าง

แก้ไขการตั้งค่าระยะห่างด้วย

• ขอบบน: -9vw
• ช่องว่างภายในด้านบน: 5vw
• ช่องว่างภายในซ้ายและขวา: 7vw

ชายแดน

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

• มุมโค้งมน: 2vw

กล่องเงา

เรากำลังใช้เงาของกล่องที่ละเอียดอ่อนเช่นกัน

• Box Shadow: ตัวเลือกแรก

แปลงแปล

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

• แกน y: -18vw

ลบคอลัมน์ที่สองและโคลนคอลัมน์ 1

ปรับการตั้งค่าในคอลัมน์ 2

เมื่อคอลัมน์แรกพร้อมแล้ว เราจะลบคอลัมน์ที่สองและทำซ้ำคอลัมน์แรก หลังจากนั้น เราจะปรับเนื้อหาและรายละเอียดสีบางส่วน

โมดูล Blurb

ในการตั้งค่าโมดูลการนำเสนอ ให้เปลี่ยนพื้นหลังจากสีเหลืองเป็นสีน้ำ

• สีไอคอนพื้นหลัง: Aqua #00ffd4

โมดูลเรียกร้องให้ดำเนินการ

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

• ชื่อข้อความสี: Aqua #00ffd4
• เนื้อหา
• สีของปุ่ม: #00ffd4

ดูตัวอย่าง

เมื่อเราได้ทำตามขั้นตอนทั้งหมดแล้ว มาดูผลลัพธ์ในขั้นสุดท้ายในหน้าจอขนาดต่างๆ

ตัวอย่าง #1

เดสก์ทอป

มือถือ

ตัวอย่าง #2

เดสก์ทอป

มือถือ

ตัวอย่าง #3

เดสก์ทอป

มือถือ

บทสรุป

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