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

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

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

divi builder

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

navigation in articles.png

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

ตัวอย่างการใช้งาน: การเพิ่มลิงก์การนำทางแบบกำหนดเองที่ด้านล่างของโพสต์บล็อก

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

ตัวอย่างเมนูนำทางชื่อ publication.jpg

ขอเริ่มต้น

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

เปลี่ยนหัวเรื่องของลิงก์ divi.png

อัพเดตการตั้งค่าการนำทางการเผยแพร่ดังนี้:

แท็บเนื้อหา

ข้อความลิงก์ก่อนหน้า:% title (ตัวแปรนี้แทรกชื่อบทความ)
ข้อความของลิงก์ต่อไปนี้:% title (ตัวแปรนี้แทรกชื่อบทความ)

แท็บการออกแบบ

ลิงก์แบบอักษร: PT Sans
ขนาดแบบอักษรของลิงก์: 20px
สีข้อความของลิงก์: # 5e95c1
ใช้เส้นขอบ: YES
สีขอบ: # 5e95c1
ความกว้างของเส้นขอบ: 1px
Custom Upholstery: 20px ด้านบน, 20px ขวา, ด้านล่าง 20px, 20px ซ้าย

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

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

เปลี่ยน navigation links.png

นั่นคือทั้งหมด! ตอนนี้คุณมีชื่อโพสต์ในลิงก์การนำทางแล้ว

ตัวอย่างของลิงค์บทความเกี่ยวกับ divi.png

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

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

ชื่อโมดูลเนื้อหาของ article.png

ข้อความของลิงค์ก่อนหน้า

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

ข้อความของลิงค์ต่อไปนี้

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

ในหมวดเดียวกัน

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

ชื่อของอนุกรมวิธานที่กำหนดเอง

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

ซ่อนลิงก์ก่อนหน้า

คุณสามารถเลือกซ่อนหรือแสดงลิงก์ก่อนหน้าได้ที่นี่

ซ่อนลิงก์ต่อไปนี้

คุณต้องการขายผลิตภัณฑ์ของคุณบนอินเทอร์เน็ตหรือไม่?

ดาวน์โหลด WooCommerce ฟรี ปลั๊กอินอีคอมเมิร์ซที่ดีที่สุดในการขายผลิตภัณฑ์ทางกายภาพและดิจิทัลของคุณบน WordPress และสร้างร้านค้าออนไลน์ของคุณได้อย่างง่ายดาย เหมาะสำหรับผู้เริ่มต้น

คุณสามารถเลือกซ่อนหรือแสดงลิงค์ต่อไปนี้ได้ที่นี่

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

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

ตัวเลือกการออกแบบหลังจากการนำทาง

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

section design.png บทความ title.png

แบบอักษรของลิงก์

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

ขนาดแบบอักษรของลิงก์

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

สีข้อความของลิงก์

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

ระยะห่างของตัวอักษรที่เชื่อมโยง

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

ความสูงของเส้นเชื่อมโยง

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

ใช้เส้นขอบ

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

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

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

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

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

สไตล์ชายแดน

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

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

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

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

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

ตัวเลือกขั้นสูงสำหรับโมดูลการนำทาง

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

โมดูลตัวเลือกล่วงหน้าของบทความ.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 อื่น ๆ

114 หุ้น
หุ้น10
ทวีต3
Enregistrer101