โมดูลกระเป๋าสตางค์แบบเต็มความกว้างของ ธีม Diviทำงานเหมือนกับโมดูล Portfolio ปกติ ยกเว้นว่าจะแสดงโครงการของคุณในโหมด Fullwdth ที่สวยงาม นอกจากนี้ยังมาพร้อมกับการกำหนดค่าใหม่ที่ไม่เหมือนใคร ได้แก่ Grid และ Carousel โมดูลทำงานโดยแสดงรายการโครงการล่าสุดของคุณ และสามารถใช้ได้โดยนักออกแบบและศิลปินที่ต้องการแสดงแกลเลอรีของผลงานล่าสุด

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

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

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

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

ตัวอย่างการใช้งาน: การเพิ่มโมดูลพอร์ตโฟลิโอที่กรองได้ในหน้าพอร์ตโฟลิโอ

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

ขอเริ่มต้น

ใช้ตัวสร้างภาพเพื่อเพิ่มส่วนเต็มความกว้างด้านล่างส่วนหัวของหน้า จากนั้นเพิ่มโมดูลพอร์ตโฟลิโอที่กรองได้

อัปเดตการตั้งค่าพอร์ตโฟลิโอที่กรองได้ดังนี้:

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

ข้อความจำนวน: 8 หน้าการแสดงผล: NO

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

เค้าโครง: ไอคอนการซูมแบบตารางสี: # 000000 การวางซ้อนแบบเลื่อนสี: #ffffff ชื่อเรื่องแบบอักษร: ค่าเริ่มต้น, ตัวหนา, ตัวพิมพ์ใหญ่ทั้งหมดขนาดแบบอักษร: 14px ระยะห่างของตัวอักษรชื่อเรื่อง: 1px ขนาดตัวอักษร Meta: 12px ระยะห่างเมตา ตัวอักษร: 1px

นั่นคือทั้งหมด!

ตัวเลือกโมดูลเนื้อหาการลงทุน

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

ชื่อผลงาน

ป้อนชื่อที่ปรากฏเหนือผลงานหรือปล่อยว่างไว้เพื่อไม่ให้ใช้ชื่อ

รวมหมวดหมู่

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

จำนวนข้อความ

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

แสดงชื่อ

เลือกว่าจะให้แสดงชื่อของแต่ละโปรเจ็กต์หรือไม่เมื่อคุณวางเมาส์เหนือรายการโปรเจ็กต์

แสดงวันที่

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

สีพื้นหลัง

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

ภาพพื้นหลัง

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

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

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

ตัวเลือกการออกแบบกระเป๋าสตางค์แบบเต็มความกว้าง

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

อารมณ์

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

ไอคอนซูมสี

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

วางซ้อนภาพสี Hover

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

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

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

สีข้อความ

ที่นี่คุณสามารถเลือกได้ว่าข้อความของคุณควรมีสีอ่อนหรือเข้ม

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

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

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

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

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

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

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

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

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

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

แบบอักษร Meta

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

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

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

สีข้อความ Meta

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

ระยะห่างของ Meta Letter

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

ความสูงของ Meta Line

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

ใช้เส้นขอบ

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

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

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

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

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

สไตล์ชายแดน

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

ตัวเลือกผลงานขั้นสูงแบบเต็มความกว้าง

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

รหัส CSS

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

ชั้น CSS

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

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

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

Carousel อัตโนมัติ

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

ความเร็วอัตโนมัติหมุน

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

ความชัดเจน

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

[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 อื่น ๆ

• เว็บไซต์ 5 สำหรับการใช้งานร้านอาหาร Divi ธีม
• วิธีการเพิ่มข้อความในผลิตภัณฑ์ Divi WooCommerce
• วิธีการเปลี่ยนสีของเมนูระหว่างหน้า Divi
• วิธีปรับเปลี่ยนกริดของบล็อกด้วย Divi
• วิธีการใช้บทบาทของบรรณาธิการ Divi บน WordPress
• วิธีสร้างแถบเลื่อน Divi แบบเต็มหน้าจอ
• วิธีการเปลี่ยนสีของเมนูระหว่างหน้า Divi
• คุณสมบัติที่คุณอาจไม่รู้เกี่ยวกับ Divi
• วิธีการใช้ Divi Builder ใน WordPress
• วิธีใช้โมดูลเลื่อนภาพ Divi
• วิธีการใช้โมดูล Divi Builder Flip
• วิธีการเพิ่มโมดูลข้อความรับรองในตัวสร้าง Divi
• วิธีใช้โมดูลข้อความ Divi
• วิธีสร้างแถบเลื่อนบน Divi
• วิธีแก้ไขบทบาทผู้ใช้ Divi
• วิธีใช้โมดูล Divi Social Media
• วิธีใช้โมดูลร้านค้าในธีม WordPress Divi
• วิธีใช้โมดูลด้านข้าง Divi
• วิธีการใช้โมดูลตารางราคา Divi
• วิธีการใช้โมดูลชื่อเรื่องของสิ่งพิมพ์ของ Divi
• วิธีเพิ่มโมดูลวิดีโอของ Divi
• วิธีใช้โมดูลการนำทางบทความ
• วิธีการใช้โมดูลค้นหา Divi
• วิธีใช้โมดูลกระเป๋าสตางค์ Divi
• วิธีการใช้โมดูลคนบน Divi Builder
• วิธีใช้โมดูลกระเป๋าสตางค์กับตัวกรอง Divi
• วิธีการใช้โมดูลเลื่อนความกว้างเต็ม
• วิธีใช้โมดูล Divi Builder Image
• วิธีใช้โมดูลการนำทางความกว้างเต็มรูปแบบของ Divi Builder
• วิธีการใช้โมดูลคลังภาพ
• วิธีการใช้โมดูลบัตร Divi Builder Full-Width Card
• วิธีใช้โมดูล Divi Full Width Portfolio
• วิธีใช้โมดูลส่วนหัวแบบเต็มความกว้างของ Divi
• วิธีใช้โมดูล Divi Counter
• วิธีใช้แถบเลื่อนบทความบนเครื่องมือสร้าง Divi
• วิธีใช้โมดูล Divi Email Optin