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

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

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

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

แอบมอง

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

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

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

โดดกันเลย

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

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

สำหรับบทช่วยสอนของเรา เราจะใช้เลย์เอาต์ที่สร้างไว้ล่วงหน้าจากไลบรารี Divi สำหรับการออกแบบนี้ เราจะใช้หน้า Landing Page ร้านไอศกรีมจากแพ็กเลย์เอาต์ร้านไอศกรีม

สร้างหน้าใหม่ เพิ่มชื่อ แล้วเลือกตัวเลือกเพื่อใช้ Divi Builder

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

ค้นหาและเลือกเค้าโครงหน้า Landing Page ร้านไอศกรีม

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

ตอนนี้เราพร้อมที่จะสร้างการออกแบบของเราแล้ว

การปรับเปลี่ยนเค้าโครงสำหรับรูปแบบพื้นหลังและมาสก์

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

การตั้งค่าแถว

เปิดการตั้งค่าแถว จากนั้นเลือกออกแบบ

ภายใต้การปรับขนาด ให้ปรับความสูงของคอลัมน์ให้เท่ากัน

• ปรับความสูงของคอลัมน์ให้เท่ากัน: ใช่

ภายใต้การเว้นวรรค ให้ถอดช่องว่างภายในด้านบนออกเพื่อนำกรวยไปที่ด้านบนของส่วน

• ช่องว่างภายในด้านบน: 0px

คอลัมน์ 1 การตั้งค่า

ภายใต้แท็บเนื้อหาสำหรับการตั้งค่าแถว ให้เลือกการตั้งค่าคอลัมน์ 1 ภายใต้ พื้นหลัง ให้ลบพื้นหลังสีส้ม

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

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

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

margin:auto;

การตั้งค่ามาตรา

เปิดการตั้งค่าส่วน ภายใต้ การออกแบบ เลือก การเติม ปรับช่องว่างภายในส่วนเพื่อให้กรวยด้านบนจัดชิดกับด้านบนสุดของหน้า

• ช่องว่างภายใน: 0px

การเพิ่มรูปแบบพื้นหลังและมาสก์ให้กับส่วน CTA

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

การตั้งค่าสีพื้นหลัง รูปแบบ และมาสก์

ไปที่การตั้งค่าพื้นหลังของส่วน

ใต้แท็บสี ให้เพิ่มพื้นหลังสีส้ม

• สี: #FFA256

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

• รูปร่าง: ลูกปา
• สี: #FF7D14

ตอนนี้ขอเพิ่มหน้ากาก เลือกแท็บมาสก์ จากนั้นเพิ่มการตั้งค่าดังนี้:

• รูปร่าง: Corner Blob
• หน้ากากสี: #FFFFFF
• การแปลงหน้ากาก: แนวนอน
• อัตราส่วนภาพของหน้ากาก: ภูมิทัศน์
• ขนาดหน้ากาก: ปกปิด

การปรับการออกแบบ

เมื่อพื้นหลังของเราเข้าที่แล้ว มาทำการปรับเปลี่ยนการออกแบบขั้นสุดท้ายกัน

เปิดการตั้งค่าปุ่ม "ซื้อ" และเปลี่ยนการจัดตำแหน่งภายใต้แท็บออกแบบ

• การจัดตำแหน่งปุ่ม: ซ้าย

เปลี่ยนสีพื้นหลังสถานะโฮเวอร์สำหรับปุ่ม "ซื้อ" เพื่อให้โดดเด่นกว่าพื้นหลังสีส้ม

• พื้นหลังปุ่มเมื่อวางเมาส์เหนือ: #FF7D14

นอกจากนี้เรายังจะปรับเค้าโครงแถวเพื่อเพิ่มช่องว่างระหว่างพื้นหลังสีส้มกับส่วน "รสชาติแห่งเดือน" ทางด้านขวาอีกด้วย เปลี่ยนเค้าโครงจาก 1:1 เป็น 3:2

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

ทำให้ส่วน CTA ตอบสนอง

เมื่อมีการดูส่วน CTA ของเราบนโทรศัพท์หรือแท็บเล็ต เนื้อหาในคอลัมน์ 2 จะซ้อนอยู่ใต้คอลัมน์ 1 ซึ่งอาจทำให้เกิดปัญหาด้านความสามารถในการอ่านในการออกแบบของเรา มาทำการปรับเปลี่ยนเพื่อเพิ่มประสิทธิภาพเนื้อหาและการออกแบบของเราสำหรับหน้าจอขนาดเล็กโดยใช้การตั้งค่าการตอบสนองในตัวของ Divi

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

• เปลี่ยนข้อความ "Orange Chocolate" เป็น H3

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

• H2 (โทรศัพท์และแท็บเล็ต) สีข้อความ: #000000
• H2 (โทรศัพท์และแท็บเล็ต) ขนาดข้อความ: 30px
• H3 (โทรศัพท์และแท็บเล็ต) สีข้อความ: #000000
• H4 (โทรศัพท์และแท็บเล็ต) สีข้อความ: #000000

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

• ปิดการใช้งานบน: โทรศัพท์และแท็บเล็ต

ถัดไป เปิดการตั้งค่าแถว จากนั้นเปิดการตั้งค่าคอลัมน์ 1 ลบช่องว่างภายในด้านขวาและด้านซ้าย

• ช่องว่างภายในด้านขวา: 0px
• ช่องว่างภายในด้านซ้าย: 0px

ไปที่การตั้งค่าส่วน จากนั้นพื้นหลัง จากนั้นแก้ไขการตั้งค่ามาสก์

• การแปลงหน้ากาก: กลับด้าน
• อัตราส่วนภาพของหน้ากาก: แนวตั้ง

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

ผลสุดท้าย

มาดูผลลัพธ์สุดท้ายกัน

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

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

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