วิธีการออกแบบส่วนวิทยากรรับเชิญด้วย CTA ที่มีประสิทธิภาพใน Divi

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

แต่ก่อนที่เราจะกระโดดเข้าไป นี่คือตัวอย่างคร่าวๆ ของการออกแบบขั้นสุดท้าย

แอบมอง

และนี่คือเอฟเฟกต์โฮเวอร์โบนัสที่ฉันจะแสดงให้คุณเห็นเช่นกัน

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

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

การสร้างโครงสร้างพื้นฐานและเนื้อหา

หากคุณยังไม่ได้สร้าง ให้สร้างหน้าใหม่และปรับใช้ Divi Builder เพื่อสร้างในส่วนหน้า

การเพิ่ม ส่วนใหม่ที่ มีแถวหนึ่งคอลัมน์

เพิ่ม โมดูลข้อความ ในแถวที่มีเนื้อหาต่อไปนี้:

<h2>Guest Speaker</h2>

ถัดไป เพิ่มโมดูลตัวแบ่ง ใต้โมดูลข้อความโดยตรง

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

ในคอลัมน์แรกของแถว ให้เพิ่มโมดูลบุคคล

อัปเดตเนื้อหาโมดูลบุคคลดังนี้:

ชื่อ: [ว่างเปล่า]
URL โปรไฟล์ Facebook: [เพิ่ม “#” สำหรับตอนนี้]
URL โปรไฟล์ Twitter: [เพิ่ม “#” สำหรับตอนนี้]
URL โปรไฟล์ LinkedIn: [เพิ่ม “#” สำหรับตอนนี้]

สำหรับคำอธิบาย ให้เพิ่มสิ่งต่อไปนี้:

<h4>James <strong>Smith</strong></h4>
<hr style="width: 90px; float: left;">

หมายเหตุ: แท็ก hr สร้างเส้นแบ่งที่มีการจัดรูปแบบอินไลน์ให้กว้าง 90px และลอยไปทางซ้าย แท็กที่แข็งแกร่งที่ล้อมรอบนามสกุลทำให้เป็นตัวหนาสำหรับองค์ประกอบการออกแบบที่เป็นเอกลักษณ์

เมื่อคุณมีเนื้อหาแล้ว ให้บันทึกการตั้งค่าโมดูลบุคคล

คัดลอกโมดูลบุคคลที่คุณเพิ่งสร้างขึ้น และวางลงในแต่ละคอลัมน์ที่เหลือ เพื่อให้คุณมีโมดูลบุคคลเดียวกันในแต่ละคอลัมน์ทั้งสี่ ในการคัดลอกและวาง คุณสามารถใช้ตัวเลือกเมนูคลิกขวาหรือปุ่มลัด cmd+c cmd+v (mac) หรือ ctrl+c ctrl+v (win)

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

ชื่อ: “นี่อาจเป็นคุณ!”
คำอธิบาย: “ใช้ปุ่มด้านล่างเพื่อสมัครเพื่อพูดในกิจกรรมของเรา”

บันทึกการตั้งค่าของคุณ

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

กลับไปที่โมดูลสามคนแรกในคอลัมน์ 1-3 และเพิ่มรูปภาพสำหรับภาพบุคคลวิทยากรแต่ละคน ตรวจสอบให้แน่ใจว่ามีขนาดเท่ากันโดยมีขนาดความสูงและความกว้างเท่ากัน และมีขนาดใหญ่พอที่จะพิจารณาความกว้างของคอลัมน์ในเบราว์เซอร์ทุกขนาด (ในอุดมคติคือ 600px x 600px)

นี่คือสิ่งที่เลย์เอาต์ Guest Speak ของคุณควรมีลักษณะ ณ จุดนี้

การจัดรูปแบบเค้าโครงวิทยากรรับเชิญ

จัดแต่งทรงผมมาตรา

เปิดการตั้งค่าส่วนและอัปเดตสิ่งต่อไปนี้:

ภาพพื้นหลัง: [ฉันใช้รูปภาพจาก Agency Layout]

ไล่สีพื้นหลังด้านซ้าย: #293039
พื้นหลังไล่ระดับสีขวา: rgba(41,48,57,0.89)
สไตล์ตัวแบ่งด้านบน: ดูภาพหน้าจอ
ตัวแบ่งสีด้านบน: #293039
ความสูงของตัวแบ่งด้านบน: 30vw

การเปลี่ยนความกว้างของแถว

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

จากนั้นอัปเดตสิ่งต่อไปนี้:

ความกว้างที่กำหนดเอง: 80%

ตอนนี้ทั้งสองแถวของคุณจะมีความกว้างที่กำหนดเองเหมือนกัน

จัดแต่งทรงผมพาดหัวข่าว

เปิดการตั้งค่าของโมดูลข้อความที่มีหัวข้อ "วิทยากรรับเชิญ" ของคุณและอัปเดตสิ่งต่อไปนี้:

หัวข้อ 2 แบบอักษร: มอนต์เซอร์รัต
ส่วนหัว 2 น้ำหนักแบบอักษร: ตัวหนา
ส่วนหัว 2 รูปแบบตัวอักษร: TT
หัวเรื่อง 2 การจัดตำแหน่งข้อความ: right
หัวเรื่อง 2 สีข้อความ: #74bf46
หัวเรื่อง 2 ขนาดข้อความ: 70px (เดสก์ท็อป), 50px (สมาร์ทโฟน)

บันทึกการตั้งค่า.

ตอนนี้เปิดการตั้งค่าตัวแบ่งและอัปเดตสิ่งต่อไปนี้:

สี: #ffffff
ส่วนสูง: 0px
ความกว้าง: 90px
การจัดตำแหน่งโมดูล: right

จัดแต่งทรงผมโมดูลบุคคล

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

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

สีไอคอน: #74bf46
แบบอักษรของชื่อเรื่อง: Montserrat
น้ำหนักแบบอักษรของชื่อเรื่อง: เบา
สีข้อความของชื่อเรื่อง: #ffffff
ขนาดข้อความชื่อเรื่อง: 20px
แบบอักษรของร่างกาย: มอนต์เซอร์รัต
สีข้อความ: #ffffff
ระยะห่างระหว่างตัวอักษร: 2px
ความสูงของเส้นร่างกาย: 1.8em

การจัดรูปแบบโมดูลบุคคล CTA

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

ความกว้างของเส้นขอบรูปภาพ: 18px
สีของเส้นขอบรูปภาพ: #d2d2d2
ความทึบของภาพ: 50%

น้ำหนักแบบอักษรของชื่อเรื่อง: ตัวหนา
ความสูงของบรรทัดชื่อเรื่อง: 1.5em

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

สีข้อความของปุ่ม: #293039
สีพื้นหลังของปุ่ม: #74bf46
รัศมีเส้นขอบของปุ่ม: 50px
แบบอักษรของปุ่ม: มอนต์เซอร์รัต
น้ำหนักแบบอักษร: ตัวหนา

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

เคล็ดลับพิเศษ: เอฟเฟกต์การซูมภาพ โฮเวอร์

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

หากคุณกำลังมองหาเอฟเฟกต์โฮเวอร์ที่ละเอียดอ่อนเพื่อแยกโมดูลบุคคลของคุณออกจากกัน นี่คือวิธีการทำ

ใช้การเลือกหลายรายการเพื่อเลือกโมดูลบุคคลในคอลัมน์ 1, 2 และ 3 การเปิดการตั้งค่าองค์ประกอบ ภายใต้แท็บขั้นสูงให้ป้อน CSS ต่อไปนี้ภายใต้ องค์ประกอบหลัก :

overflow: hidden;

โค้ดนี้จะป้องกันไม่ให้อิมเมจขยายออกนอกคอนเทนเนอร์โมดูล

ถัดไปเพิ่ม CSS ต่อไปนี้ภายใต้ Member Image :

transition: all 0.3s; 

สิ่งนี้จะเพิ่มการเปลี่ยนภาพที่ราบรื่นเมื่อภาพขยายขนาด

หากต้องการเพิ่ม css บนโฮเวอร์ ให้คลิกไอคอนโฮเวอร์และเลือกแท็บโฮเวอร์แล้วป้อน CSS ต่อไปนี้:

transform: scale(1.1) translateY(-4.5%);

สิ่งนี้จะปรับขนาด (หรือขยาย) รูปภาพให้ใหญ่ขึ้นเล็กน้อยและเลื่อนขึ้นเล็กน้อย

ตอนนี้รูปภาพจะมีเอฟเฟกต์การซูมแบบละเอียดเมื่อวางเมาส์เหนือ

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

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

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

ไชโย!