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.
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.
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
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.
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ủ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.
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.
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.
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.
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.
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ị.
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.
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:
- Vào bảng điều khiển (dashboard) trang web WordPress của bạn.
- Truy cập Plugin -> Add New.
- Tìm kiếm Qubely ở góc trên cùng bên phải.
- Nhấp vào Install Now, sau khi hoàn tất cài đặt thì nhấp Activate.
- 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 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:
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:
- 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:
Để 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
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 FontAwesome và CSS 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é.
