Xây dựng một trang web trước đây thường giống như một dự án bạn phải thuê ai đó thực hiện. Giờ thì không còn nữa.
Tôi đã sử dụng Hostinger Website Builder, và trong hướng dẫn này, tôi sẽ dẫn bạn qua toàn bộ quy trình, từng bước một, từ lúc bạn đăng nhập cho đến khi trang web của bạn được đưa lên mạng.
Bắt đầu thôi.
Hostinger Website Builder là gì?
Hostinger Website Builder là công cụ tạo trang web kéo-thả được hỗ trợ bởi AI, tích hợp trực tiếp trong tài khoản Hostinger của bạn.
Bạn không cần cài đặt gì thêm, không cần biết lập trình, và không cần có nền tảng thiết kế. Bạn chỉ cần mô tả yêu cầu, AI sẽ tạo một trang web hoàn chỉnh cho bạn, rồi bạn tùy chỉnh để phù hợp với thương hiệu.
Nó là cách nhanh nhất để biến từ con số không thành một trang web chuyên nghiệp và hoạt động trên mạng.
Bước 1: Đăng nhập và chuyển đến trình xây dựng
Khi bạn đăng nhập vào tài khoản Hostinger, bạn sẽ vào hPanel. Đây là bảng điều khiển chính của Hostinger, nơi bạn quản lý mọi thứ, bao gồm trang web, tên miền, email và thanh toán.
Ở thanh bên trái, bạn sẽ thấy danh sách các tùy chọn. Nhấp vào Websites. Một menu con sẽ hiện ra với hai tùy chọn: Websites list và Migrations. Nhấp vào Websites list.
Giờ bạn đang ở trang Websites list, nơi hiển thị tất cả các trang web liên kết với tài khoản của bạn.
Ở góc trên bên phải trang, bạn sẽ thấy nút màu tím + Add website. Nhấp vào nó.
Một menu thả xuống xuất hiện với bốn tùy chọn:
- Hostinger Horizons
- WordPress
- Hostinger Website Builder
- Và Custom PHP/HTML website
Bạn hãy nhấp vào Hostinger Website Builder, được mô tả là “AI-powered drag-and-drop website builder.”
Bước 2: Mô tả trang web của bạn cho AI
Sau khi chọn Hostinger Website Builder, bạn sẽ thấy màn hình thiết lập với tiêu đề “Let AI create your online presence.”
Đây là nơi bạn cho AI biết bạn muốn xây dựng loại trang web nào.
Bạn sẽ thấy một hộp văn bản lớn với văn bản gợi ý “Describe your website or business.” Đây là ô nhập prompt, và những gì bạn gõ vào đây quyết định mọi thứ AI tạo ra. Bạn càng chi tiết, kết quả càng tốt.
Dưới hộp văn bản, có một hàng các gợi ý khởi động nhanh. Bao gồm các tùy chọn như “Create a business website,” “Create an online store,” “Design a portfolio,” “Launch an appointments website,” “Start a blog,” “Launch a restaurant website,” và “Create a one pager website.”
Nhấp vào bất kỳ gợi ý nào sẽ điền sẵn một prompt cơ bản mà bạn có thể chỉnh sửa và mở rộng.
Ở dưới cùng của màn hình, bạn sẽ thấy hai liên kết: Pre-made templates và Link in bio website.
Nếu bạn muốn bỏ qua AI và xem trước các thiết kế có sẵn, nhấp vào Pre-made templates.
Nếu bạn chỉ cần một trang đơn giản cho hồ sơ mạng xã hội, tùy chọn Link in bio cũng đáng thử.
Với hầu hết mọi người muốn xây dựng trang web thực sự, hộp prompt AI là nơi khởi đầu hợp lý nhất.
Cách viết prompt AI hiệu quả
Đây là phần quan trọng nhất của toàn bộ quy trình. Hãy coi prompt AI như một bản tóm tắt bạn gửi cho nhà thiết kế. Bạn càng truyền đạt rõ ràng tầm nhìn, kết quả càng sát với những gì bạn muốn.
Đây là prompt tôi đã sử dụng cho hướng dẫn này. Tôi đang xây dựng một trang web cho một agency sáng tạo:
“Build a modern, professional website for a creative agency that offers branding, graphic design, web design, and digital marketing services. The website should feel creative, bold, and trustworthy while staying clean and easy to navigate. Use a modern layout with strong visuals, good spacing, and stylish typography. Include the following pages: Home, About, Services, Portfolio, Blog, and Contact. On the Home page, add a hero section with a powerful headline, short value-focused description, and a clear call-to-action button like ‘Start Your Project’ or ‘Get a Quote.’ Write simple, persuasive copy that explains what we do, who we help, and the results we deliver. Make the website mobile-friendly, fast-loading, and optimized for basic SEO.”
Chú ý độ cụ thể của prompt này. Nó bao gồm ngành, tông màu, phong cách bố cục, các trang cần có, cấu trúc trang chủ, và mục tiêu nội dung. Mức độ chi tiết này giúp AI có nền tảng vững chắc để thực hiện.
Khi bạn gõ xong mô tả, bạn sẽ thấy nút “Improve description” xuất hiện ở góc trên bên phải ô văn bản.
Tôi khuyên bạn nên nhấp vào đây trước khi gửi. AI sẽ mở rộng và tinh chỉnh prompt của bạn, thường bổ sung những chi tiết bạn chưa nghĩ tới.
Khi sẵn sàng, nhấp nút mũi tên tím (send icon) ở góc dưới bên phải ô văn bản để gửi prompt và bắt đầu tạo.
Bước 3: Chờ AI xây dựng trang web
Sau khi bạn gửi prompt, AI của Hostinger sẽ bắt đầu làm việc ngay lập tức. Bạn sẽ thấy hoạt cảnh tải toàn màn hình nền tím đậm với dòng chữ “Looking for matching pictures…” và thanh tiến trình hiển thị mức độ hoàn thành.
Giai đoạn này thường mất từ 30 đến 60 giây. Trong thời gian này, AI thực hiện nhiều việc: tạo bố cục trang, viết nội dung, chọn hình ảnh phù hợp từ thư viện stock, xây dựng điều hướng và cấu trúc toàn bộ trang dựa trên prompt của bạn.
Đừng đóng tab trong khi chờ. Hãy để AI chạy cho đến khi hoàn tất.
Bước 4: Xem lại thành quả AI tạo
Khi AI hoàn thành, bạn sẽ thấy bản xem trước trang web mới. Đây là màn hình kết quả, và thật sự rất thú vị khi xem AI đã tạo gì cho bạn.
Bên trái màn hình là bản xem trước trực tiếp trang web. Bên phải là bảng điều khiển gọi là “Your idea summary,” hiển thị tóm tắt prompt bạn đã gửi và nút “Edit idea” nếu bạn muốn quay lại chỉnh sửa và tạo lại với prompt khác hoặc đã cập nhật.
Trong ví dụ của tôi, AI đã đặt tên trang là “BoldCraft Studio” và tạo trang chủ với tiêu đề “Crafting Bold Brands That Shine”, mô tả hỗ trợ và hai nút kêu gọi hành động: “Start Now” và “Get Quote”.
Thanh điều hướng bao gồm tất cả sáu trang tôi yêu cầu: Home, About, Services, Portfolio, Blog, và Contact.
Ở góc trên bên trái bản xem trước, bạn cũng thấy hai nút: Previous versions cho phép bạn xem qua các thiết kế thay thế AI đã cân nhắc, và Rate site để bạn đánh giá kết quả.
Ở góc trên bên phải bản xem trước, có biểu tượng chuyển đổi desktop và mobile. Dùng chúng để kiểm tra trang trên điện thoại trước khi tiếp tục. Nên tập thói quen này sớm.
Nếu bạn hài lòng với tổng thể, nhấp nút tím Continue ở bảng bên phải. Điều này sẽ đưa bạn vào trình chỉnh sửa chính, nơi tùy chỉnh sâu hơn.
Nếu chưa ưng, nhấp Edit idea, sửa prompt, và tạo lại. Bạn có thể lặp lại bao nhiêu lần cũng được.
Bước 5: Làm quen với trình chỉnh sửa
Trình chỉnh sửa là nơi bạn sẽ dành phần lớn thời gian. Khi mới vào, hãy dành chút thời gian để nhận diện bố cục trước khi bắt đầu bấm lung tung.
Trình chỉnh sửa gồm hai khu vực chính:
- Khu vực lớn chính giữa là canvas trang web, nơi bạn xem và tương tác trực tiếp với trang.
- Thanh bên dọc hẹp bên trái là bảng điều khiển, chứa mọi công cụ bạn cần.
Dưới đây là chức năng của từng mục trong thanh bên:
- Setup cho phép truy cập cài đặt cơ bản của trang, tên miền kết nối, và thông tin gói đăng ký.
- Elements mở bảng kéo-thả để thêm khối nội dung mới vào bất kỳ trang nào. Tôi sẽ giới thiệu chi tiết hơn ở phần sau.
- Pages hiển thị tất cả trang của bạn ở một chỗ. Bạn có thể chuyển đổi trang, thêm mới, đổi tên, thay đổi thứ tự hoặc xóa trang không cần thiết.
- Styles điều khiển thiết kế toàn cục của trang. Đây là nơi bạn thiết lập font chữ, bảng màu và kiểu nút. Mọi thay đổi sẽ áp dụng trên toàn trang, phù hợp cho quyết định thiết kế lớn thay vì chỉnh từng mục nhỏ.
- AI tools cung cấp các công cụ viết và nội dung AI của Hostinger. Bạn có thể dùng để chỉnh sửa đoạn văn, tạo nội dung mới, v.v.
- Blog nơi tạo và quản lý bài viết nếu trang bạn có blog.
- Store nơi thiết lập cửa hàng trực tuyến nếu bạn bán sản phẩm. Lưu ý tính năng eCommerce yêu cầu gói cao hơn.
- SEO mở trình quản lý SEO tích hợp, nơi bạn đặt tiêu đề meta, mô tả và các chi tiết tối ưu hóa tìm kiếm cho mỗi trang.
- More mở rộng thành menu thứ hai với công cụ bổ sung bao gồm Appointments, General settings, Integrations, Form submissions, Analytics, Media library, Multi-language support, Manage backups, Export content to WordPress, và Help and Resources.
Ở đầu trình chỉnh sửa, bạn cũng sẽ thấy thanh công cụ chính. Từ trái sang phải gồm: chuyển đổi xem desktop/mobile, các nút undo và redo, nút Connect domain, nút Preview, và nút xanh Go live.
Bước 6: Chỉnh sửa nội dung
Giờ là lúc bạn biến trang thành của bạn. Nhấp vào bất kỳ đâu trên canvas để bắt đầu chỉnh sửa.
Khi rê chuột qua bất kỳ phần nào, bạn sẽ thấy nhãn màu xanh xuất hiện ở góc trên bên trái phần đó cho biết loại thành phần, ví dụ “Section” hoặc “Header.” Đồng thời, một thanh công cụ nhỏ hiện lên phía trên với các tùy chọn chỉnh sửa.
Thanh công cụ section có các điều khiển từ trái sang phải: Edit section mở bảng cài đặt section, nơi bạn có thể thay đổi hình nền hoặc màu nền, điều chỉnh padding và tùy chỉnh bố cục.
Bên cạnh là Generate image, mở công cụ tạo hình ảnh AI.
Sau đó là biểu tượng Duplicate, công tắc Ẩn/Hiện, biểu tượng Delete, các mũi tên Move up và Move down để thay đổi thứ tự section, và menu More với ba chấm.
Để sửa văn bản, chỉ cần nhấp vào nó và bắt đầu gõ. Thành phần văn bản sẽ trở thành ô nhập liệu, và bạn sẽ thấy các điều khiển định dạng xuất hiện. Bạn có thể thay đổi kích thước font, độ đậm, căn lề và màu sắc ngay trên thanh công cụ đó.
Để thay hình ảnh, nhấp vào ảnh. Bạn sẽ thấy tùy chọn thay bằng file của bạn, duyệt thư viện stock Hostinger, hoặc tạo mới bằng AI.
Hãy chỉnh sửa trang chủ trước, rồi dùng panel Pages để chuyển sang từng trang khác và chỉnh sửa tương tự.
Bước 7: Sử dụng công cụ tạo hình ảnh AI
Một tính năng đáng chú ý là AI image generator, rất hữu ích nếu bạn không có ảnh chuyên nghiệp.
Để truy cập, rê chuột qua bất kỳ section nào và nhấp Generate image trong thanh công cụ nổi. Một panel sẽ trượt vào từ bên phải.
Trong panel, bạn sẽ thấy ô “Image description.” Gõ mô tả hình ảnh bạn muốn tạo.
Mô tả càng cụ thể và hình ảnh càng rõ ràng, kết quả càng đẹp. Panel giới hạn 3.000 ký tự và có chỉ báo chất lượng theo thời gian thực để báo prompt của bạn đã đủ tốt chưa.
Ví dụ, tôi gõ “A modern creative agency workspace with designers collaborating around laptops and large screens, displaying branding designs, website mockups, and digital artwork. Bright, clean, and stylish office,” panel hiện “Great description!” với thanh chất lượng đầy.
Khi bạn hài lòng, nhấp Create images. AI sẽ tạo một loạt hình cho bạn lựa chọn.
Lưu ý: công cụ tạo hình ảnh AI yêu cầu gói Business trở lên. Nếu bạn dùng gói Premium, panel sẽ hiển thị thông báo nâng cấp ở dưới.
Bước 8: Thêm thành phần mới vào bất kỳ trang nào
Nếu bạn muốn thêm khối nội dung không có sẵn trên trang, nhấp Elements ở thanh bên trái. Điều này mở panel “Add elements.”
Bạn sẽ thấy lưới các thành phần có sẵn, bao gồm Text, Button, Affiliate link, Add to bag, Image, Gallery, Video, Shape, Card, Map, Instagram feed, và Contact form. Kéo thả bất kỳ thành phần nào vào canvas tại vị trí bạn muốn.
Khi đã đặt, nhấp vào thành phần để truy cập cài đặt và tùy chỉnh riêng.
Cách kéo-thả này giúp bạn không bị giới hạn bởi bố cục AI tạo sẵn. Bạn có thể thêm, xóa và sắp xếp lại tự do.
Bước 9: Quản lý các trang
Nhấp Pages ở thanh bên trái để xem danh sách tất cả trang. Nhấp vào tên trang để chuyển đến chỉnh sửa trang đó.
Để thêm trang mới, dùng nút cộng. Để thay đổi thứ tự hiển thị trong điều hướng, kéo lên hoặc xuống trong danh sách.
Nếu có trang AI tạo không cần, bạn có thể xóa tại đây. Tương tự, nếu bạn cần trang AI chưa bao gồm, ví dụ Testimonials hoặc Pricing, bạn có thể thêm và xây dựng bằng panel Elements.
Bước 10: Thiết lập SEO
Trước khi xuất bản, bạn cần thiết lập SEO. Đây là bước nhiều người bỏ qua, và đó là sai lầm.
Dành 15 phút để điền cài đặt SEO có thể tạo khác biệt lớn về khả năng người dùng tìm thấy trang qua Google.
Nhấp SEO ở thanh bên trái để mở panel “Let’s be found on Google (SEO).”
Panel chia hai phần. Bên trái là danh sách các trang. Bên phải là Website overview, hiển thị tên doanh nghiệp và ngôn ngữ trang. Nhấp Edit để cập nhật nếu cần.
Dưới thông tin trang, bạn sẽ thấy mục “Some pages require your attention.”
Mỗi trang cần làm việc sẽ có biểu tượng cảnh báo màu cam. Nhấp vào trang đó bên trái để mở cài đặt SEO riêng, nơi bạn có thể viết meta title và meta description cho từng trang.
Làm lần lượt cho mọi trang. Meta title tốt nên rõ ràng, có từ khóa chính và dưới 60 ký tự. Meta description tóm tắt nội dung trang và dưới 160 ký tự. Đây là đoạn xuất hiện trên kết quả tìm kiếm Google, vì vậy đáng để dành vài phút cho mỗi trang.
Bước 11: Kết nối tên miền
Nếu bạn chưa kết nối tên miền tùy chỉnh, bây giờ là lúc. Nhấp nút Connect domain trên thanh công cụ đầu trình chỉnh sửa.
Bạn có hai tùy chọn. Nếu đã sở hữu tên miền, bạn có thể kết nối bằng cách cập nhật DNS để trỏ về máy chủ của Hostinger. Nếu chưa, bạn có thể mua trực tiếp trên màn hình này.
Trước khi kết nối tên miền, trang sẽ truy cập qua subdomain tạm thời của Hostinger, ví dụ yoursite.builder-preview.com. Điều này ổn cho thử nghiệm, nhưng bạn nên có tên miền riêng trước khi chia sẻ rộng rãi.
Bước 12: Xem trước và xuất bản
Gần xong rồi. Trước khi nhấn xuất bản, nhấp nút Preview ở góc phải trên cùng.
Điều này mở chế độ xem trước toàn màn hình, cho thấy trang sẽ hiển thị ra sao với khách truy cập. Chuyển đổi giữa desktop và mobile và kiểm tra mọi thứ hiển thị đúng trên cả hai.
Chú ý cách phần hero trông trên mobile, thanh điều hướng thu gọn ra sao, và ảnh có bị cắt xấu không.
Khi hài lòng, quay lại trình chỉnh sửa và nhấp nút xanh Go live ở góc phải trên. Trang của bạn giờ đã được xuất bản và trực tuyến.
Bước 13: Khám phá tích hợp
Khi trang đã live, bạn nên khám phá các tích hợp sẵn có. Vào More > Integrations ở thanh bên trái.
Panel Integrations cho phép kết nối trang với công cụ và dịch vụ bên ngoài. Hiện có các tùy chọn: Shippo để tạo nhãn vận chuyển và quản lý đơn hàng, Printful để tạo và bán sản phẩm in theo yêu cầu, Hostinger Reach cho email marketing và gửi bản tin, Google Ads để chạy quảng cáo trả phí, và Custom code nếu bạn muốn chèn HTML, CSS, hoặc JavaScript tùy chỉnh để mở rộng chức năng.
Để kích hoạt bất kỳ tích hợp nào, nhấp Get started bên cạnh, làm theo các bước kết nối, rồi cập nhật lại trang bằng cách xuất bản lại.
Mẹo để tận dụng tối đa Hostinger Website Builder
Hãy chi tiết khi viết prompt AI. Một prompt hai câu sẽ cho kết quả rất chung chung. Một prompt chi tiết, cụ thể về ngành, đối tượng, sở thích thiết kế, cấu trúc trang và phong cách giọng điệu sẽ cho kết quả sát với ý bạn hơn. Dành năm phút viết brief kỹ sẽ tiết kiệm bạn hàng giờ chỉnh sửa sau này.
Dùng nút Improve description mỗi lần. Nút này dễ bỏ qua nhưng cực kỳ hữu ích. AI thường bổ sung những chi tiết bạn còn mơ hồ và biến chúng thành hướng dẫn thiết kế, nội dung cụ thể.
Kỹ lưỡng khi chỉnh sửa nội dung. AI viết nội dung placeholder khá ổn, nhưng nó không hiểu doanh nghiệp bạn như bạn. Hãy duyệt qua từng trang và viết lại nội dung để phản ánh chính xác dịch vụ, giá trị và phong cách của bạn.
Kiểm tra giao diện mobile trước khi xuất bản. Hostinger tự động làm cho trang responsive, nhưng hình ảnh và khoảng cách đôi khi cần điều chỉnh nhỏ trên màn hình nhỏ. Luôn xem trước ở chế độ mobile trước khi live.
Điền SEO cho mọi trang. Không chỉ homepage. Mỗi trang đều xứng đáng có meta title và meta description đúng chuẩn. Mỗi trang chỉ mất vài phút và là cách đơn giản nhất để cải thiện khả năng hiển thị trên tìm kiếm.
Sử dụng Media library để giữ trật tự. Trong More > Media library, bạn có thể tải lên và quản lý tất cả hình ảnh ở một chỗ. Giúp bạn dễ tái sử dụng hình ảnh trên nhiều trang và giữ tính nhất quán.
Quay lại cải thiện theo thời gian. Xuất bản trang không phải kết thúc, mà là bắt đầu. Hãy thường xuyên cập nhật nội dung, thêm bài blog mới và tinh chỉnh trang khi doanh nghiệp phát triển.
Hostinger Website Builder xóa gần như mọi rào cản giữa bạn và một trang web chuyên nghiệp. AI đảm nhận phần lớn thiết kế và nội dung, trình chỉnh sửa giúp tùy chỉnh dễ dàng, và công cụ SEO cùng tích hợp tích hợp sẵn có nghĩa bạn có mọi thứ trong một chỗ.
Theo các bước trong hướng dẫn này, bạn hoàn toàn có thể có một trang web bóng bẩy, hoạt động đầy đủ chỉ trong chưa đến một giờ.
