Professional Documents
Culture Documents
Elementor教學|超過5百萬下載,免費多版型的WordPress編輯器推薦 - 創意數位科技
Elementor教學|超過5百萬下載,免費多版型的WordPress編輯器推薦 - 創意數位科技
Elementor 教學|超過5百萬下載,免費多版型的
WordPress 編輯器推薦
12 1 月, 2021 WordPress, 模組介紹, 部落格
顏色]的設定,還有和一些WooCommerce購物車元件更新和與知名SEO模組相容的部分,對於網頁設計
來說她越來越好用了!!
Elementor是什麼?
使用Elementor原因是?
Elementor教學 – 免費下載與安裝
Elementor基本設定
Elementor編輯畫面介紹
Elementor教學 – 基本元件「文字編輯器」
Elementor教學 – 基本元件「圖片」
Elementor編輯頁面-偷吃步:匯入Elementor 現成demo頁面
Elementor更新:
結語
Elementor是什麼?
聯絡我們
Elementor是一種WordPress頁面內容編輯器,使用者不用寫程式就可以做出各種漂亮的畫面,尤其
Elementor更是目前WordPress多數編輯器的箇中翹楚,超過500萬下載次數,所見即所得的編輯畫面,
對於完全不會程式的使用者或沒有什麼畫面編輯概念的初學者來說,是非常好上手的編輯器.讓使用者可
以快速建立內容並編排畫面.迅速地完成網站設計.
使用Elementor原因是?
官方提供免費版使用,若需要更多變化才需要購買專業版.
視覺化編輯畫面,編輯畫面就是預覽模式,減少前後台來回切換次數.
拖、拉的操作方式,像編輯簡報或文書軟體一樣輕鬆完成網頁編輯.
多種免費的demo頁面,可直接匯入使用.(參考連結:Elementor官方demo頁面)
少數有繁體中文化的編輯器,縮短適應學習時間.
樣式的編輯上提供非常多設定,大大的減少使用者需要寫CSS的機會.
許多擴充元件,甚至也可以自行開發元件使用.
小編補充:他真的很方便!大部分的人用了之後都愛不釋手,就回不去其他編輯器了.
Elementor教學 – 免費下載與安裝
Step 1
至[安裝外掛]功能,輸入關鍵字 [Elementor] 進行搜尋,會找出相關Elementor外掛
(有圖為證,五顆星滿意度,500萬以上下載次數!!)
Step 2
參照下圖,安裝並啟用 [ Elementor Page Builder ]即安裝完成.
聯絡我們
Elementor安裝
Elementor基本設定
安裝後,會看到一排的功能,但其實初學者的我們看一下[設定]即可,其他的部份通常維持預設,若要進
一步研究的,可以安裝後自行摸索一下,有中文很方便!
Step 1 一般設定
設定哪些類型可以使用Elementor.
以不打勾,那就編輯的時候,字型都要選一下;或者用CSS寫好全站字型,就不用編輯的時候都要選字型
了.
Step 2 樣式設定
樣式設定是設定一些基本準則,通常小編最常用到的就是[內容寬度]的設定,這樣打開每個頁面基本寬度
就是一樣的,其他就看個人要不要設定囉!
聯絡我們
以上基本設定完之後,就可以開始用Elementor編輯器囉!
Elementor編輯畫面介紹
Step 1 新增頁面>輸入標題
Step 2 點選[使用Elementor編輯]
Step 3 Elementor編輯畫面介紹
A:編輯內容區-直接在畫面中建構您要的排版區塊,用拖拉的簡易方式放入對應元素/小部件.
B:小元件-可以用來拖拉放到內容區的各種元件.
聯絡我們
C:工具列-儲存,圖層,切換響應模式,頁面設定的地方.
Step 4 elementor教學影片-編輯畫面
Elementor編輯畫面介紹
Elementor教學 – 基本元件「文字編輯器」
聯絡我們
「文字編輯器」是Elementor教學元件中最重要的項目之一,也跟SEO大幅相關,舉凡用來編輯各種
文字其實都需要他來編輯文字內容(標題、文章段落等等),大家看應該會覺得「文字編輯器」很
親切,因為它就是一般部落格在用的編輯器,拿來編輯文章段落.學
「文字編輯器」元件位置如下圖,在「基本」元件區:
使用「文字編輯器」後,會看到右側變成下圖,可以開始編輯文字內容,並妥善利用「內容」、
「樣式」、「進階」頁籤來做畫面上的調整:
聯絡我們
「文字編輯器」小叮嚀:
為了讓「文字編輯器」的內容一致,請盡量用「樣式」裡面的設定來調整「文字編輯器」顯示的樣
子.
「樣式」的設定權重是小於「內容」的設定,這點要注意唷!教學影片中會提到並做範例.
使用此元件的時候都是編輯純文字,不太會直接在內容裡使用「新增媒體」,因為新增媒體就是要
插入圖片,那另外用「圖片」元件跟「文字編輯器」搭配使用即可,因為單純用「圖片」元件可以
設定的細節比較多,如果插入圖片在「文字編輯器」的話,不太好調整.
調整後務必用響應模式看看手機板/平板,針對手機板/平板再調整「文字編輯器」內容的文字大
小,教學影片中會提到並做範例.
操作教學影片-Elementor影片:
聯絡我們
Elementor教學 – 基本元件「圖片」
「圖片」是Elementor教學元件中最重要的項目之一,畢竟網站製作最重要的元素就是文字和圖片了,那
Elementor圖片元件可以做些什麼呢?可以節省不少寫CSS程式的時間呢!
請參考以下介紹和影片:
「圖片」小叮嚀:
考量到使用者瀏覽體驗,圖片都要壓縮過,請盡量800kb以下,保持一個頁面讀取的檔案大小越小
越好,才不會影響瀏覽網站的速度.
圖片如果沒有需要透明背景,就盡量使用jpg檔案,少用png檔案,因為檔案容易較大.
Elementor教學-圖片元件介紹與操作
聯絡我們
另外有一個Elementor元件叫做「圖框」其實是「圖片」、「文字」、「標題」配上一點「特效」產生的
Elementor元件,有時候這種組合元件可以幫你省下許多時間,可以快速達到美美的排版,下次更新的時
候會補上這個元件的教學.
另外如果想要用Elementor製作彈出視窗,可以參考這篇 >> Elemeneotr教學彈出視窗
Elementor編輯頁面-偷吃步:匯入Elementor 現成demo頁面
Step 1
要先去Elementor官網註冊一個帳號並登入唷!Elementor官方網站
聯絡我們
Step 2 匯入樣板教學
Elementor現成樣板匯入教學
如果一開始對排版沒什麼概念,可以使用匯入現成樣板,增加一些想法,把想要的區塊留下來,不要的移
聯絡我們
除,就可以輕鬆達成一頁排版囉!
Elementor更新:
Elementor官方總是持續的更新,讓我們有更好的元件和編輯體驗,像這一年多下來,小編最喜歡的更新
就是[全域顏色設定],你會看到在一些顏色樣式的選擇畫面,會出現下圖的Icon,可以快速設定顏色!
製作上又更方便了!
結語
經過以上的簡單教學Elementor免費版就可以做到的事情,毫無疑問,Elementor是21世紀最好的
WordPress網站設計編輯器,最好的而且又是免費的,而且不斷的更新與持續開發中,保持優質又進步的
水準.
如果您有更多元的需求,也可以購買相關Elementor Pro版本或者其他擴充外掛,市面上有相當多可以選
購,有機會會繼續補充WordPress編輯器-Elementor相關!
希望這篇Elementor教學文有幫助到您!
PS:如果有更新Elementor外掛本身,記得其他的相關外掛也要一起更新,不然會導致編輯畫面開不起
來;相對的如果你更新了其他相關Elementor外掛,那Elementor外掛本身也要記得更新唷!
聯絡我們
Elementor官方影片介紹:
Elementor Website Builder For WordPress - Build Stun…
Stun…
如果你喜歡Elementor,並想要畫面更活潑多元,請支持辛苦開發的開發商正版,長期關注也會不定時有
特價唷!
Elementor pro版購買:Elementor專業版購買傳送門
順便推薦WordPress好用的相關外掛(SEO關鍵字設定/電商/文章排版等等):WordPress好用外掛
如果您想要製作一個專屬於您或企業的形象網站或購物網站(電商網站),不知道如何進行的話,都歡迎聯
繫我們專業的人員,並告知您的需求唷!>網站設計製作諮詢表單<
聯絡我們
—
小編補充:
使用注意事項:主題的選擇,會影響Elementor是否確切相容,所以建議挑主題的時候,要注意他是否相
容Elementor唷!.
相關閱讀:
【Elementor教學】3分鐘就懂Elementor彈出視窗如何使用?!
【購物網站設計】如何設計讓人心動下單的電商網站?9大設計注意事項
形象網站設計需要注意的事項
快速了解RWD響應式網頁設計與使用RWD好處
什麼是AMP?對SEO影響重要嗎?
決定用WordPress設計網站前需要理解的事項
最新文章
SEO教學|白帽SEO是什麼?黑帽SEO是什麼?有什麼差別呢?
2021-12-16
【APP開發7個準備6+注意事項】,費用如何評估?!
2021-09-30
聯絡我們
【Elementor教學】3分鐘就懂Elementor彈出視窗如何使用?!
2021-08-26
SEO教學 | 網頁設計遇上SEO怎麼做最好?SEO禁忌4件事
2021-07-28
文章分類
WordPress
模組介紹
部落格
上一個 下一個
【WordPress外掛推薦】2021 非用不可的5大… 【2021電商平台選擇】3大電商類型比較 | 10…
創意數位科技 GCREATE
新竹網頁設計 | 網站企劃 | 系統架構規劃 | RWD網頁設計 | 手機版網頁設計 | 電腦版網頁設計 | 後台程式開
發 | 伺服器建置與維護
03-6662587
新竹縣竹北市光明六路87-5號5F
星期一至五 09:30〜18:00 ,依國定假日休息
線上諮詢
聯絡我們
Advisory
聯絡我們