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

วิธีกำหนดค่าโมดูล Divi Person

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

divi builder

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

person module divi.png

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

ตัวอย่างการใช้งาน: การเพิ่มส่วน "ทีมของเรา" ในหน้าเกี่ยวกับเรา

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

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

หน้าเกี่ยวกับ us.jpg

ใช้ Visual Builder แทรกส่วนมาตรฐานใหม่ด้วยแถวสามคอลัมน์ (1/3 1/3 1/3) จากนั้นเพิ่มโมดูลบุคคลในคอลัมน์แรก

โมดูลคน wordpress divi.png

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

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

ชื่อ: [ป้อนชื่อบุคคล]
ตำแหน่ง: [ป้อนนามสกุลของบุคคล]
ป้อน URL สำหรับโปรไฟล์โซเชียลมีเดีย
คำอธิบาย: [ป้อนประวัติโดยย่อ]
ภาพ: [ถ่ายภาพขนาด 600 x 600]

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

ไอคอนสี: # fcbf00
สีของไอคอนโฮเวอร์: # e0a831
แบบอักษรส่วนหัว: Roboto ตัวหนาใช้ประโยชน์จาก
ขนาดตัวอักษรส่วนหัว: 30px
สีข้อความส่วนหัว: # 505050
ระยะห่างของส่วนหัวจดหมาย: 1px
ความสูงของแถวส่วนหัว: 1.5em
ขนาดตัวอักษร: 18px
ขนาดเส้นโครงร่าง: 1.4em
การเติมเต็มที่กำหนดเอง: 15px ขึ้น, 15px ขวา, 15px ลง, 15px ซ้าย

ตัวเลือกขั้นสูง (CSS ที่กำหนดเอง)

องค์ประกอบหลัก:
-basket-box-shadow: 0 1px 5px rgba (0, 0, 0, 0.2)
-moz-box-shadow: 0 1px 5px rgba (0, 0, 0, 0,2);
กล่องเงา: 0 1px 5px rgba (0, 0, 0, 0,2);

เปลี่ยนโปรไฟล์ person divi.png

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

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

ว่ามัน!

module module person divi.jpg

Person Content ตัวเลือก

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

content option divi.png

ชื่อแรก

นี่คือชื่อของบุคคลที่คุณกำลังแนะนำ ชื่อจะแสดงที่ด้านบนของโมดูลด้วยข้อความขนาดใหญ่

ตำแหน่ง

ตำแหน่งจะแสดงใต้ชื่อด้วยข้อความขนาดเล็ก ซึ่งมักใช้เพื่ออ้างถึงตำแหน่งมืออาชีพของบุคคลภายในทีมงานขององค์กร ตัวอย่างเช่น Nick Roach "นักออกแบบกราฟิก"

URL โปรไฟล์ Facebook

ป้อน URL บนหน้า Facebook ของคุณหรือปล่อยว่างไว้เพื่อปิดใช้งานไอคอน Facebook

URL โปรไฟล์ Twitter

ป้อน URL ในหน้า Twitter ของคุณหรือเว้นว่างไว้เพื่อปิดไอคอน Twitter

URL โปรไฟล์ Google+

ป้อน URL บน Google+ เพจของคุณหรือเว้นว่างไว้เพื่อปิดไอคอน Google+

URL โปรไฟล์ LinkedIn

ป้อน URL ในหน้า LinkedIn ของคุณหรือปล่อยว่างไว้เพื่อปิดไอคอน LinkedIn

รายละเอียด

ใส่เนื้อหาของข้อความหลักสำหรับโมดูลของคุณที่นี่

URL รูปภาพ

ที่นี่คุณสามารถดาวน์โหลดรูปภาพเพื่อใช้ในประวัติ

สีพื้นหลัง

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

ภาพพื้นหลัง

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

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

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

ตัวเลือกการออกแบบสำหรับโมดูล Person

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

parametre design โมดูลคน divi.png

สีไอคอน

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

สีไอคอนบนโฮเวอร์

คุณยังสามารถเปลี่ยนสีโฮเวอร์สำหรับไอคอนโซเชียลมีเดียได้ เลือกสีที่ต้องการโดยใช้ตัวเลือกสีในการตั้งค่านี้

สีข้อความ

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

แบบอักษรส่วนหัว

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

ขนาดตัวอักษรส่วนหัว

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

สีข้อความส่วนหัว

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

ระยะห่างของตัวอักษรส่วนหัว

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

ความสูงของแถวส่วนหัว

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

แบบอักษร Body

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

ขนาดแบบอักษร Body

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

สีตัวอักษร

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

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

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

ความสูงของเส้นร่างกาย

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

ใช้เส้นขอบ

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

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

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

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

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

สไตล์ชายแดน

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

ระยะขอบที่กำหนดเอง

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

ช่องว่างภายในที่กำหนดเอง

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

ตัวเลือกขั้นสูงของโมดูลบุคคล

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

ตัวเลือกการออกแบบโมดูล divi.png

รหัส CSS

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

ชั้น CSS

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

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

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

นิเมชั่น

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

ความชัดเจน

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

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