Zi 字媒體

使用 Elementor 就可以設計出精美的 Header 喔! 而且簡單又方便，真的是連我阿罵都會操作。 如果你也想要打造自己版本的頁首的話，試試 Elementor 吧，只需要 3分鐘而且十分的容易。 我們要打造的是有 LOGO 、選單加上社群連結的頁首，就像是下面這個樣子。 很清爽的感覺! 但基本的回到首頁及分類功能都有，除外再加上「社群」或是你想要客制的任何外部連結。 看下去… 更新於 04/06/2021 在閱讀前，請容許大叔聲明幾件事情：這些事情對您可能蠻重要的： 內容中連結可能有參加聯盟計畫，這並不影響您的購買權利。 聯盟計畫和廣告都會做為網站經營基金。 部份收入將捐給流浪動物基金會。(公益捐款明細) 喜歡我的文章的話，請幫我這樣做，點擊下面的拍手圖示。 【Elementor】3分鐘打造自己的 Header | WordPress網頁編輯器 1️⃣ 從新增 Header 開始 請由 WordPress 後台的 「主題建構器」進入，點一下畫面上的 「Try It Now」 就會看到 Elementor 的主題建構器頁面，請點擊「頂部」然後 Add New ，新生成一個頁首，就可以開始設計我們的 Header 。 2️⃣ 決定功能 在文章中，我們一共會用到 4個 Elementor 部件功能： 網站標誌 導航選單 圖示 Inner Section   首先先點擊一下「中間的紅色+」，右邊則是 Header Template ，如果你想要從模版開始學習如何設計頁首的話，也是不錯的選擇。 但是本文先做基本的功能介紹，看下去。 選擇中間有 3個洞的架構。「為什麼是要三個?」「剛好這次就用三個啊!」 如果成功的話，應該看到像是下圖這個樣子，在上面藍藍的地方，點擊「右鍵」並選擇「編輯段」。 請在版面配置上做 2項設定。 內容寬度 → 全寬 拉伸段 → 打開 內容寬度是用來決定畫面的寬度，例如你設定為 1200px 那使用者的電腦上就會以這個寬度來呈現。 但是全寬的話，不管使用者的畫面大小為何，都以 100% 來呈現，也就是說大叔希望任何裝置，都可以看起來都差不多。 拉伸段則是讓背景也呈現一種全寬的狀況。 再來將功能拖曳到「功能欄」上。先將 Inner Section 功能放上去，再放上圖示功能。 在 Elementor 內建 Icon Library 裡面，有不少的圖示免費使用，但也只有基本圖案；推薦有需要的朋友也可以參考： Flaticon – 免費圖示 Canva – 自制圖示 然後在連結的地方，放上社群的網址，這樣就完成了。 基本上功能篇就完成了，應該會長的像是下面這個樣子喔~ 【寫作標題】1個模版 3分鐘寫出令人想點擊的標題 【2021字媒體】我的富盈數據收入 如何提高收益 【2021聯盟行銷】如何提高寫作的聯盟行銷收益 3️⃣ 外觀微調 一般外觀調整會需要修化 CSS 程式碼，但 Elementor 可以讓我們不用麻煩；這次做三個方面的調整，分別為： 欄寬度調整 垂直置中 背景顏色 欄寬度調整 – 在圖案左上角點擊右鍵的「欄編輯」，然後可以看到版面配置的畫面；設計為 20-60-20 的寬度調整。 垂直置中 – 點擊上面紅框中間，右鍵選擇「編輯段」，設定一下 Vertical Align 為「中央」。 背景顏色 – 選取中間的「樣式」，點擊背景裡面的刷子，就可以出現顏色選擇器 ( 背景 )。 大叔使用為【#F3EAE3】這個顏色，此為我的主體設計顏色之一。 微調設計可以依你的需求及喜好來進行，多試試不過的效果和顏色，都會是有趣的過程喔! 4️⃣ 準備發佈 如果你都準備好的話，就可以發佈你的設計，發佈完成了整個網站就會套用這個設計。 點擊左下角的「發佈」 系統會問「你想在哪裡顯示你的範本?」 我們點擊中間的「新增條件」 包含整個網站，如果你有特殊需要的話，也可以在「單頁」或某些條件使用。 儲存和關閉 網站最後的樣子 【2021折扣碼&最新優惠】AirTamer 【2021折扣碼&最新優惠】Olivia 無鋼圈內衣 【2021折扣碼&最新優惠】生活采家 【2021折扣碼&最新優惠】Prayer Garden 祈願飾品 【2021折扣碼&最新優惠】奧丁丁市集 OwlTing Market 【2021折扣碼&最新優惠】Vacanza Accessory 總結一下 -Elementor 教學 3分鐘打造自己的 Header 頁首是一個最常被點擊的位置，所以可以放上「熱門內容」或是想要提高「轉換率」商品。   免費試用