Diều Hâu
Kho theme & plugin bản quyền cho WordPress
  • WordPress
    • Plugin
    • Theme
    • Hướng Dẫn
    • Thủ Thuật
  • Công Nghệ
    • Điện thoại
    • Internet
    • Máy tính
  • Marketing
  • MMO
  • SEO
No Result
View All Result
  • WordPress
    • Plugin
    • Theme
    • Hướng Dẫn
    • Thủ Thuật
  • Công Nghệ
    • Điện thoại
    • Internet
    • Máy tính
  • Marketing
  • MMO
  • SEO
No Result
View All Result
Diều Hâu
No Result
View All Result
Home Thiết kế / Lập trình WordPress

Elementor 3.0, Big update với nhiều cải tiến đắt giá

22/09/2020
in WordPress
0

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.

Elementor3.0

Mục Lục

  1. Xây dựng website chỉ với một bảng điều khiển duy nhất
    1. Design System
    2. Site Settings
    3. Global Colors
    4. Theme Builder mới
    5. Làm quen với Theme Builder
  2. Cải thiện hiệu năng trên Elemenetor 3.0
  3. Những chú ý trước khi update lên Elementor 3.0

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

Đô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

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

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ưu ý: Tính năng Theme Builder chỉ hoạt động trên bản Elementor Pro thôi nhé. Video chi tiết

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é.

Tags: elementorelementor propage builder

Related Posts

Elementor-goi-von-15-trieu-do
WordPress

Elementor huy động được 15 triệu $, lên kế hoạch phát toàn diện trong tương lai

22/09/2020
Elementor-2-9-theme-style
Plugin

Elementor 2.9 ra mắt thêm tính năng Theme Style

22/09/2020
So sánh 7 Page Builder kéo và thả tốt nhất cho WordPress (2020)
Plugin

So sánh 7 Page Builder kéo và thả tốt nhất cho WordPress (2020)

22/09/2020
review-jupiter-x-theme
Theme

[Review] Jupiter X: Theme đa nhiệm, dễ tùy biến, tương thích Elementor 100%

22/09/2020
[Review] Elementor Pro: Có phải Page Builder plugin tốt nhất hiện nay?
Plugin

[Review] Elementor Pro: Có phải Page Builder plugin tốt nhất hiện nay?

27/01/2021
Elementor-khong-load-duoc
Hướng Dẫn

[Fix] Lỗi Elementor không Load được trong WordPress

18/10/2020
Next Post
wp-rocket-3-7

WP Rocket 3.7: Delaying JS Execution, Preloading Link rất nhiều tính năng mới

Đăng ký
Thông báo về
guest
guest
0 Bình Luận
Inline Feedbacks
View all comments

Bạn Cần Hỗ Trợ Về

Viết Blog

Bảo Mật

Sửa Lỗi

Tăng Tốc

SEO

Bán Hàng

Xem Nhiều Nhất

ten-mien-va-hosting-mien-phi

5 Website cung cấp tên miền Miễn Phí + Free Hosting (Updated 2020)

22/09/2020
Huong-dan-su-dung-WordPress

Hướng dẫn sử dụng WordPress cho người mới (Chi tiết từ A->Z)

26/09/2020
Loi-thuong-gap-trong-wordpress

25 lỗi thường gặp nhất trong WordPress và cách sửa chúng

21/09/2020
Hướng dẫn sửa lỗi Troubleshooting

Hướng dẫn khắc phục lỗi WordPress cho người mới bắt đầu

22/09/2020
cài đặt facebook messenger vào website

Hướng dẫn tích hợp Facebook chat vào website (không cần plugin)

26/09/2020
VPS khuyên dùng
  • Liên hệ
  • Sitemap
  • Chính sách bảo mật
  • Điều khoản sử dụng

© 2021 Diều Hâu - Tạp chí công nghệ cho mọi người

No Result
View All Result
  • WordPress
    • Plugin
    • Theme
    • Hướng Dẫn
    • Thủ Thuật
  • Công Nghệ
    • Điện thoại
    • Internet
    • Máy tính
  • Marketing
  • MMO
  • SEO

© 2021 Diều Hâu - Tạp chí công nghệ cho mọi người

wpDiscuz
Comment Author Info
:wpds_smile::wpds_grin::wpds_wink::wpds_mrgreen::wpds_neutral::wpds_twisted::wpds_arrow::wpds_shock::wpds_unamused::wpds_cool::wpds_evil::wpds_oops::wpds_razz::wpds_roll::wpds_cry::wpds_eek::wpds_lol::wpds_mad::wpds_sad::wpds_exclamation::wpds_question::wpds_idea::wpds_hmm::wpds_beg::wpds_whew::wpds_chuckle::wpds_silly::wpds_envy::wpds_shutmouth: