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

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

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

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

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

ปุ่ม divi Builder โมดูลบล็อก divi

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

ใส่โมดูลรหัส Divi

 

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

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

ในตัวอย่างนี้ฉันจะเพิ่มสคริปต์ลิงก์เพื่อนำเข้า Animate.css เพื่อเพิ่มเอฟเฟกต์ภาพเคลื่อนไหวให้กับองค์ประกอบในหน้า เนื่องจากไฟล์ Animate.css มีโค้ดจำนวนมากจึงควรโหลดเฉพาะในหน้าที่ฉันต้องการเท่านั้น

เพียงเพิ่มส่วนปกติและบรรทัดแบบเต็มความกว้าง (คอลัมน์ 1) และเพิ่มโมดูลรหัส

รหัสตัวสร้าง Divi

ในกล่องข้อความของ เนื้อหาให้เพิ่มข้อมูลโค้ด

เพิ่มข้อมูลโค้ด animate.css

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

ในการตั้งค่าโมดูลปุ่มบนแท็บขั้นสูงป้อนสองคลาส "เคลื่อนไหว" และ "ตีกลับ" ในกล่องข้อความคลาส CSS

เพิ่มคลาส css animate

ตอนนี้ปุ่มจะตีกลับเมื่อโหลดหน้าเว็บ

ภาพเคลื่อนไหวของปุ่มตัวสร้าง Divi

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

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

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

พารามิเตอร์รหัสตัวสร้าง Diviเนื้อหา

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

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

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

ตัวเลือกการออกแบบโค้ด

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

ตัวสร้างรหัสโมดูลการออกแบบตัวเลือกตัวสร้าง Diviความกว้างสูงสุด

ค่าใด ๆ ที่ป้อนที่นี่จะจำกัดความกว้างของเนื้อหาใด ๆ ที่แสดงผลในโมดูลโค้ดเป็นค่าที่ตั้งไว้ ตัวอย่างเช่นการป้อน 50% ในช่องป้อนข้อมูลจะลดเนื้อหาของโมดูลโค้ดลงเหลือ 50% ของคอลัมน์ที่มีอยู่

รหัสตัวเลือกขั้นสูงรหัส

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

ตัวสร้างรหัสโมดูลขั้นสูงส่วน

รหัส CSS

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

ชั้น CSS

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

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

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

ความชัดเจน

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

สำหรับบทช่วยสอนนี้