ALL POST - 架站勤拿手

[字型]Elementor常見字型的選擇

2024-12-22 尚無留言

簡介

在Elementor中，不管是標題、內容編輯器、按鈕…都可自由選擇字體，這邊把覺得不錯的字體記錄在此，以便設計網頁時可選擇。

範例

以下範例文字中有中文也有英文，但有些字體可能僅支援中文或僅支援英文，請自行觀看範例中的文字的字型是否有所變化即知。

字型 : Noto Serif TC

天行健君子以自強不息，
地勢坤君子以厚德載物。

Practice makes perfect.

字型 : Caveat

天行健君子以自強不息，
地勢坤君子以厚德載物。

Practice makes perfect.

字型 : Caudex

天行健君子以自強不息，
地勢坤君子以厚德載物。

Practice makes perfect.

字型 : Zen Loop

天行健君子以自強不息，
地勢坤君子以厚德載物。

Practice makes perfect.

先整理這些，再慢慢補上。

總結

有時候選用不同的字型，會讓網頁呈現不同的感覺，特別是在網頁文字中有「英文」時，建議可另選其它英文字型來比較看看。

[空白間隔]可用做不同的變化，例如點綴背景

2024-12-22 尚無留言

「空白間隔」，一般只被用來做一個元素與元素之間的間隔，實際上它也可以多種延伸變化的。

[空白間隔]可用做不同的變化，例如點綴背景-1

一、用途1:做成點綴背景

如下圖，可以利用空白間隔做出一個小純素背景，然後點綴在區塊容器的四周，或微微去壓到文字，製造出立體感。

[空白間隔]可用做不同的變化，例如點綴背景-2

作法提示:

1、在要製作點綴背景的容器中，拉一空白間隔，並調整適當寬度。

2、替空白間隔設一純素背景。

3、把空白間隔設定「寬度為○○px」。(進階/寬度/自訂)

4、把空白間隔設定「絕對定位」。(進階/位置/絕對)。

二、用途2:做成幾何圖形

可製出大小不同的幾何圖形，例如圓形，製完後亦可與用途1一樣來當綴網頁。

[空白間隔]可用做不同的變化，例如點綴背景-3

作法提示:

1、在要製作點綴背景的容器中，拉一空白間隔，並調整適當寬度(控制圖形大小)。

2、替空白間隔設一純素背景。

3、替空白間院設定「Mask」，選擇圖形。(進階/Mask/形狀)

4、把空白間隔設定「絕對定位」。(進階/位置/絕對)。

5、或是把空白間隔設定「固定定位」，把圖形製小比例後固定在整個視窗的邊緣適當處。(進階/位置/固定)。

—

空白間隔尚可做出其它圖形:

請在『transform」中自行變化。

[空白間隔]可用做不同的變化，例如點綴背景-4

是否有「Figma匯入WordPress或Elementor」的方式呢？

2024-12-22 尚無留言

有些人會想問是否有「Figma匯入WordPress或Elementor」的方式呢？

初期我是回答「沒有」，但想不到在國外外掛商有開發出來，可參考:

https://uichemy.com/help/figma-to-elementor/

是否有「Figma匯入WordPress或Elementor」的方式呢？-1

這是一支付費外掛，我尚未有使用過的經驗，也不知匯入後真的無縫接軌，或是有許多細節仍得再一一重製過？推測應不太可能無縫接軌，這種從另一平台導出再匯入另一平台的未知變數太多了，例如WordPress常常在更新改版，有時候版本不一樣在從Figma匯入後或許就會有新的落差。

再來，若是在Figma上設計複雜的排版或繁多的元素，在使用Figma匯入WordPress或Elementor時，可能會有更大的落差，目前網路上文章很少人介紹這類的用法，可能真的沒那麼好用吧!?

我個人是不偏向在Figma直接設計網頁再導入WordPress的作法，我偏向把Figma當作是「設計初稿」與客戶溝通視覺版面，在版面定案後再正式從WordPress中使用Elementor編輯器去按照Figma的稿圖來切版，我也問過資深有在使用Figma的同行，他也是如我上面所說，僅用來當作是「設計初稿」使用而已。

08_原本正常卻突然在某一日頁面版型全跑版走鐘

2024-12-20 尚無留言

用Elementor做的網頁，每一日原本都很正常呈現但卻在某一日突然每一頁版面都走鐘了、區塊元素都跑出原本的位置、甚至連色彩也都變成不是原本所設計的顏色了，這個情況出現機率不高，但出現時我們可以先做2個動作，若這2個動作仍無法恢復正常，再來尋其它原因。

1、重新產生Elementor樣式檔案

如下圖點擊，讓Elementor編輯器重新產生樣式檔案。

08_原本正常卻突然在某一日頁面版型全跑版走鐘-1

2、關閉Elementor的內建快取

用WordPress架站幾乎每個站都會安裝快取功能以提升網頁速度，但Elementor也有自己內建快取，故若兩種快取功能若同時啟動，有時候就會造成版面異常，故快取功能僅能保留一種即可。

以下圖方式，即可關閉Elementor的內建快取。

08_原本正常卻突然在某一日頁面版型全跑版走鐘-2

若以上兩個動作完成後版面仍異常，此時再來思考是否其它因素造成，例如最常見的就是近期可能更新某某外掛後所引起、或是有自行插入自訂程式碼之類的原因。

WordPress的五種角色預設權限

2024-08-29 尚無留言

這是WordPress預設的五種角色權限，若有替網站後台設多個使用者，請給予「適當的角色」，不要清一色都給「管理員」權限喔，特別是公司給予員工新創帳號時，不要一下子就給到「管理員」的權限。

另基於資安考量，也不要把管理員權限給予太多人，避免有人在不同電腦或家裡電腦中毒時造成管理員的密碼外洩。

角色權限名稱	預設權限	備註
訂閱者	只有閱讀權限，可以修改自己的個人資料，例如暱稱、聯繫信息、密碼等。	如果是電商網站，會再多一個「客戶」的權限，而客戶的權限與訂閱者基本上是一樣的，只是名稱不同。
寫手	具有訂閱者的所有權限。可以發表文章，但需要經過管理員審核後才能在前台上顯示出來；對待審核中的文章可以編輯，但對已通過審核的文章不能編輯。
作者	具有投稿者的所有權限。發布文章不需要審核，並且可以編輯已通過審核的文章，還可以上傳文件和使用媒體庫。
編輯	具有作者的所有權限。可以對文章標籤、分類進行管理，可以添加或編輯頁面、可以上傳文件等等。編輯擁有除系統功能設置外的所有權限。
管理員	可以控制用戶寫文章、創建頁面、管理插件、管理主題，以及管理其他用戶的權限。管理員可以通過後天分配用戶權限。另外，管理員還可以刪除管理員！所以這個權限的角色務必要保護好！

一般公司給員工的權限，若不知該如何選，就給到「編輯」就好，這樣讓他寫文章、做文章分類、上傳圖檔等，應就很夠了。

以上是預設權限，除非經過「客製化」設計，不然一般就以上述為主，經過客製化設計就可以把權限精密的分級與套用，但一般性網站以上述權限分級就很夠用了。

不推薦這套多國語系外掛『Translate Multilingual sites – TranslatePress』幾個原因

2024-08-10 尚無留言

前言

多國語系外掛，有好多種選擇，每一套都有優劣之處，但這套『Translate Multilingual sites – TranslatePress』我使用了2次在客戶網站上，有點心得讓我覺得不再使用，也不推薦。

不推薦這套多國語系外掛『Translate Multilingual sites – TranslatePress』幾個原因-2

不推薦原因

這套『Translate Multilingual sites – TranslatePress』看上去很直覺，直接對照原文並輸入譯文即可，一開始會覺得翻多國語系超方便!

不推薦這套多國語系外掛『Translate Multilingual sites – TranslatePress』幾個原因-5

但實際使用與後續管理上有一些原因讓人覺得很不方便 :

以Elementor製作中文版網頁再加製英文語系來說明，如下:

1、版型

這套『Translate Multilingual sites – TranslatePress』的多國語系的架構處理上，它雖可呈現多語系但同一頁面或同一文章的id都不變，也就是在同一網頁上去輸入譯文，故版型上也是同一個，~~無法讓你在英文版型上來個別調整英文版的版型~~。

這會造成，若英文版的有些區塊不想呈現，只能寫jQuery去判斷當下這頁是英文版然後再把想隱藏的區塊隱藏。

或是英文版的因英文單字過多過長，造成版型排列上想做一下不同排列方式(例如左右並排改成上下排列))，很抱歉也無法，因它與中文版共用版型，故不支援單獨調整英文版頁面的版型。

2、修改中文會讓英文的譯文消失

假設中、英文已完成翻譯，但中文字句原有10個字，在中文字句第2個字後面再加上一個字，則此段中文字在已翻好的英文字句上，整段英文字句會消失，須再進入英文頁再把譯文重新輸入，這一點我覺得很不方便。

原因也是與第1點所述有關，它中文與英文並非是獨立的2頁。

3、點閱統計

如第1點所述，它中文與英文並非是各自獨立的1頁，故點閱統計的外掛無法個別統計中文、英文的瀏覽數。

總結

綜合以上幾點，下次製作多國語系時我不再考慮使用這一套。

在Elementor中自動播放音樂

2024-07-30 尚無留言

簡介

想在Elementor中插入一段自動播放音樂的語法，但是現在主流的瀏覽器都禁止自動播放了，但我們仍可透過jQuery來間接達成。

範例

下列播放器會自動播放 :

(先靜等幾秒讓音樂載入才有「自動播放」的聲音!)

原理與思路

用html原始語法，再用jQuery偵側當網頁的「body」(網頁任何一處)被點擊時，就連帶觸發自動點擊播放。

實作

拉html元素工具，再貼上下列語法即可。

				
					<audio class="myaudio" controls  loop>

        <source src="https://0800happy.com/wp-content/uploads/2023/07/%E9%99%B8%E8%BB%8D%E8%BB%8D%E6%AD%8C-%E6%BC%94%E5%A5%8F%E6%9B%B2.mp3" type="audio/mpeg"/>
        Your browser does not support the audio element.
</audio>

<script>
( function($) {
$(window).load(function() {
//======================================

 $("body").one("click", function() {
                console.log("Auto play");
                var audioElement = $(".myaudio")[0];
                audioElement.play();
                $(".myaudio").click();
            });
   

//======================================
}); //end load
})(jQuery);
</script>

以上的程式碼，只會讓body被點擊的第一次觸發自動播放，不會連續觸發。

總結

自動播放有時候很擾民，並不是友善的作法，建議三思!!!

現在進場的是，陸軍586旅砲兵營營部連…

[切版]容器水平排列時之高度不等高的解法

2024-07-16 尚無留言

前言

有時候會把容器做水平排列的區塊，而每個區塊中有一些文字，當文字長度不一樣時就會造成「容器不等高」，嚴格說不是不等高，而是容器的高度沒有剛好被資料填滿，造成視覺上好像不一樣高。

範例

▼調整前

[切版]容器水平排列時之高度不等高的解法-2

▼調整後

[切版]容器水平排列時之高度不等高的解法-4

實作

更改主管理員Email的二個方式

2024-06-27 尚無留言

當網站初建立時的「第一個管理員」的Email會被當成是「主要管理員的Email」，網站各式通知信主要都會通知給這個信箱，若您想更換主管理員的信箱，有以下二個方式，可二選一:

方式一、建立一個新的管理員

1.創立新管理員(用您的信箱)

更改主管理員Email的二個方式-2

2.把原本主管理員刪除或降級

再進後台/全部使用者，找到原本的主管理員，可以把它刪除，或是點編輯，把它的角色改成較低權限(只要非網站管理員即可)，如下圖:

更改主管理員Email的二個方式-4

建議是先「降級」至最低「訂閱者」即可，這樣它就無法進後台了，也失去管理員功能，未來有必要再整個刪除它。

方式二:使用更改管理員信箱之外掛

如果沒有先照下方流程事先安裝一個「Change Admin Email」外掛，就直接修改主管理員的Email，那麼就會遇上需要驗證信箱的狀況，但若網站還沒有加入相關SMTP的發信服務驗證是無法寄出通知信的，故就會如下圖一直卡在那邊無法驗證，所以我們就可以透過「Change Admin Email」外掛來繞過驗證信箱這環節。

更改主管理員Email的二個方式-10

1、安裝外掛

後台安裝搜尋「Change Admin Email」，安裝成功後並啟用。

更改主管理員Email的二個方式-6

2、直接修改主管理員Email

外掛安裝好之後，才能進行這個步驟。

至後台/設定/一般，如下圖，直接輸入你想要的信箱，再點「Test」即可取代之，就不用像之前那樣尚須做Email驗證。

更改主管理員Email的二個方式-7

[圖片轉盤]如何讓「圖片轉盤」每張圖都有自己的連結呢？

2024-05-29 尚無留言

簡介

Elementor免費版本的「圖片轉盤」它預設無法替每張圖片都加上一個自己的單獨連結網址，

▼只能對所有圖片加上「同1個連結」而已。

運用範圍

一般可能會運用在一個圖對應一個商品的連結或一家廠商的連結時，運用上很廣。

範例

▼預設每張圖無法各別設定對應的網址

photo of three women lifting there hands

woman sitting on cliff raising both hands

four person hands wrap around shoulders while looking at sunset

▼經過一段語法處理後，每張圖可以個別對應一個連結(可點擊試試)

原理與思路

利用每一張圖片的「描述」欄位來輸入網址，再透過jQuery的each去把網址轉至每張圖上變成連結。

實作

付費內容，需支付 : 300 個學習幣

您須先登入會員以使用學習幣與發問功能。

總結

這篇是自己的心得經驗，需要學習幣才能閱讀，註冊會員後可免費得到100個學習幣

簡介

範例

總結

一、用途1:做成點綴背景

二、用途2:做成幾何圖形

—

1、重新產生Elementor樣式檔案

2、關閉Elementor的內建快取

前言

不推薦原因

1、版型

2、修改中文會讓英文的譯文消失

3、點閱統計

總結

簡介

範例

原理與思路

實作

總結

前言

範例

實作

方式一、建立一個新的管理員

1.創立新管理員(用您的信箱)

2.把原本主管理員刪除或降級

方式二:使用更改管理員信箱之外掛

1、安裝外掛

2、直接修改主管理員Email

簡介

運用範圍

範例

原理與思路

實作

付費內容，需支付 : 300 個學習幣

總結

章節

7 個訪客 正在線上

4 個檢索機器人 正在線上

7 個訪客正在線上

4 個檢索機器人正在線上