過去建立網站就像是一個必須聘人來做的工程，但現在則不再如此。
我一直在使用 Hostinger Website Builder，在本指南中，我會從你登入的那一刻，一步一步帶你完成整個流程，直到網站上線為止。
讓我們開始吧。
什麼是 Hostinger Website Builder？
Hostinger Website Builder 是一款內建於你的 Hostinger 帳戶中的 AI 驅動拖放式網站建置器。
你不需要安裝任何東西，也不需要會寫程式，亦不需要設計背景。你描述你想要的，AI 會為你建置完整網站，然後你可以自訂以符合你的品牌。
這是從零到上線、打造專業網站的最快方式之一。
步驟 1：登入並進入建置器
當你登入 Hostinger 帳戶時，會進入 hPanel。這是 Hostinger 的主控制台，你可以在此管理所有內容，包括網站、網域、電子郵件及帳單。
在左側邊欄，你會看到一系列導航選項。點選 Websites，下面會出現一個小下拉選單，提供「Websites list」和「Migrations」兩個選項。點選 Websites list。
此時你會看到「Websites list」頁面，顯示所有連接到你帳戶的網站。
在頁面右上角，你會看到一個紫色的 + Add website 按鈕。點擊它。
會出現一個小下拉選單，包含四個選項：
- Hostinger Horizons
- WordPress
- Hostinger Website Builder
- 自訂 PHP/HTML 網站
你要點選 Hostinger Website Builder，它被描述為「AI 驅動的拖放式網站建置器」。
步驟 2：向 AI 描述你的網站
選擇 Hostinger Website Builder 後，你會進入一個設置畫面，標題為 “Let AI create your online presence.”
在這裡你告訴 AI 你想要建置什麼類型的網站。
你會看到一個大型文字框，提示文字為 “Describe your website or business.”。這是你的提示框，你在此輸入的內容會決定 AI 為你生成的一切。細節越多，結果越符合預期。
在文字框下方，你還會看到一排快速啟動建議標籤，包括「Create a business website」、「Create an online store」、「Design a portfolio」、「Launch an appointments website」、「Start a blog」、「Launch a restaurant website」以及「Create a one pager website」。
點擊任一標籤即可填入預設提示，然後你可以編輯並擴充它。
在畫面最底部，你會看到另外兩個連結： Pre-made templates 和 Link in bio website。
如果你想跳過 AI 而瀏覽現有設計，點選 Pre-made templates。
如果你只需要一個簡單的單頁網站用於社交媒體檔案，Link in bio 選項值得一試。
不過對於大多數要建立正式網站的人來說，AI 提示框是正確的起點。
如何撰寫良好的 AI 提示
這是整個流程中最重要的部分。把 AI 提示當作你給設計師的簡報。你表達得越清楚，結果就越接近你真正想要的。
以下是我在本指南中使用的提示。我當時正在為一家創意代理機構製作網站：
“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.”
注意這個提示有多具體。它涵蓋了行業、語調、佈局風格、所需頁面、首頁結構和內容目標。如此詳細的提示為 AI 提供了堅實的基礎。
當你輸入完描述後，會看到文字框右上角出現 “Improve description” 按鈕。
我建議在提交前先點擊它。AI 會擴充並優化你的提示，通常能補足你未想到的細節。
準備就緒後，點擊文字框右下角的紫色 箭頭按鈕（傳送圖示）提交提示並開始生成。
步驟 3：等待 AI 建置你的網站
提交提示後，Hostinger 的 AI 會立即開始工作。你會看到深紫色背景的全螢幕載入動畫，訊息為 “Looking for matching pictures…”，並顯示進度條。
此階段通常需要 30 到 60 秒。期間，AI 做了很多工作：生成頁面佈局、撰寫網站文案、從素材庫挑選相符圖片、建立導覽，並依提示結構化整個網站。
載入時請勿關閉分頁，只要耐心等待即可。
步驟 4：檢查 AI 建置的結果
AI 完成後，系統會顯示新網站的預覽。這是結果畫面，看到生成內容時會讓人感到十分興奮。
畫面左側顯示生成網站的即時預覽。右側顯示名為 “Your idea summary,” 的面板，裡面有你提交提示的摘要，以及一個 “Edit idea” 按鈕，若要使用不同或更新過的提示重新生成，可點擊它返回。
以我為例，AI 將網站命名為 “BoldCraft Studio”，並生成一個首頁，標題為 “Crafting Bold Brands That Shine”，有支持描述，以及兩個行動呼籲按鈕：”Start Now” 和 “Get Quote”。
導覽列包含我所要求的所有六個頁面：Home、About、Services、Portfolio、Blog 和 Contact。
在預覽畫面的左上角，你還會看到兩個按鈕： Previous versions，可讓你瀏覽 AI 考慮過的其他設計，以及 Rate site，可以對結果提供回饋。
在預覽的右上角，你會看到桌面與行動裝置的切換圖示。用它們在繼續前檢查網站在手機上的顯示，這是個早期就該養成的好習慣。
如果對整體方向感到滿意，點擊右側面板中的紫色 Continue 按鈕，即可進入完整編輯器，開始真正的客製化。
若對結果不滿意，點選 Edit idea，修改提示後重新生成。你可以視需要反覆操作。
步驟 5：熟悉編輯器界面
編輯器是你大部分時間會使用的地方。首次進入時，先花點時間了解版面，再開始操作。
編輯器主要分為兩個區域：
- 中央的大區域是網站畫布，可即時查看並互動。
- 左側窄版的垂直側邊欄是控制面板，包含你所需的所有功能。
以下是側邊欄中各項功能的說明：
- Setup 可讓你存取網站的基本設定、已連接的網域和方案資訊。
- Elements 開啟拖放面板，可將新的內容區塊加入任何頁面。我稍後會詳細介紹。
- Pages 顯示所有頁面。你可以切換頁面、添加頁面、重新命名、調整順序或刪除不需要的頁面。
- Styles 控制網站的全域設計。在此設定字型、調色盤和按鈕樣式。此處的任何變更都會全站生效，因此比單獨修改各區塊更適合做整體設計決策。
- AI tools 提供 Hostinger 的寫作與內容 AI，可用於重寫文案、產生新文字等。
- Blog 如果網站有部落格，則用於創建和管理文章。
- Store 如果販售產品，則在此建立線上商店。請注意，電子商務功能需要更高級的方案。
- SEO 打開內建的 SEO 管理器，可為每個頁面設定 meta 標題、描述及其他 SEO 詳情。
- More 會展開第二個選單，包含其他工具，如 Appointments、General settings、Integrations、Form submissions、Analytics、Media library、多語言支援、Manage backups、Export content to WordPress、Help and Resources。
在編輯器頂部，你還會看到主工具列。由左至右依序為：桌面/行動預覽切換、復原與重做按鈕、一個 Connect domain 按鈕、一個 Preview 按鈕，以及綠色的 Go live 按鈕。
步驟 6：編輯你的內容
現在開始真正讓網站成為你的樣子。在網站畫布任意位置點擊即可開始編輯。
當你將滑鼠停留在頁面任一區塊時，該區塊左上方會出現藍色標籤，顯示該元素的類型，例如「Section」或「Header」。同時會在區塊上方出現一個小浮動工具列，包含編輯選項。
該區塊工具列由左至右帶給你以下控制項： Edit section 打開區塊設定面板，你可以更換背景圖片或顏色、調整內邊距，並修改佈局選項。
接著是 Generate image，可打開 AI 圖片生成器。
之後依序為複製圖示、隱藏/顯示切換、刪除圖示、向上移動和向下移動箭頭用於重新排序區塊，最後是三點 More 選單。
要編輯頁面上的文字，只需直接點擊並開始輸入。文字元素會進入可編輯狀態，並顯示格式化控制，你可以直接調整字型大小、字重、對齊方式和顏色。
要更換圖片，點擊圖片即可。你會看到選項，可從本機檔案替換、瀏覽 Hostinger 的素材庫，或使用 AI 生成新圖片。
請先完成首頁，然後使用 Pages 面板切換至其他頁面，一一進行編輯。
步驟 7：使用 AI 圖片生成器
有一個功能值得停下來仔細了解：AI image generator，如果你沒有專業照片，它非常實用。
要使用它，在頁面任意區塊懸停並點擊浮動工具列中的 Generate image，右側會滑出一個面板。
在面板內，你會看到一個「Image description」文字框。輸入你想生成圖片的描述。
描述越具體、越具畫面感，輸出結果越好。面板上會顯示最多 3,000 字的限制，並有即時品質指標，告訴你描述是否足夠優質。
例如，當我輸入「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」時，面板顯示 “Great description!”，且品質指標條全滿。
滿意描述後，點擊 Create images 按鈕。AI 會為你生成多張圖片供選擇。
需要注意的是：AI 圖片生成器需 Business 方案或以上等級。如果你是 Premium 方案，會在面板底部看到升級提示。
步驟 8：向任何頁面新增元素
如果要新增頁面上尚未有的內容區塊，點擊左側邊欄的 Elements。這會打開「Add elements」面板。
你會看到所有可用元素的網格，包括 Text、Button、Affiliate link、Add to bag、Image、Gallery、Video、Shape、Card、Map、Instagram feed 和 Contact form。要將其中任何一項新增到頁面，只需從面板中拖曳至畫布上你想放置的位置。
放置後，點擊該元素即可存取其個別設定和樣式選項。
此拖放方式讓你不會被 AI 生成的佈局限制，可以隨意新增、移除和重新排列元素。
步驟 9：管理你的頁面
點擊左側邊欄的 Pages，即可在單一頁面查看所有頁面列表。點選任一頁面名稱即可切換至該頁編輯。
要新增頁面，可使用加號按鈕。要重新排序導覽中的頁面，可在列表中上下拖曳它們。
如果 AI 生成了你不需要的頁面，可在此刪除。同理，如果需要 AI 未包含的頁面，例如 Testimonials 頁面或 Pricing 頁面，也可以在此新增，然後使用 Elements 面板進行內容建立。
步驟 10：設定你的 SEO
在發佈之前，你需要設定 SEO。這是許多人跳過的步驟，但卻是錯誤的做法。
花 15 分鐘正確填寫 SEO 設定，能真正影響人們是否能透過 Google 找到你的网站。
點擊左側邊欄的 SEO，打開標題為 “Let’s be found on Google (SEO).” 的 SEO 面板。
該面板分為兩個區域。左側顯示所有頁面列表。右側則是 Website overview，展示你的商業名稱和網站語言。如有誤，點擊 Edit 進行更新。
在網站資訊下方，你會看到一個名為 “Some pages require your attention.” 的區塊。
需要調整的頁面都會以橙色警告圖示標示。點擊左側面板的任一頁面，即可開啟該頁的 SEO 設定，在此撰寫該頁的 meta 標題和 meta 描述。
把列表上的每個頁面都處理一遍。好的 meta 標題要清晰、包含主要關鍵詞，且不超過 60 個字元。好的 meta 描述要簡要說明頁面內容，且不超過 160 個字元。這些都會顯示在 Google 搜尋結果中，因此值得花幾分鐘為每頁設定。
步驟 11：連接你的網域
如果你還沒為網站連接自訂網域，現在正是時候。在編輯器頂部工具列點擊 Connect domain 按鈕。
你有兩種選擇。如果你已擁有網域，可以透過更新 DNS 設定指向 Hostinger 伺服器來連接。若你尚未擁有網域，也可以在同一畫面上直接從 Hostinger 購買。
在你連接網域之前，網站會透過 Hostinger 的臨時子網域（如 yoursite.builder-preview.com）存取。用於測試沒問題，但在公開分享前最好先設定正式網域。
步驟 12：預覽網站並上線
你已接近完成。在發佈前，先點擊右上工具列的 Preview 按鈕。
這會打開全螢幕預覽，顯示訪客看到的網站樣貌。在預覽畫面頂部使用桌面和行動圖示切換，確認兩者顯示是否正常。
特別注意首頁主視覺區在行動裝置上的顯示、導覽列的摺疊效果，以及是否有任何圖片出現不預期的裁切。
當你對所有細節都滿意後，回到編輯器並點擊右上角的綠色 Go live 按鈕。你的網站現在已發布並上線。
步驟 13：探索整合功能
網站上線後，值得探索可用的整合功能。前往左側邊欄的 More > Integrations。
Integrations 面板讓你將網站連接到外部工具和服務。目前可用的選項包括：用於生成運送標籤和管理訂單履行的 Shippo、用於創建和銷售按需列印客製化產品的 Printful、用於郵件行銷並向訂閱者發送電子報的 Hostinger Reach、用於投放付費廣告的 Google Ads，以及如果你想添加自訂 HTML、CSS 或 JavaScript 以擴展網站功能，可使用 Custom code。
要啟用任何整合，點擊旁邊的 Get started，按照連接步驟操作，然後重新發佈網站即可更新。
充分運用 Hostinger Website Builder 的技巧
對 AI 提示要慷慨給予細節。 只用兩句話的提示只能得到通用化結果。涵蓋行業、受眾、設計偏好、頁面結構和語調的詳細、具體提示，能更貼近你真正的需求。花五分鐘撰寫完善簡報，可為你節省數小時的後續編輯時間。
每次都使用 Improve description 按鈕。 雖然容易被忽略，但它確實有用。AI 常能抓住你未明確說明的部分，並將其轉化為具體的設計和內容指示。
仔細編輯你的文案。 AI 生成的文案雖然夠用作佔位，但它不會像你一樣了解你的業務。逐頁檢查並重寫文本，以反映你的實際服務、真實價值和真實語調。
在發布前檢查行動版視圖。 Hostinger 會自動將網站設為響應式，但在小螢幕上有時仍需微調圖片和間距。在上線前務必在行動裝置上預覽。
為每個頁面填寫 SEO。 不只首頁。網站上的每個頁面都應有合適的 meta 標題和描述。每頁只需花幾分鐘，卻是提升搜尋結果能見度最直接的方式之一。
使用 Media library 以保持組織性。 在 More > Media library，可在一處上傳並管理所有圖片。這讓你更容易在多個頁面重複使用圖片，保持網站一致性。
持續回來並持續優化。 發佈網站並不是結束，而是開始。定期回來更新內容、新增部落格文章，並隨著業務發展精進頁面。
Hostinger Website Builder 幾乎移除了你與專業網站之間的所有障礙。AI 會處理大部分設計和文案工作，編輯器讓自訂變得直觀，而內建的 SEO 與整合工具則讓你一站式取得所有所需功能。
依照本指南步驟操作，你實際上能在一小時內擁有一個上線且成熟的網站。
