【Wordpress】Enfold佈景主題介紹

Enfold是一套付費的wordpress佈景主題,網路上的教學資源遠不如Elementor多,一方面可能因為功能較簡略,一方面可能不像Elementor、Oxygen『所見及所得』的操作方式,而是需要一些『想像力』,使用門檻較高,但它也有一些相對而言的優勢,讓我們繼續往下瞭解:

一. Enfold的優缺點

1-1. 優點

  • 輕量、載入速度快
  • 製作手機版很有效率
  • 多一個Portfolio Items資料表可與文章分開運用
  • 內建基礎的GSAP及AOS動畫,還有許多特殊元件
  • 購買常規許可證,一個網站授權永久有效

就個人用戶來說,價錢上enfold比elementor划算不少,elementor不僅是年約,還在漲價的路上。

1-2. 缺點

  • 能調整的屬性較少(外觀比較不靈活)
  • 教學資源較少
  • 切版方式須在後台對照位置,需要想像力不易上手
  • 自訂版型功能尚不齊全
  • 大多使用舊的CSS float語法

不管是enfold還是elementor,特定佈景主題一家獨大的關係,目前仍有萬年bug,例如elementor在版本更新後會出現雙重選單,或enfold文章列表無法真正實踐類別篩選等(Elementor目前此篩選功能也尚未完善,只能仰賴其他elementor附加外掛)。雖然是滿基礎的功能,卻難以避免dynamic data取用上的瑕疵,只能說比較適合做形象網站。

二. Enfold設置

2-1. 基本設定

與原本wordpress一般設定大同小異:

  • 輸入網站名稱及描述
  • 指定網站首頁及部落格頁面
  • 指定網站識別圖片:分別為為Logo和Favicon

2-2. Layout版型設定

在Enfold的General Layout頁面中,你可以選擇標準的選單置頂,或改為左右選單。
儘管Elementor也能製作左右選單,但必須用範本(template)製作,然後發布於所有頁面。

Elementor範本製作有高度彈性,而Enfold須藉由小工具(widgets)來設定想展示的內容,前者利於客製化,後者快速。

2-3. 全域顏色設定

General Styling 裡面,可以針對不同區塊(頁首/主要內容/頁腳…等)設置主要/次要/強調的顏色。最上方的 Select A Predefined Color Scheme 提供好幾款預設配色組合,供使用者直接套用。

enfold_general styling color-set

若想要客製化CSS,也能在General Styling分頁下方,找到Quick CSS,就能在欄位中輸入自訂的全域CSS。

enfold_custom_css

2-4. 全域樣式/元件設定

Advanced Styling進階樣式分頁用於設定常用HTML標籤及元件樣式,舉例來說:H1~H3等標題標籤,或是主選單的連結(Main Menu Links)樣式,按鈕樣式等…,會於網頁上重複出現的東西,在此分頁預先設定可加速作業流程。

在Elementor中,對應功能位於網站設定>佈景主題樣式中。值得一提的是,全域字型與排版樣式不同,全域字型是自訂字型樣式名稱進行套用,排版樣式直接套用於全域的<H1>~<H6>標籤上。

三. Enfold的區塊

Enfold的外框有三種,在Elementor中對應的元件為Container和Grid,不過屬性設置略有差異:

3-1. Enfold的3種外框

  1. Color Section:一般外框,有最大寬度,置中且不會佔滿整個畫面。
  2. GridRow:網格外框,寬度100%,會佔整個畫面。
  3. TabSection:分頁外框,顧名思義就是做切換分頁的外框。

3-2. Enfold的欄位(column)

外框中如果要使內容水平排列,可以放置column,預設的寬度選項只有相對值,一欄100%、1/2、1/3、1/4或1/5等數字。

column欄位仍使用CSS2語法,若水平欄位高度依據各自內容,使用float:left;進行水平排列;
若水平欄位等高,欄位父層會被一個外框(.flex_column_table)包裹,並使用display:table與display:table-cell屬性進行等高排列,應用上不太靈活。

如果要使用FlexBox,需給外框 display:flex; 屬性。

四. Enfold的垂直置中

垂直置中的方式,依據選用的外框不同有所變化,使用GridRow外框時,單元格(Cell)可以直接選擇將內容置中。

然而,最常見的方法是利用水平欄位(column)使內容垂直置中,因為三種外框內部都能放置column,使用率相對的高很多。
此方法必須點選水平欄位中的第一欄編輯,點選第一欄以外的欄位,不會出現Row Layout選項(看不到下面示意畫面),選擇欄位等高後,再選擇垂直置中對齊。

順帶一提,根據上圖Row Layout可以設定的內容,可得知水平欄位之間的間距,也是在第一欄進行設置。

五. Enfold手機版順序對調

有一種常見的網頁排版方式,在桌面板時呈現圖文交錯的模樣,如下圖所示:

這種交錯水平排列方法,可以增加視覺豐富度又不失規律;
但手機版寬度變窄、自動轉為垂直排列後,原本的順序也會『繼承』到手機版,因此我們需要將部分區塊的內容順序倒轉。

要怎麼做才能倒轉垂直排列的順序呢?

答案與前一章節類似,如果要倒轉的是水平欄位,這也是第一欄才能設定的內容;在Row Screen Options中選擇Reverse order,就能在手機版欄位占全寬時倒轉,使閱讀順序看起來合理。

如果要倒轉GridRow外框內的單元格(Cell),則點選整個GridRow外框的編輯>進階>Responsive,然後選擇Reverse order。

六. Enfold的單篇文章樣板

根據官方文件的說明,在6.0版以後可以自訂版型及動態內容,動態內容的元件確實新增了不少,例如標題元件可以直接取用頁面Title或其他資訊,不需要一個個重打。

至於版型嗎……觀看教學影片,會發現需要借助其他外掛來達成,用外掛建立新的資料表,而非更改舊有的文章版型,因此彈性度不高。

較麻煩的是,需要一篇篇到進階編輯器,點選Custom Layout套用做好的版型,好像比修改全靜態內容方便一點(就那麼一點),但大幅更改使用者原本的操作方式,不知道意義是什麼?為什麼不直接針對文章類別或所有文章套用版型呢?也許直接改CSS及佈景主題更快呢?

七. Enfold的特殊元件

7-1. Before | Afrer 元件

整型廣告常常會有整形前後的對照圖,而這個enfold元件是有互動效果的,訪客可以拖曳箭頭查看兩側圖片,也能改成垂直拖曳。

7-2. Lottie Animation 元件

Lottie近年作為網頁動畫可以算是非常火紅,可以用AE製作並匯出成json格式,輕量又不會有解析度的問題,又能做出較精細複雜的動畫,是以前gif動圖的良好替代方案。

7-3. 熱點圖元件

此元件用於標示圖片上的熱點,又附帶擴散效果的小動態,十分實用。

    【Elementor】影片元件能放youtube短影音(shorts)嗎?

    第一次有Elementor影片元件能否放短影音的疑問,是在工作中被問到,即使一般的影片能放,但畢竟短影音的『網址』跟一般Youtube影片不同。直接將短影音的網址複製貼上是不行的,查找了一番後,確定只要改格式就能放。

    1. 更改網址格式,就可以放短影音

    範例:若短影音網址為 https://www.youtube.com/shorts/HEAMuXYIfFM 或後方有 ?feature=share ,不論哪種,以此範例來說,影片代碼就是『HEAMuXYIfFM』,以下修改請把範例的代碼部分換成你的影片代碼。

    把網址改為以下兩者其中之一:

    方法1影片代碼前縮減為 https://youtu.be/https://youtu.be/HEAMuXYIfFM
    方法2把 shorts 改為 embedhttps://www.youtube.com/embed/HEAMuXYIfFM
    Elementor影片更改短影音網址

    這兩種格式的shorts網址,才能順利嵌入Elementor的影片元件。

    2. 符合短影音比例的播放環境

    2-1. 長寬比改為9:16

    到影片元件的樣式分頁,將長寬比改為9:16(直式),啟用燈箱時才不會壓縮到畫面範圍。

    Elementor影片封面設定-9比16
    Elementor影片封面設定-9比16

    2-2. 幫外連影片換個好看的封面

    嵌入外連視訊(如 youtube、Vimeo等)時,來源網站的影片撥放UI會一起出現,會讓外觀看起來很雜亂。為解決這個視覺上的問題,只要啟用內容分頁『圖片覆蓋』的控制項,就能使用自己上傳、簡單乾淨的封面,提高影片區塊的一致性。

    另外,還能更改或上傳自定義的播放圖示。

    Elementor影片封面設定-啟用圖片覆蓋

    【Elementor Pro教學】如何使用Loop Builder打造完美文章列表

    本篇文章將介紹 Elementor Pro 的 Loop Builder 功能及其應用,幫助你打造彈性又美觀的文章列表,如果你有使用WooCommerce,還能進一步應用在商品列表。

    Loop元件和其他動態內容功能,只能在 Elementor Pro 上使用,如果對寫程式或更改佈景主題不熟悉,但希望實現理想的版型,Loop元件可以提升文章列表和跑馬燈的客製化自由度,因此購買 Elementor Pro 是值得的投資。

    1. Loop Builder 元件是什麼?

    在 2022 年底,Elementor 發布了一篇文章介紹其新功能:【Loop Builder】。

    一個LoopItem按照所有文章數量循環出現

    這個功能允許你將客製化的「單元」格式應用到網格(Loop Grid)或跑馬燈(Loop Carousel)中,使這些單元重複出現。此功能提升了 HTML 排版的彈性,不再受限於 Elementor 舊元件的框架。

    套用文章/商品動態內容的意思是…?

    更新文章或商品後,某個文章列表或跑馬燈區塊也隨之更新,就是動態內容;反過來說,如果區塊沒有隨之更新,而要手動去修改,代表內容沒有跟資料庫連動,就是靜態的。

    Elementor Pro 能讓使用者套用動態標籤(變數)到元件,以文章的格式來說,動態標籤有:標題、特色圖片、摘要、內容、類別、標籤、日期、作者,還有其他自訂欄位,這些內容都可以在元件中套用。

    2. 實做應用

    如果你發現 Elementor 的原有元件架構無法滿足你的需求,可以按照以下步驟進行 Loop Builder 客製化:

    2-1.前往後臺建立「一個單元」的範本

    1. 後台>範本>新增
    2. 版型類型選擇「Loop Item」,來源類型選擇「文章」,為版型命名後按下「建立版型」

    接著進入Elementor的編輯模式,進行此單元的編輯。

    2-2. 範例:建立兩個水平排列的欄位,左邊放「特色圖片」元件

    選擇Loop Item範本的特色圖片元件
    每篇部落格的特色圖片(文章封面)都是不同的,若要呈現動態的內容,就不能放一般的圖片元件,不然會出現一樣的圖片喔。另外,讓欄位出現動態內容圖片的方法不只一種,若欄位右側有這個資料庫圖示,代表他可以套用動態內容,自信的點下去,選擇你要的動態標籤吧。
    Elementor元件若有提供動態標籤(資料庫ICON)

    若要讓圖片以正方形方式呈現,你可以點選特色圖片元件>「內容」分頁>圖片尺寸為「自訂」寬高,它會在等比例的前提下,把多餘的部分裁切掉。

    Loop Item特色圖片比例變更

    2-3. 右邊欄位放「文章標題」、「文章資訊」元件

    文章標題元件沒什麼特別好說的,動態內容就是文章標題。至於文章資訊元件,可以透過下拉選單選取要套用的動態標籤,此範例選擇套用『類別』、『自訂欄位』。

    Loop Item文章資訊-文章動態內容套用

    文章資訊元件類型點選「分類項目」,並點選「分類法」的格子,選擇「分類」。

    Loop Item文章資訊-分類項目

    其他文章資訊也比照設定,完成「一個單元」範本後記得存檔。

    2-4. 套用 Loop Item 範本

    新增Loop grid或Loop Carousel元件,選擇剛剛做好的Loop Item範本,就會看到文章列表用範本的排版方式呈現,既美觀又和別的網站不同,是不是很有成就感呢?

    Loop grid套用Loop item文章

    3. 為了 Loop Builder 購買 Elementor Pro 值得嗎?

    如果你覺得一年費用較高,可以考慮是否有合租的管道。但需要注意的是,合租會有共用帳號的麻煩,且無法保障資訊安全,因此建議確定好用後自行購買較為保險。

    如果你對 WordPress 的佈景主題架構有一定了解,可以參考【wordpress套件】不需要編輯器!自訂你的文章列表,該文說明了更高彈性的修改方式,可能比Elementor Loop Builder 更適合你的需求。

    Elementor Bug –– header出現2個選單,無法收合怎麼辦?

    這是一個Elementor常見的BUG,常見於版本更新後,Elementor設定跑回預設值,就會出現這種狀況。

    以下提供兩個方法:

    1. 重新生成CSS

    到wordpress後台>Elementor>工具>一般

    Regenerate CSS & Data > 點選『Regenerate Files & Data』

    此方法比較不便,每次改動header後都可能都會出現雙選單,需要重按生成按鈕。

    2. 找到其他自訂斷點(Additional Custom Breakpoints)並改為不活躍(inactive)

    到wordpress後台>Elementor>設定>Features>

    接著往下找,找到Additional Custom Breakpoints這欄,把下拉選單改為Inactive後存檔。

    這個方法比較持久,除非下次Elementor更新設定再度跳掉,才會需要重新變更。