สร้างกลุ่มกองรูปภาพในเว็บไซต์ Elementor ของคุณโดยใช้ Happy Addons

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

การออกแบบที่หรูหรานี้เหมาะอย่างยิ่งกับหน้าแรก เกี่ยวกับหน้า หรือแม้แต่ในหน้า Landing Page ที่เน้นการแปลง ดังนั้น หากคุณต้องการแสดงภาพของคุณอย่างสวยงามและง่ายดาย กลุ่มกองรูปภาพก็เป็นตัวเลือกที่ดีอย่างแน่นอน โดยเฉพาะอย่างยิ่งหากคุณใช้ Elementor Happy Addons ช่วยให้คุณเพิ่มกลุ่มรูปภาพดังกล่าวได้ง่ายมาก

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

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

วิดเจ็ตกลุ่มกองรูปภาพของ Happy Addons ได้อย่างรวดเร็ว

หากคุณต้องการทำให้รูปภาพเว็บไซต์ของคุณดึงดูดผู้เยี่ยมชมมากขึ้น ลองใช้วิดเจ็ต Image Stack Group ใหม่ของ Happy Addon ด้วยวิดเจ็ตฟรีพิเศษนี้ คุณสามารถสร้างภาพกลุ่มที่ซ้อนกันภายใน Elementor ได้อย่างง่ายดาย

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

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

วิธีใช้วิดเจ็ตกลุ่มกองรูปภาพเพื่อสร้างกลุ่มรูปภาพ

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

คุณต้องมีปลั๊กอินต่อไปนี้ในเว็บไซต์ของคุณก่อนที่เราจะเริ่ม:

• องค์ประกอบ (ฟรี)
• Happy Addons (ฟรี)

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

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

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

คุณสามารถพิมพ์ ' image stack group ' ในช่องค้นหา จากนั้นลากและวางลงในตำแหน่งที่ถูกต้องบนไซต์

ขั้นตอนที่ 2: จัดการ Conetnt

ที่นี่ เราจะจัดการเนื้อหาของวิดเจ็ต

เพิ่มรายการ & ตั้งค่าการจัดตำแหน่ง

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

คุณสามารถตั้งค่า Alignment ของเนื้อหาทั้งหมดได้

เพิ่มรูปภาพ/ไอคอนให้กับรายการ

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

เพิ่มคำแนะนำเครื่องมือ & ตั้งค่าตำแหน่ง

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

แทรกลิงก์และเปลี่ยนสีไอคอน

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

เปลี่ยนพื้นหลังและสีเส้นขอบ

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

ขั้นตอนที่ 3: เพิ่มรายการอื่นๆ

หลังจากเพิ่มเนื้อหาแต่ละรายการแล้ว เราได้เพิ่มรายการเพิ่มเติมอีกสามรายการและเนื้อหาตามขั้นตอนข้างต้น

ขั้นตอนที่ 4: ปรับแต่งการออกแบบ

มาปรับแต่งการออกแบบโดยใช้ตัวเลือกสไตล์กันเถอะ

สไตล์ภาพ/ไอคอน

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

เคล็ดลับเครื่องมือสไตล์

คุณสามารถกำหนดสไตล์ Tooltip ได้ที่นี่ในพื้นที่สไตล์ ที่นี่ คุณสามารถตั้งค่า ตำแหน่ง เคล็ดลับเครื่องมือสากล นอกจากนี้ คุณสามารถเพิ่ม Padding และ Border Radius ให้กับคำแนะนำเครื่องมือได้ และตั้งค่า Typography, Color, Background Color และ Box Shadow ของคำแนะนำเครื่องมือ

ขั้นตอนที่ 5: ตรวจสอบตัวอย่างการออกแบบ

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

อ่านเอกสารทั้งหมดของ Image Stack Group Widget

คุณยังสามารถชมวิดีโอแนะนำการใช้งานวิดเจ็ต Image Stack Group

วิดเจ็ตรูปภาพ Addons ที่มีความสุขเพิ่มเติมที่คุณสามารถใช้ได้

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

เปรียบเทียบรูปภาพ (ฟรี)

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

ตรวจสอบวิดเจ็ต Documentation of Image Compare

หีบเพลงภาพ (ฟรี)

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

ตรวจสอบวิดเจ็ต Documentation of Image Accordion เพื่อเรียนรู้วิธีการใช้งาน

ตารางรูปภาพ (ฟรี)

ต้องการแสดงภาพเว็บไซต์ของคุณในรูปแบบกริดใน Elementor หรือไม่? ตรวจสอบวิดเจ็ต Image Grid ของ Happy Addons เครื่องมือนี้ช่วยให้คุณออกแบบตารางรูปภาพแบบโต้ตอบได้ในเวลาไม่กี่นาที คุณสามารถใช้วิดเจ็ตนี้เพื่อสร้างแกลเลอรีรูปภาพ พอร์ตโฟลิโอ และอื่นๆ

อ่านวิดเจ็ต Documentation of Image Grid และเรียนรู้วิธีใช้งานอย่างถูกวิธี

เอฟเฟกต์โฮเวอร์รูปภาพ (ฟรี)

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

อ่านเอกสารประกอบของวิดเจ็ต Image Hover Effect

ภาพเลื่อน (Pro)

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

ทำตามเอกสารทั้งหมดของวิดเจ็ต Scrolling Image

เลื่อนภาพเดียว (Pro)

ต้องการนำเสนอภาพขนาดยาวบนเว็บไซต์ Elemntor ของคุณและมองหาเครื่องมือที่เหมาะสมในการทำเช่นนี้ใช่หรือไม่ ลองดูวิดเจ็ต Single Image Scroll ใหม่ของ Happy Addons ที่ให้คุณแสดงรูปภาพขนาดใหญ่ในรูปแบบต่างๆ

ตรวจสอบเอกสารประกอบของวิดเจ็ต Single Image Scroll

บทสรุป

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

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

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