Build Something

平面及網頁設計筆記

Elementor 自訂CSS修改後無作用，前台被覆改

最近架站犯了件傻事，找了老半天都處理不好、忍不住開口向前輩求救、終於找到盲點，所以把它紀錄下來。

我們都知道Elementor是一個很強大的頁面編輯器，他可以快速的切出版型，若加上適度的CSS修飾、很快就能編輯出一個不錯的頁面出來。
Elementor的架構是橫向的”段(Section)”，裡面再切成左右若干數量的”欄(Column)”，欄位裡頭再包”元素(ELEMENTS)”。不管是段、欄或元素，每一個層級都可以自訂CSS樣式以及特效等設定。

但就是因為很多可以自訂的設定，所以可能會有做完之後卻找不到的狀況

所以~我出現了一個狀況：
Elementor所編輯的頁面，自訂的CSS修改後無作用、前台修改的CSS有載入卻被舊的CSS所覆寫。
而且Cache怎樣清都沒作用。

Elementor 自訂CSS被覆寫

如上圖明顯可見，我使用”DGray-font”去定義文字顏色；”fontType”定義字體，二者都被覆寫多次。
原本的設計應該如下：

是不是差很多？到底發生了什麼事呢？為什麼明明編輯模式的預覽都是正確的、一發佈就變得亂七八糟？

CSS的問題，答案就在CSS中

回到已經發佈的前台，將滑鼠移到有問題的區塊上方、按右鍵，點選Chrome瀏覽器的”檢查“；或是Firefox瀏覽器的“檢測元素“。瀏覽器會出現一個小視窗讓你檢查該元素的程式碼與CSS樣式表。

這時，點擊”Style”欄位中，右側CSS樣式表的名稱即可看到完整的CSS檔案，為說明方便我擷取成文字如下：

/* Start custom CSS for html, class: .elementor-element-40ef4dd */.scale-N{
    position: relative;
    width: 100%;
    padding-bottom: 100%;
    height: 0;
    display:inline-block;
    border-radius: 20%;
}
.fontType{
    font-family: 'Nunito', sans-serif;
    font-weight: 700;
    font-size: 4vw;
    text-align:center;
    display:block;
    line-height:120%;
}
.DGray-font{
    color: #383A3F;
}
.White-font{
    color: #FFFFFF;
}
.B-background{
    background-color: #37506D;
    border: 0px solid;
    
}

.BG-background{
    border:#0F7583 5px solid;
}/* End custom CSS */
/* Start custom CSS for column, class: .elementor-element-bd36b9f */.fontType{
    font-family: 'Righteous', cursive;
    font-weight: 700;
    font-size: 6vw;
    line-height:120%;
}
.DGray-font{
    color: #ff0011;
}
.White-font{
    color: #FFFF00;
}
.B-background{
    background-color: #37506D;
    border: 6px  #000000 solid;
}

.BG-background{
    border:#0F7583 5px solid;
}/* End custom CSS */
/* Start custom CSS for section, class: .elementor-element-113c9e9 */.DGray-font{
    color: #ffbb11;
}/* End custom CSS */

※重點是在註解裡

重新複習一下：Elementor的架構是橫向的”段(Section)”，裡面再切成左右若干數量的”欄(Column)”，欄位裡頭再包”元素(ELEMENTS)”
如果你是使用中文介面的、不會看到Section、Column等字，但其實Elementor的自訂CSS是有在註解中寫出來、這段CSS是寫在哪裡。

請注意一下上面程式碼的第1行”* Start custom CSS for html”、第32行”* Start custom CSS for column”，以及第52行的”Start custom CSS for section”，分別說明了是由html元素、外層的欄Column，以及更外層的段Section所定義。

所以，為什麼Elementor 自訂CSS修改後無作用、檢查顯示被覆改呢？

我發生的狀況就是：在html元素中，我畫了一個表格，並回到前台透過Chrome瀏覽器中的Tools for Web Developers做調整，並將做好的CSS重新貼回頁面html元素中的自訂CSS樣式中，但因故貼錯層級、導致頁面發佈後，雖然新樣式有載入但卻被舊定義覆改。

下面是這個範例，您可以透過上面所記錄的過程去做檢查、驗證。

[elementor-template id=”1492″]

Builder

,