Elementor 實戰教學EP2: 讓 WordPress 網站設計變得簡單而有趣

上回我們說明了Elementor 如何新增頁面,以及功能元素和底部欄位介紹。
今天我們要來分享如何開始使用Elementor做網頁設計。

如何用 Elementor 設計頁面?

使用Elementor設計頁面的核心概念

  1. 組成元素:

    • Section 區塊: 這是Elementor設計的基本框架,每個頁面通常由多個Section區塊組成,它是Column欄和Widget元素的容器。
    • Column 欄: 每個Section區塊可以包含多個Column欄,它是Widget元素的直接容器,可以有多個,以實現不同的布局設計。
    • Widget 元素: 每個Column欄可以包含多個Widget元素,它們是具體的設計元素,如文字、圖片、按鈕等,用於填充和裝飾頁面。
  2. 設計邏輯:

    • 由上至下,首先定義Section區塊,然後在每個Section區塊中創建Column欄,最後在每個Column欄中添加Widget元素。
    • 透過這三層的結構,可以組織和設計出完整且具有結構性的頁面。
  3. 多層次結構:

    • 這種多層次的結構允許設計師有機會創建出豐富多元的頁面設計,每層結構都有其特定的設計和配置選項,以實現不同的設計需求。

圖片來源:犬哥網站https://frankknow.com/elementor-tutorial/#edit-tips

新增區塊內容

開始設計:
點擊編輯區的加號Icon以開始設計一個新的Section區塊。

建立Column欄:
系統會自動生成一個兩欄式的區塊。選擇其中一個欄位,開始將元素拖曳至此欄位內。

添加標題元素:
將標題元素拖曳至選定的欄位中,或直接拖曳至該欄位內。
在左側設定區,可進行標題的編輯,如標題文案輸入、文字大小、對齊方式、標題連結等。

添加文本編輯器和圖片元素:
在另一個Column欄位中,重複上述步驟以新增文本編輯器和圖片元素。
就可以完成一個Section區塊囉~

只要會拖曳元素就能利用Elementor編輯器製作出有質感的網頁,有沒有很簡單呢?

樣式及區塊設定

想要更改標題顏色也很簡單 點擊右側指定的標題元素,切換至“樣式”分頁進行修改。
通用樣式設定: 透過“樣式”分頁,可對Elementor的Section區塊、Column欄位、及Widget元素進行樣式設定。

透過“樣式”分頁,可對Elementor的Section區塊、Column欄位、及Widget元素進行樣式設定。

進階設定

  • 邊界與內距調整: 在進階設定中可調整邊界和內距。
  • CSS設定: 指定自定義的CSS以進一步定制設計。
  • 動畫設定: 為元素添加動畫效果以增加視覺吸引力。
  • 裝置兼容設定: 設定不同裝置上是否反轉欄位或設置元素的顯示/隱藏。
  • 元素特定設定: 根據不同元素,提供更多的進階設定選項。

預覽頁面&發佈上線

完成一個區塊的設計後,再進行下一個區塊的設計, 以此類推, 就可以設計出一個完整的頁面囉!

設計完成後, 點擊預覽以檢視頁面的設計效果。
可選擇縮起 Elementor 左側功能面板或點擊底端的預覽按鈕來查看設計效果。

預覽確認頁面設計沒有問題露, 就可以點擊發佈按鈕以將頁面正式上線囉~

以上就是Elementor頁面設計製作的基本教學,大家有沒有覺得朝設計大師之路更邁進一步了呢?
下一次我們再來個大家聊聊關於Elementor編輯的小技巧,我們就在EP3再見囉~

推薦文章

pexels-photo-3776166-3776166.jpg
metabiz創業小聚

客人的懶惰不可忽視

我家附近的天氣經常很潮濕,這讓我們家的木質家具和衣物總是發霉,甚至空氣中都彌漫著一股潮氣,讓人感覺很

閱讀更多 »