網頁設計的視覺吸引力對使用者體驗和品牌形象至關重要。 Banner作為網頁的核心視覺元素，既是吸引訪客目光的第一道風景線，也是傳達關鍵訊息和引導使用者行動的有效方式。
Elementor作為功能強大的WordPress視覺化頁面建立器，提供了直覺的拖放式編輯和豐富的設計工具，使得創建專業且美觀的Banner 變得非常簡單和高效。
在本Elementor教學課程中，我們將詳細介紹如何使用Elementor製作網頁Banner，並提升我們網站的視覺效果。
在開始教學之前，你需要的東西
- 安裝Elementor插件：確保你的WordPress網站已安裝並激活Elementor外掛免費版。
- 準備素材：準備好你要在Banner中使用的圖片、文字和按鈕連結等內容。
步驟一：建立或編輯頁面
- 登入WordPress後台。
- 在左側選單列中，找到想要新增Banner的頁面或新頁面，點選其下的「Edit with Elementor」。
步驟二：新增Flexbox容器
在Elementor編輯器中，點選頁面中間的「+」號，新增一個新的Flexbox容器，選擇第一個由上而下佈局方式的容器。
點選容器，調出容器的選項卡。如我們你的Banner想要實現全螢幕效果，在「Layout」標籤中將Content Width設定成Full Width，Width設定為100%。以便Banner佔據頁面的全寬。
然後設定Min Height，給容器設定一個最小高度。我們這邊設定450 px。高度我們可以依照自己的需求自行變更。
步驟三：為Flexbox容器新增背景
- 切換到Style選項卡
- 在“Background”部分，選擇“Classic”。
- 點選“Choose Image”，上傳或從媒體庫中選擇Banner背景圖片。
- Image Resolution設定為「Full」。
- 將“Position”設定為“Center Center”。或者你可以嘗試其他的，以達到想要的效果。
- Attachment的選擇是根據自己的需求來定，Fixed跟Scroll的效果不一樣。設定為Scroll（是預設的選項）背景圖像會隨著內容一起滾動。當使用者捲動頁面時，背景圖像也會上下移動，保持與元素內容同步；設定為Fixed的話就是背景圖像固定在視口，不隨內容滾動而移動。無論使用者如何捲動頁面，背景圖像始終保持在固定的位置。當需要突出背景圖像或創建動態視覺效果可以使用。
- Repeat 選擇「No-repeat」。
- Display Size選擇“Cover”，以確保圖片覆蓋整個Banner區域。
步驟四：新增背景疊加
我們也成這個背景疊加為遮罩層。我們可以為這個遮罩層設定一種顏色，一般是使用黑色或白色，調整不透明度以突顯前景內容。
前景內容就是我們想要放在背景之前的內容，像是文字、按鈕、表單等等，任何你想加入的元素。
展開背景疊加，點選Background Overlay；選擇疊加類型、選擇「經典」或「漸層」；設定顏色、通常黑色或白色，調整透明度。
我這邊加了個55%透明度的黑色遮罩層。
步驟五：為Banner新增內容
在Banner部分內，點選「+」號，新增一個容器，方便管理多個元素。
我們可以根據實際需求來按需添加。關於如何使用容器來實現想要的佈局，可以看我的這篇教程，是非常詳盡了的。
接著我們為Banner區域增加四個容器，每個容器加入對應的內容如：文字、兩個按鈕、評價、5個小容器。初始效果如下：
步驟六：更改小部件的樣式
我們給小工具更改樣式，只需要點擊對應的小部件，然後左側就會跳出該小部件的樣式設定標籤。
但選項卡裡面一般分為「Content」、「Style」、「Advanced」三個選項。
每個小部件的「Content」設定都不一樣，這個由小部件所需的必要內容來決定。
對於“Style”選項卡，我們可以設定：
- 文字顏色，變更小工具中字體的顏色；背景顏色，為小工具新增或變更背景顏色。
- 字體類型，選擇不同的字體；字體大小、粗細、行高等。
- 邊框類型，實線、虛線、無邊框等；邊框寬度、顏色和圓角。
- 圖片背景、漸層背景等進階背景選項。
對於小工具的“Advanced”選項卡，我們可以設定：
- 邊距和填充，更精確地控制小部件的空間。
- 定位，設定小部件的定位方式，如相對、絕對等。
- 響應式設置，設置是否在不同裝置（桌面、平板、手機）下展示，Elementor Pro會有更多的設備選項。
- 自訂CSS（僅適用於Elementor Pro 使用者），新增自訂CSS 程式碼以實現更進階的樣式。
- 陰影、混合模式、過渡動畫等。
推薦閱讀：
我們先把小工具加入Banner裡面去，然後透過更改每個小工具的樣式，調整容器和佈局，即可達到一個可觀的效果：
這是使用Elementor免費版搓出來的，以後可能會出個影片來詳解。
建議先看這篇Elementor容器和佈局的教學，學會之後想製作出這樣的效果應該就會變得容易。
我手上沒有該設計稿，所以有些小部件的位置、樣式完全是憑感覺來的，並沒有那麼地還原。
如果你們有自己設計稿，那麼使用Elementor免費版就能夠實現你們自己設計出來的效果，並且能夠高度還原。
這裡給幾個提示：
- 如果想要讓容器向上移動，Margin設定為負值即可。
- 整個Banner兩邊中部的5個圖示跟中間的兩個按鈕是在同一個容器中的，透過在“Advanced”中設定“Position”為“Absolute”，然後調整偏移量即可實現。
- 對於底部5個模組，如果你跟我一樣使用的是Grid容器，那麼在Layout選項中，Align Items這個屬性要設定為「End」。而每個模組要單獨有一個容器，才能達到這種不同高度的效果。
步驟七：設定在不同端的表現效果
我們點擊Elementor頂部欄的裝置部分可以選擇預覽在不同裝置下的頁面展示情況：
我們可以看到在平板端和M端的效果跟PC的不一樣，而且有發生頁面元素錯亂的情況，這是正常的，因為我們還沒有正確設定在平板端和M端的表現樣式。
我們此時開啟左側的頁面設定選項卡，針對不同裝置調整文字大小、間距等，讓Banner在各種裝置上都能完美呈現設計稿（平板端或M端的設計稿）的效果。
如果我們想要在平板端或M端隱藏小部件，那麼需要我們：
- 選取你想隱藏的小部件/容器
- 開啟“Advanced”選項卡，點擊“Responsive”
- 根據設備類型來隱藏特定內容
為了方便示範該功能（也因沒有設計稿參考），我乾脆直接把複雜的元素在其他端隱藏起來了，把左側選項卡收起來即可看到預覽效果：
步驟八：新增動畫效果（可選，需專業版）
如果你想要加入更複雜的效果，例如你想讓圖示動起來，那麼你可以為圖示小工具添加動畫效果：
- 點選您想要新增動畫的元素，例如標題、按鈕、或圖示。
- 在左側面板，點選「Advanced」標籤。
- 展開“Motion Effects”，在“Entrance Animation”下拉式選單中選擇一種動畫效果。
- 根據需要設定動畫延遲和持續時間。
這個可以自己去嘗試下，感受這些動畫效果。
但是這個功能需要Elementor Pro版本。
步驟九：發布Banner
如果Banner達到自己滿意的效果了，那麼我們點擊右上角的Publish即可發布該Banner，我們打開該頁面就能夠看到我們設計出來的Banner效果。