The Future of Web Design? Unicorn Studio with Elementor & Bricks Builder
Tóm tắt ngắn:
- Video giới thiệu Unicorn Studio, một nền tảng không cần mã (no-code) cho phép thêm các hiệu ứng thú vị vào website mà không cần viết code.
- Nền tảng sử dụng WebGL (ngôn ngữ JavaScript tương tự như Google Maps và Figma) để tạo hiệu ứng 2D và 3D trong trình duyệt, tích hợp với Elementor, Bricks Builder, Framer và Webflow. Video tập trung vào việc tích hợp với WordPress thông qua Elementor và Bricks.
- Ứng dụng của Unicorn Studio là tạo ra các website sáng tạo, thu hút sự chú ý, đặc biệt phù hợp với các dự án cần hiệu ứng động, không phải website brochure cơ bản hoặc website ưu tiên khả năng truy cập.
- Video hướng dẫn chi tiết cách nhúng Unicorn Studio vào Elementor và Bricks, bao gồm việc thêm đoạn mã vào header và sử dụng thuộc tính data-us-project để liên kết với dự án.
Tóm tắt chi tiết:
Video được chia thành các phần chính sau:
Phần 1: Giới thiệu Unicorn Studio: Video bắt đầu bằng việc giới thiệu Unicorn Studio – một nền tảng no-code tạo hiệu ứng website ấn tượng bằng WebGL, một ngôn ngữ JavaScript mạnh mẽ được sử dụng bởi các công ty lớn như Google và Figma. Người thuyết trình nhấn mạnh tốc độ và khả năng tích hợp với các nền tảng khác như Framer và Webflow. Ông cũng đề cập đến tính chất beta của nền tảng và mong đợi sự phát triển trong tương lai.
Phần 2: Khám phá giao diện và tính năng Unicorn Studio: Người thuyết trình trình diễn giao diện người dùng của Unicorn Studio, cho thấy cách chọn template, tùy chỉnh màu sắc, phông chữ, và thêm các hiệu ứng như masking, pixelization, animation, mouse tracking, và 3D tilt. Ông nhấn mạnh rằng nền tảng này phù hợp cho các website sáng tạo, không phải cho các website cơ bản hoặc ưu tiên khả năng truy cập: "Đây là tất cả về việc có niềm vui và điều gì đó như thế này sẽ rất tuyệt vời cho các website sáng tạo, nơi chúng ta có thể suy nghĩ khác biệt, thử nghiệm và tận hưởng niềm vui."
Phần 3: Tích hợp Unicorn Studio với Elementor: Phần này hướng dẫn cách nhúng Unicorn Studio vào website WordPress sử dụng Elementor. Người thuyết trình giải thích cách thêm đoạn mã vào header của website, sử dụng thuộc tính data-us-project với key và value được lấy từ phần embed code của Unicorn Studio. Ông nhấn mạnh việc chỉ cần copy value nằm trong dấu ngoặc đơn, không copy cả ngoặc. Quá trình này được minh họa trực tiếp trên màn hình. Ông cũng đề cập đến phiên bản trả phí ($8/tháng) với nhiều tính năng hơn.
Phần 4: Tích hợp Unicorn Studio với Bricks Builder: Tương tự phần 3, phần này hướng dẫn cách tích hợp Unicorn Studio vào Bricks Builder. Quá trình này tương đối đơn giản hơn vì Bricks Builder có phần nhập key và value riêng biệt. Người thuyết trình cũng chỉ ra hạn chế về SEO do thiếu hỗ trợ thẻ H-tag trong phiên bản hiện tại.
Phần 5: Sử dụng Unicorn Studio để tạo hiệu ứng nền và text overlay: Người thuyết trình chỉ ra cách tạo hiệu ứng nền đẹp mắt bằng cách sao chép phần embed của Unicorn Studio, loại bỏ thuộc tính data-us-project ở bản sao, và sử dụng position: absolute để đặt text overlay lên trên. Ông giải thích cách điều chỉnh z-index để đảm bảo text hiển thị chính xác. Đây là một ví dụ thực tế về cách sử dụng Unicorn Studio để tạo ra một thiết kế website độc đáo.
Phần 6: Kết luận: Video kết thúc bằng việc so sánh Unicorn Studio với Spline, nhấn mạnh tiềm năng phát triển của nền tảng no-code này và sự hào hứng của người thuyết trình đối với các công cụ web design mới. Ông khuyến khích người xem thử nghiệm và khám phá Unicorn Studio.