25 ฟีเจอร์ "ซ่อน" Divi เพื่อเพิ่มประสิทธิภาพและการออกแบบ

ด้วยฟีเจอร์ Divi อันทรงพลังทั้งหมดที่เปิดตัวในช่วงหลายปีที่ผ่านมา พูดได้เลยว่าบางฟีเจอร์อาจถูกมองข้าม (หรือถูกละเลย) ได้อย่างปลอดภัย พวกเราที่ใช้ Divi เป็นประจำทุกวันอาจติดขัดในรูปแบบ Divi ของเราและต้องการการเตือนความจำเล็กน้อยเกี่ยวกับคุณสมบัติใหม่ที่มีให้ และผู้ที่ยังใหม่กับ Divi อาจต้องการใครสักคนที่จะให้ความกระจ่างเกี่ยวกับคุณลักษณะที่ "ซ่อน" ไว้ในไซต์ธรรมดา ไม่ว่าคุณจะเป็น Divi Master หรือ Youngling ก็ตาม การพิจารณาคุณสมบัติทั้งหมดที่มีใน Divi อย่างถี่ถ้วนนั้นไม่เคยเจ็บปวด คุณอาจเรียนรู้สิ่งใหม่!

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

สนุก!

25 ฟีเจอร์ "ซ่อน" Divi เพื่อเพิ่มประสิทธิภาพและการออกแบบ

สมัครสมาชิกช่อง Youtube ของเรา

#1 แถบค้นหาตัวเลือกการค้นหา

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

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

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

#2 วางการไล่ระดับสีเหนือภาพพื้นหลัง

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

#3 สลับสีพื้นหลังไล่ระดับสองสีของคุณ: มีปุ่มสำหรับสิ่งนั้น

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

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

#4 แป้นพิมพ์ลัด

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

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

อ้อ สามารถเข้าถึงวิดีโอเอกสารความช่วยเหลือได้ด้วยวิธีเดียวกัน อย่าลืมเกี่ยวกับสิ่งเหล่านั้น

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

#5 มุมมองโครงลวด

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

และอย่าลืมปุ่มลัดเพื่อเปิดและปิดมุมมองโครงร่าง: shift + w

เพื่อให้ได้มุมมองที่กว้างขึ้นของเลย์เอาต์ของคุณภายใน wireview คุณสามารถเลือกไอคอนลูกศรสลับในแต่ละส่วนหรือแถวของคุณเพื่อยุบทั้งส่วน

#6 การแก้ไขแบบอินไลน์

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

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

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

#7 Visual Builder แยกการทดสอบโดยใช้ตัวเลือกคลิกขวา

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

#8 การตั้งค่าตัวสร้างที่ปรับแต่งได้

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

นี่คือสามที่ฉันต้องการเน้น

การตั้งค่า Modal ตำแหน่งเริ่มต้น

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

การตั้งค่ากลุ่มเป็นปิด Toggles

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

โหมดโต้ตอบเริ่มต้นของตัวสร้าง

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

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

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

#9 ตัวเลือกการออกแบบลิงก์ รายการ และ Blockquote ด้วย Text Module

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

นี่คือสองตัวเลือกที่ฉันโปรดปรานที่คุณอาจมองข้ามไป

รายการตัวเลือกสไตล์

ภายใต้แท็บ Unordered และ Ordered Lists คุณสามารถเปลี่ยนประเภทสไตล์รายการได้อย่างง่ายดายหรือกำจัดมันทั้งหมดเข้าด้วยกัน

คุณยังสามารถเปลี่ยนระยะขอบเยื้องสำหรับรายการและตำแหน่งลักษณะได้อีกด้วย

ตัวเลือกสไตล์บล็อคโควต

ใต้แท็บ Blockquote คุณสามารถเปลี่ยนน้ำหนักและสีของเส้นขอบขององค์ประกอบการออกแบบที่ทำให้ Blockquote แตกต่างออกไปได้

#10 ตัวเลือกการออกแบบสำหรับระดับส่วนหัวทั้ง 6 ระดับ

ในหมายเหตุเดียวกันกับ #9 ด้านบน อินเทอร์เฟซแบบแท็บใหม่มีอยู่สำหรับระดับส่วนหัวของข้อความเช่นกัน นั่นหมายความว่าถ้าคุณมีโมดูลที่มีส่วนหัวหลายอัน (h1, h2, h3 เป็นต้น) คุณสามารถกำหนดสไตล์ที่เป็นเอกลักษณ์ให้กับแต่ละส่วนหัวได้ภายในการตั้งค่าการออกแบบโมดูล ภายใต้แท็บ ออกแบบ ให้เปิดสวิตช์เปิดส่วนหัวเรื่องหรือข้อความส่วนหัว แล้วเลือกแท็บที่ควบคุมประเภทส่วนหัวที่คุณต้องการปรับแต่ง

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

#11 อัปโหลดแบบอักษรที่กำหนดเองด้วยโมดูล Divi

ใครจะรู้? บางทีปุ่มอัปโหลดนั้นยังคงซ่อนอยู่ในไซต์ธรรมดาสำหรับบางท่าน ถ้าเป็นเช่นนั้น คุณควรใช้ประโยชน์จากคุณสมบัติที่สะดวกสบายนี้อย่างแน่นอน ไม่เพียงแต่คุณสามารถอัปโหลดฟอนต์แบบกำหนดเองในไฟล์ประเภทต่างๆ ได้อย่างง่ายดาย (eot, woff2, woff, ttf, otf) Divi จะจัดเก็บฟอนต์แบบกำหนดเองเหล่านั้นให้คุณเพื่อให้พร้อมใช้งานสำหรับโมดูลทั้งหมดทั่วทั้งไซต์ของคุณ

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

อัปโหลดฟอนต์ Modal จะปรากฏขึ้นเพื่อให้ตั้งชื่อและเพิ่มไฟล์ฟอนต์ของคุณ

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

#12 ลบช่องว่างใต้ภาพ

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

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

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

#13 เพิ่มหน่วยต่าง ๆ สำหรับอินพุตที่ต่างกัน

ตามค่าเริ่มต้น เมื่อคุณป้อนตัวเลขสำหรับอินพุตบางอย่างตลอดการตั้งค่าตัวสร้าง Divi Divi จะถือว่าตัวเลขนั้นเป็นหน่วยพิกเซล แต่ไม่จำกัดเพียงการป้อนหน่วยพิกเซลสำหรับตัวเลือกอินพุตเหล่านี้ คุณยังสามารถป้อนหน่วยอื่นๆ เช่น %, em, vh และ vw

ตัวอย่างเช่น เปอร์เซ็นต์ทำงานได้ดีมากสำหรับอุปกรณ์เคลื่อนที่ หากคุณตั้งค่าระยะขอบบนที่ 5% (แทนที่จะเป็น 100px) บนเดสก์ท็อป ระยะขอบจะปรับขนาดตามสัดส่วนเป็น 5% ของขนาดของส่วนบนอุปกรณ์เคลื่อนที่ (แทนที่จะรับช่วงช่องว่างขนาดใหญ่ 100px ซึ่งจะมีพื้นที่มากเกินไป บนโทรศัพท์มือถือ). นี่เป็นเทคนิคที่ดีในการรักษาส่วนครึ่งหน้าบนของเบราว์เซอร์ขนาดต่างๆ

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

สิ่งที่คุณต้องทำคือพิมพ์ส่วนต่อท้ายหน่วยด้วยหมายเลขของคุณเมื่อกรอกข้อมูลลงในอินพุตต่างๆ

#14 ประวัติศาสตร์รัฐ

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

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

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

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

#15 ตัวเลือกความกว้างของรางน้ำแบบกำหนดเอง (เหมาะสำหรับการจัดวางตาราง)

ความกว้างของรางน้ำสอดคล้องกับปริมาณพื้นที่แนวนอน (ระยะขอบ) ระหว่างคอลัมน์ในแต่ละแถว

ค่าทางเลือกสำหรับช่วงความกว้างของรางน้ำตั้งแต่ 1 ถึง 4

1 หมายถึงระยะขอบศูนย์ระหว่างคอลัมน์
2 หมายถึงระยะขอบด้านขวา 3% ระหว่างคอลัมน์
3 หมายถึงระยะขอบด้านขวา 5.5% ระหว่างคอลัมน์
4 หมายถึงระยะขอบด้านขวา 8% ระหว่างคอลัมน์

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

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

#16 คลิกขวาตัวเลือก

ตำแหน่งคุณลักษณะ : เพียงคลิกขวาที่ส่วนใดก็ได้จากภายใน Divi Builder

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

ล็อค

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

ยุบและเปลี่ยนชื่อ

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

#17 ปิดการใช้งานลิงก์เมนูแบบเลื่อนลงระดับบนสุด

ตำแหน่งคุณสมบัติ : Divi → ตัวเลือกธีม → การนำทาง → การตั้งค่าทั่วไป

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

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

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

#18 วิธีเลื่อนไปยังจุดยึดทางเลือก

ตำแหน่งคุณสมบัติ : Divi → ตัวเลือกธีม → การนำทาง → การตั้งค่าทั่วไป

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

นี่คือลักษณะหน้าจอของฉันหลังจากเชื่อมโยงไปยัง CSS ID ของฉันจากหน้าภายนอก คุณไม่สามารถดูได้ แต่ชื่อของส่วนนั้นถูกตัดออก

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

#19 ซ่อนโลโก้บนมือถือ

ตำแหน่งคุณสมบัติ : Divi →เครื่องมือปรับแต่งธีม → สไตล์มือถือ → เมนูมือถือ

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

#20 เมนูหลักและเมนูรองดร็อปดาวน์แอนิเมชั่น

ตำแหน่งคุณสมบัติเมนูหลัก : Divi → ตัวปรับแต่งธีม → ส่วนหัว & การนำทาง → เมนูหลัก BAr เมนูแบบเลื่อนลง แอนิเมชั่น

ตำแหน่งคุณสมบัติเมนูรอง : Divi → ตัวปรับแต่งธีม → ส่วนหัวและการนำทาง → แถบเมนูรอง -> แอนิเมชั่นเมนูดรอปดาวน์

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

1. จาง (ค่าเริ่มต้น)

2. ขยาย

3. สไลด์

4. พลิก

บางครั้งไมโครอินเทอร์แอกชันเช่นนี้สามารถทำให้เมนูของคุณโดดเด่นได้

#21 แก้ไข (หรือปิดใช้งาน) เครดิตส่วนท้าย

ตำแหน่งคุณลักษณะ : Divi →เครื่องมือปรับแต่งธีม → ส่วนท้าย → แถบด้านล่าง → ปิดใช้งานเครดิตส่วนท้าย / แก้ไขเครดิตส่วนท้าย

หากคุณใช้ Divi มาระยะหนึ่งแล้ว คุณอาจเคยชินกับการแก้ไขแถบด้านล่างของส่วนท้ายด้วยการแก้ไขไฟล์ footer.php ในธีมย่อยของคุณ สิ่งนี้ไม่จำเป็นอีกต่อไป

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

#22 การเปลี่ยนจานสีเริ่มต้นของ Divi

ตำแหน่งคุณสมบัติ : Divi → ตัวเลือกธีม → แท็บทั่วไป → ตัวเลือกสี Default Palette

พักจากการคัดลอกและวางรหัสสีฐานสิบหก

Color Pickers Default Palette คือจานสีที่จะใช้ใน Divi Builder

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

#23 การตั้งค่าหน้าของ Divi

ตำแหน่ง : ไอคอนรูปเฟืองในเมนูการตั้งค่าที่ด้านล่างของ Visual Builder

นับตั้งแต่ Divi 2.7 การตั้งค่าตัวสร้าง Divi ช่วยให้คุณสามารถตั้งค่าเริ่มต้น (และแทนที่การตั้งค่าธีม) สำหรับหน้าเฉพาะที่คุณกำลังทำงานอยู่ใน Divi Builder ความสามารถในการกำหนดการตั้งค่าเฉพาะของหน้านี้ช่วยประหยัดเวลาในการสร้างหน้า Landing Page หรือหน้าอื่นๆ ที่ต้องการการออกแบบเฉพาะที่เบี่ยงเบนไปจากปกติ

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

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

คุณลักษณะเฉพาะอย่างหนึ่งของการตั้งค่าตัวสร้าง Divi คือความสามารถในการเปิดใช้งานระบบการทดสอบแยก Divi Leads สำหรับเพจของคุณ เครื่องมืออันทรงพลังนี้มีค่าเกินกว่าจะเพิกเฉย หากคุณยังไม่ได้ใช้ ทำตามคำแนะนำของฉันและเริ่มการทดสอบครั้งแรกของคุณวันนี้!

#24 เลือกข้อมูลเมตาที่จะแสดงในบล็อกโพสต์

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

เปลี่ยนข้อมูลเมตาสำหรับเลย์เอาต์โพสต์เดียว

ตำแหน่ง : Divi → ตัวเลือกธีม → เลย์เอาต์ (แท็บ) → เลย์เอาต์โพสต์เดียว

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

เปลี่ยนข้อมูลเมตาสำหรับข้อความที่ตัดตอนมาของหน้าบล็อก

ตำแหน่ง: Divi → ตัวเลือกธีม → เค้าโครง (แท็บ) → การตั้งค่าทั่วไป

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

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

#25 โมดูลโค้ด

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

• นำเข้าไฟล์ css ภายนอก เช่น Animate.css สำหรับหน้าเว็บที่คุณต้องการภาพเคลื่อนไหวเท่านั้น
• เพิ่มบล็อกโค้ดจาวาสคริปต์หรือไลบรารีที่คุณใช้กับเพจของคุณเท่านั้น
• รวมปลั๊กอินของบุคคลที่สามเช่นตัวเลื่อนการปฏิวัติ
• คุณสามารถใช้โมดูลโค้ดแบบเต็มความกว้างเพื่อฝัง Typeform สำหรับแบบสอบถามเชิงโต้ตอบ แบบฟอร์มการติดต่อ ฯลฯ...
• เพิ่มเมนูการทำงานแบบลอยตัว
• สร้างโฆษณาแบบสไลด์ในแถบด้านบน
• เพิ่มปุ่มการทำงานแบบลอยตัว

ในการปิด

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

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

ฉันจะรอความคิดเห็นของคุณ