•  寫作緣由: 

    如何安裝免費版超好用網頁排版編輯外掛程式Elementor?

    本文詳細步驟教學讓您一步到位擁有人性介面功能強大眾多的Elementor,讓您網頁排版得心應手,對網頁可讀性,美觀與您的文章大作相得益彰。

    drag and drop操作讓您網頁排版行雲流水之外,貼心的響應式設計,讓您一次排版就可桌機,平板與手機一魚三吃,大幅提升工作效率。

室內設計-裝潢-鄉村風-新古典-混搭風-作品分享-幸福莊園-餐廳-枓櫃-傢飾-陶偶
陌生的道路上一旦有熟門熟路的朋友相伴,就不一樣了!

  當然,誰不希望自己架設的網頁,能夠吸睛,最好能讓自己自豪,讓網友讚嘆!

  要達到如此境界,工欲善其事,必先利其器,且讓我們來學學時下最受歡迎的,超簡單又多功能的網頁排版編輯器Elementor外掛程式吧!

  這個Elementor外掛程式免費版就很好用,付費版更精彩,功能太多族繁不及備載,本文只消先教您一招半式,就先能綽綽有餘了!

  那麼,我們就先來安裝免費版的Elementor外掛程式吧!首先,敬請點擊左側欄[外掛],最先映入眼簾的將是以下畫面。

WordPress架站軟體預設的已安裝外掛程式
WordPress架站軟體預設的已安裝外掛程式

  由於我們架站至今,還沒有自行安裝過任何外掛程式,因此,上述外掛程式必然是隨著WordPress架站軟體安裝,以及bluhost安裝軟體的程序,預設一定要安裝的外掛程式。

  由於還是初學者,我們就先不要去動這些外掛程式,比較安穩。等日後武功高強了,再來思索整體外掛的配置,就可以了!

  接下來,敬請點擊[外掛][安裝外掛],則會出現以下畫面。

在[外掛][安裝外掛]頁面的右上角有搜尋欄位方便以關鍵字找到您想要了解或安裝的外掛程式
在[外掛][安裝外掛]頁面的右上角有搜尋欄位方便以關鍵字找到您想要了解或安裝的外掛程式

  上圖右上角有個搜索框,輸入關鍵字[Elementor]之後,畫面將變成如下圖所示。

  敬請點擊該畫面中的[Elementor Page Builder]與[Elementor Essential Addons]這兩個外掛程式右上角的[立即安裝]按鈕。

  接下來,敬請點擊該兩個外掛程式右上角的[啟用]按鈕,就完成這兩個重要的網頁排版編輯器其外掛程式的安裝了。

搜尋知名網頁排版外掛程式lementor相關的結果
搜尋知名網頁排版外掛程式lementor相關的結果

  在此附帶一提,[Elementor Page Builder]這個外掛程式事主程式,一定要安裝,才能享受Elementor網頁排版編輯器的功能。

  接下來,敬請點擊左側邊欄[頁面][全部頁面]按鈕,將所有現存頁面條列出來。

點擊左側欄的[頁面][全部頁面]便會出現以下所有網頁的列表,目前的列表都是WpordPress的預設網頁,可以由編輯它們來作為範例。
點擊左側欄的[頁面][全部頁面]便會出現以下所有網頁的列表,目前的列表都是WpordPress的預設網頁,可以由編輯它們來作為範例。

  請將滑鼠移到[Home Page-首頁]的欄位,則在其下方會出現編輯、快速編輯、回收桶與查看四個選項,如下圖所示。

將滑鼠移到[Home Page-首頁]其下方就會出現編輯、快速編輯、垃圾桶與查看四個選項。
將滑鼠移到[Home Page-首頁]其下方就會出現編輯、快速編輯、回收桶與查看四個選項。

  敬請點擊編輯選項,則畫面將呈如下圖所示,正式進入網頁編輯畫面。

  敬請點擊[使用Elementor編輯]的按鈕,如下圖所示。

編輯Home Page-首頁的畫面
編輯Home Page-首頁的畫面

  接著就會自動進入Elementor網頁排版編輯畫面,如下圖所示。

進入Elementor外掛程式編輯的畫面
進入Elementor外掛程式編輯的畫面

  在上圖編輯畫面中間的大型虛線方框內有兩個按鈕,左邊是[新增段]按鈕,右邊則是[新增版型]按鈕。

  由於是初學者入門教學,我們以臨摹的方式開始學習最有效率,因此敬請先點擊[新增版型]按鈕。於是畫面就會呈現如下圖所示的,充滿許多版型可供選擇的對話框。

點擊[新增版型]所出現的畫面

  此對話框分為三部分,目前呈現的是[頁面],左邊的選項是[區塊],右邊的選項則是[我的版型]。頁面最完整,區塊只含其中一小部分,我的版型是您創作過程中自行儲存自創的版型。

  既然是臨摹,就以最完整的[頁面]區裏選擇最愛或最適合的版型來練習吧!

  請注意,這裏眾多的版型,如果右上角有洋紅色[Pro]字樣,代表是要付費才能使用,而且是美金計價,每個月付款,所以我盡量不採用。

  本教學範例我選擇的是免費的,名為Art Gallery的版型,當滑鼠移到該版型的範圍時,其左下角便會出現綠色的[插入]按鈕。

例如,咱們先來挑選這款版型Art Gallery來練習。
例如,咱們先來挑選這款版型Art Gallery來練習。

  點擊[插入]按鈕之後,畫面變成如下所示,整個版型已然搬進了您的編輯頁面。

該版型載入到您的網站首頁的情形
該版型載入到您的網站首頁的情形

  點擊左側欄右方的[<]按鈕之後,整個編輯指令欄位就會隱身,模擬在正常瀏覽器觀看時的視覺效果。於是,畫面變成如下所示。

  另外,因網頁無法以單一螢幕完整呈現,因此在此以四張圖片完整呈現網頁的實際視覺效果。

模擬網友在瀏覽器觀看的實際視覺效果-上
模擬網友在瀏覽器觀看的實際視覺效果-中上
模擬網友在瀏覽器觀看的實際視覺效果-中上
模擬網友在瀏覽器觀看的實際視覺效果-中下
模擬網友在瀏覽器觀看的實際視覺效果-下

  點擊上圖最左側的[>]按鈕之後,整個編輯指令欄位就會重新顯現,如下所示。

  如果您要儲存草稿,只要點擊畫面左下方綠色[發佈]按鈕旁的[▲]按鈕,就會出現[儲存草稿]與[儲存版型]兩個選項。點擊[儲存草稿]按鈕,約數秒鐘之後即完成草稿儲存。

儲存網頁草稿

  此時,您就可以安心點擊瀏覽器最左上角的[←]按鈕,離開Elementor編輯器作業環境,回到WordPress編輯環境,如下圖所示。

預覽
預覽

  敬請再點擊畫面右方的[儲存為草稿]按鈕,待儲存完成,請再點擊其右方的[預覽]按鈕,則瀏覽器會新增一個頁面顯示出正在編輯的網頁或文章將來發佈之後,從瀏覽器真正看到的視覺效果,如下圖所示。

首頁預覽

  敬請切換瀏覽器頁面到原先頁面編輯的頁面,再點擊畫面左方的[使用Elementor編輯]按鈕,進入Elementor編輯畫面,試著改變各編輯框內的文字內容與背景圖片,非常方便就可以編輯出屬於自己風格與需求的原創網頁或文章,如下圖所示。。

  敬Elementor的設計是非常直覺的,因此很適合自己先玩玩看。當然,日後我也會儘速抽空寫出一系列的Elementor相關的詳細步驟教學文章,讓您可以更迅速登堂入室,甚至青出於藍而勝於藍。敬請期待唷!感恩!

首頁草稿
首頁草稿
首頁草稿-中
  • 後記:

    恭喜您!自架網站的所有基礎建設,到此大功告成,可以感受到您雀躍不已的心情,真是太棒了!

    到目前為止,其實您大可以放手高飛,開始自由自在地到處吸收網站經營的知識,開創屬於您自己的網路事業!

    如果,您還有興趣,也願意賞臉,敬請訂閱我的網站文章,我後續還會有許多相關網站經營文章問世,也希望多少對您有所幫助。也希望您隨時不吝給予建議與指正。感恩!

免費註冊訂閱築韻集團專業文章
免費註冊訂閱築韻集團專業文章

    不想漏接下次的精采文章嗎?

    敬請點擊上方圖案,免費註冊免費訂閱築韻集團專業文章,以後只要有新作出刊,您的電子信箱就會馬上收到通知。感恩!

總公司地址:台灣省新竹縣竹北市福興路1028巷1號

台中分公司:台灣省台中市北屯區崇德路二段462號9樓之一

聯絡人:張世忠先生(0939-061-556)

電子信箱:mark.chang.1031@gmail.com

築韻空間美學工坊臉書粉絲團

築韻出版社臉書粉絲團

築韻集團YOUTUBE影片頻道

築韻集團FLICKR相簿圖庫