คำแนะนำทีละขั้นตอนในการเพิ่มแบนเนอร์วิดีโอธีม Dawn Shopify

หากคุณสมัครใช้บริการจากลิงก์ในหน้านี้ Reeves and Sons Limited อาจได้รับค่าคอมมิชชั่น ดูของเรา คำสั่งจริยธรรม.

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

ธีม Dawn มาพร้อมกับโมดูลมากมาย เช่น บล็อกการอัปโหลดวิดีโอมาตรฐานและแบนเนอร์รูปภาพ

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

ในคู่มือนี้ เราจะแสดงวิธีสร้าง ธีมรุ่งอรุณ แบนเนอร์วิดีโอเพื่อดึงดูดความสนใจบนหน้าแรกของคุณ!

ภาพรวมของธีมรุ่งอรุณ

ธีมรุ่งอรุณจาก Shopify

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

พื้นหลัง/แบนเนอร์วิดีโอคืออะไร และเหตุใดคุณจึงควรใช้อย่างใดอย่างหนึ่งบนเว็บไซต์ของคุณ?

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

ส่วนหน้าของแบนเนอร์วิดีโอธีม Dawn

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

  1. องค์ประกอบภาพที่สมบูรณ์ยิ่งขึ้น: ด้วยการผสมผสานวิดีโอที่น่าดึงดูด เว็บไซต์จะดึงดูดสายตามากขึ้น และดึงดูดความสนใจของผู้เยี่ยมชม
  2. เนื้อหาแบบไดนามิกและน่าดึงดูด: วิดีโอถ่ายทอดได้อย่างมีประสิทธิภาพformatไอออน. พวกเขาสามารถแสดงคุณลักษณะของผลิตภัณฑ์ สาธิตวิธีการ หรือบอกเล่าเรื่องราวของแบรนด์ที่น่าดึงดูด ซึ่งทำให้ผู้เยี่ยมชมมีส่วนร่วม
  3. การมีส่วนร่วมของผู้ใช้ที่เพิ่มขึ้น: วิดีโอมีพลังในการสร้างความประทับใจไม่รู้ลืมแก่ผู้เยี่ยมชม การผสมผสานระหว่างภาพ เสียง และการเคลื่อนไหวดึงดูดความสนใจและกระตุ้นให้ผู้ใช้สำรวจเพิ่มเติม
  4. การสื่อสารแบรนด์ที่มีประสิทธิภาพ: พื้นหลังหรือแบนเนอร์วิดีโอสามารถสื่อสารข้อความของแบรนด์ให้กับลูกค้าได้ ช่วยให้ธุรกิจสามารถเน้นการนำเสนอคุณค่าที่เป็นเอกลักษณ์ แสดงผลิตภัณฑ์หรือบริการ และสร้างเอกลักษณ์ของแบรนด์ที่แข็งแกร่ง

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

คำแนะนำทีละขั้นตอนในการเพิ่มพื้นหลัง/แบนเนอร์วิดีโอให้กับธีม Dawn

ในทางเทคนิคแล้ว มีสี่วิธีในการเพิ่มแบนเนอร์วิดีโอธีม Dawn (ไม่ใช่ทั้งหมดที่เหมาะสม):

  1. การแปลงวิดีโอเป็นวิดีโอ/รูปภาพ WebP format.
  2. การปรับ Shopify โค้ดสำหรับแบนเนอร์รูปภาพปกติ เพื่อรองรับวิดีโอ
  3. แปลงวิดีโอเป็น GIF format.
  4. เพียงอัปโหลดวิดีโอไปยังบล็อกวิดีโอ Shopifyข้ามแนวคิดเรื่องการมีองค์ประกอบพื้นหน้า (ดังนั้นมันจะไม่ใช่แบนเนอร์ที่แท้จริง)

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

ดังนั้นเราขอแนะนำให้แปลงวิดีโอใดก็ตาม format คุณมี (.mp4, .mov, .wmv) ไปยัง WebP format. WebP รวมข้อดีของรูปภาพ JPEG วิดีโอ และ GIF ความละเอียดสูงเข้าด้วยกัน โดยที่คุณสามารถสร้างวิดีโอภาพเคลื่อนไหวที่สวยงามได้โดยไม่ต้องสร้างจำนวนมาก และไม่สูญเสียความละเอียดมากนัก และคุณสามารถอัปโหลดวิดีโอ/รูปภาพ WebP ไปที่ Shopify แบนเนอร์รูปภาพ

นี่คือวิธี:

ขั้นตอนที่ 1: ถ่ายวิดีโอของคุณและแปลงเป็นไฟล์ WebP Format

มีตัวแปลง “วิดีโอเป็น WebP” ฟรีมากมายทางออนไลน์ ลองค้นหาออนไลน์ หรือใช้หนึ่งในตัวแปลงที่เราทดสอบ:

อัปโหลดวิดีโอของคุณไปยังเครื่องมือแปลงฟรี จากนั้นเลือกแปลงเป็น WebP format. บันทึกไฟล์ใหม่ลงในคอมพิวเตอร์ของคุณ

แปลงวิดีโอเป็น WebP เพื่อสร้างแบนเนอร์วิดีโอธีม Dawn

ขั้นตอนที่ 2: ค้นหาธีม Dawn ใน Shopify

ไปที่ “ร้านค้าออนไลน์” > “ธีม”

หากคุณยังไม่มี ให้ติดตั้งธีม Dawn อื่นwiseคุณควรพบธีม Dawn ที่กำหนดเป็น Shopifyของ “ธีมปัจจุบัน” คลิกที่ปุ่ม "ปรับแต่ง" เพื่อดำเนินการต่อ

ปรับแต่งเพื่อเพิ่มแบนเนอร์วิดีโอธีม Dawn

ขั้นตอนที่ 3: เพิ่มและเลือกบล็อกแบนเนอร์รูปภาพ

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

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

ขั้นตอนที่ 4: อัปโหลดไฟล์วิดีโอ WebP

คลิกปุ่ม "เลือกภาพ" ใต้ส่วน "ภาพแรก"

ปุ่มเลือกรูปภาพ

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

อัปโหลดวิดีโอ webp

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

ยินดีด้วย คุณเพิ่มแบนเนอร์วิดีโอธีม Dawn สำเร็จแล้ว!

การทำงานของแบนเนอร์วิดีโอธีม Dawn

ขั้นตอนที่ 5: ดูตัวอย่างวิดีโอ

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

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

ดูร้านค้า

ที่ประสบความสำเร็จ!

ส่วนหน้าของแบนเนอร์วิดีโอธีม Dawn

การปรับแต่งแบนเนอร์วิดีโอธีม Dawn ของคุณ: ทำให้เป็นของคุณโดยเฉพาะ

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

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

ความทึบของภาพซ้อนทับ

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

การจัดตำแหน่งเนื้อหาบนแบนเนอร์วิดีโอธีม Dawn

สำหรับการปรับแต่งเพิ่มเติม คุณสามารถเข้าถึงส่วน “CSS แบบกำหนดเอง” ได้

CSS ที่กำหนดเองในแบนเนอร์วิดีโอธีม Dawn

และแน่นอนว่าคุณสามารถเลือกข้อความหรือปุ่มของเนื้อหาเพื่อเปลี่ยนสิ่งที่พวกเขาพูดและลักษณะที่ปรากฏได้

เปลี่ยนเนื้อหาในแบนเนอร์วิดีโอธีม Dawn

เคล็ดลับในการเพิ่มประสิทธิภาพไฟล์วิดีโอของคุณเพื่อความเร็วสูงสุดและความเข้ากันได้

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

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

การแก้ไขปัญหาทั่วไปเกี่ยวกับการเพิ่มพื้นหลังวิดีโอ/แบนเนอร์ให้กับธีม Dawn

บางครั้ง ไม่ว่าคุณจะระมัดระวังเพียงใด ปัญหาก็ยังอาจปรากฏขึ้นเมื่อเพิ่มแบนเนอร์วิดีโอธีม Dawn ต่อไปนี้เป็นเคล็ดลับการแก้ปัญหาเมื่อคุณพบปัญหา:

ปัญหาความไม่เข้ากัน

ลองแปลงวิดีโอเป็นไฟล์ที่เข้ากันได้ format เช่น WebP หรือใช้ลิงก์ฝังวิดีโอ

ขนาดวิดีโอใหญ่เกินไป

ตัดแต่งวิดีโอหรือบีบอัดเพื่อลดขนาดไฟล์โดยยังคงคุณภาพไว้

วิดีโอไม่เล่นอัตโนมัติ

ตรวจสอบว่าคุณได้เปิดใช้งานตัวเลือก "เล่นอัตโนมัติ" ในการตั้งค่าธีมแล้ว

บทสรุปของเราเกี่ยวกับการเพิ่มแบนเนอร์วิดีโอธีม Dawn

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

คุณคิดยังไง? แจ้งให้เราทราบในความคิดเห็นหากคุณประสบความสำเร็จในการเพิ่มแบนเนอร์วิดีโอธีม Dawn!

โจวอร์นิมอนต์

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

ความคิดเห็น 0 คำตอบ

เขียนความเห็น

ที่อยู่อีเมลของคุณจะไม่ถูกเผยแพร่ ช่องที่ต้องการถูกทำเครื่องหมาย *

อันดับ *

ไซต์นี้ใช้ Akismet เพื่อลดสแปม เรียนรู้วิธีการประมวลผลข้อมูลความคิดเห็นของคุณ.

ดู Shopify เป็นเวลา 3 เดือนกับ $1/เดือน!