การสร้างแบนเนอร์ที่ตอบสนองด้วยตัวเลือกพื้นหลังใหม่ของ Divi

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

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

แบนเนอร์ Html กับแบนเนอร์รูปภาพ

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

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

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

แอบมอง

ก่อนที่เราจะลงสนามอย่างเป็นทางการ นี่คือตัวอย่างแบนเนอร์ที่เราจะสร้างในโพสต์นี้

การนำการออกแบบไปใช้ Divi

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

ตัวอย่าง #1: โลโก้แบนเนอร์

ใช้ Visual Builder เพิ่มส่วนปกติที่มีหนึ่งคอลัมน์และหนึ่งแถว

ถัดไปเพิ่มโมดูลปุ่มในแถว

จากนั้นอัปเดตการ ตั้งค่าโมดูลปุ่ม ดังนี้:

ตัวเลือกเนื้อหา

ข้อความปุ่ม: [ป้อนข้อความที่คุณต้องการใช้สำหรับข้อความแบนเนอร์ของคุณ]
URL ของปุ่ม: [ป้อน URL]

ตัวเลือกการออกแบบ

การจัดตำแหน่งปุ่ม: Center
สีข้อความ: เบา
ใช้สไตล์ที่กำหนดเองสำหรับปุ่ม: ใช่
ขนาดข้อความของปุ่ม: 32px
ความกว้างของขอบปุ่ม: 0px
แบบอักษรของปุ่ม: Arvo
ไอคอนปุ่ม: [เพิ่มไอคอน ฉันใช้ไอคอนเคอร์เซอร์]
แสดงเฉพาะไอคอนเมื่อวางเมาส์เหนือปุ่ม: NO

ตัวเลือกขั้นสูง

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

 Width: 100%;
padding: 20px 0 200px; 

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

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

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

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

ตัวเลือกเนื้อหา

ภายใต้แท็บภาพพื้นหลัง

ภาพพื้นหลัง: [แทรกรูปภาพ]
ตำแหน่งภาพพื้นหลัง: [ใช้ตัวเลือกนี้เพื่อปรับภาพสำหรับแบนเนอร์ของคุณ ฉันต้องการให้ส่วนล่างของรูปภาพของฉันแสดง ดังนั้นฉันจึงเลือก “Bottom Center”]

เลื่อนลงมาเล็กน้อยเพื่ออัปเดตตัวเลือกพื้นหลังของคอลัมน์ 1

เลือก แท็บการไล่ระดับสีพื้นหลัง ของ คอลัมน์ 1 แล้วคลิกปุ่มวงกลมสีเทาที่มีสัญลักษณ์บวกสีขาว

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

พื้นหลังไล่ระดับสี: rgba(131,0,233,0.92), rgba(0,0,0,0.69)
ทิศทางการไล่ระดับของคอลัมน์: 180deg
ตำแหน่งเริ่มต้นของคอลัมน์: 50%
ตำแหน่งสิ้นสุดคอลัมน์: 0%

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

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

ขนาดภาพพื้นหลังของคอลัมน์ 1: ขนาดจริง (โลโก้ของฉันคือ 120 x 120 png)

คอลัมน์ 1 ตำแหน่งภาพพื้นหลัง: กึ่งกลาง

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

ลองทำตัวอย่างอื่น

ตัวอย่าง #2: แบนเนอร์ข้อความอย่างง่าย

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

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

ตัวเลือกเนื้อหา

ภาพพื้นหลัง: [ป้อนภาพใหม่]
ตำแหน่งภาพพื้นหลัง: Center
คอลัมน์ 1 พื้นหลังไล่ระดับสี: rgba(0,0,0,0.41), rgba(12,113,195,0.66)
ทิศทางการไล่ระดับของคอลัมน์: 270deg

คลิกถัดไปบน แท็บรูปภาพพื้นหลัง ของ คอลัมน์ 1 แล้วลบรูปภาพ/โลโก้

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

ไปที่การ ตั้งค่าโมดูลปุ่ม และอัปเดตสิ่งต่อไปนี้:

ตัวเลือกเนื้อหา

ข้อความปุ่ม: [ป้อนข้อความสำหรับแบนเนอร์ของคุณ]
URL ของปุ่ม: [ป้อน URL สำหรับแบนเนอร์]

ตัวเลือกการออกแบบ

ขนาดข้อความของปุ่ม: 42px
ความกว้างของขอบปุ่ม: 19px
ปุ่มสีเส้นขอบ: rgba(0,0,0,0.17)
ระยะห่างระหว่างตัวอักษรของปุ่ม: 8px
แบบอักษรของปุ่ม: มอนต์เซอร์รัต ตัวหนา (B)
เพิ่มไอคอนปุ่ม: NO
ปุ่มโฮเวอร์เส้นขอบสี: rgba(0,0,0,0.46)
ปุ่มเลื่อนเส้นขอบรัศมี: 0px
ระยะห่างระหว่างตัวอักษรของปุ่มโฮเวอร์: 12px

ดังที่คุณเห็น แบนเนอร์ตัวอย่างนี้มีเอฟเฟกต์โฮเวอร์เฉพาะที่เปลี่ยนสีเส้นขอบและเพิ่มระยะห่างตัวอักษร:

วิธีสร้างแบนเนอร์แบบเต็มความกว้าง

ในการทำให้แบนเนอร์นี้เป็นแบบเต็มความกว้าง สิ่งที่คุณต้องทำคืออัปเดตการ ตั้งค่าส่วน ภายใต้ แท็บออกแบบ ดังนี้:

ช่องว่างภายในที่กำหนดเอง: 0px บน, 0px ขวา, 0px ล่าง, 0px ซ้าย

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

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

ทำให้แถวนี้เต็มความกว้าง: ใช่
ใช้ความกว้างของรางน้ำแบบกำหนดเอง: ใช่
ความกว้างของรางน้ำ: 1

ตอนนี้แบนเนอร์ขยายเต็มความกว้างของหน้าจอบนอุปกรณ์ทั้งหมด

วิธีทำแบนเนอร์ติดหนึบ

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

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

padding: 0px 0px !important;

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

position: fixed;
top: 0;
width: 100%;
z-index: 9999;

ตอนนี้ทั้งส่วนของคุณจะติดอยู่ที่ด้านบนสุดของหน้าและยังคงอยู่เมื่อคุณเลื่อนลงมาที่หน้า

แบนเนอร์ประเภทนี้จะทำงานได้ดีสำหรับรายการส่งเสริมการขายบนหน้า Landing Page โดยไม่มีแถบนำทาง เนื่องจากแบนเนอร์แบบติดหนึบจะซ่อนแถบนำทางไว้

การเพิ่มแบนเนอร์ให้กับเลย์เอาต์หลายคอลัมน์

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

ลองให้มันยิง

เพิ่มส่วนปกติอีกส่วนที่มีโครงสร้างแถวของคอลัมน์ 1/2 1/2

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

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

ตัวเลือกเนื้อหา

ภายใต้แท็บภาพพื้นหลัง

พื้นหลังของคอลัมน์ 1: [ป้อนภาพพื้นหลัง]
คอลัมน์ 1 ตำแหน่งภาพพื้นหลัง: [ปรับตำแหน่งของภาพตามที่คุณต้องการ]
คอลัมน์ 1 ภาพพื้นหลังแบบผสมผสาน: คูณ

ใต้แท็บไล่ระดับพื้นหลัง

คอลัมน์ 1 ไล่ระดับสี: rgba(255,255,255,0), #e02b20
คอลัมน์ 1 ทิศทางการไล่ระดับสี: 180deg
คอลัมน์ 1 ตำแหน่งเริ่มต้น: 70%
คอลัมน์ 1 ตำแหน่งสิ้นสุด: 0%

ขั้นตอนสุดท้ายคือการอัปเดตการ ตั้งค่าโมดูลปุ่ม :

ตัวเลือกเนื้อหา

ข้อความปุ่ม: Travel Series

ตัวเลือกการออกแบบ

ขนาดข้อความของปุ่ม: 32px
ความกว้างของขอบปุ่ม: 2px
ระยะห่างระหว่างตัวอักษรของปุ่ม: 0px
สีเส้นขอบของปุ่มโฮเวอร์: #edf000
ปุ่มโฮเวอร์ตัวอักษรระยะห่าง: 0px

ตัวเลือกขั้นสูง

CSS ที่กำหนดเองในกล่ององค์ประกอบหลัก:

padding: 350px 0px 50px;
width: 100%;

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

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

ตรวจสอบผลลัพธ์

หมายเหตุ : ฉันจะไม่ใช้ความสูงของคอลัมน์ Equalize เมื่อใช้ฟังก์ชันนี้ คอลัมน์จะยืดผ่านโมดูลปุ่ม หากคุณต้องการให้ความสูงของแบนเนอร์ตรงกันอย่างสมบูรณ์ คุณอาจต้องลองใช้ช่องว่างภายในบนโมดูลปุ่มเพื่อให้ถูกต้อง

ตอบสนอง?

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

ต่อไปนี้คือตัวอย่างลักษณะเหล่านี้เมื่อย่อขนาดหน้าจอให้เล็กลง:

ความเข้ากันได้ของเบราว์เซอร์

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

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

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

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

ไชโย!