如何讓某個段固定高度,若內容過長就自動出現捲軸呢?
簡介
讓過長的文字,不要大量佔滿整個篇幅,就可以用CSS語法讓它呈現一個捲軸,讓想看更多的人自己捲動。
運用範圍
常常用在最新公告、過長的引用文。
範例
2022-3-5 計畫決審Demo Day 圓滿落幕~恭喜「XX科技股份有限公司」、「DOMI 綠然能源」、「XX聚開發股份有限公司」成為首屆計畫先行者(Pioneer),並恭喜「XX股份有限公司」獲頒評審特別獎,4組團隊預計於今年12月的成果發表會展現執行成果!
2022-2-26 計畫決審Demo Day邀請您一同參與「大眾投票」!! 歡迎至「關於我們」的分頁中瀏覽本次提案團隊簡介,並認識10組團隊的創新援助行動,即日起至 3/5(六)最後一組團隊提案報告結束前,來為自己最喜歡的永續行動投下關鍵性的一票吧!支持提案團隊落地實踐創新行動!投票通道:https://forms.gle/XXXrMkx2vDnyCA
2022-2-16 決審Demo Day 民眾入場報名開跑了!活動將於03月05日之13:00~18:30在松山文創園區-台灣設計研究院之TDRI創意劇場舉辦,活動現場將分為「簡報區」以及「策展區」,歡迎民眾到場共襄盛舉!請由下列網址進行報名: https://www.accupass.com/go/XXay
2022-2-09 加速實驗室(Acceleration Lab)第六場培訓課程,上午的「氣候計畫與商機經驗談」課程提醒團隊在氣候變遷中找尋商機外也須增加應對其影響的韌性;下午的「中小企業發展計畫與商機經驗談」課程提醒團隊要從產業價值鏈的角度協助中小企業發展並解決融資困難的窘境。
原理與思路 :
原理就是用CSS來限制區塊的高度後,並在overflow屬性上下達要出現捲軸的指令。
實作
1、在想增加捲軸的段或欄或文本編輯器中,切換到「進階」,並如上CSS類別的命名。

2、在該頁左下的設定/進階中,在自訂CSS樣式中加入下列CSS語法即可。

當然了,此CSS語法你也可以從其它可以管理CSS的地方來加入,只是若只是針對這一頁要做處理,我就是習慣在這一頁裡面加入CSS即可,沒必要做全站式的CSS的加入。
._overflow{
height: 350px;
overflow-x:hidden;
overflow-y:auto;
}
/*for 手機*/
@media(max-width:480px){
._overflow{
height: 190px;
overflow-x:hidden;
overflow-y:auto;
}
}
總結
這個方式有時候不僅限用在Elementor,就算是一般的區塊編輯器,若幫加上CSS類別命名後,一樣可以產生作用。
如何讓表單的月曆上的日期,「今日與過去」的日期統統不能選呢?
簡介 :
Elementor Pro的聯絡表單欄位可以設定成「月曆」讓人選日期,但如何做才能讓「今日與過去」的日期都統統不能選呢?
運用範圍 :
有時候在Elementor表單來做簡單的預約功能時,就用的到這樣的需求,怕訪客誤選了過去的日期,造成預約到錯誤的日期引起混亂。
範例 :
請測試一下,請把表單的「日期」那欄點開確認一下過去的日期是否不能選了呢?!
說明 :
我們透過Chrome瀏覽器的開發人員模式可以觀測出若是今日的日期,它的CSS的class會比其它日期多了「.today」,所以我們就寫一段小jQeury程式,把CSS類別是「.today」的「之前的兄弟元素」都加上另一個新的CSS 自訂類別名稱為「.disabled 」,我再替「.disabled 」寫幾句css語法來達到禁選的效果。
若無法理解也沒關係,就照做就行了!
實作 :
付費內容,需支付 : 400 個學習幣
您須先登入會員以使用學習幣與發問功能。總結 :
或許有人會覺得就算不是用做「預約」的目的,也是一樣把過去的日期都隱藏起來好了,因為大部分的目的都是為了選未來某個日期,但有些情境例外,例如是「客訴表單」時,就不能鎖住過去的日期,因為可能該欄是要讓人填「發生時間」,所以使用上仍要看真實情境再決定是否要讓過去的日期「禁選」。
如何讓Elementor文章列表標題前面可以自動加上數字順序?
簡介
Elementor Pro的文章工具可以用來製作部落格文章清單,但若文章列表改成無「精選圖片」的純標題,感覺上視覺有點單調,所以可以加一段小語法讓文章標題列表前面有1234的順序,讓視覺上比較有順暢感。
運用範圍
只要是Elementor Pro內建的Post文章工具所產生的文章列表都可以使用,一般會用在「最新公告」或「最新文章」之類的。
範例
文章標題前面都會自動加上數字的順序。

原理與思路
這個是利用CSS的一個計數功能,父元素用counter-reset聲明一個計數器,然後子元素通過content屬性和counter方法來使用這個計數器。
可以不懂沒關係,只要複製貼上就會有效果了。
實作
在Elementor 的文章先設定成沒有圖片的純標題。
在Post文章工具的進階/自訂CSS樣式 或 左下角齒輪設定中,貼上下列CSS語法即可。
/* 文章標題前面可以自動加上數字順序 */
.counter{
counter-reset:num;
}
.counter a::before{
counter-increment:num;
content:counter(num) ;
border:1px solid;
padding:3px 5px;
background:#009ee2;
color:#ffffff;
}
你可以再自己修改CSS中的一些數值,例如背景色(background),或border-radius(弧度100%)改成圓形、font-size等等。
影片
總結
這是比較粗淺的小技巧,所以如果文章多篇有分頁,點擊分頁後的文章列表仍是從1開始數喔,這一點要特別注意。
如何切版時切出無限的inner section(大段無限往下包小段)?
簡介
Elementor的工具有一個叫「inner section」我在幫學員上課時,我自己給了個名稱叫「大段包小段」,它預設只能2層,也就是大段只能在它內部包一個小段,而小段裡面就不能再包更多層的小段了(inner section),但我試出一個方法很有趣,如下面的範例圖,我可以包很多層的小段(inner section),似乎可以無限下去。
運用範圍
複雜的切版,尤其是在首頁須放大量資訊時常會可能會有機會用到。
範例

原理與思路
略。
實作
文字說明可能不易表達,直接見影片。
影片
總結
這種更細的切版一般是不會用到,除非是同一頁中想把較大的資料量很精細的分配在不同的大小區塊,才比較有可能會用到,另也有其它擴充外掛可以做到同樣的效果,有機會再另寫一篇。
2022/8/2 補充 :
新版的Elementor已開放「Flexbox Container」的方式來排版(須在後台手動打開此設定 : Elementor/設定/Experiments),在「Flexbox Container」的模式就沒有「段、欄」這種區塊,用「Flexbox Container」的方式來切版就可以在大容器中無限往下包小容器了!
不過「Flexbox Container」的排版模式比較進階,對新手恐不易上手,新手仍建議先以傳統的「段、欄」來排版就好!
如何點擊文章(post wiget)分頁時,網頁載入後可以自動滑動到該文章區塊的開始處呢?
簡介 :
Elementor的 Post Wiget(文章列表)有時候是放在網頁比較中小的位置,所以當讀者點下分頁時,整個頁面會重新載入但載入完後會停留在頁面開始處,所以必須手動再把頁面往下捲動到Post Wiget(文章列表)處的區塊才看到的分頁資料,這在使用體驗上並不是很好的體驗。
運用範圍 :
只要是Elementor中的Post widget或是product list,具有分頁的元素工具,都適用。
範例 :
下列的文章列表的下方有分頁,可以試點看看,它會在頁面重新載入後自動把畫面定位在文章起始處的區塊。
「GA流量統計」是Google的免費服務之一,所以其數據有一定的客觀性與公平性。
免費版外掛一律免下載直接從網站後台搜尋安裝。 外掛資訊 【外掛名稱】 : Int
如果你是接案人員,幫客戶代申請Cloudway主機且是綁自己的信用卡,若是每月代
首先當然是得有PayPal帳號,然後按照下方流程即可取得PayPal的串接憑證給
原理與思路 :
可以用「錨點」的方式,就可以讓頁面滑動到Post Wiget(文章列表)的區塊。
所以可寫一段jQuery在網頁載入時幫每個分頁的網址都加入一個錨點,例如幫每個分頁的網址加入「#list-top」,然後把那個post widget設一個ID叫「#list-top」,這樣有人點分頁時在網頁載入時之後就會自動滑到Post Wiget(文章列表)了。
實作 :
1、設定CSS ID
先幫Post Wiget工具設一個CSS ID,例如:「list-top」。

2、在此頁任意處拉一個html工具,或把html工具拖拉至該post widget的下方,再貼上下列語法即可。

總結 :
一般而言是用ajax的方式才會讓畫面不重新載入與移動可以獲得分頁的資料,但若沒有使用ajax或不會ajax的技術的話,這個方式就可以有類似效果了。
Elementor無法順利載入完成的可能原因搜整
簡介 :
Elementor無法順利載入完成或出現一些錯誤警示,可能的原因滿多種的,就把遇過的記錄在此,供debug時有個參考方向。
可能原因 :
| 錯誤或警示 | 可能原因 |
|---|---|
| 一直呈現載入中 | 這是最最最常見的,一般都是「外掛衝突」,請配合「Health Check & Troubleshooting」外掛來停用所有外掛試試。 |
| 500 error | 存檔時出現。一般是主機資源不足。 一台主機下面架太多個網站,造成Elementor沒有足夠的資源可以使用。 |
| 403 error | 防火牆「Wordfence」的影響。 防火牆Wordfence的「學習模式」打開就好了,並可以設定讓他自動學習七日,在學習模式的七日內你再去做Elementor的存檔,它就會學起來知道你這是正常動作,就不會再擋你不讓你存檔了。 |
| 仍呈現載入中 | 「GTM] 代碼先停用,或改埋在「footer」中試試。 |
總結 :
老實說,可能的原因有很多種,我也是在遇上時剛好有機會可以順便記錄下來,如果網友們也有類似的情況與解決方式可以分享,歡迎在下方留言。
概說Elementor情境題
Elementor雖是很方便可以讓我們快速完成頁面佈局、切版,並且有許多現成元素工具可以拖拉至網頁中使用,故大部分的需求都是可以用此方式得到效果,但有時候為了滿足老闆、業主、客戶的更高客製化的要求,有時候Elementor編輯器中現有的功能無法百分百達成,此時有時候還稍微需求一點程式能力輔助,例如常前的前端程式語法 : jQuery、CSS,透過一點點程式語法可以讓我們的Elementor更加千變萬化,有更高的彈性應付各種客製化的需求。
本分類命名為「Elementor實戰情境題」,就是把我在接案這幾年應付業主不同需求時而研究出來的實戰作法的筆記,或許我的方式並不一定是最佳的,也可能讓一些工程師前輩們見笑了,但至少「效果」是達到了,凡先求有再求好嘛!
「Elementor實戰情境題」主要都是以前端程式「jQuery」、「CSS」為主,有些很簡單只需一兩行就可達到想要的效果,如果真的看不懂程式語法的原理也沒關係,直接複製貼上,效果就會出來了!
「Elementor實戰情境題」比較偏單一情境式的教學,所以不用從第01開始看,只要選自己需要的情境的那篇來讀就可了!
GO !
佈景主題(Blocksy)的自訂設定可以調整哪些?
前言
很多免費主題的「自訂」都很陽春,控制力不高,而Blocksy這套主題的自訂,不但是中文介面,而且可以讓你僅靠設定,就設定出一個能立即上線的套版文章型的網站。
如何進入自訂?
方式有二,
方式1 : 從前台
從前台任一頁面點上方的「自訂」

方式2 : 從後台
從後台的外觀進入自訂

常會設定的項目
「自訂」中可設定的項目非常多,一般我們只會設定一些常用的,有許多看不懂可暫不理會,有空再自行玩玩看。
下表概說之:
表1.頁首區(head)、頁尾區(footer)的設定調整
| 名稱 | 說明 |
|---|---|
| 一般選項/頁首/選單1/設計 | 調整選單1號字體大小、顏色。 |
| 一般選項/頁首/選單2/設計 | 調整選單2號字體大小、顏色。(有需求時可加放第2組次選單) |
| 一般選項/顏色 | 全站主色之配色。(調色盤) |
| 一般選項/排版樣式 | 全站之預設字體大小調整。可先都預設值就好,有需要再來調。 |
| 一般選項/頁首/社群 | 拖拉加入社群圖示。 |
| 一般選項/一般/社群媒體帳號 | 填入自己的社群帳號的主頁網址。 |
| 一般選項/頁首/標誌 | 頁首的Logo圖。(Demo Logo圖下載) |
| 一般選項/頁首/標誌/切換手機狀態 | 調整手機選單的樣式。 |
| 核心/網站識別 | 瀏覽器列上的網址小圖示,可以與Logo用同一張圖或另製圖也可。 |
| 一般選項/頁尾(footer) | 修改版權資訊(可任意修改)。 或再加入一些小工具或資訊。(下一章節講解小工具) |
表2.Body區(部落格版面)之設定調整
| 名稱 | 說明 |
|---|---|
| 內容類型/網誌文章 | (1)調整→「首頁」文章列表的「版型」。 (2)視需求勾選「頁面元件/資訊欄」(點小箭頭設定左或右)。 (3)卡片提示效果→列表載入時會由下往上切入。 |
| 內容類型/分類 | (1)調整→分類文章列表的「版型」,即點某一分類後的版型。 (2)視需求勾選「分類元件/資訊欄」(練習時都先打開)。 (3)卡片選項→可點進去視需求勾選。 |
| 內容類型/單篇文篇 | (1)調整→單篇文篇的「版型」,即點開某篇文章之全文版型。 (2)視需求勾選「文章結構/資訊欄」(練習時都先打開)。 (3)文章元件、頁面元素裡面的選項可先全都打開。 |
在目前尚未脫離套版的狀態,這裡務必動手做看看。
「資訊欄」裡面的設定,下一篇再介紹。
(以上待補上影片做示範)
註 : 如果不會設計Logo,也一時無預算找人設計,可以參考此篇。
20_建立主選單
前言
建立好「頁面」之後,在首頁仍然無法切換點擊我們建立的頁面,故仍要透選「選單」讓每一個頁面都進入到選單才能在首頁上方的選單區被看到每一頁面的名稱。
WordPress網站的主選單,是整個網站架構建立的第一步,為了方便一開始有基本選單可以切換瀏覽,我們把剛剛建立好的頁面拖拉至「選單」中。
1、建立主選單名稱
如下圖,在「外觀/選單」中,先建一個叫「選單01」的選單,以後可以視情況建立不同的選單名稱以便直接切換套用。

2、拖立頁面名稱至右側

3、排序選單
右邊的選項可以上下拖動,排出想要的順序再按下儲存選單。

4、移除選單
每個選項右邊有個小箭頭,可點開做編輯或刪除這一個選項。

5、建立「自訂連結」選項
除了我們站內的頁面,你也可以讓選單的選項也可以出現一些外部的連結。
自訂連結用法 :
| 輸入什麼 | 效果 |
|---|---|
| 輸入「/」 | 代表是根目錄,點擊後會連往首頁。 |
| 輸入「#」 |
|
| 輸入任意網址 | 代表是有效的連結,可以連往所指定的網址。 |
(1)建立一個連往外部平台的連結
這邊以蝦皮賣場( https://shopee.tw/ )為例:

(2)外部連結設成「另開分頁」
另外,因我的賣場是會連往外部的網頁,所以我們會比較希望用「另開分頁」的方式來打開此連結,所以你可以參考下方設定來達到另開分頁的需求,請拉至頁面最上方點擊「顯示項目設定」。

▼「我的賣場」選項右邊有個小箭頭,可點開做編輯。

6、完成後預覽
透過另開新分頁的方式來「造訪網站」,來預覽一下我們的前台是否有主選單的出現。

你可把每個選項都點看看,是否有發生什麼變化?
7、總結
以上就完成了初期的選單建立,當選單裡面的項目較多時,我們也可以再透過拖拉排序方式另組成「下拉式選單」。
- 在「自訂連結」中,輸入「#」代表什麼?→ 空連結,點擊下去則不會跳轉網頁(停留在原頁上方)。
- 在「自訂連結」中,輸入「#」可以用來當成下拉選單的上層名稱。

