Divi: ธีม WordPress ที่ดีที่สุดของเวลาทั้งหมด!

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

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

โมดูลส่วนหัวความกว้างเต็ม divi.png

วิธีการเพิ่มโมดูลเมนูแบบเต็มหน้าจอ Divi

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

ใช้ divi builder

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

full menu divi.png

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

ตัวอย่างการใช้งาน: การเพิ่มส่วนหัวแบบเต็มหน้าจอในหน้าเกี่ยวกับ

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

โมดูลเต็มหน้าจอทั้งหมดจะใช้ได้เฉพาะเมื่อใช้ส่วนเต็มหน้าจอ ใช้ Visual Builder แทรกส่วนเต็มหน้าจอใหม่ จากนั้นเพิ่มโมดูลบุคคลในส่วน

อัปเดตการตั้งค่าส่วนหัวแบบเต็มหน้าจอดังนี้:

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

Title: About Us Subtitle Text: We Do Things Different ... Background Image URL: [insert 1920 x 800 image] Overlay background Color: rgba (0,0,0,0.2 , XNUMX)

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

การวางแนวข้อความและโลโก้: ปุ่มกลางเลื่อนลงปุ่ม: ใช่ไอคอน: [เลือกไอคอน] ไอคอนเลื่อนลงสี: # fcbf00 ไอคอนเลื่อน: 50px สีข้อความ: สีอ่อนสีข้อความ: # fcbf00 แบบอักษร ชื่อเรื่อง: เปิดโดยไม่ใช้ตัวหนาตัวพิมพ์ใหญ่ขนาดตัวอักษรของชื่อเรื่อง: 60px (เดสก์ท็อป), 40px (แท็บเล็ต), 30px (โทรศัพท์) ขนาดตัวอักษรของคำบรรยาย: 25px

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

องค์ประกอบหลัก:
เบาะ: 100px 0;

ส่วนเนื้อหา divi โมดูล full screen.png

ว่ามัน!

ตัวอย่าง header divi.jpg

ตัวเลือกเนื้อหาส่วนหัวแบบเต็มหน้าจอ

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

content section divi.png

ชื่อเรื่อง

ป้อนชื่อหน้าเว็บของคุณที่นี่

ข้อความคำบรรยาย

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

ปุ่ม # 1 ข้อความ

ป้อนข้อความสำหรับปุ่ม

ปุ่ม # 2 ข้อความ

ป้อนข้อความสำหรับปุ่ม

เนื้อหา

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

ปุ่ม URL 1

ป้อน URL ของปุ่ม

ปุ่ม URL 2

ป้อน URL ของปุ่ม

URL รูปภาพโลโก้

อัปโหลดภาพที่คุณต้องการหรือพิมพ์ URL ของภาพที่คุณต้องการดู

URL รูปภาพส่วนหัว

อัปโหลดภาพที่คุณต้องการหรือพิมพ์ URL ของภาพที่คุณต้องการดู

URL ภาพพื้นหลัง

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

สีพื้นหลัง

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

สร้างเว็บไซต์ของคุณอย่างง่ายดายด้วย Elementor

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

สีพื้นหลังของภาพซ้อนทับ

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

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

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

ตัวเลือกการออกแบบส่วนหัวแบบเต็มความกว้าง

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

ส่วนการออกแบบโมดูล full width divi.png

การวางแนวข้อความและโลโก้

สิ่งนี้จะควบคุมวิธีจัดแนวข้อความของคุณในโมดูล

ทำแบบเต็มหน้าจอ

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

ใช้เอฟเฟกต์พารัลแลกซ์

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

วิธีการ Parallax

กำหนดวิธีการที่ใช้สำหรับเอฟเฟกต์พารัลแลกซ์

แสดงปุ่มเลื่อนลง

คุณสามารถเลือกได้ว่าจะให้แสดงปุ่มเลื่อนลงหรือไม่

ไอคอน

เลือกไอคอนเพื่อแสดงปุ่มเลื่อนลง

เลื่อนลงไอคอนสี

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

เลื่อนลงขนาดไอคอน

ใช้การตั้งค่านี้เพื่อเพิ่มหรือลดขนาดของไอคอนเลื่อนลงที่ปรากฏที่ด้านล่างของส่วนหัว

การจัดตำแหน่ง divi โมดูลความกว้างเต็มใน head.png

การจัดแนวภาพแนวตั้ง

สิ่งนี้ควบคุมการวางแนวของภาพในโมดูล

สีข้อความ

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

การจัดแนวแนวตั้งของข้อความ

การตั้งค่านี้กำหนดการจัดแนวตามแนวตั้งของเนื้อหาของคุณ เนื้อหาของคุณสามารถจัดกึ่งกลางในแนวตั้งหรือจัดแนวที่ด้านล่าง

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

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

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

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

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

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

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

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

ชื่อโมดูลการออกแบบ sectio ในหัวเต็มหน้าจอ divi.png

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

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

แบบอักษรเนื้อหา

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

ขนาดตัวอักษรของเนื้อหา

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

สีข้อความเนื้อหา

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

การเว้นวรรคเนื้อหา

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

ความสูงของบรรทัดเนื้อหา

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

แบบอักษรคำบรรยาย

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

ขนาดของแบบอักษรของคำบรรยาย

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

สีข้อความคำบรรยาย

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

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

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

ความสูงของบรรทัดคำบรรยาย

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

ความกว้างของข้อความสูงสุด

ใช้การตั้งค่านี้เพื่อลดความกว้างสูงสุดของข้อความในโมดูลส่วนหัว ตัวอย่างเช่นค่า 50% จะทำให้มั่นใจได้ว่าข้อความจะไม่เกิน 50% ของความกว้างของโมดูลส่วนหัวโดยรวม

โมดูลการออกแบบส่วนหัว divi full width.png

ใช้สไตล์ที่กำหนดเองสำหรับปุ่ม

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

ขนาดข้อความของปุ่มข้อความ

การตั้งค่านี้สามารถใช้เพื่อเพิ่มหรือลดขนาดของข้อความในปุ่ม ปุ่มจะปรับตามขนาดข้อความที่เพิ่มขึ้นและลดลง

สีของข้อความปุ่ม

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

สีพื้นหลังของปุ่ม

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

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

ปุ่ม Divi ทั้งหมดมีขอบ 2px ตามค่าเริ่มต้น เส้นขอบนี้สามารถเพิ่มหรือลดได้โดยใช้การตั้งค่านี้ สามารถลบเส้นขอบได้โดยป้อนค่าเป็น 0

สีเส้นขอบของปุ่ม

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

รัศมีขอบของปุ่ม

รัศมีของเส้นขอบมีผลต่อความกลมของมุมปุ่มของคุณ ตามค่าเริ่มต้นปุ่มต่างๆใน Divi จะมีรัศมีขอบเล็ก ๆ ที่ล้อมรอบมุม 3 พิกเซล คุณสามารถลดค่านี้เป็น 0 เพื่อสร้างปุ่มสี่เหลี่ยมหรือเพิ่มขึ้นอย่างมากเพื่อสร้างปุ่มที่มีขอบวงกลม

การเว้นวรรคของตัวอักษรปุ่ม

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

แบบอักษรปุ่ม

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

เพิ่มไอคอนปุ่ม

ปิดใช้งานการตั้งค่านี้จะลบไอคอนออกจากปุ่มของคุณ ตามค่าเริ่มต้นปุ่ม Divi ทั้งหมดจะแสดงไอคอนลูกศรบนโฮเวอร์

ไอคอนปุ่ม

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

ปุ่มไอคอนสี

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

ไอคอนตำแหน่งปุ่ม

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

แสดงเฉพาะไอคอนเมื่อวางเมาส์เหนือปุ่ม

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

สีของปุ่มวางเมาส์

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

เลื่อนสีพื้นหลังปุ่มเลื่อน (สีปุ่มวางเมาส์)

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

ปุ่มปักหมุดสี (สีขอบเลื่อน)

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

ปุ่มรัศมีขอบเลื่อน

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

ปุ่มเว้นวรรคบันทึกย่อ

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

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

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

โมดูลหัวเรื่อง divi section advance.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 =" expand "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] [/ width_column] [» vc_column] [ » 1/2″] [vcex_button url = "https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials" target = "blank" Layout = "ขยาย" align = "กลาง" 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 "] ดาวน์โหลดเทมเพลต DIVI [/ vcex_button] [/ vc_column] [/ vc_row]

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

8 หุ้น
หุ้น3
ทวีต1
Enregistrer4