Skip to content

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

มีอะไรใหม่ใน Elementor 3.22

หลังจากเดือนที่แล้ว Elementor ได้ปล่อยเวอร์ชั่น 3.21 ออกมาให้ผู้ใช้ดาวโหลดไปใช้งาน สิ่งที่เป็น Key Hightlight ของเดือนก่อนก็คือ “Taxonomy Query” ใน Loop Grids & Loop Carousels รวมถึงการปรับปรุง Performance ที่ส่งผลให้คะแนน PageSpeed ดีขึ้น มาถึงเดือนพฤษภาคมในที่สุด Elementor ก็ได้เปิดเผยข้อมูลเวอร์ชั่น 3.22 ออกมาเป็นที่เรียบร้อย (ขณะนี้ยังเป็นเวอร์ชั่น Beta) สิ่งที่น่าสนใจในเวอร์ชั่นนี้คือ Off-Canvas Widget ครับ

Off-Canvas Widget Interactive Layouts

เริ่มด้วย Widget ใหม่สดๆ ซิงๆ ใน Elementor นั่นก็คือ Off-Canvas Widget ที่เราไม่ต้องหา Addon เสริมมาติดตั้งให้วุ่นวายอีกแล้ว

วิดเจ็ต Off-Canvas ช่วยให้เราออกแบบเลย์เอาท์แบบเชิงโต้ตอบและดึงดูดประสบการณ์คนเข้าเว็บด้วย Containers ที่เปิดปิดโดยการคลิกลิงก์ที่เชื่อมต่อ หากต้องการใช้วิดเจ็ต Off-Canvas นี้ เราเพียงวางไว้ที่ใดก็ได้บนเพจ แล้วคลิกตัวควบคุม “Editing Mode” ในแผงการแก้ไขเพื่อเปิดและปิดในตัว Editor และเนื่องจากมันเป็นส่วนเสริมใหม่โดยใช้องค์ประกอบที่ซ้อนกัน (Nested elements) Container จึงใช้เป็นตัวแสดงเนื้อหาซึ่งช่วยให้เราสามารถสร้างและออกแบบเลย์เอาท์แบบใดก็ได้

เมื่อวางตำแหน่งวิดเจ็ต Off-Canvas แล้ว สามารถคลิกเชื่อมต่อกับ link input จากวิดเจ็ตอื่น เหมือนกับการตั้งค่าแท็กแบบไดนามิก หากเรามีวิดเจ็ต Off-Canvas หลายรายการบนหน้าวิดเจ็ตเหล่านั้นจะปรากฏชื่อเป็น “Off-Canvas Widget 1” หรือ “Off-Canvas Widget 2” ฯลฯ ตามตำแหน่งบนเพจ จากนั้นเลือกว่าเราต้องการให้ลิงก์ trigger พฤติกรรมเปิด ปิด หรือทั้งสองอย่าง

หมายเหตุ: ลิงก์ที่เชื่อมต่อกับวิดเจ็ต Off-Canvas จะต้องอยู่ในหน้าหรือส่วนของไซต์เดียวกันกับวิดเจ็ตนั้นๆ เช่น หากต้องการเปิดใช้งานวิดเจ็ตจากลิงก์ในส่วน Header วิดเจ็ตนั้นจะต้องอยู่ใน Header เช่นกันครับ

นอกจากนี้วิดเจ็ตใหม่นี้ยังมาพร้อมกับความสามารถในการออกแบบระดับมืออาชีพ ในแผง Editing > Settings เราสามารถปรับแต่งสไตล์และระยะเวลาเข้าและออกของภาพเคลื่อนไหวของวิดเจ็ตได้ สามารถควบคุมเพื่อกำหนดพฤติกรรมของการโต้ตอบ เช่น ตั้งเวลาและวิธีออกจาก Overlay, การป้องกัน page scrolling และยังสามารถกำหนดแท็ก HTML ของ Container ได้ด้วย ในแท็บ Style เราสามารถปรับแต่งรูปลักษณ์ของ Off Canvas Widget ได้เหมือนกับ Container อื่นๆ

การเปิดใช้งานให้ไปที่ Dashboard > Elementor > Features ให้เปิดการทำงานของ “Nested Elements”

ปรังปรุง Performance

เวอร์ชัน 3.22 มีการปรับปรุงประสิทธิภาพที่สำคัญซึ่งจะทำให้คะแนน Google Lighthouse พุ่งสูงขึ้น และลดเวลาในการโหลดลงอย่างมาก และมีการเพิ่มแท็บ performance ใหม่ลงในแดชบอร์ด WordPress > Elementor > การตั้งค่า เพื่อสามารถเข้าถึงและเปิดใช้งานฟีเจอร์ performance ที่เสถียรได้อย่างง่ายดาย

การแคชองค์ประกอบ

Elementor 3.22 เพิ่มฟีเจอร์แคชใหม่สำหรับวิดเจ็ต Elementor และ Elementor Pro ในการทดสอบประสิทธิภาพแสดงถึงความแตกต่างเป็นอย่างมาก เมื่อเปรียบเทียบเว็บไซต์เดียวกันกับเว็บที่ไม่มีฟีเจอร์แคชใหม่ การใช้หน่วยความจำลดลงจาก 3MB เหลือ 8KB และการวัด Time To First Byte (TTFB) ดีขึ้น 33%-70%

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

หมายเหตุ : การตั้งค่าแคชไม่สามารถเปลี่ยนแปลงได้สำหรับวิดเจ็ตต่อไปนี้

Container, Section, Column, Inner Section, และ Off-canvas

การเปิดใช้งานคุณสมบัติใหม่ ให้ไปที่เมนู Elementor > Features เปิด Element Caching

แทนที่ JS libraries ด้วย native JS

เวอร์ชันนี้ยังคงพยายามล้างโค้ดของเว็บไซต์ให้สะอาดขึ้นต่อไปโดยการแทนที่ไลบรารี JavaScript ภายนอกด้วยโซลูชันที่ใช้ JS แบบ Native ซึ่งให้ผลลัพธ์เดียวกันแต่ใช้โค้ดน้อยลง ไลบรารีแรกที่ถูกแทนที่คือ waypoint.js ซึ่งเรียกใช้ฟังก์ชัน JavaScript ที่เกี่ยวข้องกับการ Scrolling ของผู้ใช้ การแทนที่ไลบรารี JavaScript นี้ช่วยลด JavaScript ที่ไม่ได้ใช้ลง 18KB จะช่วยปรับปรุงประสิทธิภาพ Frontend และคะแนน SEO

และเพื่อยังรักษาความเข้ากันได้แบบย้อนหลังกับ third-party addons ของบริษัทอื่น ไลบรารีจะยังคงอยู่ใน Elementor สำหรับรุ่นที่กำลังจะมาถึงนี้ แต่จะเปิดใช้งานก็ต่อเมื่อนักพัฒนา addon ของ Elementor ตั้งค่าเป็น dependency เท่านั้น

เพิ่มแท็บ Performance ใหม่

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

สรุปการปรุบปรุงทั้งเวอร์ชั่นฟรีและ Pro

เวอร์ชั่นฟรี

+ เพิ่ม Element Caching สำหรับปรับปรุงความเร็วไซต์เพื่อการแสดงผลที่เร็วขึ้น

+ เพิ่ม แท็บ Performance รวบรวมคุณสมบัติประสิทธิภาพที่เสถียรทั้งหมดไว้ในที่เดียว

+ ปรับแต่ง การอัปเดตรายการฟอนต์ของ Google ด้วยแบบอักษรใหม่กว่า 170 แบบ

+ ปรับแต่ง ปรับปรุงฟังก์ชันการแปล Elementor ด้วยการโหลดการแปลตามเวลาที่กำหนด

+ ปรับแต่ง แทนที่ไลบรารี waypoints.js ด้วย Intersection Observer API ดั้งเดิม

+ ปรับแต่ง เปลี่ยนความกว้างของ containers เนื้อหาให้เป็นแบบ Full Width เป็นค่าเริ่มต้น

+ ปรับแต่ง จัดระเบียบแผงการตั้งค่าผู้ใช้ใหม่ เพื่อปรับปรุงประสบการณ์ผู้ใช้งาน

+ ปรับแต่ง ซ่อน Position และ Spacing ของ icon หากมี icon แต่ไม่มีข้อความในวิดเจ็ตแบบ Button

+ ปรับแต่ง ความสามารถในการจัดตำแหน่งในวิดเจ็ต Button

+ ปรับแต่ง นำคุณสมบัติ CSS logical ไปใช้กับการควบคุม Position และ Spacing ของไอคอนในวิดเจ็ต Button

+ ปรับแต่ง Grid Container ได้รับการเลื่อนระดับเป็นสถานะ Stable

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

+ แก้ไข ฟังก์ชัน “Exit to” ไม่ทำงานกับแถบด้านบนของ Editor

+ แก้ไข Row-reversed ไม่ทำงานบน mobile portrait breakpoint ใน Container

+ แก้ไขข้อผิดพลาดร้ายแรงปรากฏขึ้นเมื่ออัปเดตเพจด้วยวิดเจ็ต Tabs

+ แก้ไขตัวบ่งชี้ Transparency ไม่ปรากฏในธีม UI Light สำหรับ Color Picker

เวอร์ชั่น Project

+ เพิ่ม วิดเจ็ต Off-Canvas ชสร้างเลเยอร์ที่มีส่วนร่วมและสร้างสรรค์ที่เรียกใช้โดยลิงก์

+ ปรับแต่ง เพิ่มตัวเลือกในการลบ ‘User IP’ และ ‘User Agent’ ออกจากข้อมูล Meta การส่งแบบฟอร์ม

+ ปรับแต่ง แทนที่ไลบรารี waypoints.js ด้วย Intersection Observer API ดั้งเดิม

+ ปรับแต่ง ความสามารถในการจัดตำแหน่งในวิดเจ็ต Form

+ ปรับแต่ง ย้ายการควบคุม icon view ไปยังแท็บ Style ในวิดเจ็ต Flip Box

+ ปรับแต่ง ย้ายการควบคุม icon view ไปยังแท็บ Style ในวิดเจ็ต Call to Action

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

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

+ ปรับแต่ง ลบ placeholder ออกจากการควบคุม URL

+ ปรับแต่ง นำคุณสมบัติ CSS logical ไปใช้กับตำแหน่งไอคอนในวิดเจ็ต Form, Posts และเมนู Cart

+ ปรับแต่ง เปิดใช้งาน Display Conditions

+ ปรับแต่ง เปิดใช้งาน Taxonomy Filter

+ แก้ไข ไอคอนจะเป็นส่วนหนึ่งของลิงก์ในวิดเจ็ตเมนู

+ แก้ไข ข้อผิดพลาด PHP ปรากฏขึ้นใน Editor เมื่อใช้ Loop Grid ใน Archive template

+ แก้ไข ข้อผิดพลาดของ UI ในการควบคุมตำแหน่งไอคอนในวิดเจ็ต Paypal และ Stripe Buttons

+ แก้ไข ปัญหาการควบคุมตำแหน่งไอคอน RTL ในวิดเจ็ต Hotspot

การใช้งานเวอร์ชั่น Beta

สำหรับใครที่อยากลองฟีเจอร์ใหม่ของ Elementor 3.22 ให้ไปที่ Elementor > Tools > Versions และเปิดใช้งาน beta tester feature อย่าลืมอัปเดตปลั๊กอินให้เป็นเวอร์ชันเบต้าล่าสุดด้วยนะครับ

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

Back To Top
Search