Elementor教學-WordPress最好用編輯器,百萬下載又免費

 1. Elementor是什麼?

Elementor是一種WordPress頁面內容編輯器,使用者不用寫程式就可以做出各種漂亮的畫面,尤其Elementor更是目前WordPress多數編輯器的箇中翹楚,超過500萬下載次數,所見即所得的編輯畫面,對於完全不會程式的使用者或沒有什麼畫面編輯概念的初學者來說,是非常好上手的編輯器.讓使用者可以快速建立內容並編排畫面.迅速地完成網站設計

2. 使用Elementor原因是?

    • 官方提供免費版使用,若需要更多變化才需要購買專業版.
    • 視覺化編輯畫面,編輯畫面就是預覽模式,減少前後台來回切換次數.
    • 拖、拉的操作方式,像編輯簡報或文書軟體一樣輕鬆完成網頁編輯.
    • 多種免費的demo頁面,可直接匯入使用.(參考連結:官方demo頁面)
    • 少數有繁體中文化的編輯器,縮短適應學習時間.
    • 樣式的編輯上提供非常多設定,大大的減少使用者需要寫CSS的機會.
    • 許多擴充元件,甚至也可以自行開發元件使用.

小編補充:他真的很方便!大部分的人用了之後都愛不釋手,就回不去其他編輯器了.

3. Elementor教學 – 免費下載與安裝

Step 1

至[安裝外掛]功能,輸入關鍵字 [Elementor] 進行搜尋,會找出相關Elementor外掛
有圖為證,五顆星滿意度,500萬以上下載次數!!)

Step 2

參照下圖,安裝並啟用 [ Elementor Page Builder ]即安裝完成.

Elementor安裝
Elementor安裝

 

4. Elementor基本設定

安裝後,會看到一排的功能,但其實初學者的我們看一下[設定]即可,其他的部份通常維持預設,若要進一步研究的,可以安裝後自行摸索一下,有中文很方便!

Step 1 一般設定

設定哪些類型可以使用Elementor.

勾選[禁用預設字型]的化,讓 Elementor 的預設字型與您安裝的佈景主題相同,網站一致性,當然也可以不打勾,那就編輯的時候,字型都要選一下;或者用CSS寫好全站字型,就不用編輯的時候都要選字型了.

Elementor設定

 

Step 2 樣式設定

樣式設定是設定一些基本準則,通常小編最常用到的就是[內容寬度]的設定,這樣打開每個頁面基本寬度就是一樣的,其他就看個人要不要設定囉!

Elementor樣式設定

以上基本設定完之後,就可以開始用Elementor編輯器囉!

5. Elementor編輯畫面介紹

Step 1 新增頁面>輸入標題
Step 2 點選[使用Elementor編輯]

Elementor新增頁面

Step 3 Elementor編輯畫面介紹

A:編輯內容區-直接在畫面中建構您要的排版區塊,用拖拉的簡易方式放入對應元素/小部件.

B:小元件-可以用來拖拉放到內容區的各種元件.

C:工具列-儲存,圖層,切換響應模式,頁面設定的地方.

Elementor編輯畫面介紹

Step 4 elementor教學影片-編輯畫面

5-1. Elementor教學 – 基本元件「文本編輯器」

「文本編輯器」是Elementor元件中最重要的項目,也跟SEO大幅相關,舉凡用來編輯各種文字其實都需要他來編輯文字內容(標題、文章段落等等),大家看應該會覺得「文本編輯器」很親切,因為它就是一般部落格在用的編輯器,拿來編輯文章段落.elementor教學

 

「文本編輯器」元件位置如下圖,在「基本」元件區:

Elementor教學-編輯頁面-基本元件「文本編輯器」

 

 

使用「文本編輯器」後,會看到右側變成下圖,可以開始編輯文字內容,並妥善利用「內容」、「樣式」、「進階」頁籤來做畫面上的調整:

blank

 

 

「文本編輯器」小叮嚀:

    • 為了讓「文本編輯器」的內容一致,請盡量用「樣式」裡面的設定來調整「文本編輯器」顯示的樣子.
    • 「樣式」的設定權重是小於「內容」的設定,這點要注意唷!教學影片中會提到並做範例.
    • 使用此元件的時候都是編輯純文字,不太會直接在內容裡使用「新增媒體」,因為新增媒體就是要插入圖片,那另外用「圖片」元件跟「文本編輯器」搭配使用即可,因為單純用「圖片」元件可以設定的細節比較多,如果插入圖片在「文本編輯器」的話,不太好調整.
    • 調整後務必用響應模式看看手機板/平板,針對手機板/平板再調整「文本編輯器」內容的文字大小,教學影片中會提到並做範例.

操作教學影片-Elementor影片:

 

6. Elementor編輯頁面-偷吃步:匯入Elementor 現成demo頁面

 

Step 1

要先去Elementor官網註冊一個帳號並登入唷!Elementor官方網站

blank

blank

Step 2 匯入樣板教學

如果一開始對排版沒什麼概念,可以使用匯入現成樣板,增加一些想法,把想要的區塊留下來,不要的移除,就可以輕鬆達成一頁排版囉!

結語

經過以上的簡單介紹Elementor免費版就可以做到的事情,毫無疑問,Elementor是21世紀最好的WordPress網站設計編輯器,最好的而且又是免費的,而且不斷的更新與持續開發中,保持優質又進步的水準.

如果您有更多元的需求,也可以購買相關Elementor Pro版本或者其他擴充外掛,市面上有相當多可以選購,有機會會繼續補充WordPress編輯器-Elementor相關!

Elementor官方影片介紹:

 

 

如果你喜歡Elementor,並想要畫面更活潑多元,請支持辛苦開發的開發商正版,

Elementor pro版購買:傳送門

順便推薦WordPress好用的相關外掛(SEO關鍵字設定/電商/文章排版等等):傳送門

 

小編補充:

使用注意事項:主題的選擇,會影響Elementor是否確切相容,所以建議挑主題的時候,要注意他是否相容Elementor.

 

相關閱讀:

形象網站設計需要注意的事項

快速了解RWD響應式網頁設計與使用RWD好處

決定用WordPress設計網站前需要理解的事項

 

blank