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

Let 's go

ตัวอย่าง

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

การออกแบบ Blurb Diviเริ่มสร้างใหม่กันเถอะ!

เพิ่มหัวข้อใหม่

สิ่งแวดล้อม

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

  • พื้นหลัง: ไล่ระดับสี
  • การไล่ระดับสีไล่ระดับสี: สีเทาอ่อนมาก #efefef
  • สีพื้นหลังที่สอง: White #ffffff
  • ประเภทการไล่ระดับสี: รัศมี
  • ทิศทางของรัศมี: กึ่งกลาง
  • ตำแหน่งเริ่มต้น: 52%
  • อันดับสุดท้าย: 50%

พื้นหลังส่วน Divi

การเว้นวรรค

สลับไปที่แท็บออกแบบและปรับการเติมในการตั้งค่าระยะห่าง

  • ช่องว่างภายในด้านบนและด้านล่าง
    • สำนักงาน: 0vw
  • เบาะในถุงน่อง
    • แท็บเล็ต + โทรศัพท์: 70vw

การกำหนดค่าส่วนขยาย Diviเพิ่มบรรทัดใหม่

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

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

เพิ่มสาย Divi ใหม่ปรับขนาด

จากนั้นปรับความกว้างและความกว้างสูงสุดของเส้น

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

ขนาด Nexopos

เพิ่มโมดูลข้อความ

เพิ่ม H2 และเนื้อหาที่เป็นข้อความ

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

การปรับแต่งโมดูลข้อความ

ตำรา

สลับไปที่แท็บออกแบบและจัดรูปแบบข้อความดังนี้:

  • ข้อความตัวอักษร: เปิด Sans
  • การจัดตำแหน่งของข้อความ: ศูนย์
  • สีของข้อความ: สีเขียว #5bba1b
  • ขนาดตัวอักษร:
    • สำนักงาน: 1.2vw
    • แท็บเล็ต: 2.8vw
    • โทรศัพท์: 3.6vw
  • ระยะห่างของตัวอักษรข้อความ: 0.2vw
  • ความสูงของบรรทัดข้อความ: 1.8em

การกำหนดค่ารูปแบบโมดูลข้อความ Wordpressชื่อ 2 ข้อความ

หลังจากจัดแต่งข้อความย่อหน้าแล้วให้จัดสไตล์ข้อความ H2

  • ส่วน: H2
  • H2 น้ำหนักตัวอักษร: Doppio One
  • การจัดแนวข้อความ H2: กึ่งกลาง
  • สีข้อความ H2: #3d3d3d
  • ขนาดตัวอักษร H2:
    • สำนักงาน: 4.4vw
    • แท็บเล็ต: 5.9vw
    • โทรศัพท์: 6.9vw

ปรับแต่ง head diviการเว้นวรรค

และเพิ่มช่องว่างภายในเล็กน้อยที่ด้านบน

  • Padding ยอดนิยม: 212px

การปรับแต่งช่องว่างภายในโมดูลข้อความ

เพิ่มโมดูลการหาร

ความชัดเจน

ภายใต้โมดูลข้อความให้เพิ่มโมดูลการแบ่งและตั้งค่าการเปิดเผยเป็น "ใช่"

  • ทัศนวิสัย: ใช่

แสดงโมดูลตัวแบ่ง divi

ออนไลน์

เปลี่ยนสีของตัวคั่นแล้ว

  • สีของเส้น: เทาเข้ม #545454

ปรับแต่งสีของเส้น Divi

ปรับขนาด

ตอนนี้ปรับขนาดของตัวคั่นเพื่อให้ดูเล็กลง

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

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

การเว้นวรรค

เพิ่มขอบบนสุดด้วย

  • ขอบบน:
    • สำนักงาน: -40px
    • แท็บเล็ต + โทรศัพท์: -15px

ตัวแบ่งโมดูลระยะขอบติดลบ

เพิ่มบรรทัดใหม่

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

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

แถวมี 3 คอลัมน์ divi

สิ่งแวดล้อม

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

  • พื้นหลัง: ไล่ระดับสี
  • การไล่ระดับสีพื้นหลัง 1: white #ffffff
  • สีพื้นหลังไล่ระดับสีที่สอง: โปร่งใส
  • ประเภทการไล่ระดับสี: รัศมี
  • ศูนย์พวงมาลัยเรเดียล
  • ตำแหน่งเริ่มต้น: 42%
  • อันดับสุดท้าย: 50%

การตั้งค่าพารามิเตอร์ Divi line

ปรับขนาด

ตอนนี้ปรับขนาดของเส้น

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

การปรับขนาดเส้น Diviการเว้นวรรค

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

  • เบาะส่วนบน: 22vw
  • ช่องว่างภายในด้านล่าง: 10vw
  • ช่องว่างด้านซ้ายและขวา: 10vw

การกำหนดค่าช่องว่างระหว่างบรรทัด Divi

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

สิ่งแวดล้อม

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

  • พื้นหลัง: ไล่ระดับสี
  • สีพื้นหลังไล่ระดับสี: สีน้ำเงิน #2a4eed
  • สีพื้นหลังไล่ระดับสีที่สอง: สีฟ้าอ่อน #91f5f7
  • ประเภทการไล่ระดับสี: เชิงเส้น
  • ทิศทางการไล่ระดับสี: 38deg
  • ตำแหน่งเริ่มต้น: 23%

การกำหนดค่า Divi การไล่ระดับสี

ชายแดน

จากนั้นกำหนดมุมโค้งมนของคอลัมน์ในการตั้งค่าชายแดน

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

การกำหนดค่าเส้นขอบโค้งมนของคอลัมน์

กล่องเงา

เพิ่มเฉดสีของกล่องที่บอบบางด้วย

  • Box Shadow: ตัวเลือกที่สอง
  • เงาของกล่องตำแหน่งแนวนอน: 6px
  • ตำแหน่ง Shadow Box แนวตั้ง: -10px
  • Box Shadow Blur Force: 50px

การกำหนดค่าเงาของคอลัมน์ 1

ล้น

ตรวจสอบให้แน่ใจว่าสามารถมองเห็นคอลัมน์ล้นได้เช่นกัน

  • ล้นแนวนอนและแนวตั้ง: มองเห็นได้

การกำหนดค่าคอลัมน์ Divi ล้น

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

สิ่งแวดล้อม

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

  • พื้นหลัง: ไล่ระดับสี
  • สีไล่ระดับสีพื้นหลังอย่างใดอย่างหนึ่ง: #1ba038
  • การไล่ระดับสีพื้นหลังสองสี: #c6f727
  • ประเภทการไล่ระดับสี: เชิงเส้น
  • ทิศทางการไล่ระดับสี: 38deg
  • ตำแหน่งเริ่มต้น: 23%

การตั้งค่า Divi คอลัมน์ที่สอง

ชายแดน

เพิ่มรัศมีชายแดนลงในคอลัมน์ด้วย

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

การกำหนดค่าคอลัมน์ 2 หารหาร

กล่องเงา

ด้วยเฉดสีกล่องที่บอบบาง

  • Box Shadow: ตัวเลือกที่สอง
  • เงาของกล่องตำแหน่งแนวนอน: 6px
  • ตำแหน่ง Shadow Box แนวตั้ง: -10px
  • Box Shadow Blur Force: 50px

การกำหนดค่าเงาของคอลัมน์ 2 divi

หม้อแปลงไฟฟ้า

คอลัมน์นี้สูงกว่าคอลัมน์อื่นเล็กน้อย ในการสร้างเอฟเฟกต์นี้เราจะปรับการตั้งค่าการแปลงการแปลงสำหรับคอลัมน์ 2

  • หม้อแปลงแปล:
    • สำนักงาน: -8vw, แกน y
    • แท็บเล็ต + โทรศัพท์: 30vw, แกน Y

การกำหนดค่าตำแหน่งคอลัมน์ 2 divi

ล้น

ยังทำให้มองเห็นการล้นของคอลัมน์นี้

  • ล้นแนวนอนและแนวตั้ง: มองเห็นได้

การกำหนดค่าการเปิดเผยคอลัมน์ 2 diviการตั้งค่าคอลัมน์ 3

สิ่งแวดล้อม

ไปที่คอลัมน์สุดท้ายและคอลัมน์สุดท้ายกันเถอะ! เพิ่มพื้นหลังไล่ระดับสี

  • พื้นหลัง: ไล่ระดับสี
  • สีพื้นหลังไล่ระดับสีหนึ่ง: #f0562c
  • การไล่ระดับสีพื้นหลังสองสี: #f1a526
  • ประเภทการไล่ระดับสี: เชิงเส้น
  • ทิศทางการไล่ระดับสี: 38deg
  • ตำแหน่งเริ่มต้น: 23%

คอลัมน์การกำหนดค่าพื้นหลัง 3 diviชายแดน

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

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

คอลัมน์ Divi การกำหนดค่าเส้นขอบโค้งมน 3กล่องเงา

เพิ่มเฉดสีของกล่องด้วย

  • Box Shadow: ตัวเลือกที่สอง
  • เงาของกล่องตำแหน่งแนวนอน: 6px
  • ตำแหน่ง Shadow Box แนวตั้ง: -10px
  • Box Shadow Blur Force: 50px

คอลัมน์การกำหนดค่า Divi ชายแดน 3

หม้อแปลงไฟฟ้า

ในขนาดหน้าจอที่เล็กลงเราจะต้องเปลี่ยนตำแหน่งคอลัมน์โดยใช้ค่า Conversion การแปลงที่กำหนดเอง

  • หม้อแปลงแปล:
    • แท็บเล็ต + โทรศัพท์: 60vw

การแปลงโมดูล Divi

ล้น

สุดท้ายปรับการตั้งค่าโอเวอร์โฟลว์

  • ล้นแนวนอนและแนวตั้ง: มองเห็นได้

การกำหนดค่า Divi overflow

เพิ่มโมดูลรูปภาพ

นำเข้าภาพกึ่งโปร่งใสที่ถูกตัดออก

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

เพิ่มรูปภาพ Divi แบบโปร่งใส

ปรับขนาด

ทำให้โมดูลเต็มความกว้าง

  • เปลี่ยนเป็นโหมดเต็มความกว้าง: ใช่

เปลี่ยนเป็น moe แบบเต็มความกว้าง

การเว้นวรรค

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

  • ขอบบน:
    • สำนักงาน: -11vw
    • แท็บเล็ต + โทรศัพท์: -24vw
  • แพ็ดดิ้งซ้ายและขวา:
    • สำนักงาน: 5vw
    • แท็บเล็ต + โทรศัพท์: 20vw

โมดูลอิมเมจการกำหนดค่าช่องว่างภายใน

เปลี่ยนบันไดให้เป็นโฮเวอร์

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

  • Transform Scale ของ Hover: 120% สำหรับทั้งสองแกน

แปลงเป็นอิมเมจโมดูล divi แบบเลื่อน

Z-ดัชนี

เพื่อให้แน่ใจว่ารูปภาพปรากฏที่ด้านบนสุดของคอลัมน์ให้เพิ่มค่าดัชนี z บนแท็บขั้นสูง

  • ดัชนี Z: 1

การกำหนดค่าโมดูลรูปภาพโมดูล zindex

ทำซ้ำและลากโมดูลรูปภาพ

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

  • เริ่มต้นด้วยการทำซ้ำโมดูลภาพสองครั้ง
  • จากนั้นลากโมดูลรูปภาพใหม่ไปยังคอลัมน์ 2 และ 3
  • ดาวน์โหลดภาพต่าง ๆ

ทำซ้ำและย้ายโมดูลรูปภาพ

เพิ่มโมดูลข้อความ

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

ใต้รูปภาพในคอลัมน์ 1 ให้เพิ่มโมดูลข้อความและแทรกบางส่วน เนื้อหา H3 ที่คุณเลือก

เพิ่มข้อความโมดูล Divi

ชื่อ 3 ข้อความ

สลับไปที่แท็บออกแบบและใช้สไตล์กับการตั้งค่าข้อความ H3

  • ชื่อข้อความ: H3
  • H3 ตัวอักษร: Doppio One
  • H3 น้ำหนักตัวอักษร: หนา
  • การจัดแนว H3: กึ่งกลาง
  • สีข้อความ H3: ขาว #ffffff
  • ขนาดตัวอักษร H3:
    • สำนักงาน: 1.8vw
    • แท็บเล็ต: 5vw
    • โทรศัพท์: 6vw

พารามิเตอร์โมดูลข้อความ Divi

ทำซ้ำและลากโมดูลข้อความ

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

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

ทำซ้ำโมดูลข้อความ Divi

เพิ่มโมดูลข้อความ

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

ภายใต้โมดูลหัวเรื่องให้เพิ่มโมดูลข้อความใหม่ เพิ่มเนื้อหาย่อหน้าในพื้นที่เนื้อหา

เพิ่มข้อความโมดูล Divi

ตำรา

ตอนนี้จัดรูปแบบข้อความดังต่อไปนี้

  • ข้อความตัวอักษร: เปิด Sans
  • สีข้อความ: ขาว #ffffff
  • ขนาดตัวอักษร:
    • สำนักงาน: 0.6vw
    • แท็บเล็ต: 2vw
    • โทรศัพท์: 2.8vw
  • ความสูงของบรรทัดข้อความ: 2.2em

โมดูล Divi คำอธิบายการกำหนดค่า

การเว้นวรรค

หากต้องการจัดกึ่งกลางข้อความให้ปรับระยะห่างของโมดูลดังนี้

  • ขอบล่าง:
    • สำนักงาน: 5vw
    • แท็บเล็ต + โทรศัพท์: 10vw
  • แพ็ดดิ้งซ้ายและขวา
    • สำนักงาน: 5vw
    • แท็บเล็ต + โทรศัพท์: 14vw

เค้าโครง Diviทำซ้ำและลากโมดูลข้อความ

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

  • เริ่มต้นด้วยการทำซ้ำโมดูลข้อความสองครั้ง
  • จากนั้นวางรายการซ้ำในคอลัมน์ 2 และ 3
  • เปลี่ยนเนื้อหาของแต่ละรายการซ้ำ

ทำซ้ำโมดูลข้อความในคอลัมน์ Divi อื่นเพิ่มโมดูลปุ่ม

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

ไปที่โมดูลสุดท้าย! เพิ่มโมดูลปุ่มในคอลัมน์ 1 พร้อมสำเนาที่คุณเลือก

เพิ่มโมดูลปุ่ม divi

เพิ่มการเชื่อมโยง

แทรกลิงค์ในตัวเลือกลิงค์ของโมดูล

การกำหนดค่าลิงค์โมดูล Diviการวางแนว

ตอนนี้จัดโมดูลโมดูล

  • การจัดตำแหน่ง: ศูนย์

การกำหนดค่าการจัดตำแหน่งโมดูลปุ่ม Divi

ลักษณะของปุ่ม

จากนั้นเรียกปุ่มดังต่อไปนี้

  • ขนาดของข้อความปุ่ม:
    • สำนักงาน: 1vw
    • แท็บเล็ต: 2vw
    • โทรศัพท์: 3vw
  • สีข้อความของปุ่ม: สีน้ำเงิน #2a4eed
  • สีพื้นหลังของปุ่ม: ขาว #ffffff
  • รัศมีของเส้นขอบของปุ่ม: 50vw
  • แบบอักษรของปุ่ม: หนึ่งคู่
  • น้ำหนักตัวอักษร: ตัวหนา
  • สีของปุ่ม: น้ำเงิน #2a4eed

การกำหนดค่าสีปุ่มโมดูล Divi

การเว้นวรรค

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

  • ขอบล่าง:
    • สำนักงาน: -1.7vw
    • แท็บเล็ต: -4vw
    • โทรศัพท์: -6vw
  • เบาะบนและล่าง:
    • สำนักงาน: 1vw
    • แท็บเล็ต + โทรศัพท์: 3vw
  • แพ็ดดิ้งซ้ายและขวา
    • สำนักงาน: 4vw
    • แท็บเล็ต + โทรศัพท์: 10vw

ปุ่มระยะห่าง

กล่องเงา

สุดท้าย แต่ไม่ท้ายสุดให้เพิ่มเฉดสีของกล่องเล็ก ๆ ลงในปุ่ม

  • Box shadow: ตัวเลือกแรก
  • เงาของตำแหน่งแนวนอนของกล่อง: 0px
  • เงาของตำแหน่งแนวตั้งกล่อง: 2px
  • Box Shadow Blur Force: 50px

การกำหนดค่า Divi โมดูลเงา

ทำซ้ำและลากโมดูลปุ่ม

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

  • โคลนโมดูลปุ่มสองครั้ง
  • วางรายการที่ซ้ำกันในคอลัมน์ 2 และ 3

โมดูลปุ่ม Divi ที่ซ้ำกันปุ่ม 2 ไอคอนข้อความและสี

เปลี่ยนสีไอคอนโมดูลปุ่มและปุ่มในคอลัมน์ 2

  • สีข้อความของปุ่ม: สีเขียว # 1ba038
  • ไอคอนสี: # 1ba038

โมดูลปุ่ม Divi

ปุ่ม 3 ไอคอนข้อความและสี

ทำสิ่งเดียวกันด้วยปุ่มในคอลัมน์สุดท้ายและคุณทำเสร็จแล้ว!

  • สีของข้อความของปุ่ม: Orange #f0562c
  • ไอคอนสี: # f0562c

พารามิเตอร์ปุ่ม Divi

เพื่อเสร็จสิ้น

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