首頁架構導覽

本篇文章將帶領大家進行網站「首頁」的導覽,建立對網站「首頁」編輯的基本概念。
備註說明:每個網站的設計模組、功能與目標族群皆不同,因此本文將介紹大部分網站通用的架構及基本項目。

一、認識首頁架構

網站首頁由多個模組組成,基本的模組架構搭配大多為:
LOGO、主選單、副選單、Banner 模組、3~6 個首頁模組、頁尾模組。

模組架構示意圖

實際呈現的方式大多如下圖:

實際呈現示意圖

二、首頁編輯

🏠首頁內容編輯
🚀 操作路徑: 首頁 編輯內容 進入「首頁模組」進行編輯
編輯介面路徑

點擊後會跳出一個與前台一致的編輯視窗,方便您對應區塊編輯,點擊「鉛筆圖示」即可執行編輯。

首頁編輯對照圖
💡 編輯小技巧:
「首頁 > 編輯內容」主要是編輯首頁模組的內容。原則上,只要出現在首頁的項目,都是從這裡編輯。
若找不到該項目,可能是設計師透過特殊語法製作,歡迎詢問營輔顧問。

三、網站選單模組(主選單、子選單)

📋網站主選單

主選單是使用者在網站中最主要的導覽工具,建議將主選單控制在合理數量(約5~7個)。
若項目過多,會造成重要頁面容易被淹沒、使用者操作不直覺、版面雜亂等問題。

💡 簡單原則:精簡且有邏輯的主選單,可以幫助使用者更快找到重點,提升轉換成效。
 

🚀 操作路徑: 內頁  點選欲修改的主選單名稱旁的齒輪圖示  版面設定

1.修改主選單名稱

修改選單名稱

2.開啟/隱藏主選單設定

開關設定
Q:管理者可以自行「新增」前台的主選單嗎?
A:不行。 新增選單涉及版型結構,請洽詢您專屬的營運輔導顧問,由工程師協助開啟。
 
📄網站子選單

若原本的網站主選單沒有下拉式選單(如下圖),欲增加子選單(下拉式選單),米洛提供「自訂子選單」、「開立新選單」或「付費調整樣式」三種方案。

前台無下拉畫面



方案 A:自訂子選單

💡 適用場景:原本樣式無下拉選單,或需連結至不同架構頁面時。
🚀 操作路徑: 首頁 編輯內容 點選「選單」區塊
點選選單區塊
 
🚀 操作路徑: 選擇欲修改的主選單 子選單內容選擇「自訂」 新增  輸入子選單名稱及連結 儲存
自訂子選單設定
前台顯示如下:前台有下拉畫面



方案 B:開立新選單

請洽詢您專屬的營運輔導顧問,由工程師協助開立一個新樣式的選單,選單開立完成後需自行搬移資料。


方案 C:付費調整

由設計師直接調整原選單樣式,此方案需設計師工時費用,如欲評估請洽詢您專屬的營運輔導顧問。


 

🔗網站副選單

通常位於右上方,包含會員、購物車、搜尋等圖示項目。

副選單圖示
 
🎨LOGO 更換流程
🚀 操作路徑: 全站設定 基本設定 基本資訊

從電腦中選取您新的 LOGO 圖檔重新上傳。

LOGO 上傳畫面
💡 LOGO圖片更換注意事項:
Q:更換網站 Logo 時,要如何知道正確的圖片尺寸呢?

A:每個網站的LOGO大小、位置皆不同,因此您所製作的LOGO新圖,務必與設計師幫您首次製作的預設尺寸一致,以確保版面美觀。
尺寸說明

五、更換網站 Banner 圖片

🖼️更換 Banner 圖片
🚀 操作路徑: 首頁 編輯內容 Banner 區塊編輯(鉛筆)
編輯 Banner

點選「新圖上傳」並從電腦中選取新的 Banner 圖檔重新上傳。

上傳 Banner
💡 Banner圖片更換注意事項:
Q:更換網站 Banner 時,要如何知道正確的圖片尺寸呢?

A:您所製作的LOGO新圖,務必與設計師幫您首次製作的預設尺寸一致,並依照「不同裝置版本」上傳相對應的預設尺寸,以確保Banner在不同裝置上都能完美呈現。
裝置版本示意

六、首頁彈出視窗

🔔彈窗設定方式
首頁彈出視窗通常用來即時傳達重要訊息,讓瀏覽者一進網站就能看到重點內容,像是活動、公告或優惠。
 
🚀 操作路徑: 首頁 首頁彈出

方法 A:放置純文字

  1. 進入「首頁彈出」。
  2. 在編輯器內輸入文字並點擊存檔。
純文字彈窗

方法 B:插入圖片 (推薦)

進入「首頁彈出」,點擊編輯器上方「圖片」圖示,上傳並選擇檔案。

圖片彈窗設定
關鍵步驟:影像屬性設定

插入圖片後,請在圖片上點擊滑鼠「右鍵」  >  選擇「影像屬性」。
務必將
寬度設為 100%,並將高度留空白,這能確保您的公告在手機版上自動縮放而不變形。

屬性設定1 屬性設定2