Elementor的容器（Container）不僅簡化了網頁設計的過程，而且提供了強大的佈局自訂能力，讓創建專業級別的網站變得手到擒來。
我們使用Elementor製作頁面都是從容器開始的。新版的Elementor容器有兩種：Flexbox Container和Grid Container。如果你有一定的前端知識並且熟悉flex佈局的話，那麼你上手會更快。
即便沒有也無妨，因為背後的原理非常簡單，也不需要我們去學習對應的前端知識，只需要知道怎麼去應用就好了。
Elementor的容器介紹
容器是Elementor最近更新後新增的功能，它比原來的部分（Sections）提供更多的靈活性和控制能力。容器裡面可以包含其他容器（叫嵌套容器）或直接添加小工具：例如文字、標題、圖片、表單、滑桿、標籤頁、社群媒體圖示等，這些都是增強使用者體驗和互動性的重要部件。
使用容器，我們能夠在沒有前端技術人員的支援下，輕鬆控制每個元素的位置和大小，優化頁面的回應性和使用者體驗。
Elementor容器有兩種：Flexbox Container和Grid Container。我們來逐一介紹。
Flexbox Container（彈性盒子模型）
上面的就是Flexbox的這個容器的預設佈局，我們可以根據自己想要的效果來選擇。
Flexbox 非常適合於元素大小不定的情況，能夠提供更好的控制來分配額外的空間或縮放元素。非常適合用於小尺寸組件的佈局，如導覽列、清單、表單欄位等。
我們可以使用Flexbox Container 做一行/一列的對齊與分佈。比如說：
如果想要實現這種佈局，那麼需要採用一個外層Flexbox Container（紅框），將Direction設為Column，把標題區（綠框）和資料區（藍框）作為兩個子容器自上而下排列。
Grid Container（網格模型）
Grid容器的預設佈局如上圖。 Grid容器可以創建複雜的佈局結構，如雜誌和報紙的佈局，以及其他需要精細控制行和列大小的介面。它支援在行和列上定義區域，可以精確地放置元素，同時支援對元素進行重疊。
適用於大型的網頁元件佈局，宮格/畫廊/案例集，需要多行多列嚴格對齊的佈局，例如：
在資料區域中，我們使用一個Grid Container（藍框）來處理這種需要多行排列的、網格對其的資料卡片，每個黃色框就是一個小工具。
使用Elementor的容器來搭建Intel官網模組
好了，我們介紹了容器的基本概念，已經學會1+1了，現在我們來學線性代數吧。
我們現在來建立一個頁面模組，然後我們會在建造這個頁面模組的過程中熟悉Elementor容器的各種設定和使用方法。
這是Intel官網首頁靠近底部的一部分頁面模組，我們將使用Elementor的容器來實現這部分效果。 （網址：https://www.intel.com/content/www/us/en/homepage.html）
我用一個新的主機來逐步帶你們實現這個效果，這個新的主機是在做Cloudways教程的時候搭建的。
這個主機中的網站中是沒有安裝Elementor Pro的，但也同樣能實現這樣的效果，這樣更能體現Elementor的功能強大。
Elementor Pro的功能更體現在頁面模板和主題建構器（Template、Theme Builder）、以及小部件的多樣化上，我們將在下一個章節Elementor Pro vs. Elementor中去詳解。
好了，現在我們新建一個頁面，點選「Edit with Elementor」進入到視覺化編輯頁面。
我們剛開始預設的容器只有這麼一點，這是因為我們的Page使用的是預設的佈局，我們得先將頁面佈局更改成“Full Width”
點擊上方頂部欄的「齒輪」圖示進入到Page Settings介面。
選擇Page Layout中，選擇Elementor Full Width。
然後Elementor會自動幫我們切換成Full Width佈局－頁面大小佔據全螢幕寬度的佈局。如下圖：
好，回到Intel的這個頁面，現在我們先分析一下Intel官網的這部分頁面的容器框架是怎麼樣的：
- 最外層需要有一層容器（用紅色框框起來）
- 然後裡面的內容分成上下兩部分，用兩個容器裝起來（用黃色框起來的）
- 上面這部分的內容需要兩個容器來裝載，所以我們規劃在黃色容器裡面放兩個藍色容器將這些內容放入其中；下面的這部分內容也是用兩個藍色容器裝載。
我們遇到其他的頁面也一樣，可以根據頁面的內容先將容器進行一個簡單的規劃分類，這個佈局規劃不一定需要十分精確。因為我們後面可以新增並拖曳這些容器進行容器佈局上的更改，十分簡單有效率。
我們記住這些容器框的顏色，Elementor中真實的容器是沒有顏色的，只是我為了我們方便講這個教程，給他們上了個色。
新紅色框的容器
我們先新建一個容器，對應紅色容器。因為紅色容器內的內容是上下排列的，所以我們選擇Flexbox容器的上下佈局結構。
把紅色容器製作出來後，我們可以點選紅色容器上方這6個點的圖示調出左邊的「容器設定」標籤。
「容器設定」這邊的「Item」選項可以設定容器內元素的排列方式。如果懂一點前端flex佈局會很容易理解，如果想深入了解Flex佈局方式的原理，可以看這篇文章。
但不懂也沒關係，一個個試就知道是怎麼樣的了。
而且我們平常用的就固定那幾個選項，我們下面會講到的。
然後我們點擊Elementor頂部欄的「層疊」圖標，調出右側的頁面結構佈局框。這個頁面結構佈局對於我們做這種複雜的頁面是相當必要的。
在紅色容器中嵌套兩個黃色容器
點選紅色容器中的+號，新建一個黃色容器。
此時已經新建好一個黃色容器（嵌套在紅色容器內），但是如果沒有右邊的頁面結構，我們肉眼能看到的只有一個容器。 （知道為什麼這個層級結構是必須調出來了的吧，後面容器多了更難頂。）
我們再新建一個黃色容器，這個時候就不能再點擊裡面頁面容器中的「+」號碼了，如果再透過這個方式添加容器，就會變成在黃色容器裡面添加一個新的嵌套容器（藍色容器）了。
我們想在想要的是第二個同層級的黃色容器。
透過層級結構選取黃色容器，右鍵，點選「Duplicate」複製相同的容器，或使用快速鍵Ctrl+D複製。
這樣我們就能夠獲得第二個同層級的黃色容器。
在兩個黃色容器嵌套藍色容器
跟在紅色容器裡面嵌套黃色容器一樣的操作，我們在兩個黃色容器中嵌套藍色容器。
容器嵌套完畢以後我們透過右側的層級結構給藍色容器寬度設定佈局方式和寬度的比例。
我們需要明確的是：
- 藍色容器的佈局方式是需要透過黃色容器來控制的
- 藍色容器寬度的比例是透過藍色容器本身來進行設定的
我們看到黃色容器是上下排列，所以剛開始我們創建的紅色容器是上下排列的，以此來控制黃色容器的佈局方式。
那藍色容器是左右排列，我們需要透過調整黃色容器來設定藍色容器的佈局方式。
透過層級結構選取黃色容器，先後調整兩個黃色容器內部元素（內部元素就是藍色容器）的排列方式，設定為「從左到右」排列。
得到以下佈局。
先後透過層級結構點選這4個藍色容器，調出這4個藍色容器的設定標籤。
然後根據Intel的頁面元素佔比來調整藍色容器的比例。
這裡的比例只是看頁面估算個大概，並不準確。
準確的比例需要有設計圖，或回到原頁按F12開啟開發者模式來查看。
我們給第一個黃色容器內的兩個藍色容器分別設定寬度為：35%、25%；
給第二個黃色容器內的兩個藍色容器分別設定寬度為：35%、65%；
這樣子的話，我們藍色寬度就設定完了。
可是佈局方式還沒達到我們的效果，該怎麼辦呢？我們可以透過調整黃色容器的元素排列方式來控制藍色容器的佈局方式。
透過右側層級結構選取第一個黃色容器。在左側黃色容器的設定中的“Justify Content”選取“Space Between”，即可得到下面的效果。
我們這邊不詳細解說這些Flex佈局設定（Directions、Justify Content、Align Items）的實作方式是怎麼樣的了，如果想深入了解Flex佈局，再次推薦這篇文章。
第二個黃色容器內的元素（藍色容器）排列方式跟我們想要實現的頁面樣式差異不大，先保留不動。
將內容填入藍色容器（小工具）
現在將小工具填滿藍色容器：
- 選中藍色容器。
- 點選頂部欄的+號，往容器新增小工具，
- 透過觀察右側層級結構，確保小部件是加在藍色容器裡面，而不是其他紅色、黃色容器裡。
為第一個藍色容器添加三個小部件：Text Editor、Heading、Text Editor，確保將小部件放置在第一個藍色容器內。
這幾個小部件是塊級元素，放進容器內預設從上往下排列。
為第二個藍色容器加入元素，我們分析原Intel官網頁面這模組的結構看一下。
誒，這不又是一個嵌套容器嗎，跟我們紅黃藍嵌套容器一樣的，現在又有了一個藍綠黑的嵌套容器。 （放心，裡面不會再有嵌套容器的了，微信截圖顏色都快用完了。）
那我們跟製作紅黃藍嵌套容器一樣，再按照上面的方法來製作這部分藍綠黑的嵌套容器。
製作完成後，Elementor頁面的效果如下：
好，第二個嵌套容器製作完成。
我們繼續為第二個藍色容器添加小工具：Image、Button、Text Editor
為第三個藍色容器增加兩個小工具：Image Box、Button。
分析原始頁面內容，將第四個藍色容器更改成Grid容器會更適合我們。
選取第四個容器，變更成Grid容器，然後設定行列數，設定為2行4列。
往第一個柵格中新增小工具Image Box。點選選取Image Box小工具，開啟小工具的編輯標籤。然後刪掉Description。
點選“Style”，編輯Image Box的Image Spacing（設定為0）、Title的大小和顏色（14px、#ffffff）。
點選“Advanced”，編輯Image Box的Background，設定為#262626，這個顏色代碼是透過開發者模式查看原始網頁找到的。
還是在Image Box的「Advanced」標籤中，我們現在編輯Layout設定。
Align Self設定為Stretch。
設定Padding為45px /15px /0px /15px。 （目測估算的，不準確的）
然後我們去阿里巴巴圖標庫裡面下載一個PNG格式的小圖示到本機，然後上傳到WordPress中，（SVG格式最好，但可能你的WordPress中上傳不了，需要額外設定。）
在Image Box的「Content」標籤中，設定Image和Title。
然後複製7個Image Box。
我們看到每個Image Box元素跟Grid容器都有一點間距，這是因為Elementor的容器預設有一定像素的Padding，在此處設定為0即可去掉。
我們把Grid容器的Padding設定為0以後，打開Grid容器的Layout標籤，設定每個Image Box小工具之間的空隙為6px。
調整後頁面效果如下：
然後我們往第一、二、三個藍色容器裡面填充小部件，並對小部件進行樣式的調整，這邊會略過部分內容，但是基本所有的設置方式在這邊我們上面都有講過的。
第三個藍色容器中的左對齊佈局方式沒講，可以在Image Box小部件的“Style”選項卡中的Alignment中設置成“Left”即可。
我們透過添加小部件和調整小部件的樣式實現如上圖的效果後，再來講解如何實現以下效果：
- Developer resources這個Heading如果想往上面一點移動該怎麼設定？右側第二個藍色容器底部的文字想往上移動該怎麼設定？
- Join按鈕的樣式怎麼設置，並且左邊的圖片如何設定成與Join按鈕等高？
- Explore按鈕的樣式怎麼設定？
- 把左側標籤卡收起來後，左邊Image Box會比右邊高一點，怎麼辦？
首先針對我們的第一個問題，點選Heading小工具的「Advanced」選項卡，然後進入到「Layout」設置，調整Margin屬性。調整的時候我們先點選右邊的「連結」圖示取消值連動，單獨設定Margin-Top為負值即可將這個小工具。我們可以透過鍵盤的↑↓鍵來調整數值，進行細微調整。
右邊的Official Resources的內容也是同樣的原理：
- 首先將兩個綠色容器的Padding設定為0
- 然後將小工具的Margin-Top設定為負值，其他方向的Margin值保持為0
現在我們來解決第二個問題。
- 點擊Image小工具，在“Content”標籤中設定你想放的圖片，然後在“Style”設定圖片的高度，我在這裡設定“74px”
- 點選Button小工具，在「Style」標籤中設定Border Radius為0px；Text Color設定為#0054AE；Background Type選擇Classic，Background Color設定為#f7f7f7；Border選擇Solid，Border Width設定為1px，Border Color.1555；BAEdPadpPadding Width為1px，Border Color4555；
現在第一個黃色容器裡面的元素還有個問題，那就是垂直方向的對齊方式跟原頁面不大一樣，那我們就可以調整黃色容器內元素（也就是兩個藍色容器）的排列方式來做調整。
選取第一個黃色容器，選擇「Layout」選項卡，Align Items選擇Center屬性。好，現在上面這部分就有點像模像樣了。
第三個問題：Explore按鈕的樣式怎麼設定？這個跟我們設定Join的按鈕是一樣的。不過多贅述。
第四個問題：把左側標籤卡收起來後，左邊Image Box會比右邊高一點，怎麼辦？
我們把選項卡隱藏起來後，可以看到左側的大Image Box跟右側的8個小Image Box區域的高度不一樣。我們為Grid容器設定一個紅色背景就可以看的更清楚。
這是因為：我們之前在Grid佈局中設定了Gaps屬性，在Grid容器的底部會有6個像素的無用邊距。
我們給Gird容器的底部設定一個負值的Margin即可抵銷這部分無用邊距。
雖然我們在打開左側選項卡的時候看到高度是不對齊的，但是當我們把選項卡隱藏起來後就OK了，這就是到時候展示在前端的真實效果。
我們把Grid容器的紅色背景去掉，然後再根據原頁面進行一下邊距的調整，使其還原度更高。
這裡要說明一下，使用Image Box只是方便演示，Image Box邊距的可控性不如放兩個小部件：Image + Text Editor的可控性高。
可以自行嘗試下。
如果我們想要對單一Image Box進行細緻化的調整，可以給這個小部件單獨添加CSS樣式，但是需要你懂CSS知識並且需要Elementor Pro版本。
建立漸層色塊容器
我們在紅色容器裡面再新建一個包含兩個藍色容器的黃色容器，我們下面稱它為漸層色塊容器。 （注意，一定是要在紅色容器內新建一個跟其他兩個同等級的黃色容器。）
打開黃色容器的「Layout」設置，設定一個最小高度Min-Height，我在這裡設定為700px。
然後給兩個藍色容器的寬度設定一個固定的比例，像這樣。
然後給第二個藍色容器設置一個自上而下的漸變色，這個是屬於容器的高級設置，除了容器，我們對應的小部件也有進階設置，這些進階設定能夠讓我們實現諸如漸變、動畫等效果。
選取第三個黃色容器，開啟「Advanced」標籤。
Position定位方式設定為Absolute。
選擇右上對齊，兩個方向的Offset設定為0px。
Z-index設定為1。
打開第一個黃色容器和第二個黃色容器的「Advanced」選項卡，Z-index都設定為2。即可達到以下效果：
漸層色塊這裡和原網頁仍有出入：第一個跟第二個黃色容器的左右兩邊跟第三個漸層色塊容器有一定部分的內邊距。
我們選取第一第二個黃色容器，左右兩邊分別加入的71個像素的Padding。
為漸層色塊的容器加上一個顏色，方便我們看效果：
這樣就算是做完了PC端樣式的設計，現在我們應該能初步體會到Elementor的強大了。
Elementor響應式設定
M端和平板電腦端的效果我們還沒去完善，我們點擊Elementor頂部欄的M端和Tablet端的圖示可以查看在對應裝置下的展示效果。
平板電腦端：
M端：
我們會發現在其他裝置下顯示的效果並不如預期，但不用擔心，Elementor為我們提供了設定響應式佈局的工具。本章節內容過長，我們在後面的響應式版面內容中再詳細見如何做Mobile端和平板電腦（Tablet）端的自適應。