前一篇文章 – 從 Avada 到 OceanWP– 中有提到我認識了區塊組合套件跟區塊編輯器,只是那時已經到網站改版的尾端,也沒有多餘時間,再去多做的摸索認識新東西,故那時候只有五頁是用區塊組合套件搭配區塊編輯器來製作。

不過這件事情一直放在我心上,改版完成也還是繼續摸索跟學習區塊組合套件跟區塊編輯器,當時選擇了三款來使用,使用幾次下來,最終決定還是單獨使用 Qubely 就好。

放棄 Elementor 的原因

之所以放棄 Elementor 的主因倒不是大家常說的很佔資源、會拖累速度、是資源怪獸等,畢竟我使用 Elementor 製作的頁面只有六頁,小聚的工程師開過我家網站也說過速度還可以接受,反正我文章就是圖片多,這個可能還比較占資源。

縱使最初開始的主因多少有點速度再快一點,但後來發現影響網站速度的原因很多種,Elementor 或許是主因,把拔掉 Elementor 跟速度變快畫上等號太過武斷,加上我也比較喜歡區塊編輯器推疊編輯的方式,故到後面我其實也沒那麼在乎速度了。

因此我選擇放棄 Elementor 主要還是下面幾個原因:

圖片不能幫忙統一

這是我最大的困擾之一,因為我是從痞客邦搬家過來的,之前在痞客邦圖片有無統一並不影響排版,且我寫文章的時間很久了,從學生寫到出社會,這期間使用的相機跟習慣不一樣等原因,讓我的圖片大小不一。

且當初上傳痞客邦時都有壓縮了,橫跨年度太大,也沒體力一一去找出來原始檔案來裁切設定,因此在設定各篇文章的精選圖片時,皆是文章內抓取,導致設成精選的圖片尺寸無法一致 。

而在 Avada 時期,因為 Avada 會幫忙讓縮圖的大小一致,讓文章呈列起來好看,我也沒意識到這個問題,等到換成 Elementor 時,發現居然不能讓縮圖大小一致時,文章頁面看起來超醜的,像狗啃過一樣,雖然我自認我沒強迫症,但規格不統一,我還是差點崩潰,超難看的ORZ

圖片大小無法統一,看起來不舒服

文章的頁面排版不符需求

我的網站本身是以文章為主,在網站改版時就有打算安排將抽取幾篇文章作為重點介紹的頁面,因此我會需要不同的網頁文章排版方式,其中我最習慣用的就是條列式排版,但我所使用 OceanWP Pro 版本的 Elementor 沒有,他只有塊狀成列跟輪播,這兩個都不是我要的。

Elementor 早期的文章排列方式

尋求其他可能解決的方法,是有找到一個外掛可以彌補這方面的,但呈現的效果對我而言並不好,研究許久最終解決方案還是得買 Elementor Pro,但為了一個功能要花上 60 美金 (黑五折扣打 75 折的話),這點讓我很猶豫。

不過這個問題在現在也不算問題了,現在的 OceanWP Pro 版本的 Elementor 是有提供我需要的文章條列式排版,只是我已經跳槽了,只能說我倆有緣無份了。

Elementor 現在的文章排列方式

付費版 CP 值不高

小聚關係加了些工程師跟開發者的粉專 / 私人臉書,因此可以收到一些他們使用主題、外掛最直接的感受,而 Elementor 是其中被提最多的一款,印象最深的就是有工程師針對 Elementor Pro 版本每次升級就會出現災情的情況提出抱怨。

之後在小聚時也有詢問其他工程師,結論就是以 Elementor Pro 的規模,不太應該出現一升級就有那麼高的局部 bug 出現,顯見其用心程度不足 ,所以最好在升級前請先做好備份,也請不要第一時間就升級,先等下看看其他人的狀況 (災情?)。

這種狀況對我來說是個大地雷,都花 60 美金買了,結果得到的品質可能會比免費版更糟,聽起來就糟透了。

區塊組合套件可跟區塊編輯器混搭使用

贊助商連結

WordPress 一直有在把 Gutenberg 實驗過的新功能,整合到網站核心的區塊編輯器之中 ,像最近一次的 5.4 版本升級,主要重心也是放在區塊編輯器的更新。

也就是說之後 WordPress 未來的走向會以區塊編輯器為主,且使用區塊編輯器搭配合適支援區塊編輯器的區塊組合套件,如Qubely 去編輯頁面的感受其實也不差,也可以做到跟 Elementor 差不多的效果。

且我覺得最重要的是,這類型區塊組合套件的外掛們都可相互混用,以 Elementor 來講,如果你想要的功能官方沒出,你可以尋找 Elementor 的擴充套件來彌補,重點是這些擴充套件通常都是要付費的,頂多就是比 Elementor 便宜這樣子而已。

但區塊編輯器就不是這樣子了,只要是區塊組合套件都可以跟區塊編輯器混用。像是 Qubely 的文章輪播是付費版才有的功能,所以我就用 Ultimate Addons for Gutenberg 的輪播功能來取代。

或者是我覺得 UG 的輪播畫面太大,但他不能調整幅度,我就用區塊編輯器內的群組功能來更動他的幅度,或者我常用區塊編輯器的欄位功能塞入 Qubely 的目錄。

 Gutenberg ( 古騰堡 ) 外掛和區塊編輯器混用

在區塊編輯器內,你可以同時套用多家區塊組合套件來協助作頁面編輯,且由於官方有釋出開發文件,因此在做這個領域的廠商非常的多,相較於 Elementor 選擇就多更多,最重要的是這些服務大多都有免費版可以使用。

加上認識的幾位的工程是認為區塊編輯器,是 WordPress 必然的未來,既然是必然的未來,那就趁現在跟第三方編輯器的 Elementor 不熟,就趕緊跳船吧!

選擇 Qubely 的原因

由於官方釋出開發文件的關係,這方面的外掛非常的多,只是台灣目前不是主流,相關討論也少,會感覺好像這方面的資源比較少,但如果換成英文去搜尋就有非常多的選擇。

我自己使用過的就有 QubelyStackable Ultimate Addons for Gutenberg,最高紀錄時是三套同時在我的區塊編輯器裡,但使用一陣子後我就慢慢淘汰其他兩家,剩下 Qubely。

有範本可以下載使用

有範本可以參考這點非常吸引我,我的編輯器學習都是透過範本,透過範本來熟悉每個功能跟組合模式,像 Elementor 也是這樣子,且從範本也可以得知該編輯器可以做到哪些呈列方式,從而去思考自己可以怎樣去安排自己的介面。

且他還有分為單區塊範本、網頁範本跟全站的範本,這點跟 Elementor 很像,你可以選擇在自己頁面添加某個功能,也可以直接下載單一網頁,如果你對你的主題提供的範本不滿意,你可以直接下載他們家的網站範本來修改。

區塊套件組合中的 Qubely blocks 示範範本下載

這對新手來講很友善,對已經知道如何使用的人來講也很方便,畢竟現成架構在那邊只要載下來用就好,再去修改局部設定即可,非常的節省時間。

功能非常多樣化

其實我一開始是想要用 Stackable ,只是 Stackable 的強項在於文章排列,這也是我一開始需要的,但後來打算全部頁面都要使用區塊組合套件來製作時,就感覺 Stackable 不夠力了。

Qubely 在文章排列上雖然沒有比 Stackable 強,不過免費版的就有兩種-條列跟方塊-這兩種可以用,付費版的再多三種,免費版中我最需要的條列式排列跟精選圖片統一大小,這兩點 Qubely 都可以做到,這對我而言就很足夠了。

且他在推出新功能上速度還蠻快的,我接觸他是 19 年 10 月,20 年 03 月發現到他們就新增加之前沒有的目錄功能,且還免費的,這讓我很訝異,為了這目錄功能,我當初才會下載 Ultimate Addons for Gutenberg 來用,沒想到這麼快 Qubely 就跟上了。

其他像是聯絡表單、地圖等功能很不錯用,也可以省去下載其他外掛,他在細節調整範圍也很大,也支援回應式 (行動裝置) 系統,除了不能即拉即看編輯效果外,大致跟 Elementor 可以做到的差不多。

免費很夠用,付費版 CP 值不錯

在使用付費板之前,我就用免費版做好我全部的主要頁面,不行的也可以找其它可支援區塊編輯器的外掛們來彌補,其實很夠用了,只是裡面有幾個我需要的功能在付費版裡。

第一個是價目表,因為有三個次頁面需要用到價目表來做設定,沒法子就只好買了,Elementor 雖然有價目表的功能,但範本不能下載,如果想做就是自己去摸索出來,雖然我後來有摸出來,但其實沒有很滿意。

其次是文章排列,雖然免費版就有我想要的條列式,但他付費板多了三種選項,對我而言之後再設計其他文章相關頁面會有更多變化。

最後他們家的文章圖片輪播都是我想要的功能,下載其他類似支援區塊編輯器的外掛們來取代,但效果還是不太好,綜合以上幾個點,就想要需要得太多,最後決定直接用付費版比較乾脆些。

購買前可以先去查閱下自己需要的功能是否是在付費版中,我當初就是沒查好,錯過了黑色星期五跟新年 ( 新曆年 ) 優惠的 5 折優惠,不過原價 39 美金也算是我能接受的範圍,就不等特價,直接先買了~

Qubely blocks Pro 原價訂單

頁面是頁面,文章是文章

這次改版最大的心得,大概就是真得體會到前輩說的「頁面編輯器就用來做頁面,別做文章」,頁面的英文是Page,文章是Post,而頁面編輯器是Page Builder,顧名思義頁面編輯器就是要拿來邊頁面用,不是拿來寫文章的。

Elementor 是第三方頁面編輯器,故我知道不能拿來寫文章,但是我對區塊組合套件就沒這種緊戒心,然則區塊組合套件本身就是非內建的區塊元素,因此只要移除外掛,放在文章中的元素也會一併消失,等發現這件事情時,我已經好多篇文章都已經插入 Qubely 的地圖了,最後只能再花時間一篇篇手動移除,並重新置入新的區塊元素來替代。

使用 Elementor 寫文章,整個大悲劇

把頁面編輯器當作文章編輯器來使用的問題,一直都存在,上網搜尋一下,不乏有如何用 Elementor 編輯文章的教學文,每次看了都忍不住幫依樣畫葫蘆的讀者捏一把冷汗,照做下去,早晚網站會因為這些文章而掛點。

使用 Elementor 編寫文章,最大問題就是會造成主機的高負載,主要原因在於第三方的頁面編輯器本來就會耗損額外主機效能,用編輯頁面還好,一個網站大不了有個十來頁的網頁吧~

然而文章是可以有上百上千篇的,試想本來就是高負載的東西,弄了個上百篇,可想而知會發生甚麼悲劇;其次是當你更換編輯器後,原先使用 Elementor 編輯的地方,就會出現奇怪的程式碼,為了版面美觀跟方便閱讀,勢必得刪除。

只是這工作無法使用程式碼解決,唯一的方法就是手動處理,試想若你有上百篇文章,都要一篇篇刪除後再重新排版,個中滋味體會過一次,就終身不會想來第二次。

同樣也別用支援區塊編輯器的外掛寫文章

雖然支援區塊編輯器的外掛們超好用,還是要把區塊組合套件當作頁面編輯器來看待,請不要拿來編輯文章,或減少使用,請把區塊組合套件掛盡情發揮在頁面上,文章編輯請愛用區塊編輯器。

區塊組合套件相較於第三方頁面編輯器如 Elementor 比較不吃資源,不會出現像是 Elementor 那樣用多了會拖累網站速度,但畢竟區塊組合套件不是整合在系統裡面。

你如果將其大量使用在文章內,等未來有更好的區塊組合套件推出,而你想換掉現有的區塊組合套件,你就會面時一個艱難的局面,你的文章有使用到該外掛的區塊也會跟著消失,雖然區塊組合套件替換掉不會像 Elementor 在前端出現一堆程式語言,但還是得面臨要不要全部重新整理文章的兩難局面。

實際悲劇說給你聽

以我為例,由於 Qubely 的地圖功能太棒了,只要輸入地址就可以跑出Google 地圖,不用先到 Google 地圖先查好,複製 HTML 回到文章內貼上,所以我好幾篇文章都是用 Qubely 的地圖功能。

Ultimate Addons for Gutenberg 的目錄功能可以調整的東西比較多,雖然標題可以在他們家的跟區塊編輯器擇一使用,由於他們家的標題有比較炫的效果,所以我文章標題都是使用 Ultimate Addons for Gutenberg 來做設定。

沒想到某天 Ultimate Addons for Gutenberg 的標題出 bug ,導致我的目錄出不來,去信官方尋求解決方法,結果工程師叫我改用區塊編輯器去設定標題就好,我都傻眼了,幸好官方又另外派一名工程師協助,才後來發現是系統有問題,官方直接去改程式,我重新下載就 OK 了。

但這件事情就給我個危機感,在文章內放置 Qubely 的區塊也沒有很安全,且未來的廠商推陳出新,誰能保證我會用永遠使用 Qubely,就算我願意一直使用 Qubely,也要看他們有沒有辦法生存那麼久。

於是我花了兩天的時間把 106 篇文章內有用到 Qubely 跟 Ultimate Addons for Gutenberg 的功能,全數換成區塊編輯器內建的功能,唯一保留的是 Qubely 的目錄,不過標題設定也全部換成區塊編輯器內的標題設定,文章編排也盡量做到少掉目錄也不妨礙閱讀。

結尾

這次從第三方編輯器換成核心的區塊編輯器搭配區塊組合套件,雖然區塊編輯器不像第三方編輯器可以即拉即看,但摸久了也大概清楚前端效果如何,最初或許多少有想要速度再快一點的念頭,不過到後面倒是像自我挑戰-不用第三方編輯器也可以做出自己可以接受的網站樣貌。

這次雖然沒有到只用區塊編輯器內件功能就做出網頁來,只是透過這次的經驗,對於區塊編輯器的的內建功能更加熟悉跟搭配運用,Qubely 做不到的,還可以透過區塊編輯器或其他款區塊組合套件去加強,且 Jetpack 也可以配合區塊編輯器,就讓網頁多更多變化了。

且我也還蠻喜歡區塊編輯器這種堆疊區塊的編輯方式,感覺很像在蓋房子,一塊疊一塊,不管在排版還是拆解上容易很多,加上 Qubely 的區塊介紹頁面做的不錯,把所有區塊範本點過一輪之後,就更有概念要怎麼做出想要的效果。

最重要的是既然未來 WordPress 的重心發展會放在區塊編輯上,那麼習慣區塊編輯器的使用是未來必然面對的課題,早點上手有好無壞。

有 4,212 人閱讀過此文

發佈留言

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

Scroll to Top