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

gallery example divi.png

วิธีเพิ่มโมดูลแกลเลอรี่ในหน้าของคุณ

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

divi builder

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

แกลเลอรี่ภาพ divi.png

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

ตัวอย่างการใช้งาน: การเพิ่มแกลเลอรีรูปภาพแบบเต็มความกว้างเพื่อแสดงภาพถ่าย

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

กำลังสร้างคลังภาพ divi.jpg

และอย่าลืมว่าแต่ละภาพจะเปิดป๊อปอัปขึ้นมาเพื่อวนดูภาพขนาดใหญ่ในแกลเลอรี

ไลบรารี divi gallery.gif

ใช้ Visual Builder เพิ่มส่วนใหม่ภายใต้ส่วนส่วนหัวที่มีแถวเต็มความกว้างหรือเต็ม (1 คอลัมน์) จากนั้นเพิ่มโมดูลแกลเลอรีลงในแถว

อัพเดตการตั้งค่าโมดูลคลังภาพดังนี้:

ตัวเลือกเนื้อหา

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

ตัวเลือกการออกแบบ

เค้าโครง: การวางแนวภาพขนาดย่อของตาราง: ไอคอนการซูมแนวนอนสี: #ffffff สีของการวางเมาส์เหนือ: rgba (0,0,0,0.48) ตัวเลือกไอคอนโฮเวอร์: ค่าเริ่มต้น

divi เนื้อหาของ wordpress tutorial content.png

บันทึกการตั้งค่า

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

ทำให้แถวนี้เต็มความกว้าง: ใช่
ใช้ความกว้างของรางน้ำที่กำหนดเอง: ใช่
ความกว้างของรางน้ำ: 1

สิ่งสำคัญคือต้องจำไว้ว่าค่าตัวเลข "1" สำหรับความกว้างของรางน้ำเป็นศูนย์จริงๆ (ไม่มีความกว้างเลย)

การกำหนดค่าของช่องว่างของgoutière.png

บันทึกการตั้งค่า

ว่ามัน!

ตัวเลือกเนื้อหาของโมดูลแกลเลอรี

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

divi โมดูล galery content.png

รูปภาพของแกลเลอรี

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

จำนวนภาพ

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

แสดงชื่อและคำบรรยายภาพ:

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

ดูการแบ่งหน้า

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

ป้ายกำกับดูแลระบบ

สิ่งนี้จะเปลี่ยนป้ายชื่อโมดูลในตัวสร้างเพื่อให้ระบุตัวตนได้ง่าย เมื่อคุณใช้มุมมอง WireFrame ใน Visual Builder ป้ายเหล่านี้จะปรากฏในบล็อกโมดูลของอินเทอร์เฟซ Divi Builder

ตัวเลือกการออกแบบโมดูลแกลลอรี่

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

gallery module zone design.png

อารมณ์

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

การจัดรูปขนาดย่อ

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

ไอคอนซูมสี

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

วางเมาส์สีซ้อนทับ

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

ไอคอนตัวเลือก Overflight (โฮเวอร์)

ที่นี่คุณสามารถเลือกไอคอนที่กำหนดเองเพื่อแสดงเมื่อผู้เยี่ยมชมวางเมาส์เหนือรายการแกลเลอรีในโมดูล

สีข้อความ

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

แบบอักษรชื่อ

คุณสามารถเปลี่ยนแบบอักษรของข้อความชื่อเรื่องได้โดยเลือกแบบอักษรที่ต้องการจากเมนูแบบเลื่อนลง Divi มาพร้อมกับฟอนต์ดีๆมากมายที่ขับเคลื่อนโดย Google Fonts โดยค่าเริ่มต้น Divi จะใช้แบบอักษร Open Sans สำหรับข้อความทั้งหมดในเพจของคุณ คุณยังสามารถปรับแต่งรูปแบบของข้อความของคุณโดยใช้ตัวหนาตัวเอียงตัวพิมพ์ใหญ่และขีดเส้นใต้

ขนาดตัวอักษรของชื่อเรื่อง

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

สีข้อความชื่อเรื่อง

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

ระยะห่างของตัวอักษรชื่อ

ระยะห่างของตัวอักษรมีผลต่อช่องว่างระหว่างตัวอักษรแต่ละตัว หากคุณต้องการเพิ่มช่องว่างระหว่างตัวอักษรแต่ละตัวในข้อความชื่อเรื่องของคุณให้ใช้แถบเลื่อนช่วงเพื่อปรับช่องว่างหรือป้อนขนาดระยะห่างที่ต้องการในช่องป้อนข้อมูลทางด้านขวาของแถบเลื่อน ช่องป้อนข้อมูลรองรับหน่วยวัดที่แตกต่างกันซึ่งหมายความว่าคุณสามารถป้อน "px" หรือ "em" ขึ้นอยู่กับค่าขนาดของคุณเพื่อเปลี่ยนประเภทหน่วย

ความสูงของบรรทัดชื่อเรื่อง

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

แบบอักษรของคำอธิบาย

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

ขนาดตัวอักษรตำนาน

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

สีข้อความคำอธิบายแผนภูมิ

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

ระยะห่างของตัวอักษรในตำนาน divi.png

การเว้นวรรคของตัวอักษรในตำนาน

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

ความสูงของสายของตำนาน

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

ใช้เส้นขอบ

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

สีของเส้นขอบ

ตัวเลือกนี้มีผลต่อสีของเส้นขอบของคุณ เลือกสีที่กำหนดเองจากตัวเลือกสีเพื่อใช้กับเส้นขอบของคุณ

ความกว้างของเส้นขอบ

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

สไตล์ชายแดน

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

ตัวเลือกโมดูลแกลเลอรีขั้นสูง

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

ตัวเลือกล่วงหน้าของโมดูล gallery divi.png

รหัส CSS

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

ชั้น CSS

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

CSS ที่กำหนดเอง

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

ความชัดเจน

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

[vc_row center_row=”ใช่”][vc_column width=”1/2″][vcex_button target=”blank” layout=”expanded” align=”center” font_family=”Raleway” font_weight=”700″ style=”flat” custom_background=”#18b69d” custom_hover_background=”#118d7a” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]ดาวน์โหลดธีม DIVI [/vcex_button][/vc_column][vc_column width=” 1 /2″][vcex_button url=”https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials” target=”blank” layout=”expanded” align=”center” font_family = ”Raleway” font_weight=”700″ style=”flat” custom_background=”#c4226e” custom_hover_background=”#8d184f” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]ดาวน์โหลด TEMPLATES DIVI[/vcex_button][/vc_column][/vc_row]

บทแนะนำ Divi อื่น ๆ