Divi: ธีม WordPress ที่ดีที่สุดของเวลาทั้งหมด!

ขึ้น ดาวน์โหลด 901.000 แล้วDivi เป็นธีม WordPress ที่ได้รับความนิยมมากที่สุดในโลก สมบูรณ์และใช้งานง่ายและมาพร้อมกับเทมเพลตฟรีมากกว่า 62

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

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

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

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

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

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

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

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

เพิ่มโมเดล Divi ใหม่

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

หน้าแรก Divi

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

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

เพิ่มแบบจำลองร่างกาย

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

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

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

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

เพิ่มแถวในคอลัมน์บน Divi

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

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

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

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

สร้างเว็บไซต์ของคุณอย่างง่ายดายด้วย Elementor

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

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

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

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

การปรับแต่งรหัส css

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

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

เพิ่มโมดูล Blurb

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

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

เพิ่มโมดูลสรุปส่วนที่สอง

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

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

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

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

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

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

โมดูลปุ่ม Divi

คุณต้องการขายผลิตภัณฑ์ของคุณบนอินเทอร์เน็ตหรือไม่?

ดาวน์โหลด WooCommerce ฟรี ปลั๊กอินอีคอมเมิร์ซที่ดีที่สุดในการขายผลิตภัณฑ์ทางกายภาพและดิจิทัลของคุณบน WordPress และสร้างร้านค้าออนไลน์ของคุณได้อย่างง่ายดาย เหมาะสำหรับผู้เริ่มต้น

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

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

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

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

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

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

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

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

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

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

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

สร้างส่วนตัวสร้าง Divi แบบเต็มความกว้าง

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

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

Divi เนื้อหาบทความแบบเต็มความกว้าง

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

บันทึกเค้าโครง Divi

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

ตัวสร้างธีม Divi

ผลสุดท้าย

ก่อนที่

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

Après

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

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

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

position: fixed;width: 100%;

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

เข้าสู่ส่วนคงที่

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

position: relative;

เพิ่มรหัส css ในส่วน divi

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

ผลการเคลื่อนไหว Divi

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

คิดสุดท้าย

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

2 หุ้น
หุ้น2
ทวีต
Enregistrer