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

นอกจากนี้เราจะแสดงวิธีการทำให้แถบการโปรโมตคงที่ (หรือเหนียว)

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

ในการเริ่มต้นคุณต้อง เพื่อติดตั้งและเปิดใช้งานธีม Divi . ตรวจสอบให้แน่ใจว่าคุณมี Divi เวอร์ชันล่าสุด

คุณจะต้องสร้างอย่างน้อยหนึ่งหน้าด้วยเครื่องมือสร้าง Divi สำหรับการทดสอบซึ่งจะได้รับผลกระทบจากเทมเพลตบาร์โปรโมชั่น

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

สร้างเทมเพลตใหม่

จากแดชบอร์ด WordPress ให้ไปที่ Divi > Builder ธีม. จากนั้นคลิกที่ช่อง "เพิ่มเทมเพลตใหม่" เพื่อสร้างเทมเพลตใหม่

กำหนดเทมเพลตให้กับหน้าเว็บที่ควรแสดงแถบการส่งเสริม

บนเทมเพลตใหม่คลิกที่กล่อง "เพิ่มร่างกายที่กำหนดเอง" และเลือก "สร้างร่างกายที่กำหนดเอง"

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

จากนั้นเลือกตัวเลือก“ สร้างจาก Scratch”

การเพิ่มแถบการส่งเสริมให้กับโมเดล

ในตัวแก้ไขเค้าโครงเทมเพลตเราสามารถเริ่มสร้างแถบโปรโมชั่นโดยใช้ Divi Builder

เริ่มต้นด้วยการเพิ่มแถวหนึ่งคอลัมน์ในส่วนปกติ

การตั้งค่าสาย

ก่อนเพิ่มโมดูลให้อัพเดตพารามิเตอร์ Row ดังต่อไปนี้:

• การไล่ระดับพื้นหลังด้านซ้าย: # 4a42ec
• การไล่ระดับสีพื้นหลังด้านขวา: # 521d91
• ทิศทางการไล่ระดับสี: 90deg
• ใช้ความกว้างของรางน้ำที่กำหนดเอง: ใช่
• ความกว้างของรางน้ำ: 1
• ความกว้าง: 100%
• ความกว้างสูงสุด: 100%
• เบาะ: 0px ที่ด้านบน, 0px ที่ด้านล่าง

สิ่งนี้สนับสนุนสีพื้นหลังและความกว้างของแถบโปรโมชันที่เราสร้าง

พารามิเตอร์คอลัมน์

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

display: flex;align-items: center;justify-content: center;

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

ตอนนี้เราพร้อมที่จะเพิ่มเนื้อหาลงในแถบโปรโมชั่น

เพิ่มโมดูล Blurb

สำหรับเนื้อหาของตัวอย่างการส่งเสริมการขายนี้เราจะรวมโมดูลการนำเสนอที่มีไอคอนขนาดเล็กและบล็อกข้อความพร้อมปุ่มทางด้านขวา (คล้ายกับแถบโปรโมชั่นที่ Elegantthemes.com)

คลิกที่วงกลมสีเทาพร้อมไอคอนภายในแถวและเพิ่มโมดูลการนำเสนอ

สำหรับเนื้อหาของข้อความการนำเสนอให้ป้อนข้อมูลต่อไปนี้:

• ชื่อ: [ป้อนข้อความของการส่งเสริมการขาย]
• ใช้ไอคอน: ใช่
• ไอคอน: ไอคอนของขวัญ (ดูภาพหน้าจอ)

อัพเดตการตั้งค่าการออกแบบงานนำเสนอดังนี้:

• สีไอคอน: # ff4a9e
• ภาพ / ตำแหน่งของไอคอน: ด้านซ้าย
• ใช้ขนาดตัวอักษรของไอคอน: ใช่
• ขนาดตัวอักษรของไอคอน: 16px
• ขนาดหัวเรื่องข้อความ: 16px (เดสก์ท็อป), 14px (โทรศัพท์)
• บรรทัดหัวเรื่อง Hewight: 1.3em
• ความกว้างสูงสุด: 230px (โทรศัพท์เท่านั้น)
• Padding: 10px ยอดนิยม
• รูปแบบภาพเคลื่อนไหว: สไลด์
• ทิศทางของภาพเคลื่อนไหว: ขวา
• ความล่าช้าของภาพเคลื่อนไหว: 250ms

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

จากนั้นเพิ่มโมดูลปุ่มใต้โมดูล Blurb เนื่องจากคุณสมบัติ flex โมดูลจะปรากฏทางด้านขวาของการแจ้งเตือนแทนที่จะเป็นด้านล่าง

อัพเดตพารามิเตอร์การออกแบบปุ่มดังต่อไปนี้:

• ใช้สไตล์ที่กำหนดเองสำหรับปุ่ม: ใช่
• ขนาดข้อความของปุ่ม: 15px (เดสก์ท็อป), 13px (โทรศัพท์)
• สีข้อความปุ่ม: #ffffff
• ความกว้างของเส้นขอบปุ่ม: 0px
• รัศมีของเส้นขอบของปุ่ม: 20px
• น้ำหนักตัวอักษร: ตัวหนากึ่ง

• ระยะขอบ (เดสก์ท็อป): 20px ทางด้านซ้าย
• ระยะขอบ (โทรศัพท์): 10px ทางด้านซ้าย
• เบาะ (สำนักงาน): 0px ที่ด้านบน, 0px ที่ด้านล่าง
• Padding (โทรศัพท์): 2px ที่ด้านบน, 2px ที่ด้านล่าง, 8px ทางด้านซ้าย, 8px ที่ด้านขวา
• รูปแบบภาพเคลื่อนไหว: ตีกลับ
• ความล่าช้าของภาพเคลื่อนไหว: 1000ms

การตั้งค่ามาตรา

หากต้องการออกแบบแถบโปรโมชันให้สมบูรณ์ให้อัพเดตส่วนที่มีแถบโปรโมชันดังต่อไปนี้:

• เบาะ: 0px ที่ด้านบน, 0px ที่ด้านล่าง
• รูปแบบภาพเคลื่อนไหว: ตีกลับ
• ทิศทางของภาพเคลื่อนไหว: ลง
• ระยะเวลาการเคลื่อนไหว: 500 มิลลิวินาที
• ความล่าช้าของภาพเคลื่อนไหว: 250ms
• แอนิเมชันเริ่มต้นความทึบ: 100%
• ดัชนี Z: 999

การเพิ่มโมดูลการเผยแพร่เนื้อหาแบบเต็มความกว้าง

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

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

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

เพิ่มส่วนความกว้างเต็ม

ใต้ส่วนที่มีแถบการโปรโมตของคุณให้เพิ่มส่วนความกว้างแบบเต็ม

เพิ่มโมดูลเนื้อหาในรูปแบบเต็มความกว้าง

จากนั้นเลือกโมดูลโพสต์เนื้อหาแบบเต็มความกว้าง

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

จากนั้นบันทึกการเปลี่ยนแปลงสำหรับตัวสร้างธีม

ผลสุดท้าย

ก่อนที่

ตอนนี้คือหน้าก่อนกำหนดโมเดลพร้อมแถบโปรโมชั่น

Après

และนี่คือหน้าเดียวกันกับเทมเพลตใหม่ที่มีแถบโปรโมชั่น

ทำให้แถบส่งเสริมการขายเหนียว

เพื่อให้แถบการส่งเสริมให้พอดีกับส่วนหัวเริ่มต้นของ Divi เราสามารถเพิ่มตัวอย่าง CSS อย่างง่ายในส่วนที่มีแถบโปรโมชั่น

position: fixed;width: 100%;

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

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

position: relative;

ตอนนี้ตรวจสอบผล

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

คิดสุดท้าย

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