ยิ่ง CTA ดึงดูดสายตามากเท่าไหร่โอกาสที่อัตรา Conversion ก็จะสูงขึ้นเท่านั้น มีหลายวิธีในการออกแบบ CTA ของคุณ แต่ในบทความนี้เราจะแสดงวิธีสร้างเทมเพลตคอลัมน์ CTA ที่ยอดเยี่ยมด้วยรูปภาพกึ่งโปร่งใสและการวางซ้อนคอลัมน์ คุณสามารถค้นหารูปภาพกึ่งโปร่งใสได้ในโฟลเดอร์ดาวน์โหลดด้านล่าง แต่อย่าลังเลที่จะใช้รูปภาพอื่น ๆ คุณยังสามารถดาวน์โหลดไฟล์ JSON ได้ฟรี!
Let 's go
ตัวอย่าง
ก่อนที่เราจะดำน้ำในบทช่วยสอนเรามาดูลักษณะของหน้าจอขนาดต่างๆกันก่อน
เริ่มสร้างใหม่กันเถอะ!
เพิ่มหัวข้อใหม่
สิ่งแวดล้อม
เริ่มต้นด้วยการสร้างเพจใหม่หรือเพิ่มส่วนปกติใหม่ในเพจที่มีอยู่ จากนั้นไปที่ส่วนการตั้งค่าและเพิ่มพื้นหลังไล่ระดับสี
- พื้นหลัง: ไล่ระดับสี
- การไล่ระดับสีไล่ระดับสี: สีเทาอ่อนมาก #efefef
- สีพื้นหลังที่สอง: White #ffffff
- ประเภทการไล่ระดับสี: รัศมี
- ทิศทางของรัศมี: กึ่งกลาง
- ตำแหน่งเริ่มต้น: 52%
- อันดับสุดท้าย: 50%
การเว้นวรรค
สลับไปที่แท็บออกแบบและปรับการเติมในการตั้งค่าระยะห่าง
- ช่องว่างภายในด้านบนและด้านล่าง
- สำนักงาน: 0vw
- เบาะในถุงน่อง
- แท็บเล็ต + โทรศัพท์: 70vw
เพิ่มบรรทัดใหม่
โครงสร้างคอลัมน์
เพิ่มแถวใหม่ต่อไปโดยใช้โครงสร้างคอลัมน์ต่อไปนี้:
ปรับขนาด
จากนั้นปรับความกว้างและความกว้างสูงสุดของเส้น
- ความกว้าง: 100%
- ความกว้างสูงสุด 100%
เพิ่มโมดูลข้อความ
เพิ่ม H2 และเนื้อหาที่เป็นข้อความ
ถึงเวลาเพิ่มโมดูลแล้ว! ขั้นแรก ให้เพิ่มโมดูลข้อความและแทรกบางส่วน เนื้อหา H2 และย่อหน้าที่คุณเลือก
ตำรา
สลับไปที่แท็บออกแบบและจัดรูปแบบข้อความดังนี้:
- ข้อความตัวอักษร: เปิด Sans
- การจัดตำแหน่งของข้อความ: ศูนย์
- สีของข้อความ: สีเขียว #5bba1b
- ขนาดตัวอักษร:
- สำนักงาน: 1.2vw
- แท็บเล็ต: 2.8vw
- โทรศัพท์: 3.6vw
- ระยะห่างของตัวอักษรข้อความ: 0.2vw
- ความสูงของบรรทัดข้อความ: 1.8em
ชื่อ 2 ข้อความ
หลังจากจัดแต่งข้อความย่อหน้าแล้วให้จัดสไตล์ข้อความ H2
- ส่วน: H2
- H2 น้ำหนักตัวอักษร: Doppio One
- การจัดแนวข้อความ H2: กึ่งกลาง
- สีข้อความ H2: #3d3d3d
- ขนาดตัวอักษร H2:
- สำนักงาน: 4.4vw
- แท็บเล็ต: 5.9vw
- โทรศัพท์: 6.9vw
การเว้นวรรค
และเพิ่มช่องว่างภายในเล็กน้อยที่ด้านบน
- Padding ยอดนิยม: 212px
เพิ่มโมดูลการหาร
ความชัดเจน
ภายใต้โมดูลข้อความให้เพิ่มโมดูลการแบ่งและตั้งค่าการเปิดเผยเป็น "ใช่"
- ทัศนวิสัย: ใช่
ออนไลน์
เปลี่ยนสีของตัวคั่นแล้ว
- สีของเส้น: เทาเข้ม #545454
ปรับขนาด
ตอนนี้ปรับขนาดของตัวคั่นเพื่อให้ดูเล็กลง
- น้ำหนักตัวคั่น: 4px
- ความกว้าง: 9%
- การจัดตำแหน่งของโมดูล: ศูนย์
การเว้นวรรค
เพิ่มขอบบนสุดด้วย
- ขอบบน:
- สำนักงาน: -40px
- แท็บเล็ต + โทรศัพท์: -15px
เพิ่มบรรทัดใหม่
โครงสร้างคอลัมน์
ดำเนินการต่อโดยเพิ่มแถวใหม่ที่มีสามคอลัมน์ที่มีขนาดเท่ากัน นี่จะเป็นพื้นฐานสำหรับการออกแบบคอลัมน์ CTA
สิ่งแวดล้อม
ก่อนที่คุณจะเพิ่มโมดูลให้เพิ่มการไล่ระดับสีให้กับพื้นหลังของพารามิเตอร์ของบรรทัด
- พื้นหลัง: ไล่ระดับสี
- การไล่ระดับสีพื้นหลัง 1: white #ffffff
- สีพื้นหลังไล่ระดับสีที่สอง: โปร่งใส
- ประเภทการไล่ระดับสี: รัศมี
- ศูนย์พวงมาลัยเรเดียล
- ตำแหน่งเริ่มต้น: 42%
- อันดับสุดท้าย: 50%
ปรับขนาด
ตอนนี้ปรับขนาดของเส้น
- ความกว้าง: 100%
- ความกว้างสูงสุด: 100%
การเว้นวรรค
จากนั้นไปที่การตั้งค่าระยะห่างและเพิ่มค่าช่องว่างที่กำหนดเอง
- เบาะส่วนบน: 22vw
- ช่องว่างภายในด้านล่าง: 10vw
- ช่องว่างด้านซ้ายและขวา: 10vw
การตั้งค่าคอลัมน์ 1
สิ่งแวดล้อม
ดำเนินการต่อโดยเปิดคอลัมน์ 1 และเพิ่มพื้นหลังไล่ระดับสี
- พื้นหลัง: ไล่ระดับสี
- สีพื้นหลังไล่ระดับสี: สีน้ำเงิน #2a4eed
- สีพื้นหลังไล่ระดับสีที่สอง: สีฟ้าอ่อน #91f5f7
- ประเภทการไล่ระดับสี: เชิงเส้น
- ทิศทางการไล่ระดับสี: 38deg
- ตำแหน่งเริ่มต้น: 23%
ชายแดน
จากนั้นกำหนดมุมโค้งมนของคอลัมน์ในการตั้งค่าชายแดน
- มุมโค้งมน: 2vw ทุกมุม
กล่องเงา
เพิ่มเฉดสีของกล่องที่บอบบางด้วย
- Box Shadow: ตัวเลือกที่สอง
- เงาของกล่องตำแหน่งแนวนอน: 6px
- ตำแหน่ง Shadow Box แนวตั้ง: -10px
- Box Shadow Blur Force: 50px
ล้น
ตรวจสอบให้แน่ใจว่าสามารถมองเห็นคอลัมน์ล้นได้เช่นกัน
- ล้นแนวนอนและแนวตั้ง: มองเห็นได้
การตั้งค่าคอลัมน์ 2
สิ่งแวดล้อม
ไปที่คอลัมน์ที่สองและเพิ่มพื้นหลังไล่ระดับสีต่อไปนี้:
- พื้นหลัง: ไล่ระดับสี
- สีไล่ระดับสีพื้นหลังอย่างใดอย่างหนึ่ง: #1ba038
- การไล่ระดับสีพื้นหลังสองสี: #c6f727
- ประเภทการไล่ระดับสี: เชิงเส้น
- ทิศทางการไล่ระดับสี: 38deg
- ตำแหน่งเริ่มต้น: 23%
ชายแดน
เพิ่มรัศมีชายแดนลงในคอลัมน์ด้วย
- มุมโค้งมน: 2vw ที่มุมทั้งสี่
กล่องเงา
ด้วยเฉดสีกล่องที่บอบบาง
- Box Shadow: ตัวเลือกที่สอง
- เงาของกล่องตำแหน่งแนวนอน: 6px
- ตำแหน่ง Shadow Box แนวตั้ง: -10px
- Box Shadow Blur Force: 50px
หม้อแปลงไฟฟ้า
คอลัมน์นี้สูงกว่าคอลัมน์อื่นเล็กน้อย ในการสร้างเอฟเฟกต์นี้เราจะปรับการตั้งค่าการแปลงการแปลงสำหรับคอลัมน์ 2
- หม้อแปลงแปล:
- สำนักงาน: -8vw, แกน y
- แท็บเล็ต + โทรศัพท์: 30vw, แกน Y
ล้น
ยังทำให้มองเห็นการล้นของคอลัมน์นี้
- ล้นแนวนอนและแนวตั้ง: มองเห็นได้
การตั้งค่าคอลัมน์ 3
สิ่งแวดล้อม
ไปที่คอลัมน์สุดท้ายและคอลัมน์สุดท้ายกันเถอะ! เพิ่มพื้นหลังไล่ระดับสี
- พื้นหลัง: ไล่ระดับสี
- สีพื้นหลังไล่ระดับสีหนึ่ง: #f0562c
- การไล่ระดับสีพื้นหลังสองสี: #f1a526
- ประเภทการไล่ระดับสี: เชิงเส้น
- ทิศทางการไล่ระดับสี: 38deg
- ตำแหน่งเริ่มต้น: 23%
ชายแดน
สลับไปที่แท็บออกแบบและเพิ่มรัศมีขอบให้กับแต่ละมุม
- มุมโค้งมน: 2vw ในทุกมุม
กล่องเงา
เพิ่มเฉดสีของกล่องด้วย
- Box Shadow: ตัวเลือกที่สอง
- เงาของกล่องตำแหน่งแนวนอน: 6px
- ตำแหน่ง Shadow Box แนวตั้ง: -10px
- Box Shadow Blur Force: 50px
หม้อแปลงไฟฟ้า
ในขนาดหน้าจอที่เล็กลงเราจะต้องเปลี่ยนตำแหน่งคอลัมน์โดยใช้ค่า Conversion การแปลงที่กำหนดเอง
- หม้อแปลงแปล:
- แท็บเล็ต + โทรศัพท์: 60vw
ล้น
สุดท้ายปรับการตั้งค่าโอเวอร์โฟลว์
- ล้นแนวนอนและแนวตั้ง: มองเห็นได้
เพิ่มโมดูลรูปภาพ
นำเข้าภาพกึ่งโปร่งใสที่ถูกตัดออก
เมื่อคุณสร้างพารามิเตอร์คอลัมน์ทั้งหมดแล้วก็ถึงเวลาเพิ่มโมดูล เพิ่มโมดูลรูปภาพในคอลัมน์ 1 และอัปโหลดภาพกึ่งโปร่งใสที่คุณเลือก คุณสามารถค้นหารูปภาพที่เราใช้ในโฟลเดอร์ซิปที่คุณสามารถดาวน์โหลดได้ในตอนต้นของบทความนี้
ปรับขนาด
ทำให้โมดูลเต็มความกว้าง
- เปลี่ยนเป็นโหมดเต็มความกว้าง: ใช่
การเว้นวรรค
จากนั้นเพิ่มระยะขอบที่กำหนดเองและเติมค่า
- ขอบบน:
- สำนักงาน: -11vw
- แท็บเล็ต + โทรศัพท์: -24vw
- แพ็ดดิ้งซ้ายและขวา:
- สำนักงาน: 5vw
- แท็บเล็ต + โทรศัพท์: 20vw
เปลี่ยนบันไดให้เป็นโฮเวอร์
เราเพิ่มเอฟเฟกต์โฮเวอร์ที่ละเอียดอ่อนให้กับภาพโดยใช้ตัวเลือกการแปลงขนาดในการตั้งค่าการแปลง
- Transform Scale ของ Hover: 120% สำหรับทั้งสองแกน
Z-ดัชนี
เพื่อให้แน่ใจว่ารูปภาพปรากฏที่ด้านบนสุดของคอลัมน์ให้เพิ่มค่าดัชนี z บนแท็บขั้นสูง
- ดัชนี Z: 1
ทำซ้ำและลากโมดูลรูปภาพ
ตอนนี้โคลนโมดูลรูปภาพสองครั้งและวางรายการที่ซ้ำกันในสองคอลัมน์ที่เหลือ กระบวนการนี้ง่ายกว่าในโหมดใช้สาย
- เริ่มต้นด้วยการทำซ้ำโมดูลภาพสองครั้ง
- จากนั้นลากโมดูลรูปภาพใหม่ไปยังคอลัมน์ 2 และ 3
- ดาวน์โหลดภาพต่าง ๆ
เพิ่มโมดูลข้อความ
เพิ่มเนื้อหา H3
ใต้รูปภาพในคอลัมน์ 1 ให้เพิ่มโมดูลข้อความและแทรกบางส่วน เนื้อหา H3 ที่คุณเลือก
ชื่อ 3 ข้อความ
สลับไปที่แท็บออกแบบและใช้สไตล์กับการตั้งค่าข้อความ H3
- ชื่อข้อความ: H3
- H3 ตัวอักษร: Doppio One
- H3 น้ำหนักตัวอักษร: หนา
- การจัดแนว H3: กึ่งกลาง
- สีข้อความ H3: ขาว #ffffff
- ขนาดตัวอักษร H3:
- สำนักงาน: 1.8vw
- แท็บเล็ต: 5vw
- โทรศัพท์: 6vw
ทำซ้ำและลากโมดูลข้อความ
โคลนโมดูลข้อความสองครั้งและวางรายการที่ซ้ำกันในสองคอลัมน์ที่เหลือ
- เริ่มต้นด้วยการทำซ้ำโมดูลข้อความสองครั้ง
- จากนั้นลากไปใต้โมดูลรูปภาพในคอลัมน์ 2 และ 3
- เปลี่ยน เนื้อหา ในแต่ละโมดูลข้อความใหม่
เพิ่มโมดูลข้อความ
เพิ่มเนื้อหา
ภายใต้โมดูลหัวเรื่องให้เพิ่มโมดูลข้อความใหม่ เพิ่มเนื้อหาย่อหน้าในพื้นที่เนื้อหา
ตำรา
ตอนนี้จัดรูปแบบข้อความดังต่อไปนี้
- ข้อความตัวอักษร: เปิด Sans
- สีข้อความ: ขาว #ffffff
- ขนาดตัวอักษร:
- สำนักงาน: 0.6vw
- แท็บเล็ต: 2vw
- โทรศัพท์: 2.8vw
- ความสูงของบรรทัดข้อความ: 2.2em
การเว้นวรรค
หากต้องการจัดกึ่งกลางข้อความให้ปรับระยะห่างของโมดูลดังนี้
- ขอบล่าง:
- สำนักงาน: 5vw
- แท็บเล็ต + โทรศัพท์: 10vw
- แพ็ดดิ้งซ้ายและขวา
- สำนักงาน: 5vw
- แท็บเล็ต + โทรศัพท์: 14vw
ทำซ้ำและลากโมดูลข้อความ
โคลนโมดูลข้อความสองครั้งและลากรายการที่ซ้ำไปยังสองคอลัมน์ที่เหลือ
- เริ่มต้นด้วยการทำซ้ำโมดูลข้อความสองครั้ง
- จากนั้นวางรายการซ้ำในคอลัมน์ 2 และ 3
- เปลี่ยนเนื้อหาของแต่ละรายการซ้ำ
เพิ่มโมดูลปุ่ม
เพิ่มเนื้อหา
ไปที่โมดูลสุดท้าย! เพิ่มโมดูลปุ่มในคอลัมน์ 1 พร้อมสำเนาที่คุณเลือก
เพิ่มการเชื่อมโยง
แทรกลิงค์ในตัวเลือกลิงค์ของโมดูล
การวางแนว
ตอนนี้จัดโมดูลโมดูล
- การจัดตำแหน่ง: ศูนย์
ลักษณะของปุ่ม
จากนั้นเรียกปุ่มดังต่อไปนี้
- ขนาดของข้อความปุ่ม:
- สำนักงาน: 1vw
- แท็บเล็ต: 2vw
- โทรศัพท์: 3vw
- สีข้อความของปุ่ม: สีน้ำเงิน #2a4eed
- สีพื้นหลังของปุ่ม: ขาว #ffffff
- รัศมีของเส้นขอบของปุ่ม: 50vw
- แบบอักษรของปุ่ม: หนึ่งคู่
- น้ำหนักตัวอักษร: ตัวหนา
- สีของปุ่ม: น้ำเงิน #2a4eed
การเว้นวรรค
จัดรูปทรงปุ่มและสร้างการซ้อนทับที่ด้านล่างโดยเพิ่มระยะขอบที่กำหนดเองและค่าช่องว่างในการตั้งค่าระยะห่าง
- ขอบล่าง:
- สำนักงาน: -1.7vw
- แท็บเล็ต: -4vw
- โทรศัพท์: -6vw
- เบาะบนและล่าง:
- สำนักงาน: 1vw
- แท็บเล็ต + โทรศัพท์: 3vw
- แพ็ดดิ้งซ้ายและขวา
- สำนักงาน: 4vw
- แท็บเล็ต + โทรศัพท์: 10vw
กล่องเงา
สุดท้าย แต่ไม่ท้ายสุดให้เพิ่มเฉดสีของกล่องเล็ก ๆ ลงในปุ่ม
- Box shadow: ตัวเลือกแรก
- เงาของตำแหน่งแนวนอนของกล่อง: 0px
- เงาของตำแหน่งแนวตั้งกล่อง: 2px
- Box Shadow Blur Force: 50px
ทำซ้ำและลากโมดูลปุ่ม
เช่นเดียวกับโมดูลก่อนหน้าโคลนปุ่มสองครั้งและวางรายการที่ซ้ำกันในสองคอลัมน์ที่เหลือของบรรทัด
- โคลนโมดูลปุ่มสองครั้ง
- วางรายการที่ซ้ำกันในคอลัมน์ 2 และ 3
ปุ่ม 2 ไอคอนข้อความและสี
เปลี่ยนสีไอคอนโมดูลปุ่มและปุ่มในคอลัมน์ 2
- สีข้อความของปุ่ม: สีเขียว # 1ba038
- ไอคอนสี: # 1ba038
ปุ่ม 3 ไอคอนข้อความและสี
ทำสิ่งเดียวกันด้วยปุ่มในคอลัมน์สุดท้ายและคุณทำเสร็จแล้ว!
- สีของข้อความของปุ่ม: Orange #f0562c
- ไอคอนสี: # f0562c
เพื่อเสร็จสิ้น
ในบทความนี้ เราแสดงให้คุณเห็นถึงวิธีใช้รูปภาพกึ่งโปร่งใสเพื่อสร้างการออกแบบคอลัมน์ CTA ที่น่าทึ่ง เราใช้การตั้งค่าคอลัมน์ล้น Divi เพื่อให้รูปภาพและปุ่มทับซ้อนกันได้อย่างลงตัว ลองใช้การออกแบบนี้ในโครงการต่อไปของคุณ Divi และแจ้งให้เราทราบว่าเป็นอย่างไรในส่วนความคิดเห็น!