網友大好評!手把手 Elementor 教學設計 WordPress 官網

網友大好評!手把手 Elementor 教學設計 WordPress 官網

本篇教學以影片教學為主,為了讓每個人都能輕鬆學習,將帶你從全新的 WordPress 網站開始到完成完整的官方網站!

 

本次我們將採用我自己網站也在用的,Astra 佈景主題 + Elementor 頁面編輯器,這兩套的搭配也是目前 WordPress 網站的主流之一!學起來受用無窮!

 

點擊至 Astra 官網
點擊至 Elementor 官網

WordPress架設官方網站?為什麼選用 Astra + Elementor?

什麼是 Astra?

Astra 是 WordPress 中一款以網站速度、SEO 友善、多功能性而聞名!被認為最適合作為基底的 WordPress 佈景主題!

Astra 主題有什麼優勢?

WordPress 主題常常有太過厚重、速度慢的問題!而 Astra 專為速度而生、輕量且拋棄老舊程式!主題架構方式又對 SEO 有利!除了輕量之外也針對現今常常使用的 Elementor 等⋯⋯頁面編輯器優化,讓架設官網的人能隨心所欲的開關功能!看 Astra 在 WordPress 商店上超過百萬的安裝數、4800+ 個 5 顆星評分就知道它有多受肯定!

什麼是 Elementor 頁面編輯器?

因為傳統設計網頁複雜、困難。因此誕生了 WordPress 頁面編輯器!可以用套版、拖拉等方式來快速設計你的各個網頁!而 Elementor 更是其中的佼佼者!Elementor 可以做到幫你全方面的打造 WordPress 的每個頁面、還附加彈出視窗設計功能,且因為一直最受歡迎,加上經過多代的演化,操作方式越來越簡易上手!本篇教學主要就是 Elementor 的頁面建構教學喔!

Elementor 有什麼優勢?

WordPress 上最受歡迎的頁面編輯器就是它最大的優勢!資源豐沛的 Elementor 團隊,將 Elementor 開發的越來越強大!操作卻反而越來越簡易上手,版型也是固定的更新與增加!能快速套用的漂亮版型越來越多!自己微調的修改也越來越方便與強大,快來看看本課影片,你就知道 Elementor 適不適合你啦!

Astra 和 Elementor 是免費的嗎?

兩者皆有提供免費版本!本課教學將使用 Astra 免費版搭配 Elementor 專業版(需付費購買)來進行。原因在於 Astra 免費版功能足夠我們官方網站使用。但是 Elementor 免費版功能算是半殘,要專業版才能足夠我們快速套版及更多進階功能使用!

Elementor 專業版要多少錢?

Elementor Pro(專業版)的價格是依照你要使用的網站數區分,用在一個網站為 $59 美元/年、三個網站為 $99 美元/年⋯⋯更多網站價格請參考官網價格表。以 1,500 台幣不到的價格架設一個官網算是很便宜的投資!

Elementor 專業版必須每年付費嗎?到期沒續約會怎樣?

Elementor Pro(專業版)雖然定價為每年付費,但假設你網站已經架構好(需要使用頁面編輯器的部分),後續就不需要再繼續續費是沒有關係的,網站一樣可以正常營運。之前用 Elementor Pro 做出來的功能也都能正常運作!只是無法再修改樣式了。假設後續又有需求,可以屆時再購買一年即可!

我沒有基礎,不會程式。可以用 Elementor 做官網嗎?

就算你連 WordPress 網站都沒有也沒關係!可以先去看使用 A2 Hosting架設WordPress教學(2023),接著再看本篇的 Elementor 完整製作官網教學!兩個影音教學皆是手把手、清楚講解!只要跟著做過就能功力大增喔!

 

WordPress Astra + Elementor 完整官網架設教學影片

如果還沒有 WordPress 網站請服用此篇文章(內有影音教學),先架設 WordPress 網站後再接這個教學喔:
A2 Hosting 架設 WordPress 網站手把手教學(含影片)

 

免程式跟著做!Astra + Elementor 頁面編輯器!打造官網好 Easy!自己規劃網站最合用!(上集)

 

如有需要購買 Elementor 請點擊連結前往官網喔!感謝!
點擊至 Elementor 官網

 

Elementor 免費教學影片編目:

0:00 課程 WordPress 網站成品展示

1:03 主題 Astra + 頁面編輯器 Elementor 簡介

3:48 安裝與設定 Astra 主題

17:37 安裝 Elementor 免費版&功能介紹

20:26 Elementor 專業版安裝與中文化

24:01 Elementor 基礎操作&視覺大Banner建立

41:38 特定頁面 關閉 Astra 表頭與表尾

44:52 背景加入卷軸特效

46:21 Elementor建構三欄優勢介紹

51:17 Elementor 作品集區塊製作

54:17 頁面編輯器 客戶評價區塊製作

56:03 Call to Action 行動呼籲製作

58:41 首頁線上諮詢表單製作

1:04:05 更改WordPress靜態首頁

1:08:03 微調Elementor首頁&動態效果

1:18:08 最後加點CSS程式優化版面

 

補上第一課教學中後段所用到的 CSS 程式,有需要可以直接複製使用喔!

#banner-text{ width: 100% }
@media only screen and (min-width: 960px) and (min-height: 0px) {
    #banner-text{ width: 55% }
}

WordPress教學!Astra 主題 + Elementor 頁面編輯器!打造官網好 Easy!(下集)

 

0:00 Astra + Elementor 下集前言

2:50 Elementor 整頁版型套用:服務介紹

24:20 網頁動態效果設定

29:30 創建 Elementor 彈出視窗

38:09 製作聯絡我們頁面

46:35 Astra 部落格頁面獨立選單

52:33 WordPress 404頁面製作

在這裡,你不會被廣告打擾,所有的學習內容都是免費的。
如果這讓你感到滿意,一杯咖啡能讓我們走得更遠。

請 Perry 喝杯咖啡
上一篇WP 部落格 Blog 速度為上!首選 Astra 佈景主題!全教學 下一篇安裝完 SSL 關掉沒有加密的入口!http 301 轉址到 https 網址

Divi 編輯器特賣 onSale!

Divi Summer Sale 20% 折扣!時間有限!

90秒強大功能展示:傳送門

優惠傳送門:傳送門

Divi 中文化:傳送門

完整教學:傳送門

Divi 特賣 onSale!