ขอแนะนำ Elementor 3.10 – องค์ประกอบที่ซ้อนกันใหม่ – อนาคตของการออกแบบด้วยวิดเจ็ต Elementor

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

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

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

เนื่องจาก Flexbox Containers มีความเสถียรอย่างเป็นทางการ ในการเปิดตัวที่กำลังจะมาถึง เราจะแนะนำความสามารถ Nesting ในวิดเจ็ตที่มีอยู่จำนวนหนึ่ง เช่น Carousel, Accordion, Tabs และอื่นๆ นอกจากนี้ เราจะแนะนำวิดเจ็ตที่ซ้อนกันใหม่ทั้งหมด เช่น เมนูเมกะ

ขอแนะนำวิดเจ็ตแท็บที่ปรับปรุงใหม่ – วิดเจ็ตที่ซ้อนกันของ Elementor ตัวแรก ปลดล็อกความยืดหยุ่นในการออกแบบ

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

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

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

หน่วยที่กำหนดเองใหม่ – เลือกหน่วยใดก็ได้ที่คุณต้องการ รวมถึงฟังก์ชันคณิตศาสตร์ CSS

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

ก่อนหน้านี้ หากคุณกำลังปรับช่องว่างภายในหรือระยะขอบ ตัวอย่างเช่น คุณจะต้องเลือกหนึ่งในประเภทหน่วยต่อไปนี้: PX, EM, REM, % หรือ VW ด้วยการอัปเดตนี้ คุณจะสามารถเลือกตัวเลือกที่กำหนดเอง เพื่อให้เฉพาะเจาะจงยิ่งขึ้นกับตัวเลือกยูนิตของคุณ ตัวอย่างเช่น คุณสามารถเลือก PX สำหรับด้านข้าง และ % สำหรับด้านบนและด้านล่าง นอกจากนี้ ด้วยการอัปเดตนี้ ป้ายกำกับหน่วยได้ถูกย้ายไปยังรายการแบบเลื่อนลง เพื่อรองรับตัวเลือกแบบกำหนดเองใหม่

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

ตัวอย่างเช่น เมื่อเลือกตัวเลือกที่กำหนดเองในการควบคุมขนาดตัวพิมพ์ คุณจะสามารถใช้ฟังก์ชัน `clamp()` CSS เพื่อปรับขนาดตัวพิมพ์ของคุณเป็นขนาดอุปกรณ์ต่างๆ หรือใช้ฟังก์ชัน `calc()` CSS เพื่อคำนวณและ ตั้งค่าที่ผสมหน่วยและอื่น ๆ

ในส่วนของเวอร์ชันนี้ การควบคุมขนาดต่อไปนี้จะได้รับตัวเลือกที่กำหนดเอง:

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

พื้นที่เพิ่มเติมจะได้รับการอัปเดตในอนาคตเช่นกัน

ชุดเครื่องมือเว็บไซต์ เทมเพลต และบล็อกแบบเต็มที่ใช้คอนเทนเนอร์

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

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

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

[Pro] วันที่ครบกำหนดแบบไดนามิกในวิดเจ็ตนับถอยหลัง

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

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

ใหม่: ปิดใช้งาน Google Fonts ทั้งหมด

Google ฟอนต์ ไลบรารีฟอนต์ออนไลน์ยอดนิยม ช่วยให้คุณใช้ฟอนต์ที่หลากหลายบนเว็บไซต์ของคุณ อย่างไรก็ตาม ในบางกรณีพบว่า Google Fonts ละเมิด GDPR และข้อบังคับความเป็นส่วนตัว

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

การปรับปรุงประสิทธิภาพและการเข้าถึง

ใน Elementor 3.10 เรายังคงแนะนำการปรับปรุงประสิทธิภาพและการเข้าถึง การอัปเดตนี้ประกอบด้วยการอัปเดตการปรับปรุงประสิทธิภาพใหม่สามรายการและการอัปเดตการปรับปรุงการช่วยสำหรับการเข้าถึงสองรายการ

ขี้เกียจโหลด Google Maps

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

ขี้เกียจโหลดรูปภาพที่มีขนาดกำหนดเอง

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

การควบคุมการโหลดวิดีโอที่โฮสต์เองล่วงหน้า

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

การปรับปรุงการช่วยสำหรับการเข้าถึงสำหรับการนำทางเพจ

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

เพลิดเพลินกับตัวเลือกการออกแบบที่มากขึ้น การตอบสนองที่มากขึ้น และประสิทธิภาพที่ดีขึ้น

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

อย่าลืมลองใช้ Elementor 3.10 และแจ้งให้เราทราบว่าคุณคิดอย่างไรในความคิดเห็นด้านล่าง