Crocoblock – Toolkit for building websites with Elementor

Crocoblock là bộ công cụ (JetPlugins) mở rộng cho Elementor, tập trung vào nội dung động (dynamic content), bộ lọc thông minh, trình dựng theme, WooCommerce, menu/popup, và đặt chỗ/đặt lịch. Thay vì ghép nhiều plugin rời rạc, bạn dùng một hệ sinh thái đồng bộ để dựng site nhanh, sạch và dễ mở rộng.

Lợi ích chính

• Dựng site nhanh với template/blocks và widgets sẵn có.

• Quy mô linh hoạt: từ blog, portfolio đến cửa hàng và hệ thống đặt chỗ.

• Nội dung động: hiển thị dữ liệu theo trường tùy chỉnh, quan hệ, truy vấn.

• Trải nghiệm mua sắm tốt nhờ trang sản phẩm và bộ lọc rõ ràng.

• Giảm phụ thuộc code nhưng vẫn kiểm soát trình bày chi tiết.

Thành phần tiêu biểu trong bộ Crocoblock (JetPlugins)

• JetEngine – Tạo Custom Post Types, taxonomy, custom fields, relations, repeater, query builder, listing grid, dynamic visibility.

• JetSmartFilters – Faceted filters cho listing/shop: theo từ khóa, khoảng giá, rating, checkbox, select, search AJAX… có thể kết hợp nhiều tiêu chí.

• JetThemeCore – Theme Builder: tạo header, footer, single, archive; gán điều kiện hiển thị theo loại nội dung, taxonomy, vai trò người dùng.

• JetWooBuilder – Dựng trang sản phẩm, trang danh mục, shop theo ý; hỗ trợ badges, ảnh gallery, thuộc tính/biến thể.

• JetElements – Thư viện widget mở rộng: banners, sliders, animated box, pricing table, timeline, maps…

• JetMenu – Mega menu: nhiều cột, icon, badge; menu dọc/ngang; submenu tùy biến.

• JetPopup – Popup builder: popup theo trigger (click, scroll, exit-intent…), nhắm mục tiêu theo trang/thiết bị.

• JetBlog – Danh sách/tile/hero cho blog & tạp chí; highlight bài theo danh mục/thẻ.

• JetSearch – AJAX search: gợi ý tức thì, lọc theo post type, hiển thị kết quả đẹp.

• JetTabs – Tabs/Accordion/Switcher để gom nội dung gọn gàng.

• JetTricks – Hiệu ứng thị giác (parallax, sticky column, hotspots…) không cần code.

• JetReviews – Đánh giá & xếp hạng cho bài viết/sản phẩm, hiển thị điểm số trực quan.

• JetCompareWishlist – So sánh và yêu thích cho cửa hàng.

• JetAppointment – Đặt lịch theo khung giờ: lịch làm việc, thời lượng, buffer giữa slot, nghỉ lễ… phù hợp dịch vụ cá nhân.

• JetBooking – Đặt chỗ theo ngày/đêm/đơn vị (lưu trú, tài sản…); cấu hình phòng/đơn vị, công suất, ngày đến–đi.

Ghi chú: Bộ plugin có thể cập nhật/đổi tính năng theo phiên bản; hãy bật những mô-đun thực sự cần để tối ưu hiệu suất.

Trường hợp sử dụng điển hình

• Danh mục sản phẩm/dịch vụ có lọc (faceted filters) cho eCommerce hoặc catalogue.

• Directory/Listing (bất động sản, việc làm, địa điểm) với CPT, quan hệ, bản đồ và tìm kiếm.

• Cửa hàng WooCommerce với trang sản phẩm tùy biến, tìm kiếm tức thì và so sánh/yêu thích.

• Dịch vụ đặt lịch (spa, nha khoa, tư vấn) bằng JetAppointment.

• Đặt chỗ lưu trú (căn hộ, homestay) bằng JetBooking.

• Blog/Tạp chí với bố cục hero, tile, danh sách chuyên mục, popup đăng ký.

Quy trình triển khai gợi ý

1. Cài Elementor và kích hoạt các JetPlugins cần dùng.

2. Trong JetEngine: tạo CPT/fields/relations, định nghĩa Listings và Queries.

3. Dùng JetThemeCore tạo template (single/archive/header/footer) và đặt điều kiện.

4. Với shop: tạo layout bằng JetWooBuilder; thêm JetSmartFilters để lọc.

5. Bổ sung JetMenu, JetPopup, JetSearch theo nhu cầu trải nghiệm.

6. Kiểm tra trên di động, tối ưu ảnh và theo dõi hiệu suất.

Mẹo tối ưu hiệu suất

• Bật đúng plugin: chỉ kích hoạt JetPlugins bạn thực sự dùng trên dự án.

• Giới hạn truy vấn: tránh lồng quá nhiều listing/query nặng trong một trang.

• Tối ưu media: nén ảnh (WebP/AVIF), bật lazyload.

• Tối ưu CSS/JS: gộp/thu gọn khi khả thi; tắt widget/hiệu ứng không dùng.

• Cache & CDN: bật cache máy chủ/trình cắm; dùng CDN để giảm TTFB/LCP.

• Kiểm tra Core Web Vitals định kỳ (PageSpeed Insights/CrUX).

Gợi ý tối ưu SEO

• Tạo Breadcrumbs và cấu trúc H1–H2–H3 rõ ràng.

• Dùng alt text giàu ngữ nghĩa cho ảnh, đặc biệt ảnh sản phẩm/portfolio.

• Với listing lớn: kích hoạt phân trang (pagination) hoặc load more thân thiện.

• Cân nhắc schema phù hợp (Product, Service, Review) nếu nội dung đáp ứng.

Câu hỏi thường gặp (FAQ)

Crocoblock có cần Elementor Pro không?
Phần lớn mô-đun làm việc tốt với Elementor bản miễn phí; một số luồng nâng cao có thể cần tính năng của Pro hoặc plugin Jet tương ứng.

Có hỗ trợ WooCommerce không?
Có. Bạn có thể dựng trang sản phẩm/danh mục bằng JetWooBuilder, thêm bộ lọc với JetSmartFilters và cải thiện tìm kiếm bằng JetSearch.

Khác nhau giữa JetBooking và JetAppointment?
JetBooking phù hợp đặt chỗ theo đơn vị/ngày (lưu trú, tài sản); JetAppointment phù hợp đặt lịch theo khung giờ (dịch vụ cá nhân).

Hiệu suất có bị ảnh hưởng khi dùng nhiều JetPlugins?
Hãy chỉ bật những plugin cần thiết, giới hạn số listing/query nặng trên một trang, và bật cache/CDN để đảm bảo tốc độ.

Có dùng dữ liệu động không?
Có. JetEngine cung cấp trường tùy chỉnh, quan hệ và truy vấn để hiển thị nội dung động linh hoạt trên front-end.