จำเป็นต้องสร้างแกลเลอรีรูปภาพแบบแท็บใน Elementor ?

อย่างที่เราพูดมาโดยตลอดว่า Elementor เป็นมากกว่าปลั๊กอินตัวสร้างเพจ เป็นปลั๊กอินอเนกประสงค์ที่สามารถแทนที่ . ได้หลายประเภท ปลั๊กอิน WordPress ขณะนั้น. หนึ่งในปลั๊กอินที่สามารถเปลี่ยนได้ด้วย Elementor เป็นปลั๊กอินแกลเลอรีรูปภาพ

กับ Elementor, คุณไม่จำเป็นต้องติดตั้งปลั๊กอินเพิ่มเติมเพื่อ สร้างแกลเลอรี่ภาพ บนเว็บไซต์ WordPress ของคุณ Elementor มีวิดเจ็ตสองแบบสำหรับสร้างแกลเลอรีรูปภาพ: แกลเลอรีพื้นฐานและแกลเลอรี

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

นี่เป็นสิ่งที่ดีถ้าคุณต้องการสร้างแกลเลอรีบนเว็บไซต์การถ่ายภาพ ในบทความนี้ เราจะแสดงวิธีสร้างแกลเลอรีรูปภาพแบบแท็บใน Elementor

วิธีสร้างแกลเลอรีรูปภาพแบบแท็บใน Elementor

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

อ่าน: วิธีสร้างแกลเลอรีรูปภาพแบบแท็บใน Elementor

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

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

วิธีสร้างแกลเลอรีรูปภาพแบบแท็บใน Elementor

ภายใต้บล็อก การตั้งค่า ใต้แท็บ เนื้อหา, ตั้งค่าตัวเลือก ชนิดภาพเขียน sur แพลตฟอร์มที่หลากหลาย.

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

ดูเพิ่มเติม: วิธีสร้างแถบความคืบหน้าการไล่ระดับสีใน Elementor

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

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

วิธีสร้างแกลเลอรีรูปภาพแบบแท็บใน Elementor

เปิดรายการอื่นๆ (แท็บ) และทำซ้ำขั้นตอนข้างต้นเพื่อตั้งค่าป้ายกำกับแท็บและเพิ่มรูปภาพ

ปรับแต่งแกลเลอรี

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

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

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

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

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

ภาพ

บล็อกนี้ให้คุณกำหนดสีเส้นขอบของรูปภาพ สีเส้นขอบที่ชี้ ความกว้างของเส้นขอบ รัศมีเส้นขอบ ตัวกรอง CSS และแอนิเมชั่นการชี้

วิธีสร้างแกลเลอรีรูปภาพแบบแท็บใน Elementor

วางซ้อน

บล็อกนี้อนุญาตให้คุณตั้งค่าสีโอเวอร์เลย์ สีโอเวอร์เลย์แบบโฮเวอร์ โหมดผสมผสาน และแอนิเมชั่นโฮเวอร์

คอนเทนต์

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

แถบตัวกรอง

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

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

รับ Elementor Pro ทันที!

สรุป

ที่นี่คือ ! บทความนี้จะแสดงวิธีสร้างแกลเลอรีรูปภาพแบบแท็บใน Elementor เท่านั้น หากคุณมีข้อสงสัยในการเดินทาง f onแจ้งให้เราทราบใน ความเห็น.

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

แต่ในขณะเดียวกัน แบ่งปันบทความนี้ในเครือข่ายโซเชียลต่าง ๆ ของคุณ.

...