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

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

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

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

WordPress架設官方網站？為什麼選用 Astra + 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頁面製作