ไฮไลท์ปลั๊กอิน Divi: เครื่องมือปรับแต่งรูปแบบ Caldera สำหรับ Divi และ Extra

Caldera Forms ผสมผสานเข้ากับสไตล์เว็บไซต์ของคุณได้เป็นอย่างดี จะทำอย่างไรถ้าคุณต้องการจัดสไตล์โดยใช้เครื่องมือจัดแต่งทรงผมที่คุ้นเคยของ Divi และ Extra Theme Customizer? คุณสามารถทำได้ด้วยปลั๊กอินของบริษัทอื่นที่เรียกว่า Caldera Forms Style Customizer สำหรับ Divi และ Extra

แบบฟอร์ม Caldera สามารถจัดรูปแบบได้โดยใช้ตัวเลือกเครื่องมือปรับแต่งธีมมาตรฐาน อย่างไรก็ตาม ตัวเลือกเหล่านี้จะกำหนดรูปแบบให้กับธีม ซึ่งหมายความว่าหากคุณเปลี่ยนรูปแบบของข้อความในแบบฟอร์ม คุณก็จะเปลี่ยนรูปแบบของข้อความในเว็บไซต์ของคุณด้วย หากคุณต้องการจัดรูปแบบแบบฟอร์มแยกจากเนื้อหา คุณจะต้องจัดรูปแบบด้วยมือด้วย CSS เครื่องมือปรับแต่งสไตล์ของ Caldera Forms สำหรับ Divi และ Extra แก้ปัญหานั้นด้วยการเพิ่มคุณสมบัติการจัดสไตล์ให้กับ Theme Customizer

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

การติดตั้งและเปิดใช้งาน

อัปโหลดและเปิดใช้งานปลั๊กอินตามปกติ ไม่มีการตั้งค่าให้ปรับ คุณสมบัติพร้อมใช้งาน

การปรับแต่งแบบฟอร์ม

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

เพิ่มฟีเจอร์การจัดสไตล์ใหม่ให้กับเครื่องมือปรับแต่งธีม เปิดตัว ปรับแต่งธีม (หรือเครื่องมือ ปรับแต่งโมดูล – ใช้งานได้ทั้งคู่) และคลิกที่เครื่องมือ ปรับแต่งสไตล์ของ Caldera Forms

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

ช่องข้อความ

ฟิลด์ข้อความจะเปลี่ยนสีของข้อความ ตัวแทน และเส้นขอบ ตลอดจนความกว้างของเส้นขอบ รัศมีเส้นขอบ และความสูงของบรรทัดเดียวของฟิลด์

ฟิลด์ข้อความโฮเวอร์

ฟิลด์ข้อความ โฮเวอร์จะเปลี่ยนข้อความ ฟิลด์ และสีเส้นขอบ

ฟิลด์ข้อความโฟกัส

Text Fields Focus จะเปลี่ยนสีของข้อความ พื้นหลัง และเส้นขอบของเขตข้อมูลที่มีโฟกัส ในตัวอย่างนี้ ฟิลด์ที่อยู่ตรงกลางมีโฮเวอร์ แต่ฟิลด์ที่มีพื้นหลังสีเข้มมีโฟกัส

เลือกแบบเลื่อนลง

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

ดรอปดาวน์ เลือก Hover

ดรอปดาวน์ เลือกโฮเวอร์ ควบคุมสีของพื้นหลัง ข้อความ ลูกศร และเส้นขอบบนโฮเวอร์

ช่องทำเครื่องหมายและปุ่มตัวเลือก

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

สวิตช์สลับ

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

สวิตช์สลับ Hover

Toggle Switches Hover จะปรับสีของพื้นหลัง แบบอักษร และเส้นขอบของสวิตช์ที่เลือกและไม่ได้เลือกอย่างอิสระ นี่คือสวิตช์ที่ไม่ได้เลือก

อันสีน้ำเงินคือสวิตช์ที่เลือก

ส่งปุ่ม

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

ส่งปุ่มโฮเวอร์

ส่งปุ่มโฮเวอร์ควบคุมสีโฮเวอร์สำหรับพื้นหลัง แบบอักษร และเส้นขอบ

ปุ่มรีเซ็ต

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

รีเซ็ตปุ่มโฮเวอร์

รีเซ็ตปุ่มโฮเวอร์ ปรับสีของปุ่มสำหรับพื้นหลัง ข้อความ และเส้นขอบ

ปุ่มอื่นๆ

Caldera มีปุ่มหลายประเภท ปุ่มอื่นๆ ควบคุมทุกอย่าง ยกเว้น ส่งและรีเซ็ต ปรับสีสำหรับแบบอักษร เส้นขอบ และพื้นหลัง และปรับความกว้างและรัศมีของเส้นขอบ ในตัวอย่างนี้ ฉันได้สร้างปุ่มก่อนหน้าและถัดไป

ปุ่มอื่นๆ โฮเวอร์

ปุ่มโฮเวอร์อื่นๆ จะควบคุมสีโฮเวอร์สำหรับฟอนต์ เส้นขอบ และพื้นหลัง

เลือกวันที่

ตัวเลือกวันที่ประกอบด้วยสีปกติและสีโฮเวอร์ภายในแท็บเดียวกัน ปรับสีสำหรับแบบอักษรและพื้นหลัง ในตัวอย่างนี้ ฉันวางเมาส์เหนือ 10 และ 12 ถูกเลือก

อัปโหลดรายการไฟล์

อัปโหลดรายการไฟล์ควบคุมสีสำหรับพื้นหลังและข้อความภายในรายการไฟล์ที่อัปโหลด

ตัวแบ่งส่วน

ตัวแบ่งส่วนจะควบคุมสีของตัวแบ่งส่วน ความกว้างของเส้นขอบ และระยะขอบด้านบนและด้านล่าง

เกล็ดขนมปัง

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

การแจ้งเตือนความสำเร็จ

Success Alert จะปรับแบบอักษร พื้นหลัง และสีของเส้นขอบ ตลอดจนรัศมีและความกว้างของเส้นขอบ นอกจากนี้ยังปรับความสูงของกล่อง

เบ็ดเตล็ด

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

ตัวอย่าง

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

ฉันได้เพิ่มภาพพื้นหลังและเลือกสีที่ตัดกันแทนที่จะกลมกลืนกับพื้นหลัง

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

นำเข้าส่งออก

การนำเข้าหรือส่งออกรูปแบบ Caldera Forms ที่คุณสร้างไว้ในเครื่องมือปรับแต่งนั้นทำได้ง่าย ใน Dashboard ให้ไปที่ Caldera Forms , Styles – Import / Export สิ่งนี้นำเข้าและส่งออกสไตล์เป็นไฟล์ JSON ช่วยให้คุณใช้สไตล์ฟอร์ม Caldera ของคุณบนเว็บไซต์ใดๆ ที่ใช้ปลั๊กอินนี้ได้อย่างง่ายดาย สไตล์ทั้งหมดของคุณจะถูกเขียนทับด้วยสไตล์ของไฟล์ที่นำเข้า

ใบอนุญาตและการสนับสนุน

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

ความคิดสุดท้าย

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

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

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

ภาพเด่นโดย Irina Strelnikova / shutterstock.com