ขอแนะนำ Elementor 3.13 – สร้างเค้าโครงเว็บไซต์แบบลีนและยืดหยุ่นด้วย CSS Grid

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

ใหม่ – CSS Grid Container – ออกแบบเลย์เอาต์ที่มีน้ำหนักเบา ตอบสนองฉับไว และเป็นมืออาชีพ

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

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

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

หากต้องการใช้ Container Grid ตรวจสอบให้แน่ใจว่าได้เปิดใช้งานคุณสมบัติ Flexbox Container และ Grid Container จาก WordPress Dashboard → Elementor → Settings → Features

[Pro] ความสามารถในการจัดรูปแบบใหม่ในวิดเจ็ตเมนู

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

Elementor Pro 3.13 นำเสนอความสามารถใหม่สองอย่างที่ตอนนี้มีอยู่ในวิดเจ็ตเมนู:

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

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

การปรับปรุงแถบด้านบน – ปรับปรุง UI ของ Elementor อย่างต่อเนื่อง

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

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

1. บันทึกตัวเลือกในปุ่มเผยแพร่ – แม้ไม่ใช่ความสามารถใหม่ คุณลักษณะนี้ไม่มีในเวอร์ชันแรกของแถบด้านบน ตอนนี้ คุณมีสิทธิ์เข้าถึงตัวเลือกการบันทึกทั้งหมดที่มีใน Editor – บันทึกเป็นแบบร่าง บันทึกเป็นเทมเพลต และเงื่อนไขการแสดงผล (ถ้ามี) นอกจากนี้ยังหมายความว่าแถบด้านบนมีความสามารถทั้งหมดที่มีก่อนหน้านี้ใน UI แบบดั้งเดิมของ Editor
2. การนำทางหน้า – คุณสมบัติใหม่ที่จะปรับปรุงเวิร์กโฟลว์ของคุณ และทำให้การเปลี่ยนระหว่างหน้าต่างๆ และส่วนต่างๆ ของธีมราบรื่นขึ้น การคลิกที่ตัวบ่งชี้หน้าที่ตรงกลางของแถบด้านบนจะเปิดดร็อปดาวน์ที่มีห้าหน้าล่าสุด / โพสต์ / ส่วนธีมที่คุณทำ และอนุญาตให้คุณเปลี่ยนเส้นทางไปยังส่วนใดส่วนหนึ่งได้ในคลิกเดียว โดยไม่ต้องย้อนกลับ ไปที่แดชบอร์ด WordPress

[Pro] เติมข้อความที่ตัดตอนมาของโพสต์ของคุณแบบไดนามิกด้วยเนื้อหาของโพสต์ของคุณ

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

ใหม่: ใช้ประโยชน์จาก Elementor AI ซึ่งปรับแต่งมาอย่างสมบูรณ์แบบสำหรับ Elementor

Elementor 3.13 ยังรวมถึง Elementor AI ที่รวมอยู่ภายใน Editor และจะเปลี่ยนวิธีที่คุณสร้างเว็บไซต์ เวอร์ชันนี้แนะนำเฟสแรกของ Elementor AI ซึ่งช่วยให้คุณสร้างข้อความและโค้ดด้วยพลังของ AI คุณสามารถใช้เพื่อสร้างเนื้อหาตั้งแต่เริ่มต้น ปรับปรุงเนื้อหาที่มีอยู่บนเว็บไซต์ของคุณ แปลไปยังเว็บไซต์ใดๆ และอื่นๆ นอกจากนี้ คุณสามารถใช้ Elementor AI เพื่อเขียนโค้ดสำหรับ Custom CSS หรือ Custom Code (ต้องใช้ Elementor Pro หรือ Hosting) หรือส่วนย่อยของ HTML คุณสามารถอ่านเพิ่มเติมเกี่ยวกับสิ่งที่คุณสามารถทำได้ด้วย Elementor AI ที่นี่

การปรับปรุงประสิทธิภาพ

ในเวอร์ชันก่อนหน้า การปรับปรุงประสิทธิภาพจะมุ่งเน้นไปที่วิดเจ็ตทั่วไปในหน้าหลัก ด้วย Elementor 3.13 โฟกัสถูกเปลี่ยนไปยังวิดเจ็ตที่ใช้เป็นหลักในหน้าภายใน ซึ่งผู้เยี่ยมชมไซต์มักใช้เวลาส่วนใหญ่

วิดเจ็ต Author Box, Post Info และ Price List จะแสดงรูปภาพและรูปภาพโปรไฟล์ผู้ใช้ ตอนนี้รูปภาพเหล่านี้จะมีการโหลดแบบ Lazy Loading การเปลี่ยนแปลงนี้ควรปรับปรุงการโหลดหน้าเริ่มต้นของหน้าภายในของคุณ

นอกจากนี้ เนื่องจาก Header ปรากฏอยู่ในครึ่งหน้าบน จึงควรโหลดทันทีที่โหลดหน้าเว็บเสมอ ดังนั้น Lazy Load จึงถูกลบออกจากส่วนหัวเพื่อปรับปรุงประสบการณ์ของผู้เข้าชมเมื่อใช้การทดสอบภาพพื้นหลัง Lazy Load

การปรับปรุงการเข้าถึง

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

คุณสามารถอ่านเพิ่มเติมเกี่ยวกับการปรับปรุงการช่วยสำหรับการเข้าถึงเหล่านี้ได้ใน Developers Blog

เพลิดเพลินกับตัวเลือกสไตล์และการออกแบบที่มากขึ้นสำหรับประสบการณ์เว็บไซต์ที่มีแบรนด์สูงและมีส่วนร่วม

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

รุ่นนี้ยังมีความสามารถใหม่ในคุณลักษณะแถบด้านบน ซึ่งหมายความว่าความสามารถทั้งหมดที่มีก่อนหน้านี้ใน Editor จะพร้อมใช้งานเมื่อใช้การทดสอบแถบด้านบน

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

ลองใช้คุณสมบัติใหม่ใน Elementor 3.13 และแจ้งให้เราทราบว่าคุณคิดอย่างไรเกี่ยวกับคุณสมบัติเหล่านี้ในความคิดเห็นด้านล่าง