ไฮไลท์ปลั๊กอิน Divi: กล่องเครื่องมือ Divi

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

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

Divi Toolbox การตั้งค่าทั่วไป

หน้าจอตัวเลือก Divi Toolbox ถูกเพิ่มลงในเมนูแดชบอร์ด Divi เปิดใช้งานการตั้งค่าที่นี่ แต่มีการปรับเปลี่ยนในเครื่องมือปรับแต่ง

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

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

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

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

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

การตั้งค่าส่วนหัวของกล่องเครื่องมือ Divi

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

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

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

การตั้งค่าส่วนท้ายของกล่องเครื่องมือ Divi

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

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

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

Divi Toolbox การตั้งค่ามือถือ

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

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

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

การตั้งค่าบล็อก Divi Toolbox

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

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

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

ตัวอย่างนี้คือเลย์เอาต์ 6 ฉันได้ปรับแต่งสีฟอนต์ meta อีกครั้งและเพิ่มสีโฮเวอร์ ฉันยังปรับแต่งพื้นหลังปุ่มอ่านเพิ่มเติมอีกด้วย

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

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

การตั้งค่าโมดูลกล่องเครื่องมือ Divi

แท็บ โมดูล มีการตั้งค่าเพื่อเพิ่มเอฟเฟกต์โฮเวอร์ตามเมาส์ เพิ่มการเลือกรับอีเมลแบบบาง (มี CSS สำหรับสามตัวเลือกที่แตกต่างกัน) ปุ่มรอง (ซึ่งเพิ่มเลเยอร์การปรับแต่งใหม่) และการปรับแต่งมากมาย

ปรับแต่งรวมถึงไอคอนรูปสามเหลี่ยมเคลื่อนไหวสำหรับหีบเพลงและโมดูลสลับ ลบขอบด้านล่างแนวนอนและช่องว่างภายในสำหรับตารางราคา ย้ายรูปภาพแนวตั้งด้านล่างเนื้อหาในข้อความรับรอง ซ่อนแถบเลื่อนแนวนอน และเพิ่ม CSS เพื่อจัดแนวคอลัมน์ในแนวตั้งและเปลี่ยนความสูง ขององค์ประกอบใดๆ จนถึง 100% ของความสูงของวิวพอร์ต

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

การตั้งค่าพิเศษของกล่องเครื่องมือ Divi

แท็บ พิเศษ ประกอบด้วยตัวโหลดล่วงหน้า ป๊อปอัป พื้นหลังของอนุภาค เอฟเฟกต์การเอียง 3D และการเลื่อนพารัลแลกซ์สำหรับโมดูล

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

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

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

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

ใบอนุญาตกล่องเครื่องมือ Divi

มีสองใบอนุญาตให้เลือก:

• ใบอนุญาตปกติ (สำหรับใช้ในโครงการเดียว) – €49.00
• Extended License (สำหรับใช้กับโปรเจ็กต์ไม่จำกัด) – €169.00

จบความคิด

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

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

หากคุณสนใจที่จะเพิ่มเอฟเฟกต์ใหม่ๆ มากมายให้กับ Divi ด้วยวิธีที่ง่ายที่สุด Divi Toolbox ก็คุ้มค่าที่จะลองดู

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

ภาพเด่นผ่าน vasabii / shutterstock.com