วิธีเปลี่ยนเนื้อหาบนโฮเวอร์เพื่อสร้าง CTA ที่ไม่ซ้ำใน Divi (3 วิธี)

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

วันนี้เราจะแสดงวิธีเปลี่ยนเนื้อหาบนโฮเวอร์ใน Divi สำหรับคำกระตุ้นการตัดสินใจที่ไม่เหมือนใคร เราจะแสดงวิธีที่ชาญฉลาดในการเปลี่ยนข้อความของปุ่ม (และไอคอน) เมื่อวางเมาส์เหนือ เราจะแสดงวิธีการเปลี่ยนชื่อและข้อความของปุ่มอย่างหรูหราภายในโมดูลการเรียกร้องให้ดำเนินการบนโฮเวอร์ และเรายังใส่ CSS ที่กำหนดเองเพื่อเพิ่มเอฟเฟกต์การเปลี่ยนภาพที่ไม่เหมือนใครอีกด้วย (เช่น การสลับและการพลิกไอคอนปุ่ม)

ตรวจสอบออก!

แอบมอง

ต่อไปนี้คือภาพรวมคร่าวๆ ของการออกแบบทั้งสามที่เราจะสร้างในวันนี้

#1 วิธีเปลี่ยนเนื้อหาเมื่อวางเมาส์เหนือปุ่ม

#2 วิธีเปลี่ยนพื้นหลังและเนื้อหาเนื้อหาบนโมดูลข้อความ

#3 วิธีเปลี่ยนเนื้อหาบนโฮเวอร์สำหรับองค์ประกอบต่างๆ ด้วยโมดูลการเรียกร้องให้ดำเนินการ

ดาวน์โหลดเค้าโครงฟรี

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

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

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

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

ดาวน์โหลด

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

ในการนำเข้าเลย์เอาต์ไปยังเพจของคุณ เพียงแตกไฟล์ zip แล้วลากไฟล์ json ไปที่ Divi Builder

ไปที่บทช่วยสอนกันไหม

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

ในการเริ่มต้น คุณจะต้องทำสิ่งต่อไปนี้:

1. หากคุณยังไม่ได้ติดตั้ง ให้ติดตั้งและเปิดใช้งานธีม Divi ที่ติดตั้ง (หรือปลั๊กอิน Divi Builder หากไม่ได้ใช้ธีม Divi)
2. สร้างหน้าใหม่ใน WordPress และใช้ Divi Builder เพื่อแก้ไขหน้าในส่วนหน้า (ตัวสร้างภาพ)
3. โหลดเลย์เอาต์ที่สร้างไว้ล่วงหน้าของ Cake Maker Landing Page ลงในหน้า เราจะใช้เลย์เอาต์นี้สำหรับการออกแบบของเรา คุณสามารถโหลดเลย์เอาต์ได้โดยเลือก "เลือกเลย์เอาต์ที่สร้างไว้ล่วงหน้า" เมื่อได้รับแจ้งในการปรับใช้ Divi Builder หรือคุณสามารถเลือกไอคอน "โหลดจากไลบรารี" บวกจากเมนูการตั้งค่าภายใน Divi Builder สำหรับข้อมูลเพิ่มเติมเกี่ยวกับวิธีการโหลดเลย์เอาต์ที่สร้างไว้ล่วงหน้าไปยังเพจของคุณ โปรดดูวิดีโอของเรา

หลังจากนั้น คุณก็พร้อมที่จะเริ่มออกแบบใน Divi

#1 วิธีเปลี่ยนเนื้อหาเมื่อวางเมาส์เหนือปุ่ม

เมื่อคุณโหลดเลย์เอาต์ที่สร้างไว้ล่วงหน้าของ Cake Maker Landing Page ลงในหน้าของคุณแล้ว ให้ค้นหาปุ่ม CTA หลักที่ส่วนหัวด้านบนของหน้าและเปิดการตั้งค่าการออกแบบโมดูลปุ่ม

การเปลี่ยนข้อความปุ่มบน Hover

ใต้แท็บเนื้อหา ให้อัปเดตข้อความของปุ่มดังนี้:

ข้อความปุ่ม: “ซื้อเลย”

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

ข้อความปุ่ม (โฮเวอร์): “ไปกันเถอะ”

ข้อความใต้ข้อความปุ่มโฮเวอร์จะแทนที่ข้อความปุ่มเริ่มต้นเมื่อวางเมาส์เหนือปุ่ม

ความกว้างของปุ่ม

อย่างไรก็ตาม ปุ่มเป็น inline-block ดังนั้นความกว้างของปุ่ม/ลิงก์จะเปลี่ยนไปตามปริมาณเนื้อหา (ตัวอักษรหรือช่องว่าง) ที่ปุ่มมีอยู่ วิธีนี้ใช้ไม่ได้ผลกับเอฟเฟกต์โฮเวอร์นี้ เนื่องจากข้อความแทนที่ที่เล็กกว่า ปุ่มจะมีความกว้างเล็กลง และสร้างการกระโดดหรือข้อผิดพลาดเมื่อวางเมาส์เหนือขอบของปุ่ม ในการแก้ไขปัญหานี้ เราต้องใช้ความกว้างที่ตั้งไว้กับปุ่ม สิ่งนี้ทำได้ง่ายด้วย CSS เพียงตัวอย่างเดียว เพิ่ม CSS ต่อไปนี้ไปยังองค์ประกอบหลักของโมดูลปุ่ม

width: 200px;

นี่คือผลลัพธ์

การเปลี่ยนแปลงเพิ่มเติมและเอฟเฟกต์โฮเวอร์

นอกจากการเปลี่ยนเนื้อหาบนโฮเวอร์แล้ว เรายังสามารถเพิ่มสีสันให้กับปุ่มของเราด้วยการผสมผสานเอฟเฟกต์โฮเวอร์ที่แตกต่างกัน

ตอนนี้ไอคอนปุ่มเป็นลูกศรขวาที่ปรับใช้เมื่อวางเมาส์เหนือ วิธีนี้ใช้ได้ผลดีกับข้อความปุ่มโฮเวอร์ "ไปกันเถอะ"

พลิกไอคอนปุ่มบน Hover

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

แสดงเฉพาะไอคอนเมื่อวางเมาส์เหนือปุ่ม: NO

จากนั้นเพิ่มคลาส CSS ให้กับโมดูลปุ่มดังนี้:

CSS Class: flip-button-icon

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

.flip-button-icon:after {
  transition: transform 500ms;
}
.flip-button-icon:hover:after {
  transform: rotateX(360deg);
}

นี่คือผลลัพธ์

การเปลี่ยนไอคอนปุ่มบน Hover

คุณยังสามารถเปลี่ยนไอคอนปุ่มบนโฮเวอร์ได้อย่างสมบูรณ์ สิ่งที่คุณต้องมีก็คือ CSS ขนาดเล็กเพื่อแทนที่เนื้อหาของ :after องค์ประกอบหลอกที่ไอคอนอยู่

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

อัปเดตไอคอนปุ่มด้วยไอคอนรถเข็นเนื่องจาก CTA ของเราคือ "แสดงเลย"

จากนั้นไปที่แท็บขั้นสูงและอัปเดตคุณสมบัติการแปลง CSS ปัจจุบันด้วยการหมุน 180 องศาแทนที่จะเป็น 360 องศา และเพิ่มยูนิโค้ดใหม่สำหรับเนื้อหาที่แสดงลูกศรซ้าย (“\23”)

ตัวอย่างใหม่จะมีลักษณะดังนี้:

.flip-button-icon:hover:after {
  transform: rotateY(180deg);
  content: "\23"; 
}

เนื่องจากเราจะหมุนไอคอน 180 องศาด้วย ซึ่งจะแสดงลูกศรขวาแทนไอคอนรถเข็นเมื่อวางเมาส์เหนือปุ่ม

ผลสุดท้าย

นี่คือผลลัพธ์สุดท้าย

#2 วิธีเปลี่ยนพื้นหลังและเนื้อหาเนื้อหาบนโมดูลข้อความ

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

อัปเดตการตั้งค่าคอลัมน์

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

ซึ่งจะแทนที่พื้นหลังสีขาวที่มีอยู่ตามค่าเริ่มต้น

นอกจากนี้ ให้เพิ่มการไล่ระดับสีเหนือภาพพื้นหลังเมื่อวางเมาส์ไว้ด้วย

พื้นหลังไล่ระดับสีซ้าย: rgba(255,255,255,0)
พื้นหลังไล่ระดับสีขวา: rgba(46,41,142,0.75)
ตำแหน่งเริ่มต้น: 30%
วางการไล่ระดับสีเหนือภาพพื้นหลัง: ใช่

สิ่งนี้จะให้ภาพซ้อนทับที่ดีซึ่งจะทำให้ข้อความแทนที่เมื่อวางเมาส์เหนืออ่านง่ายขึ้น

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

ปรับแต่งโมดูลข้อความในคอลัมน์ 1

เมื่ออัปเดตคอลัมน์แล้ว ให้บันทึกการตั้งค่าและเปิดการตั้งค่าโมดูลข้อความสำหรับโมดูลข้อความในคอลัมน์ 1 จากนั้นอัปเดตเนื้อหาเนื้อหาของโมดูลข้อความบนโฮเวอร์ดังนี้:

<h3>Custom Cakes</h3>
<a href="#">Order Now</a>

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

ถัดไป อัปเดตพื้นหลังดังนี้:

สีพื้นหลัง: #ffffff;
สีพื้นหลัง (โฮเวอร์): rgba(255,255,255,0);

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

ถัดไป อัปเดตการตั้งค่าการออกแบบต่อไปนี้:

ส่วนสูง: 260px

ช่องว่างภายใน: ด้านบน 30px, ด้านซ้าย 30px, ด้านขวา 30px
ช่องว่างภายใน (โฮเวอร์): 90px ด้านบน

สิ่งนี้จะสร้างเอฟเฟกต์การเปลี่ยนภาพที่ดีซึ่งจะทำให้ข้อความค่อยๆ เลื่อนลงมาเมื่อวางเมาส์เหนือโมดูลข้อความ

ถัดไป อัปเดตสีข้อความเป็นสีขาวดังนี้:

สีของข้อความลิงก์: #ffffff
หัวเรื่อง 3 สีข้อความ (โฮเวอร์): #ffffff

หากต้องการชะลอการเปลี่ยนแปลงของเอฟเฟกต์โฮเวอร์ ให้อัปเดตระยะเวลาการเปลี่ยนดังนี้:

ระยะเวลาการเปลี่ยนภาพ: 500ms

ผลสุดท้าย

ตอนนี้ตรวจสอบผลลัพธ์สุดท้าย

#3 วิธีเปลี่ยนเนื้อหาบนโฮเวอร์สำหรับองค์ประกอบต่างๆ ด้วยโมดูลการเรียกร้องให้ดำเนินการ

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

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

จากนั้นเพิ่มโมดูลการเรียกร้องให้ดำเนินการใหม่ภายใต้ปุ่ม "ซื้อเลย" ในแถวบนสุดของส่วนพิเศษ

อัปเดต CTA ด้วยการเปลี่ยนเนื้อหาบน Hover

ถัดไป อัปเดตเนื้อหาการเรียกร้องให้ดำเนินการดังนี้:

หัวข้อ: “ข้อเสนอพิเศษ”
ชื่อเรื่อง (โฮเวอร์): “ลด 10%”
ข้อความปุ่ม: “ซื้อเลย”
ข้อความปุ่ม (โฮเวอร์): “รับข้อเสนอ”
เนื้อหา: “คัพเค้กแบบกำหนดเอง”
URL ลิงก์ของปุ่ม: #

บันทึกการตั้งค่าสำหรับตอนนี้

คัดลอกและวางสไตล์ปุ่มเค้าโครง

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

จากนั้นเปิดเมนูตัวเลือกอื่นๆ บนโมดูลคำกระตุ้นการตัดสินใจที่เรากำลังออกแบบ และเลือก "วางลักษณะปุ่ม"

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

ปุ่ม Padding: บน 15px, ด้านล่าง 15px, ซ้าย 40px, 40px ขวา

อัปเดตรูปแบบข้อความ

หลังจากนั้น ให้อัปเดตการออกแบบชื่อและเนื้อหา

ระดับหัวเรื่อง: H4
แบบอักษรของชื่อเรื่อง: Pacifico
ขนาดข้อความชื่อเรื่อง: 9vw
ความสูงของบรรทัดหัวเรื่อง: 1.3em
แบบอักษรของร่างกาย: เปิด Sans
น้ำหนักแบบอักษรของร่างกาย: ตัวหนา
ขนาดข้อความเนื้อหา: 18px
ระยะห่างระหว่างตัวอักษร: 1px

การตั้งค่าขั้นสุดท้าย

ถัดไป อัปเดตช่องว่างภายใน

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

จากนั้นให้โมดูล CSS คลาสที่กำหนดเอง

CSS Class: fade-cta-title

ทำให้ปุ่ม cta เต็มความกว้างโดยเพิ่ม CSS ที่กำหนดเองต่อไปนี้ลงในช่องป้อนข้อมูล CSS ปุ่มส่งเสริมการขาย

และอัปเดตระยะเวลาการเปลี่ยนแปลง

ระยะเวลาการเปลี่ยนภาพ: 800ms

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

สีพื้นหลัง: ไม่มี (ลบ)
สีพื้นหลัง (โฮเวอร์): rgba(247,78,72,0.86)

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

ผลลัพธ์จนถึงตอนนี้

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

ทำให้การเปลี่ยนแปลงเนื้อหาอ่อนลงด้วยแอนิเมชั่น

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

.fade-cta-title:hover .et_pb_module_header {
  animation-name: fadeinout;
  animation-duration: 800ms;
}

@keyframes fadeinout {
  from {opacity: 0;}
  to {opacity: 1;}
}

ผลสุดท้าย

ตอนนี้เรามาดูผลลัพธ์สุดท้ายกัน

และนี่คือบนมือถือ

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

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

ต้องการมากขึ้น? เรามีโพสต์ดีๆ มากมายที่จะช่วยยกระดับ CTA ของคุณไปอีกระดับ

ฉันหวังว่าจะได้ยินจากคุณในความคิดเห็น

ไชโย!