Review và hướng dẫn sử dụng Qubely Pro: plugin WordPress hỗ trợ Editor Gutenberg rất tốt

Ngày đăng: | Cập nhật: 03/07/2021 | | 1 bình luận

Trình soạn thảo Gutenberg của WordPress đang dần chứng tỏ ưu thế ( so với trình soạn thảo cổ điển TinyMCE ) với nhiều tính năng thuận tiện hơn trong việc thể hiện nội dung website. Khi bạn đã quen thuộc với việc soạn thảo WordPress dựa trên block Gutenberg, thì việc thiết kế website WordPress sẽ nằm trong tầm tay, cho dù bạn là người mới bắt đầu làm web hay đã là một “pro”.

Qubely, một plugin Gutenberg ra đời nhằm khắc phục các hạn chế của trình soạn thảo Gutenberg mặc định. Với nhiều block Gutenberg cao cấp, dễ dàng tùy chỉnh, Qubely không chỉ đơn thuần là một plugin Gutenberg mà còn là một bộ công cụ hỗ trợ thiết kế website rất hiệu quả. 

Cùng xem thử Qubely sẽ đem lại những gì cho website của bạn nhé!

Có thể bạn quan tâm: Đánh giá nhanh và chia sẻ theme Jnews bản quyền

Trình soạn thảo Gutenberg

1. Gutenberg là gì?

Gutenberg là trình soạn thảo mới của WordPress, dựa trên các block (khối), thay thế cho trình soạn thảo mặc định TinyMCE bằng cách sử dụng block để biên soạn nội dung.

Review và hướng dẫn sử dụng Qubely Pro
Trình soạn thảo mặc định

Với Gutenberg, trình soạn thảo mặc định sẽ được thay thế hoàn toàn bằng các block riêng lẻ cho phép người dùng xây dựng và thiết kế website nhiều tính năng hơn. Người dùng giờ đã có thể sử dụng các block Gutenberg để xây dựng landing page, tùy biến page và post và bổ sung các chức năng khác cho website của mình.

Review và hướng dẫn sử dụng Qubely Pro
Trình soạn thảo Gutenberg

2. Ưu điểm

  • Tính năng đa dạng

Gutenberg mở rộng giới hạn trong việc xây dựng và thiết kế website. Các block của Gutenberg có thể là văn bản, hình ảnh, video, bảng, widget,… Thậm chí, người dùng cũng có thể tự tạo block bằng các plugin bổ sung để xây dựng website có giao diện phức tạp hơn.

  • Tương thích với mọi themes của WordPress

Trình soạn thảo Gutenberg là một phần có sẵn của WordPress (core), nên người dùng có thể sử dụng trình soạn thảo này với mọi themes của WordPress. Nhưng nếu bạn vẫn chưa quen với việc soạn thảo bằng block thì có thể quay về trình soạn thảo mặc định bằng cách cài plugin Classic Editor.

  • Giao diện Drag and Drop (kéo – thả) dễ sử dụng

Việc sử dụng trình soạn thảo Gutenberg với giao diện Drag and Drop cho phép người dùng sắp xếp các block nội dung bằng thao tác tác kéo thả khá dễ dàng.

3. Hạn chế

Gutenberg mặc định chỉ có những block cơ bản, chưa đủ linh hoạt, và số block có sẵn của trình soạn thảo này cũng chưa đủ đa dạng nếu bạn có yêu cầu cao với việc xây dựng và thiết kế website.

Lúc này, người dùng sẽ cần đến một plugin từ bên thứ ba, chẳng hạn như Qubely để hỗ trợ thêm các block nhiều tính năng hơn.

Đánh giá Qubely Pro

YouTube video

1. Qubely là gì?

Qubely là một plugin Gutenberg dành cho WordPress với nhiều block nội dung bổ sung cao cấp, dễ dàng tuỳ chỉnh để thiết kế một website WordPress chuyên nghiệp.

Bộ công cụ Qubely hỗ trợ soạn thảo theo khối Gutenberg
Bộ công cụ Qubely hỗ trợ soạn thảo theo khối Gutenberg

2. Tính năng

  • Thư viện thiết kế 

Qubely có một thư viện bao gồm nhiều thiết kế có sẵn để người dùng dễ dàng và nhanh chóng sử dụng cho website của mình. Các mẫu thiết kế này đều dễ dàng tùy biến theo mục đích sử dụng. 

Thư viện block có sẵn của Qubely
Thư viện block có sẵn của Qubely

Thư viện block của Qubely được sắp xếp theo các danh mục để người dùng dễ dàng tìm kiếm theo nhu cầu. 

  • Khối Gutenberg nâng cao

Đây là một trong những tính năng nổi bật của Qubely với rất nhiều block Gutenberg có sẵn, dùng để thiết lập bố cục website theo ý muốn. Bằng việc cài đặt plugin Qubely, người dùng có thể sử dụng 22 block nội dung nâng cao mà các block cơ bản của Gutenberg chưa thể đáp ứng được.

Điểm sơ một số block nâng cao mà Qubely đang có:

Row & Column (bố cục hàng – cột): Tạo bố cục Row & Column tùy chỉnh. Kích thước các cột có thể được thay đổi dễ dàng bằng động tác kéo – thả. Bên cạnh đó, bạn có thể điều chỉnh khoảng cách, chèn ảnh, video, màu sắc, gradient…

Testimonial: Thiết kế phần nội dung Xác thực từ khách hàng (lời nhận xét của người dùng) với tên, ảnh đại diện, biểu tượng và bố cục.

Một số block chứng thực có sẵn của Qubely
Một số block chứng thực từ khách có sẵn trên Qubely

Google Map: Nhúng Google Maps với chiều cao, thu phóng tùy ý, cùng nhiều lựa chọn chỉnh sửa, thiết kế nội dung bản đồ.

Advanced Text: Chèn và thiết kế văn bản với các tính năng tùy chỉnh đa dạng.

Counter: Chèn bộ đếm, bộ hẹn giờ với các cài đặt mở rộng như giới hạn thời gian…

Video Popup: Thiết lập video popup (cửa sổ video) với nhiều tính năng bổ sung để thu hút khách hàng.

Progress Bar: Thanh tiến trình với tuỳ chỉnh nền, hình ảnh,…

Info Box: Khối nội dung thể hiện thông tin website với nhiều kiểu tiêu đề, hiệu ứng khác nhau. 

Một số block Info Box có sẵn
Một số block Info Box có sẵn

Advanced List: Tạo danh sách nâng cao.

Contact: Cho phép khách truy cập tương tác trực tiếp trên website thông qua các biểu mẫu liên hệ có sẵn.

Một số thiết kế có sẵn cho phần tương tác
Một số thiết kế có sẵn cho phần tương tác

Pricing: Thiết lập bảng giá với nhiều gói đăng ký bằng bố cục tạo sẵn, có thể tuỳ chỉnh được.

Các mẫu bảng giá có sẵn trên Qubely
Các mẫu bảng giá có sẵn trên Qubely

Timeline: Trình bày tiến trình của các sự kiện khác nhau như lịch sử cập nhật, tiểu sử thành lập công ty, thành tích cá nhân,…  Các mốc thời gian và lộ trình chi tiết được tùy chỉnh theo ý người dùng.

  • Thiết kế bố cục thông minh

Qubely cho phép người dùng xây dựng bố cục website từ đơn giản đến phức tạp với cấu trúc Row-column – bố cục được các công cụ page-builder sử dụng rộng rãi.

Bố cục Row-column của Qubely
Bố cục Row-column của Qubely

Nhiều Kết hợp Row-column: Người dùng có thể kết hợp nhiều kiểu hàng và cột với các kích thước khác nhau. Block Row của Qubely cho phép người dùng sử dụng đến 6 cột trong một hàng cùng một lúc và tự do tuỳ chỉnh sao cho phù hợp với mục đích sử dụng.

Điều chỉnh Columns: Người dùng có thể dùng động tác kéo – thả để thay đổi kích thước các cột một cách dễ dàng. 

Cài đặt Row-column nâng cao: Người dùng có thể thiết lập lề và nền cho các cột thông qua cài đặt nâng cao. Ngoài ra, Qubely còn cho phép chèn ảnh, icon, thay đổi đường viền cột, thay đổi bảng màu gradient… trang trí các cột bằng tùy chỉnh CSS.

  • Tùy biến responsive

Chúng ta đều biết rằng, khả năng hiển thị website trên trình duyệt web của PC/laptop khác với trên tablet và trên điện thoại, vì kích cỡ màn hình và hệ điều hành không giống nhau. 

Do đó, việc thiết kế website hay tùy chỉnh các block nội dung để giao diện website hoạt động tốt trên mọi màn hình là điều hết sức cần thiết, góp phần tối ưu hóa trải nghiệm người dùng.

Plugin Qubely cho phép thiết lập và điều chỉnh các khối nội dung để trang web của bạn thân thiện với thiết bị di động.

Với tính năng này, bạn có thể kiểm soát vùng thể hiện nội dung của website cho từng thiết bị thông qua phương pháp xác định điểm ngắt cho các kích thước màn hình khác nhau. 

Ngoài ra, với Qubely, bạn còn có thể thay đổi vùng nội dung hiển thị của cùng một block nội dung trên các thiết bị cụ thể. Chẳng hạn, trên thiết bị di động, để trải nghiệm duyệt web tối ưu, bạn có thể lược bỏ một số nội dung không cần thiết và giữ lại những phần chính. Còn đối với PC, bạn có thể thêm vào một số thành phần phụ trợ để thu hút khách truy cập.

  • Tuỳ chỉnh thiết kế nội dung

Qubely cung cấp cho người dùng quyền kiểm soát hoàn toàn nội dung thiết kế. Bạn có thể tuỳ chọn font chữ, độ đậm nhạt, size chữ, khoảng cách dòng hay khoảng cách giữa các chữ cái và điều chỉnh tỷ lệ phần trăm của text cho từng thiết bị.

Giao diện tuỳ chỉnh text với các tính năng nâng cao
Giao diện tuỳ chỉnh text với các tính năng nâng cao

Animation: Làm nổi bật nội dung bằng cách áp dụng các hiệu ứng như mờ dần, thu phóng, xoay,… Tương tự với tính năng animation trong PowerPoint.

Cài đặt màu và kiểu chữ đồng bộ: Qubely hỗ trợ thiết lập bảng màu và font chữ đồng bộ. Theo đó, khi thay đổi màu chữ hay font chữ trong bảng màu chung, các phần nội dung được chỉ định cũng sẽ tự động cập nhật màu sắc và font chữ mới nhất được thay đổi. 

3. Ưu điểm của Qubely so với Elementor

Elementor là một plugin page-builder – trình dựng trang theo cách drag & drop cho WordPress với ưu điểm nổi bật là tính trực quan và tốc độ. Elementor là công cụ cực kỳ hữu ích để xây dựng và thiết kế website dành cho người không chuyên về lập trình. Dù cho bạn không phải là một lập trình viên web, với Elementor, bạn vẫn có thể tạo một website WordPress với đầy đủ tính năng và thiết kế bắt mắt.

Trình tạo trang Elementor
Trình tạo trang Elementor

Gutenberg là một trình soạn thảo của WordPress, được xem như một phần không thể tách rời với WordPress với các chức năng hỗ trợ xây dựng và thiết kế website. Tuy nhiên, các block mặc định của Gutenberg vẫn chưa đủ để được xem là một page-builder như Elementor. 

Qubely, với vai trò là plugin block Gutenberg mở rộng và nâng cao có thể hỗ trợ thiết lập các thành phần nội dung phức tạp hơn cho website, nhưng vẫn không hoàn toàn thay thế được Elementor.

Lợi thế của Qubely là đem lại các tính năng nâng cao để thu hút khách truy cập. Tuy nhiên, so sánh về khả năng thiết kế thì Elementor thực hiện tốt hơn. 

Kết luận: Xét về tính năng, Elementor có ưu thế hơn hẳn Qubely. Tuy nhiên, không phải vì thế mà Qubely “kém cạnh”. Để website chuyên nghiệp và mang đến những trải nghiệm tốt nhất về tính năng cũng như giao diện sử dụng, Qubely đóng vai trò là plugin hỗ trợ cho Elementor để bù trừ những khuyết điểm của nhau. Tuy nhiên, cá nhân mình thấy việc sử dụng đồng thời 2 plugin này trên 1 website WordPress là không cần thiết. 

Hướng dẫn sử dụng nhanh Qubely

1. Cài đặt và thiết lập Qubely 

  • Cài đặt và thiết lập plugin

Cài đặt Qubely cũng tương tự như cài đặt bất kỳ plugin WordPress nào khác, với 4 bước đơn giản:

  1. Vào bảng điều khiển (dashboard) trang web WordPress của bạn.
  2. Truy cập Plugin -> Add New.
  3. Tìm kiếm Qubely ở góc trên cùng bên phải.
  4. Nhấp vào Install Now, sau khi hoàn tất cài đặt thì nhấp Activate.
  5. Bạn có thể sử dụng Qubely miễn phí với một số giới hạn. Phiên bản minh họa trong bài viết này Qubely Pro. 

Sau khi cài đặt plugin Qubely, bạn có thể sử dụng ngay.

  • Thiết lập chung 

Duy trì tính liên tục và thống nhất trong toàn bộ thiết kế là điều rất quan trọng trong thiết kế website. Bạn truy cập vào Global Settings, thiết lập bảng màu và font chữ đồng nhất cho mọi thiết bị.

Thiết lập toàn cầu Qubely
Thiết lập chung Qubely

Để thiết lập Qubely Global, bạn nhấp vào biểu tượng dấu ba chấm ở trên cùng bên phải giao diện trình soạn thảo và chọn Qubely Global Settings trong mục Plugin.

2. Tạo và thiết kế website/blog

  • Layouts (bố cục) có sẵn

Qubely không chỉ cung cấp nhiều block với tính năng đa dạng mà còn đem đến cho người dùng bộ sưu tập bố cục tuyệt đẹp. Các bố cục này là tập hợp một số block cao cấp được sắp xếp và thiết lập sẵn để hỗ trợ bạn trong việc thiết kế một website chuyên nghiệp. 

Có hai cách để nhập bố cục trong Qubely. Khi tạo một page/post, bạn sẽ thấy nút Import Layout ở thanh công cụ trên cùng của giao diện soạn thảo hoặc khi sử dụng Row:

Thêm bố cục khi tạo page/post trên WordPress
Thêm bố cục khi tạo page/post trên WordPress

Sau khi nhấn Import Layout, cửa sổ danh mục các bố cục có sẵn sẽ hiện lên để người dùng lựa chọn và sử dụng: 

Bộ sưu tập các bố cục có sẵn của Qubely
Bộ sưu tập các bố cục có sẵn của Qubely
  • Gói Starter

Ngoài các bố cục có sẵn, Qubely có thể giúp người dùng thiết kế một trang hoàn chỉnh dễ dàng và nhanh chóng bằng cách sử dụng thiết kế trang có sẵn trong mục Starter Packs.

Có tổng số 42 bố cục trang được thiết kế sẵn, đáp ứng các nhu cầu cụ thể của người dùng:

Các bố cục trang có sẵn của Qubely
Các bố cục trang có sẵn của Qubely

Để người dùng có thể dễ dàng tìm được bố cục phù hợp, Qubely phân loại và sắp xếp các thiết kế có sẵn: 

  • Bussiness (Kinh doanh)
  • Agency (Dịch vụ trung gian)
  • Restaurant (Nhà hàng)
  • Nonprofit (Phi lợi nhuận)
  • Portfolio (Hồ sơ, lý lịch)
  • Education (Giáo dục)
  • Corporate (Tổ chức)

Khi thêm bố cục Starter Packs vào page/post của mình, bạn có thể tuỳ chỉnh cấu hình và nội dung chi tiết của các block theo ý mình để tạo ra một page/post hoàn chỉnh mang đậm phong cách cá nhân của người dùng.

  • Các khối Basic và Pro
Danh mục các block với các tính năng phong phú và đa dạng của Qubely
Danh mục các block với các tính năng phong phú và đa dạng của Qubely

Qubely cung cấp các block cơ bản với đầy đủ các tính năng cần thiết. Ngoài ra, plugin này còn hỗ trợ các block nâng cao để phục vụ nhu cầu thiết kế website phức tạp hơn. Các block Pro được Qubely cập nhật và bổ sung liên tục. 

3. Tối ưu hoá website

Như đã trình bày ở phần so sánh với Elementor, Qubely mang đến nhiều tính năng đa dạng và phức tạp, dễ dẫn đến việc trì hoãn trải nghiệm web của khách truy cập khi bạn nhồi nhét quá nhiều tính năng. Tốc độ duyệt web không chỉ ảnh hưởng đến trải nghiệm người dùng, mà cũng là một trong những yếu tố quan trọng của SEO, ảnh hưởng đến xếp hạng kết quả tìm kiếm trên Google nữa. 

Đó là lý do mà người dùng Qubely cần phải tìm hiểu về những phương pháp tối ưu hoá website để nâng cao trải nghiệm người dùng. Dưới đây là một số tips nhỏ (để bạn tham khảo, vì có nhiều cách tối ưu khác nhau) để tăng tốc độ duyệt web:

  • Bước 1: Thiết lập bộ đệm cho WordPress

Bắt đầu quá trình tối ưu hoá bằng cách cài một plugin bộ nhớ đệm để rút ngắn tốc đổ truyền tải từ website đến khách truy cập, như W3 Total Cache – một plugin miễn phí có thể dễ dàng tìm thấy trong thư mục plugin WordPress. 

  • Bước 2: Tối ưu hóa Plugin Qubely 

Bước tiếp theo là tối ưu hoá một số tính năng của Qubely mà bạn không sử dụng có thể làm chậm tốc độ load. Trong bảng điều khiển, truy cập theo đường dẫn: WP Admin -> Qubely -> Settings -> Advanced và chuyển hai mục Load FontAwesomeCSS thành “No”.

  • Bước 3: Thay đổi kích thước và nén Đa phương tiện

Hình ảnh sử dụng cho trang của bạn cần phải được tối ưu hoá để đảm bảo tốc độ tải trang cũng như chất lượng ảnh. Vì thế, nén ảnh là một bước trung gian cần thiết. Tuỳ vào định dạng ảnh gốc mà bạn có thể lựa chọn công cụ nén ảnh phù hợp như TinyPNG hoặc TinyJPG. Bên cạnh đó, hãy lựa chọn kích thước ảnh cũng như video thật hợp lý để tối ưu tốc độ load.

Kết luận

Qubely là một plugin hỗ trợ trình soạn thảo block Gutenberg mạnh mẽ và nhiều tính năng, thích hợp cho các nhà thiết kế web nghiệp dư cũng như chuyên nghiệp. 

Ưu điểm nổi bật của plugin Gutenberg này là có nhiều bố cục nội dung có sẵn, sử dụng được ngay và rất dễ tùy biến thay đổi màu sắc, nội dung… phù hợp với mục đích thiết kế của người dùng. 

Hạn chế về tốc độ duyệt web của Qubely có thể được khắc phục bằng cách chủ động tối ưu hoá website. 

Tóm lại, Qubely là một plugin đáng để bạn sử dụng.  Tuy nhiên, chi phí hàng năm cho gói Qubely Pro khá cao (từ 900.000đ – hơn 2.000.000 mỗi năm). Nếu bạn có nhu cầu sử dụng Qubely Pro giá rẻ thì hãy liên hệ với mình nhé. 

Mật khẩu truy cập/giải nén thư mục chia sẻ premium.

  • Các yêu cầu unlock tài liệu Chegg, Scribd... các bạn xem ở thư mục Học Tập (tổng hợp) nhé.
  • Các yêu cầu tải file premium từ Freepik, Pikbest, PNGtree, Envato Elements, Lovepik... các bạn xem ở thư mục Đồ họa (tổng hợp) nhé.
  • Nếu trên điện thoại bạn không nhìn thấy mật khẩu truy cập/giải nén, vui lòng Chuyển trang sau đó quay trở lại hoặc Xem bài viết này trên máy tính.
  • Vì lý do bản quyền, link download (OneDrive/Google Drive) tài khoản, tài nguyên số chỉ được chia sẻ trong Group Facebook.
  • Và thời gian chia sẻ link download (public) thường là 24h-48h.
Thư mục chia sẻ tài khoản, tài nguyên số premium
Thư mục chia sẻ tài khoản, tài nguyên số premium

Dưới đây là thông tin mật khẩu truy cập/giải nén:

Mật khẩu giải nén/truy cập: @cspremium5008 hoặc @cspremium48 hoặc @cspremium88-1
         

ChiasePremium.com
ChiasePremium.com

Blog chia sẻ Kiến thức công nghệ và Trải nghiệm tài nguyên số && Hướng dẫn và Hỗ trợ sử dụng các loại tài khoản premium.

Viết một bình luận

1 bình luận về “Review và hướng dẫn sử dụng Qubely Pro: plugin WordPress hỗ trợ Editor Gutenberg rất tốt

  1. Chia sẻ tài khoản trải nghiệm Wpmudev
    Danh mục của Wpmudev bao gồm các blog phổ biến của họ và tuyển tập các plugin WordPress miễn phí. Nó cũng bao gồm các chủ đề cao cấp và hơn một trăm plugin cao cấp, cũng như các nội dung giáo dục, các dịch vụ khác chỉ có sẵn cho những thành viên trả tiền. Không chỉ thế, các thành viên cón có thể truy cập một dịch vụ hỗ trợ trang web WordPress 24/7, các video hướng dẫn khác nhau và các khóa học trực tuyến.

    Và nếu bạn muốn được trải nghiệm gói Agency của ứng dụng

    Wpmudev hoàn toàn miễn phí trong 7 ngày thì hãy thật nhanh tay truy cập theo đường link ở bên dưới:
    https://1drv.ms/u/s!Atl7QVjZHdNBhEdPgl5V9nzQcxCf?e=aJ3ZfS
    Mật khẩu giải nén: chia sẻ trong Group.
    Thời gian chia sẻ: 24h.

    Trả lời