วิธีสร้างแกลเลอรี่ภาพการเลื่อนอัตโนมัติใน WordPress ด้วย Elementor

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

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

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

ทำไมคุณควรพิจารณาสร้างแกลเลอรี่ภาพที่เลื่อนอัตโนมัติ

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

• ดึงดูดความสนใจของผู้เข้าชม

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

• บันทึกพื้นที่บนหน้า

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

• ปรับปรุงประสบการณ์ผู้ใช้

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

• เน้นภาพสำคัญโดยอัตโนมัติ

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

• ทำให้เว็บไซต์ของคุณดูทันสมัย

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

วิธีสร้างแกลเลอรี่ภาพเลื่อนอัตโนมัติใน WordPress (ทีละขั้นตอน)

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

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

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

• ผู้ประกอบการ
• Happyaddons
• Happyaddons Pro

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

ขั้นตอนที่ 01: เพิ่มคอนเทนเนอร์เพื่อสร้างส่วนใหม่

คลิกที่ ไอคอน Plus (+) บนผืนผ้าใบเพื่อเลือกคอนเทนเนอร์เพื่อสร้างส่วนที่คุณจะสร้างแกลเลอรีเลื่อนอัตโนมัติ

ขั้นตอนที่ 02: เพิ่มชื่อและคำอธิบายสำหรับคอนเทนเนอร์

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

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

ขั้นตอนที่ 03: ลากและวางวิดเจ็ตภาพเลื่อน

ลากและวาง วิดเจ็ตภาพเลื่อน ไปยังคอนเทนเนอร์บนผืนผ้าใบ Elementor

วิดเจ็ตภาพเลื่อน จะถูกเพิ่มลงในผืนผ้าใบ ถัดไปคุณต้องเพิ่มรูปภาพลงในวิดเจ็ตและปรับแต่งเค้าโครง

ขั้นตอนที่ 04: เลือกที่ตั้งไว้ล่วงหน้า (เลย์เอาต์) สำหรับวิดเจ็ตภาพเลื่อน

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

วิดเจ็ตภาพเลื่อนนำเสนอคอลเลกชันของที่ตั้งไว้ล่วงหน้าบนแผง Elementor เลือกที่ตั้งไว้ล่วงหน้าที่คุณชอบสำหรับวิดเจ็ต

ตรวจสอบวิธีสร้างกล่องพลิกใน WordPress

ขั้นตอนที่ 05: เพิ่มรูปภาพลงในวิดเจ็ตภาพเลื่อน

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

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

คุณจะเห็นว่าเราได้เพิ่มภาพลงในวิดเจ็ตภาพเลื่อนแล้ว

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

ขั้นตอนที่ 06: กำหนดค่าการตั้งค่าสำหรับวิดเจ็ต

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

ตอนนี้ทำการกำหนดค่าตามที่คุณต้องการ

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

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

เยี่ยมชมโพสต์เกี่ยวกับวิธีการฝัง Google Sheet ใน WordPress

ขั้นตอนที่ 07: เปลี่ยนที่ตั้งไว้ล่วงหน้าได้ตลอดเวลา (ไม่บังคับ)

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

ขั้นตอนที่ 08: สไตล์วิดเจ็ตภาพเลื่อน

มาที่แท็บสไตล์ คุณจะได้รับสามส่วนที่นี่ - Wrapper, Image Box และชื่อเรื่อง

ส่วน wrapper จะช่วยให้คุณปรับแต่ง ความกว้างความสูงการขยาย และ การจัดตำแหน่ง ของวิดเจ็ต

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

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

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

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

ขั้นตอนที่ 09: ตรวจสอบการตอบสนองมือถือของพวกเขา

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

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

หากมีปัญหาใด ๆ คุณสามารถแก้ไขได้โดยการปรับเค้าโครงโดยเฉพาะสำหรับมุมมองอุปกรณ์นั้น

ขั้นตอนที่ 10: ดูตัวอย่างแกลเลอรี่ภาพเลื่อนอัตโนมัติ

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

ดังนั้นคุณสามารถสร้างแกลเลอรี่ภาพการเลื่อนอัตโนมัติบน WordPress ด้วยความช่วยเหลือของปลั๊กอิน Elementor

คำถามที่พบบ่อยบนแกลเลอรีภาพเลื่อนอัตโนมัติ

หวังว่าคุณจะสนุกกับการสอน ตอนนี้ในส่วนนี้เราจะตอบคำถามบางอย่างที่อาจกระตุ้นความคิดของคุณ อ่านต่อไป!

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

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

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