ALL POST

前言

Elementor中用「容器把元素置中」的設定其實很易懂，較沒啥問題，但遇上「用大容器把小容器置中」就有些新手會遇上怎樣都無法順利置中的問題，這邊就特立一篇來說明。

「用大容器把小容器置中」就有些新手會遇上怎樣都無法把小容器順利置中的問題，其原因是出在「小容器」本身的設定，這是為什麼呢？

說明

用大容器如何把小容器水平置中?

當大容器Container包住小容器Container時，一般只要在大容器的items做下圖的設定，則大容器中的小容器就會置中，

11_用大容器把小容器置中-2

為何水平置中無效？

但「小容器」有時候無法放置中或靠右，其原因就是「小容器」的內容寬度並沒有設成「全寬」後再調數值(%或px)，故小容器的外圍框線仍然是向左右延伸到大容器的邊邊，故當外面大容器設定了置中時，小容器仍無法看出有置中的效果，只要把小容器的內容寬度並改設成「全寬」就可以立即看出有置中的效果了。

影片範例

▼比較一下”內容寬度”設成方框與全寬之差異

名稱	說明
寬度	每個容器內部具有「外圍寬」與「內容寬」。 ①方框: 僅能調整此容器中的「內容區」之寬度。 ②全框: 可同時調整「外圍寬」與「內容寬」之寬度。若不是很能理解差異，一般建議選「全寬」再配合用%或px來做調整。

結論

原理懂了，以後就把握一個原則 :

以後不管是大容器或被包在大容器中的小容器，一律設成「全寬」就沒有問題了!

考考你

「用大容器把小容器置中」，應在外層大容器中設定還是內部小容器中的items設定置中？→ 大容器。
「用大容器把小容器置中」為何有時候會無效，原因就是「小容器」的寬度沒有設成全寬。

Answer

前言

「區塊容器、元素工具」都可以做複製或刪除，有時候某一容器或元素的樣式已設定好，但後面要再做一個一模一樣的，就不用重新拉重新設定，我們就可以善用右鍵的複製或增刪修功能。

右鍵

右鍵有幾個很常用功能，這邊提幾個較常用的，不常用的就不另說明但可自行玩玩看。

06_Elementor增刪修複製與右鍵功能-1

在Elementor的右側編輯區，都是由「區塊容器、元素工具」所組成，每個區塊、每個元素工具都可以按右鍵來做一些操作，如下表 :

再製(複製後貼上)	直接在該位置下方複製一個一模一樣的內容。
複製(僅複製不貼上)	先複製下來，再到其它地方貼上。
Add New Container新增容器	在同一層新增一個空白容器。
另存範本	把整個「容器」另存版型。
貼上樣式	兩樣的兩個元素，例如有二個按鈕，先把第1個按鈕的樣式先設計好，再按右鍵複製(僅複製不貼上)，然後在第2個按鈕按右鍵/貼上樣式，即可把按鈕1的樣式直接複製到按鈕2的身上。
從其它網站貼上	在別的網站的Elementor編輯介面所複製的內容可以跨站貼上。

另，在右側下方的「虛線方框區」內空白處按右鍵，可以對整個所有內容做刪除或複製。

以上這些都必須手動練習看看!

區域	說明	備註
頁首(head)	網站名稱、Logo、主選單	(網站名稱與Logo可二擇一出現)
主內容區(body)	①首頁(預設是文章列表)、 ②單一頁面展開之全文、 ③單一文章展開之全文、 ④單一分類展開之列表。	(版型變化主要以此區為主)
頁尾(footer)	版權宣告、其它資訊。

簡介

Elementor選單在手機時會自動縮合成一個漢堡線，我們可以透過語法讓它可以左右滑動。

運用範圍

讓選單直接左右可滑動，但是對下拉式選項會失效。(此法僅適用無法下拉式選項時)

範例

此影片範例即加上語法後的效果，影片如不動請點播放。

原理與思路

先把Elementor選單的響應功能拿掉，然後加上語法讓它變成可以左右滑動。

實作

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

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

總結

此法見仁見智，有時候要讓網頁看起來比較簡約或是Header區尚有其它元(如按鈕)，在手機時整個版面有限故在手機時我覺得仍以漢堡線的方式為佳。

如何修改Gandi網域商的Name Server名稱至遠振主機商？

2024-04-26 尚無留言

前言

如果您的網域是在Gandi網域商買的，但是主機是在「遠振主機」買的，為了方便使用遠振主機商在買好主機時幫你內建好的各項服務的DNS(例如免費的網域信箱)，我們可以把Gandi網域商的Name Server名稱至遠振主機商，就可以直接無縫套用了。

流程

1、登入Gandi網域的該網域設定介面

先登入Gandi後台，假設我的網域是「50cc.xyz」，如下圖點擊名稱伺服器旁邊的字樣。

2、選擇「變更」

如何修改Gandi網域商的Name Server名稱至遠振主機商？-2

3、選擇「外部」

遠振的Name Server名稱會有兩組，而介面中若出現第3個可輸入的欄位可略過，只要輸入遠振給的2組即可。

Name Server名稱一般都是英文，若主機商給的Name Server名稱亦含有ip字樣，取英文字樣的來輸入即可。

如何修改Gandi網域商的Name Server名稱至遠振主機商？-3

遠振的Name Server名稱是什麼？在註冊遠振主機下單成功後，它會附在「開通信件中」，請留意信件!

4、等待生效

大概5~10分鐘就生效了。

總結

如果您的網域商不是在Gandi買的而是在其它網域商買的，設置的原理也是一樣的，只是不同網域商的後台介面略有不同。

有時候不一定要把整個Name Server整個設向遠振主機，若單純只是要讓輸入網址(https…)能對應到該主機的IP，只要修改網域商這邊的DNS的A記錄就行了。

[二包]新手接案時，如果有人拿figma的設計稿請你報價應注意什麼？

2024-03-21 尚無留言

網頁設計外包之前，很多設計師都會先在「figma.com」上畫設計稿給客戶看，有點像是室內設計的3D圖的概念，但有時候會接到二包過來的案子，二包業主拿figma設計稿來詢問，幫他做這些頁面要多少錢？在報價時應注意什麼？

目前的經驗有幾點可以注意 :

一、不要只看電腦版設計稿就報價

一般設計稿都是平面設計師畫的居多，所以一般只會畫電腦版的，在報價時千萬不要只看電腦版，因他畫的電腦版設計稿很多都沒考慮到「手機響應」的問題，甚至這些設計稿在製成電腦版網頁後，根本無法直接「微調成手機響應」網頁，這一點非常要注意，若只看電腦版設計稿就報價，常常會吃虧在手機版的調整上煞費過多工時。

二、手機版有時候要另外報

請對方另出手機版設計稿再討論「手機版是否要另外報價」，如同前面所說，有些設計師只會畫電腦版設計稿，但有些內容的排版太複雜無法直接在手機響應變化，就得另做手機版網頁來做切換，所以要最好請對方也出一份手機版設計稿，若手機版設計稿的排版方式可以直接從電腦版直接「微調」成手機樣式，那麼可以不用另報價手機版的費用，反之若手機版的版型與電腦版的版型差太多而無法直接微調，那就等同一頁要做2次，此時手機版的真要另報價，不然沒報的話後面浪費額外工時都要自己吸收。

三、設計稿上看不出功能或特效

有些「功能」，例如點擊後要切換隱藏、點擊切換輪播、點擊跳出會員登入等等，或是一些「特效」例如滑鼠移上去要變化顏色或漸層、視差滾動等等，諸如此類的，在設計稿上完全看不出，這個真的要與對方慎重仔細討論再報價，不然等簽了約後才發現有多的功能與特效要另處理，一樣是要再自己額外花費工時處理，重點是有些功能特效很不好做，不一定做得出這樣的功能，又搞得自己再花錢找「四包」了，這一點要比第二點更加慎重。

總結

報價真的很多細節要考慮，只有吃過虧才會更加有經驗，所以報價真的要細思，不要隨意就脫口而出。

[雜症]怎樣都找不出原因的「左右空白」

2024-03-18 尚無留言

有時候用手機瀏覽做好的網頁，會有左右多出的空間可滑動，但怎麼檢查都找不原因，而且只會發生在特殊手機的瀏覽器上，例如我測試iPhone 8的有此情況但iPhone 15的就正常，實在匪夷所思，後來請教了一位前端網頁高手，它給了我一個解法。

▼iPhone 8實測

如何去除網頁左右空白

在你百分百確定所設計的網頁並沒有一些負外距過大的情況下，

在全站的CSS加上一句:

body{
overflow-x: clip;
}

這樣就可以把一些特定手機上才會出現的左右空白空間讓它消失。

注意事項

這句一開始可先不要加到body中，有問題再個別加，因為我發現加了這句overflow-x: clip; 之後，

曾發生在Elementor某版本中，會造成無法讓兩個左右並排的容器，把裡面的文字設定「負外距」的位移的的話，則位移效果無法出現。

【轉址】用「Redirection」的301轉址來移除facebook幫你連結添加的fbclid參數

2024-03-15 尚無留言

前言

如果你有在用GA統計流量，我真的建議你的fbclid參數處理一下，不然「有可能」你在GA上的報表會失真，它可能會被當成兩種網址的統計，所以你必須在GA後台的設定上做特別處理，不然就是在網站上直接用301轉址方式先處理好。

我需要把分享在facebook上的連結後自動被facebook添加的fbclid參數移除掉，不用在主機端(.htaccess)也不用在Cloudflare做，用Redirection外掛即可…

如何移除facebook幫你連結添加的fbclid參數

例如客戶網址原本型態是:

https://mpsony.com/relationship/strategy/heat-up/how-to-be-a-more-caring-person/

在facebook自動幫連結添加的fbclid參數後，會變成這樣，多了一串參數:

https://mpsony.com/relationship/strategy/heat-up/how-to-be-a-more-caring-person/?fbclid=IwAR34u2XTlkYF-hRlD8PIgeLaOE8BuHxu6FfBJWwf60dcSuWEkSvlwnt1Y

現在要用「Redirection」正規表達式的設定方式如下:

來源網址: /(.*)\?fbclid=.*

目標網址: /$1

設置好了，清一下網站快取，然後再去FB點隨便點一篇已分享的文章連結試試。

驗證成果

▼轉成功了，但發現會多了一個問號。

【轉址】用「Redirection」的301轉址來移除facebook幫你連結添加的fbclid參數-3

怎麼會這樣呢？

原來?也是一種正規表達式的符號，它以為你也在用?來做正規表達式，所以我們必須告訴系統，這個問號只是一般的網址參數而已，請不要誤認它在做正規表達式，所以我們要在問號前面加一個跳脫符號「\」，這樣就可以了，改完後如下:

來源網址: /(.*)\?fbclid=.*

目標網址: /$1

如下圖，這樣就正常了!

【轉址】用「Redirection」的301轉址來移除facebook幫你連結添加的fbclid參數-4

總結

不管你的網址結構有幾層，此法應都能有效唷，我已幫多位客戶操作過!

參考文獻 : https://redirection.me/support/redirect-regular-expressions/

通過Gmail代收代發您的企業信箱(網域信箱)(遠振主機Cpanel所創之信箱)

2024-02-04 尚無留言

前言

通過Gmail代收代發您的企業信箱(網域信箱)，這個方式，不管是哪一家的主機所提供的「企業信箱(網域信箱)」都適用，唯一差別是在「信箱伺服器」的名稱不一樣而已。

本文主要以「遠振主機Cpanel」所創立的信箱為例，其它家平台之信箱請取得相關設定資訊後同以下方式操作。

實作

一、進入Gmail設定

首先，進入Gmail設定，

通過Gmail代收代發您的企業信箱(網域信箱)(遠振主機Cpanel所創之信箱)-2

Gmail有二處可以進行設定，這二處不一定要全設，也可以僅設定「代收」，不過一般人是會把代收代發都一併設定，下圖兩處，綠框是設定「代發」，紅框是設定「代收」，在設定時不要點錯了，以免無法對照本文的教學。

通過Gmail代收代發您的企業信箱(網域信箱)(遠振主機Cpanel所創之信箱)-1

二、設定Gmail代發

所謂的「代發」，假設我有一個在遠振主機所創立的企業信箱叫「[email protected]」，我可以在個人Gmail的介面中，以此企業信箱的名義當「寄件人」來寄出，見以下設定:

2.1

通過Gmail代收代發您的企業信箱(網域信箱)(遠振主機Cpanel所創之信箱)-3

2.2

下圖是以「遠振Cpanel」信箱為例，若你也是使用遠振主機Cpanel的信箱，假設你的網址是「abc.com」，則把圖中所有的「smallway.com.tw」置換成你的網域「abc.com」即可。

通過Gmail代收代發您的企業信箱(網域信箱)(遠振主機Cpanel所創之信箱)-4

SMTP伺服器：mail.smallway.com.tw
使用者名稱 : 你的信箱名稱，即[email protected]
密碼：您的信箱密碼
端口：587

另下表是小整理一下其它主機商的設定值參考:

SMTP服務器 (按照不同主機商而定)

遠振Cpanel信箱

SMTP伺服器：mail.你的網域名稱，例如: mail.smallway.com.tw

通訊埠 : 587

Cloudways Rackspace信箱

SMTP伺服器：secure.emailsrvr.com

通訊埠 : 465

通過Gmail代收代發您的企業信箱(網域信箱)(遠振主機Cpanel所創之信箱)-5

2.3

先前往「企業信箱」的網頁版收信，再如下圖點擊連結確認。

通過Gmail代收代發您的企業信箱(網域信箱)(遠振主機Cpanel所創之信箱)-6

通過Gmail代收代發您的企業信箱(網域信箱)(遠振主機Cpanel所創之信箱)-7

2.4

Gmail中，多了一個「寄件地址」可選擇運用了。

通過Gmail代收代發您的企業信箱(網域信箱)(遠振主機Cpanel所創之信箱)-8

三、設定Gmail代收

所謂的「代收」，假設我有一個企業信箱叫「[email protected]」，我可以在個人Gmail的介面中，對此企業信箱進行「收信」，見以下設定:

3.1

通過Gmail代收代發您的企業信箱(網域信箱)(遠振主機Cpanel所創之信箱)-9

3.2

下圖是以「遠振Cpanel」信箱為例，若你的網址是「abc.com」，則把圖中所有的「smallway.com.tw」置換成「abc.com」即可。

通過Gmail代收代發您的企業信箱(網域信箱)(遠振主機Cpanel所創之信箱)-11

使用者名稱：你的網域信箱([email protected])
密碼：您的信箱密碼
POP服務器：mail.你的網域
端口：995

另下表是小整理一下其它主機商的設定值參考:

POP服務器 (按照不同主機商而定)

遠振Cpanel信箱

mail.你的網域名稱，例如: mail.smallway.com.tw

通訊埠 : 995

Cloudways Rackspace信箱

secure.emailsrvr.com

通訊埠 : 995

3.3

下圖紅框，已多了一個外部信箱名稱，代表已設定成功。

通過Gmail代收代發您的企業信箱(網域信箱)(遠振主機Cpanel所創之信箱)-10

代收成功

通過Gmail代收代發您的企業信箱(網域信箱)(遠振主機Cpanel所創之信箱)-12

結論 :

理論上各家主機提供的信箱都可以用此方式，只要相關的伺服器名稱或埠號正確即可。

遠振官方文件參考

[二包]遇上別人二包過來的案子，要注意什麼？

2024-01-29 尚無留言

除了前一篇講的「報價」問題之外，雙方各自要做的事也都要在合約上律定清楚。

雖是二包接案方，但應不會百分百都是自己從0開始完成，大部分的二包都仍會「分工」，對方工作量佔比有可能比較少就是了，例如15%的工作量是對方，自己是佔了85%的工作量。

我遇過的有以下幾點:

客戶的需求無法具體確認的問題

對方所接過來的案子，有時候他把客戶需求談得不是很清楚或具體，所以我可能會常常製作時有些地方不知怎麼下手，特別是在「功能」面，此時會反覆透過一包的人去找客戶確認，但當一包的人是個「草包」時，他只會簽約不會談案子，故他只會「傳話」，不懂得如何與客戶一針見血的溝通，那麼這個二包的人可就苦哈哈了，甚至還需要做出超乎原本自己報價範圍應做的事。

二包的人要直接面對客戶嗎？

你的報價上或合約上要考慮到這一點，基本上我們二包接案方是不直接面對客戶的，哪怕是含有客戶在其中的Line群組也不加入，若要陪同或直接面對客戶，這個報價費用上就要另加，或是可以在合約上註明「不直接面對客戶」。

尚未結案，請一包方不要修改二包方製作的網頁

假設，二包接案方主要負責設計絕大部分的網頁與功能，簽約時須先在合約中與一包發案方律定好，在尚未結案時，一包發案方不要未經允許就亂修改二包接案方正在製作中的網頁或功能，這樣做可能會引起紛爭，例如一包方亂改二包方做的網頁，若改出問題，二包方就要重新處理或排除，這個擦屁股的工時，由誰吸收？而且這也是一種沒禮貌且不尊重的行為，也可能導致合作破局。

一包方，你覺得二包方做的網頁需要再修改，需要經過允許，而不是擅自修改，若你一包方覺得自己很行很會改，那當初何必要二包出去？自己來不就行了？既然要二包出去，就要學習如何尊重別人的專業。

總結

接案時接到別人二包過來的案子，真的要很小心應付，不然整個過程會很不開心或造成很多衝突，嚴重甚至還鬧上法院。

前言

說明