Ngày 25/08, Elementor 3.0 đã chính thức được ra mắt ( cho cả version Free và Pro)
Hứa hẹn lần này sẽ mang tới bước nhảy vọt lớn như những Big Update trước đây.
- 1.0 năm 2016 với trình chỉnh sửa trực quan
- 2.0 năm 2018 với Theme Builder
Bản cập nhật này được nhà sản xuất giới thiệu “giúp người dùng build site theo cách hoàn toàn mới“.
Design System Features, New Theme Builder, and significant performance improvements.
Theo như mình được biết thì họ đã phải làm lại phần core plugin trong nhiều tháng.
Trong tuần vừa rồi mình cũng đã trải nghiệm Elementor 3.0 được kha khá.
Nên trong bài viết này mình sẽ đưa ra một số tính năng mới nổi bất của version này.
Xây dựng website chỉ với một bảng điều khiển duy nhất
Đây là điều mà Elementor đang cố gắng làm trong thời gian gần đây.
Đó là mang một trải nghiệm nhất quán, xuyên suốt trong sản phẩm của mình.
Nếu bạn để ý thì rất nhiều brand nổi tiếng như Apple, Nike hay Soptify.
Họ đều có một ngôn ngữ thiết kế thống nhất cho sản phẩm của mình ( ví dụ như Apple với hệ điều hành IOS).
Design System
Nếu anh em nào còn lạ lẫm với cái thuật ngữ này hoặc chưa hiểu rõ.
Thì có thế hiểu nó là hệ thống để giúp người dùng xây dựng website dễ dàng hơn.
Ví dụ như làm thế nào để anh em thay đổi màu sắc font chữ, size, bố cục.
Mà vẫn đảm bảo mang lại tính nhất quán và dễ dàng, đây là vai trò của Design System.
Trong hệ thống thiết kế của Elementor sẽ mang lại:
- New Site Settings panel – bao gồm site identity, lightbox settings, theme styles
- Global Colors – màu sắc chủ đạo
- Global Fonts – font chữ
Hãy cùng khám phá từng tính năng này và xem chúng sẽ giúp bạn xây dựng các trang web chuyên nghiệp hơn như thế nào.
Site Settings
https://youtu.be/EoO39H_xpOA
Đôi khi việc thực hiện setup một số setting cơ bản của website khá mất thời gian.
Chính vì thế Elementor đã thêm một bảng điều khiển mới Site Settings.
Bạn có thể thấy nó ở ngay trong trình chỉnh sửa trực tiếp cửa Elementor ( thay vì trong dashboard)
Đây là một cách rất thông minh của Elementor, giúp việc tập trung các cài đặt cơ bản ở một chỗ.
Giúp anh em trong quá trình thiết kế website, ko phải nhẩy hết tab này đến tab nọ để tìm setting.
Trong phần Site Settings này sẽ gồm:
- Global Fonts and Colors
- Theme Style
- Lightbox
- Layout
- Site Identity
Anh em có thể xem video hướng dẫn chi tiết tại đây.
Global Colors
https://youtu.be/XOH8x3bTtEM
Elementor 3.0 giới thiệu cách thức mới để chỉnh sửa màu sắc của site với Global Colors.
Tính năng này cho phép bạn thay đổi màu sắc toàn site ( sau này bạn bạn có thêm phần tử mới cũng sẽ tự áp dụng theo bảng màu này luôn).
Mặc đinh có sẵn 4 bản màu cơ bản như ( Primary, Secondary, Text, Accent).
Bạn hoàn toàn có thể add thêm với nút Add Color và đặt têm tùy ý.
Anh em thiết kế web có thể vừa làm vừa chọn màu phù hợp và thấy ngay thay đổi bên phải.
Video chi tiết về tính năng này.
Theme Builder mới
https://youtu.be/_yhs5PPswsc
Có thể nói Elementor chính là người đi đầu trong việc biến page builder thành Theme Builder.
Có nghĩa là các page builder chỉ cho phép chỉnh sửa một số thành phần trên website.
Còn với Theme Builder anh em có thể design toàn bộ website từ Header đến Footer.
Và giờ Elementor còn làm điều này tốt hơn nữa.
Theme Builder giờ sẽ trở thành một nơi quản lý website theo cách trực quan nhất.
Nó sẽ cung cấp bạn cái nhìn tổng quan về từng thành phần trên website
Header, footer, single post/page, product archive….
Bên phải sẽ có ngay preview để xem, nói chung là rất trực quan.
Làm quen với Theme Builder
Mặc dù Elementor khá dễ sử dụng, nhưng bạn vẫn cần có thời gian làm quen với nó.
Để xây dựng site mới bằng tính năng Theme Builder, vào biểu tượng góc trái Ξ » Theme Builder
Hoặc bấm tổ hợp phím Ctrl + Shift + E để vào tính năng này.
Ở đây mọi ngưới có thể bắt đầu xây dựng site từ đầu đến cuối. ( Elementor Pro có kho thư viện sẵn cũng rất nhiều mẫu).
Thường thì mình sẽ bắt đầu từ header rồi xuống Single Page, Single Post ( cái này thì tùy mọi người).
Cải thiện hiệu năng trên Elemenetor 3.0
Elemenetor 3.0 không chỉ đơn giản là bản cập nhật thêm một số tính năng.
Mà được update lại bộ core khá nhiều để tăng hiệu năng như:
Giảm số lượng DOM elements, điều này sẽ làm site bạn load nhanh hơn.
Nghe có vẻ hấp dẫn, anh em nào thích chạy đua điểm trên Google PageSpeed.
Ngoài ra thì Elementor cũng cải tiến khá nhiều liên quan đến việc hiển trị CSS.
Mấy cái này hơi mang tính kỹ thuật chút, tóm lại thằng Elementor nó sẽ lưu danh sách các giá trị động cho mỗi post.
Khi có người truy cập vào bài viết, sẽ ko cần phải load lại các giá trị này nữa mà đi thẳng đến luôn.
Những chú ý trước khi update lên Elementor 3.0
Vì đây là một bản cập nhật tương đối lớn, nên trước khi update nhớ backup nhé.
Tiếp theo nếu bạn đang dùng bất kỳ một addon nào cho Elementor.
Cũng nên kiểm tra verion mới nhất ko để đảm bảo việc tương thích với ver 3.0.
Nếu bạn dùng Elementor Pro hãy Update bản Free lên 3.0 trước khi update verion Pro.
Ngoài ra thì anh em có thể dùng bộ sản phẩm từ Crocoblock cùng với Elementor.
Đảm bảo sẽ ko làm anh em thất vọng.
Hãy comment hoặc đóng góp bất kỳ ý kiến gì ở dưới nhé.
