Avada教學 :18 個網頁製作課程(WordPress主題)

Avada 主題教學:架設 WordPress 個人品牌+公司形象網站

這篇文章是一篇,使用 WordPress 的 Avada 佈景主題,從 0 到 1 的完整「 Avada教學 」。

跟著文章動作,你將學會 WordPress 網頁製作,不但是客製化且支援響應式(手機版)。

若有任何操作上問題,歡迎在下方留言區發問,我會盡力的為你們解答,文章教學如下:

好,話不多說,我們開始學習之旅吧:)


1. 如何架設網站?

如果你是新手入門,第一次學習自架網站,可參考 Bluehost 主機教學,完成個人網域申請+主機租用+WordPress 網站建置。

使用 Bluehost 的好處,一來是費用便宜比較沒負擔,二來是介面簡單容易上手,是最推薦新手使用的一款入門主機。

假設你對網站速度 or 穩定性有更高的要求,可參考 A2 Hosting 的 Turbo Boost 方案,或是 Cloudways 雲代管主機(VPS 主機),雖然費用會稍微高一些,但這兩台的速度會更快。

這些都是優質 WordPress 主機,各有不同的使用場景,相關比較可參考 WordPress 優質主機

等個人網域申請+主機租用+WordPress 網站建置,都處理完畢之後,就能來進行本文的教學啦:)


2. Avada WordPress 主題介紹

avada佈景主題推薦
Avada佈景主題推薦

Avada 是一款超熱門 WordPress 綜合型佈景主題,它在 ThemeForest 主題森林中,狂銷 90w+ 是目前銷售數量的 No.1,這是極為驚人的。更多 Avada 完整教學

你不需任何編碼知識,Avada 幾乎可設計任何風格的網站,只需發揮想像力。

不論你想架設部落格、形象官網設計、架設網路開店平台 .. ,對 Avada 都不是難事。

超過 90+ 個展示網站,可直接一鍵導入,再修改成自己的網頁設計即可。

Avada 展示網站

網頁可使用元件高達 120 多種,能客製化網站架設,組合成任何你想要的網站設計。

Avada3
WordPress Avada 主題:多種功能元素

Avada Builder 是 Avada 的頁面編輯器,所見即所得的方式,用拖曳直接就能網頁製作,得來全不費功夫。

且能幫助你修改網站頭部、尾部、側邊欄、網站頁面,幾乎你看得到的地方,交給 Avada 就對了。

Avada4
Avada 頁面編輯器

同步支援手機頁面呈現、優質的主題速度、SEO優化 .. ,這是很正常的事。

Avada 是專家網頁設計的絕佳拍檔,也可以成為你的好夥伴。


3. 購買 Avada 主題

這章節會示範,如何在 themeforest 主題森林購買 WordPress 佈景主題,詳細流程請繼續學習。

首先,前往 Avada 佈景主題,點擊「 Buy Now 」進行購買流程。

購買 avada 主題
購買 avada 主題

使用者資訊需都填寫英文,姓名可到 外交部 查詢,完成後點 Next。

Newspaper WordPress 主題:創建 themeforest 帳號
創建 themeforest 帳號

設定 themeforest 主題森林的帳號+密碼,這是未來要登入的憑據,請妥善保存。

Newspaper WordPress 主題:創建 themeforest 帳號
創建 themeforest 帳號

填入帳單資訊,如果沒有公司可以空白,地址需填入英文,郵遞區號需填國際碼(4 – 9 碼),可用 中華郵政 翻譯查詢,台灣沒有洲所以輸入 Taiwan 就好,完成後點下一步。

Newspaper WordPress 主題:填入帳單明細
填入帳單明細

輸入付款資訊,常用的有信用卡或 PayPal 付款,這裡用信用卡示範,確認金額正確後,點擊按鈕確認付款。

Newspaper WordPress 主題:輸入付款資訊
輸入付款資訊

這樣一來 WordPress 佈景主題就購買完成囉!下一章節,我們會進行主題安裝教學。


4. 安裝 Avada 主題

這章節會示範如何把第三方主題,安裝到 WordPress 網站上,我們開始吧。

主題購買完成後,點擊右上角圖像前往 downloads 頁面。

Newspaper WordPress 主題:登入 themeforest 帳號,和前往 downloads 頁面
登入 themeforest 帳號,和前往 downloads 頁面

在購買清單,會看到剛買的主題,點擊 Download > Installable WordPress file only,單純下載 WordPress 主題安裝檔。

Avada 下載 WordPress 安裝檔
Avada 下載 WordPress 安裝檔

接著,前往並登入 WordPress 後台,到 外觀 > 佈景主題 > 安裝佈景主題 > 上傳佈景主題。

上傳剛下載的 Newspaper WordPress 主題檔案(副檔名是zip),安裝成功後就直接「 啟用 」,或參考 WordPress 主題安裝 有詳細教學。

上傳第三方的 WordPress 主題
上傳第三方的 WordPress 主題

安裝啟用完成,我們需填入 Avada 的產品序號,這是預防盜版用的,前往 Dashboard 照著下圖操作,點擊連結前往 Envato 設定 API。

前往輸入 Avada 購買憑證
前往輸入 Avada 購買憑證

接著「 命名憑證 」,然後照下圖「 勾選允許權限 」,完成後就「 確認送出 」,開始生成憑證號碼。

Avada教學 :創造憑證頁面
創造憑證頁面

成功生成後,記得複製憑證密碼,打勾確認會妥善保管憑證,最後點擊確認。

複製憑證密碼
複製憑證密碼

回到 WordPress 後台,把剛複製的憑證密碼貼至註冊框,點擊 Submit,完成後會出現打勾的符號,代表憑證已經註冊成功。此時,Avada 功能就正式被激活。

輸入 Avada 產品憑證碼
輸入 Avada 產品憑證碼

接著,我們需安裝 Avada 必備外掛,才能幫助它運作,前往 Avada > Maintenance > Plugins / Add-ons,把外掛上有標註 Required 都安裝。

安裝 WordPress Avada 必備外掛
安裝 WordPress Avada 必備外掛

這樣一來,WordPress Avada 的前置設定就都完成了。


5. 套用預設模板

Avada 有內置許多高質感的模板,可以直接引入使用,節省要重新設計的時間。

首先前往 Avada > Websites,會發現有非常多模板,可以先跟著我用同樣板練習,點 import 安裝(之後都可以再換)。

Avada 安裝預設模板
Avada 安裝預設模板

接著,安裝樣板必備外掛和導入樣板資料,好了就點 Import 匯入。

安裝 WordPress Avada 必備外掛
安裝 WordPress Avada 必備外掛

匯入完成後,如果沒看到網站選單,可前往 WordPress 外觀 > 選單,設定選單位置到主選單即可。

Avada教學 :設定網站選單位置
設定網站選單位置

前往網站前台,會發現預設樣板安裝好了,太棒了。接下來,只要修改裡面的內容,很快就有網站可以用了。

Avada教學 :樣板安裝成功
樣板安裝成功

6. 更改 Header(網站頁首)

有照著「 Avada教學 」流程,預設樣板應該已經安裝完成了,接著就來更改網站頁首,這裡主要教如何更改 Logo 和一些版型調整。

首先點擊 WordPress Avada 外掛內的 Avada Live,就可以前往頁面編輯器。

Avada教學 :前往 Avada 頁面編輯器
Avada教學 :前往 Avada 頁面編輯器

或是到網站前台任一個頁面,點擊 Edit Live 就能編輯當前頁面。

Avada教學 :使用頁面編輯器,編輯當前頁面
使用頁面編輯器,編輯當前頁面

接著,把滑鼠移至頁首,會出現 Edit Logo 點擊就可編輯 Logo,左側就會出現可修改內容。

因為可修改的很多,大概就是設定 Logo 間距、連結、電腦和手機版 Logo,完成後點 Save 儲存。

Avada教學 :編輯網站 Logo
編輯網站 Logo

左側 Logo 設定好了回到上一頁,也有網站圖標可以做設定。接著,我們可以更改頁首佈局和樣式。

Avada教學 :頁首相關功能
頁首相關功能
  1. Header Content(頁首佈局):調整頁首 Logo 和選單排法,更動幅度最大。
  2. Header Styling(樣式設定):調整頁首內距、背景顏色 ..
  3. Sticky Header(置頂頁首):調整是否置頂頁首、不同裝置是否置頂、置頂相關的顏色表示 ..

這樣一來,你就能自由客製化網站頁首,修改完畢後別忘了點 Save 儲存,設計成你喜歡的樣子吧。


7. 更改網站選單

這章節會教如何調整網站選單,滑鼠移至頁首會出現工具列,點擊 Edit Main Menu(編輯主選單)。

Avada教學 :編輯 WordPress 網站選單
編輯 WordPress 網站選單

可以把任一個頁面、文章、分類等 .. 放入到選單裡,選單可以拖放排序。可以參考 WordPress 選單設定,有更多教學。

這邊示範新增一個子選單,然後確認選單出現的位置(下面是設定主選單),完成後儲存。

Avada教學 :設定網站選單
設定網站選單

來到前台看一下,果然剛設定的子選單出現了。

Main Menu(主選單) Mobile Menu(手機選單),這兩個是選單樣式,主要更改的地方。

Avada教學 :選單調整選項
Avada教學 :選單調整選項

Main Menu(主選單)調整

首先,點擊側邊欄的「 選單 > Main Menu 」,這裡可修改主選單樣式,內容滿多種的,如:間距、字體大小、顏色等 .. 。

我把幾個功能標示出來,還有文字字體、大小、間距(這下圖沒列出來,需自己找一下),調整的數據不一定要跟我一樣,修改完成後記得儲存,如下圖:

Avada教學 :主選單調整

Mobile Menu(手機選單)調整

點擊側邊欄的「 選單 > Mobile Menu 」,這裡可修改手機版選單樣式,如:選單風格、項目高度、字體大小(Font Size)、顏色(Font Color)等 ..。

可以切換成手機版瀏覽狀態,修改完成後 Save 儲存即可。

Avada教學 :調整手機版頁首設計
調整手機版頁首設計

以上就是「 Avada教學 」 有關網站選單的調整,希望有幫助到你。


8. 頁面佈局觀念

想使用 Avada教學 ,進行客製化網頁設計頁面嗎?一個頁面的組成,主要由這 3 個組合而成,由大到小層層包裹,依序是:

  1. Container(容器)一個區塊的最外層,裡面會包不同數量的 Column。
  2. Column(欄位)包在 Container 內,可自訂多個 Column,數字湊成 1,即形成一排。
  3. Element(元件)包在 Column 內,可自訂多個 Element,如:文字、圖片等 .. 工具。

可以把它想成一部車子,最外層有車殼(Container),裡面有 4 個位置(Column),位置上有人(Element),是不是容易了解許多:)

也可以隨意找個頁面,然後點擊上方「 Toggle WireFrame 」即可切換模式,方便瀏覽網站架構,如下:

Avada教學 :佈局觀念
Avada 佈局觀念

上圖的 Column 欄位比例,如果數字加總為 1,就會形成一排,超過則會往下排列,以此類推。

一個新的佈局新增,流程會是「 Container > Column > Element 」,如果有套用預設樣板, Avada 都大致做好了,當然你也可以自行新增或刪除多餘的區塊,如下:

Avada教學 :新增區塊
Avada教學 :佈局種類
Avada佈局種類

或是切換回所見即所得模式,直接在想要添加的區塊,點選 Add Container 也能夠新增頁面佈局。

Avada教學 :Avada新增區塊
Avada新增區塊

這章節的網頁製作課程 ,大家應該學了不少佈局觀念了,這樣如果需客製化網頁設計,相信也容易上手許多。


9. Avada Builder 頁面編輯器

Avada Builder 是 Avada 的所見即所得編輯器,可加速網站設計流程,這章節會做個介紹。

首先,任意選擇一個頁面 or 文章,進入後會發現面板有變化,有 Avada Builder(佈局編輯器)& Avada Live (視覺編輯器)兩種。

Avada教學 :網頁線上編輯器
網頁線上編輯器

我自己的使用方式,主要是使用 Avada Live 設計(比較直覺),Avada Builder 當作輔助使用。

點擊上圖「 Avada Live 」按鈕,會看到頂端有一排的工具列。

由於功能滿多的,可依照號碼,對照下面說明,如下:

Avada教學 :Avada Live 面板詳解
Avada Live 面板詳解

頂端工具列,功能介紹:

  1. 切換側邊欄(Toggle Sidebar):有分「 全局 / 頁面 / 元件 」,可供頁面調整。
  2. 引用排版&元件(Library):可引用公版&自訂佈局,和自訂元件。
  3. 裝置切換(Responsive):切換不同裝置瀏覽。
  4. 模式切換(Toggle WireFrame):有一般版&線上版,可供 網頁製作 設計。
  5. 線上預覽(Preview):發佈文章前,可以先預覽一下。
  6. 發佈&草稿(Publish & Draft):切換頁面模式。
  7. 儲存(Save):保存內容。

這邊對側邊欄(Toggle Sidebar)做個介紹,當點擊它後,會有 3 個分頁可以切換:

分別是全站樣式(更改整個網站)頁面樣式(更改當前頁面)元件調整(更改指定元件)

這是重要觀念唷,整個網站頁面編輯都環繞在這。

Avada 線上編輯器,側邊欄主要項目
Avada 線上編輯器,側邊欄主要項目

以上是介紹 Avada 的頁面編輯器介紹,有了它客製化網頁設計會變得很容易。


10. 新增或編輯頁面(使用 Avada Builder)

在這篇,會分享如何引入其他 Avada 模板的頁面佈局,並改成自己想要的內容,這樣可以加快網頁設計速度,分幾個小步驟進行 Avada教學 。

Step1:匯入佈局

首先前往 WordPress 後台,使用 Avada 的「 Avada Live 」新增一個頁面。

使用 Avada 線上編輯器,新增一個頁面
使用 Avada 線上編輯器,新增一個頁面

點擊上方的 Library 資源庫,可以任意匯入所有 Avada 指定頁面,這邊我先匯入 Avada Agency 的 About us 頁面。

Library 」,選取「 Avada Bakery 」主題模板,並匯入「 About 」頁面佈局,如下:

匯入指定的頁面佈局
匯入指定的頁面佈局

Step2:修改內容和刪除多餘的佈局

試著改看看內容,首先滑到想更改的區塊,點選中間的筆做修改,右側會出現可修改選項,你可以填入標題、文字圖片,豐富網站頁面。

Avada Live 頁面內容編輯
Avada Live 頁面內容編輯

如果想要刪除多餘的佈局或區塊,一樣移到該區塊點刪除即可。

備註:刪除 Container(容器)、Column(欄位)、Element(元件)是不一樣的唷,上面章節有解釋差異。

Avada教學 :刪除多餘區塊
刪除多餘區塊

Step3:新增功能元件

再來更改一下右邊的區塊,模板默認沒有元件,所以我們來新增一個元件,如下:

Avada 新增區塊功能
Avada 新增區塊功能

點擊後會出現,超多種 Avada 功能元件,可以自由使用客製化網頁設計。

avada 多種功能元素
avada 多種功能元素

Step4:頁面設定和發佈上線

頁面設計完成後,可以做些基本設定,再放置網站選單中,這樣 WordPress 前台畫面就會出現囉。

首先,在側邊欄點選「 Page Options > Settings」前往頁面設定,幫頁面取個標題&設定連結,頁面模式改成 Publish(發佈狀態),最後進行儲存。

Avada 頁面設定&發佈上線
Avada 頁面設定&發佈上線

前往 WordPress後台「 外觀 > 選單 」,Avada 樣板預設有幫我們新增幾個選單(像是頁首選單、頁尾選單 ..),先切換成 Main Menu 主選單。

然後把剛新增的頁面放入到選單列表中,並選擇出現的位置,最後記得儲存。也可以參考 WordPress 選單製作,有更多相關教學。

編輯 WordPress 網站選單
編輯 WordPress 網站選單

回到 WordPress 網站前台看一下成果,Great!果然頁面順利出現了。

WordPress 頁面新增成功
WordPress 頁面新增成功

這樣你就可以照著流程,慢慢設計出不同的網站頁面,如果想調整選單字體大小、間距等 .. ,剛上面章節也有教學。

簡單來說,善用現成的佈局,會幫助你節省時間唷。


11. 頁面標題欄調整

這章節滿容易上手的,來教大家如何調整頁面標題欄,接著來學習。

前往剛新增的頁面,滑到展示欄上方點 Edit Page TitleBar,裡面可調整是否開啟、文字內容、文字大小、欄位高度、背景設定 .. 。

Avada 調整頁面展示欄顯示
Avada 調整頁面展示欄顯示

左側邊欄往下滑,可以調整文字對齊、文字內容、大小 .. ,還有許多功能可調整,可自己玩玩看。

Avada 更改頁面標題欄,文字內容、大小、對齊
Avada 更改頁面標題欄,文字內容、大小、對齊

剛剛我們都是調整當前頁面,如果想要一次更改全部的頁面,要如何操作呢?

左側邊欄切換到 Global Options 全局選項,這裡面的任何修改,都會影響到全部頁面唷。

Avada 全局頁面標題欄調整
Avada 全局頁面標題欄調整

如此一來,這章節「 Avada教學 」就能自由修改 WordPress 頁面標題欄,變成自己喜歡的樣子了。


12. 新增或編輯文章

WordPress 預設樣板會填充許多英文文章,有很多是使用 Avada 頁面編輯器設計,如果不習慣也可使用 WordPress 預設的 Gutenberg 區塊編輯器。

前往 WordPress 文章 > 全部文章,點 Gutenberg Editor 新增文章。

WordPress 使用 Gutenberg 區塊編輯器,新增文章
WordPress 使用 Gutenberg 區塊編輯器,新增文章

接著編輯文章內文,可以點左上角加號,可帶入多種不同的區塊功能。

WordPress 新增網站文章
WordPress 新增網站文章

如果文章編寫完畢後,需進行一些簡單的內容設定,像是網址更改(可改成與文章內容有關的,建議用英文)、設定分類、設定精選圖片、設定內容摘要等 .. 。

設定完成後,點 新增 或是 更新,即可發佈文章。

WordPress 文章新增&編輯
WordPress 文章新增&編輯

接著,前往 WordPress 網站前台,找到剛放置在分類下的文章。Great!這就是我們剛修改的樣子。你也可以參考 WordPress 新增文章,有更多文章編輯教學。

WordPress 文章新增成功
WordPress 文章新增成功

來到首頁,會發現最上面有一個張大圖,這是 Avada 預先幫你安裝的 Slider Revolution 輪播圖外掛,這章節會教如何更改。

把滑鼠移至區塊上,點 Edit Slider 編輯輪播圖。

WordPress 更改首頁輪播圖
WordPress 更改首頁輪播圖

會詢問是編輯整個輪播圖結構(Edit Slider),還是單張輪播圖(Edit Slide),這邊點擊 Edit Slide。

Avada 編輯網站輪播圖
Avada 編輯網站輪播圖

接著,就會進入到 Slider Revolution 輪播外掛裡面囉。

這裡面有多組輪播圖組合,因為目前想更改的是首頁輪播圖,所以找到 Home 的輪播組合,進入編輯。

多個網站輪播圖組合
多個網站輪播圖組合

Slider Revolution 外掛非常多功能,可以做到很細微的輪播圖呈現,包括動畫特效等也能做到。

這邊先簡單介紹主要功能區塊,其他部分可以自己玩玩看。

Slider Revolution 輪播圖外掛介紹
Slider Revolution 輪播圖外掛介紹
  • 全局選項:該區塊的修改內容,會影響到整個輪播。
  • 導航選項:可增導航控制,如箭頭、圓點等 .. 選項。
  • 輪播圖選項:該區塊的修改內容,會影響當頁輪播。
  • 佈局選項:該區塊的修改內容,會影響當頁輪播的某個元件。
  • 切換裝置:可對不同裝置進行調整。
  • 加入元件:可加入文字、圖片、按鈕、形狀等 .. 元件。
  • 新增&選擇輪播:可新增新的輪播,或切換到指定輪播。

如此一來,你就能自由編輯網站輪播圖囉!要記得編輯到對的輪播圖組合,前台才會正確顯示出來唷。還有編輯過程可先預覽,編輯完成記得存檔。


這章節,我會分享如何修改 Footer 網站頁尾,協助你客製化網頁設計,我們開始囉。

首先滑鼠移至到任一頁面尾端,點擊 Edit Footer > Footer Content 進行內容編輯。至於 Footer Styling 是編輯顏色、內距、字體相關等 .. 樣式部分。

Avada 頁腳設定

可依照個人需求修改頁尾,下面我有把一些功能用中文列出來,編輯完後儲存即可。

Avada教學 :Avada Footer修改
Avada Footer修改

接著,可以來編輯頁尾小工具,在 Footer 頁尾新增一些區塊功能。點擊 Edit Footer Widgets,會前往 WordPress 外觀 > 小工具。

編輯 WordPress 頁尾小工具
編輯 WordPress 頁尾小工具

你可以把想使用的功能,放到右側的 Footer Widget 裡面,回到前台看就會有變化了。更多教學,可參考 WordPress 後台,有完整教學。

編輯 WordPress 頁尾小工具
編輯 WordPress 頁尾小工具

以上就是網站頁尾(Footer)的更改,文章頁面的側邊欄(Sidebar)更改方式,也跟這個流程一樣。


15. 儲存網站佈局

假如今天辛苦完成了網頁製作的佈局,但是 .. 在其他頁面也想使用,要怎麼做呢?

其實 Avada 的每一個網頁設計頁面、容器、欄位、元件等 .. ,都能夠進行儲存,並重複使用。

這章節,我會分成 2 個小教學,帶領大家上手這功能,如下:

  1. 整個頁面儲存&套用
  2. 單一區塊儲存&套用

Step1:整個頁面儲存&套用

在想要儲存的頁面,點擊 Library(功能庫) > Templates(樣板),取個頁面名字後,點擊 Save Template,即可把整個頁面儲存下來。

如果哪天網站設計時,剛好需要一樣的網站佈局,就到新頁面進行匯入即可,如下:

Avada教學 :匯入佈局教學

Step2:單一區塊儲存&套用

除了儲存整個頁面樣式外,也可以對個別的 Container(容器)、Column(欄位)、Element(元件)進行儲存,這邊用 Container 做示範。

首先在想儲存的容器,點選 Save Container,如下:

儲存 Container 容器樣式
儲存 Container 容器樣式

接著一樣取個名字,最後進行儲存,如下圖:

儲存成全局 container
儲存成全局 container
  1. 須留意一下上圖的 Save As Global,若是有勾選,之後這個容器內有任何修改,所有套用這容器的頁面,都會進行修改。
  2. 如果沒勾選,每個套用的頁面容器,是各自獨立的,不會互相影響。

如果之後網站設計有需要,就可以到 Library > Containers 拿來套用,且全局樣式的顏色 .. 是不太一樣的,是不是很酷:)

Avada教學 : 全局佈局
Avada 全局佈局

16. 客製化網頁設計

Avada 在 WordPress 也有一個功能面板,可供我們調整網頁設計,可修改如:網站佈局、網站頁首、網站選單、Logo、社群連結等 ..,多個網站調整選項。

網頁視覺化製作可用 Avada Live 設計(也能調整全局佈局),左側面板可調整網站全局佈局,前往 WordPress Avada > Options 即可調整。

編輯完成可點擊 Save Changes 儲存。

Avada 全局樣式調整,客製化網頁設計
Avada 全局樣式調整,客製化網頁設計

備註:Reset 重置按鈕,會把樣式還原到最初狀態,請妥善使用。

有關網站社群更改,也可以在這做修改。

Avada 網站社群設定
Avada 網站社群設定

經過本文多個教學練習,相信你也對形象網站設計,也了解更多了。隨著網頁設計的 Avada 到了尾聲,你是不是也成長不少呢。


WordPress 學習資源

學習網站架設+網路行銷的過程中,或許會遇到一些解決不了問題,可以在下方留言給我,我會盡力協助解答!

接下來,額外分享 3 項實用資源,可有效幫助大家做學習。

資源一:WP 高手架站課(線上課程)

這門 WordPress 高手架站課 濃縮了犬哥多年在網頁設計的實戰經驗,從網頁設計觀念、WordPress / WooCommerce 後台操作、熱門主題.外掛教學、品牌網站 / 部落格 / 電商網站,3 大類型網站建置方法等 .. 豐富內容,一次教會你。

課程內容非常的紮實(長度超過 20 小時)。如果你剛學習自架網站,這門課程可以讓你用最快的速度,就學會這項技能!

點擊下面了解課程,立馬擁有自己的品牌網站,並增加網路曝光度!

WordPress 高手架站課|一堂課讓你變架站高手!
WordPress 高手架站課|一堂課讓你變架站高手!

資源二:SEO 排名飆升課(線上課程)

網站建立完畢後,但卻沒有流量怎麼辦?或是只能靠花錢投廣告才會有訂單?

這門 SEO 排名飆升課,教你掌握關鍵字策略、SEO 文章撰寫、多種實戰 SEO 技巧、透視對手 SEO 策略、SEO 必備軟體教學、最新 AI SEO 應用等 ..,大幅提升行銷能力。

點擊下面了解課程,帶你衝上 Google 排名第一頁,大量提升網站營收和訂單!

SEO 排名飆升課|帶你衝上 Google 第一頁!
SEO 排名飆升課|帶你衝上 Google 第一頁!

資源三:犬哥數位(專業 WordPress 網頁設計公司)

如果你沒時間自己架站、或是遇到解決不了的網站問題。歡迎洽詢 犬哥數位(WordPress 網頁設計公司),請專家製作會更有效率!

WordPress 網頁設計公司|犬哥數位

資源四:更多犬哥教學資源

如果你在操作過程中遇到問題,可以加入 犬哥研討社(目前有超過 9000+ 團員)。除了有網友一同幫你解惑外,犬哥團隊也會同步在社團幫助大家。

如果你想學更多網頁設計、數位行銷知識,可關注 YouTube 頻道,或是歡迎追蹤 犬哥網站 IG

犬哥網站社團
犬哥網站社團

關於作者

犬哥網站:網頁設計 x 網路行銷教學平台

犬哥網站

我們分享 WordPress 架站 x 網路行銷知識,不需會任何程式技術,就能自己建立各種網站。 搭配豐富的網路行銷教學,幫助你被更多人看到。 趕快跟著我們的腳步,開始學習吧:)

在〈Avada 主題教學:架設 WordPress 個人品牌+公司形象網站〉中有 12 則留言

  1. 你好,請問Logo如何設定不要忽大忽小且位置不變呢?例如就是在輪播圖某個位置大小4px,頁面下來也是某個位置4px,我嘗試一直調整圖片尺寸 可是不管條到多小,還是會忽大忽小且改變位置。

    還有Logo如何在手機頁面不要很大呢?我嘗試一直調整圖片尺寸,可是不管條到多小,在手機頁面上還是很大,也沒有變過。

    以上謝謝。

    1. HI S:

      有關 Logo 的調整,可以使用 Fusion Builder Live > Logo,裡面可以調整上下左右間距,而有些 Avada demo 主題,預設會有導航固定在頂端效果,因此會影響到 Logo 變化,所以把該功能關掉即可。

      至於手機的圖片尺寸,在 Fusion Builder Live > Logo > Mobile Logo 裡面,可以專門設定給手機用的 Logo,就不會跟電腦版的 Logo 共用,就不會有太大的問題出現。

      希望有幫助到你:)

  2. 請問我使用avada我在後台設定,但我不想要前台馬上更動,像是試用維護中,前台維持原樣,等滿意之後再把新內容放到前到有辦法做到嗎? 我現在是用子主題!

    1. HI 簡心昱:

      無法安裝外掛有許多可能。有比較詳細的錯誤提示嗎?或是有圖片之類的嗎?這樣比較好幫你處理唷。

      或加入到 小犬社團 發問。

      希望有幫助到你唷:)

  3. 大大~請問一下AVADE的Heading 跟body Typography的大小~
    假設 H1 電腦50px、平板36px、手機32px 的切換呢?

  4. 您好,想詢問架設好網站後,網站的title後面都有avada law 請問要如何刪掉

    1. 嗨,看一下是否是因為 SEO 外掛造成的,因為多數 SEO 外掛都能對網站標題進行修改。

      至於 Avada 是否內建相關的網站標題修改選項,可能要自行尋找一下唷~

  5. 想請教一下~
    我的部落格樣式是選大圖,但不知道要怎麼讓標題連有文章連結?
    目前是大圖本身與Read more有文章的連結~感恩~~

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

返回頂端