Elementor: 讓你的 Landing Page 吸睛的12個秘密

這篇文章會教你如何讓你的銷售頁變得更吸引人。

如果你想要

更多的流量
更多的潛在客戶
更多的營收

你將會在這裡發現可以立即應用的技巧
讓我們開始吧!

回顧總結:讓網站超漂亮的秘密

使用動畫標題

在 Elementor 可以製作這樣的動畫標題

讓你可以 抓住觀眾 的注意力 讓觀眾 對你 有印象!

這個元件稱之為 Animated Headline ,只有購買 Elementor 專業版才能使用。動畫標題可以有效得吸引閱讀者的注意力。

使用 Lottie 動畫

另一個只有在Elementor的專業版 才有的功能是 Lottie 動畫。

你可以到 LottieFiles 找到最酷炫的動畫,然後在 Elementor 網站編輯器放到你的網站。
 
Elementor 很可能是你可以找得到的最好的網站編輯器之一,讓你的 WordPress 能夠呈現專業設計師的網頁設計成果。
 
透過 Elementor 網站編輯器設計出好的 Landing Page ,可以有效提高購買轉換率。
 

讓你的網站內文字體寬度 (font-weight) 固定為 300

請把網站文章預設的字體寬度改成比標準值 400 還來得一點,呈現高質感。
網站標題的字體寬度則可以設定為 600, 搭配使用 Noto Serif TC 就可以呈現出你現在看到的網站的效果。

預設行距 line-height 設定為 2.0

使得閱讀者可以很輕鬆的閱讀

預設字體大小 20px

最為舒適的大小,使得閱讀者可以很輕鬆的閱讀

上下左右保留少 20px 的內距 padding

保持適當留白,避免排版過於擁擠,讓網站看起來乾淨清爽。
CSS 語法 padding: 20px
 

標題的字型,使用有襯線字體

使用字體名稱內為 Serif 的當作標題字體,例如 Noto Serif TC 有襯線字體給人的感覺是正式莊重,你可以在 Elementor  直接使用 Noto Serif TC 作為標題的字體,如同安淇藍網站

文章內文的字型,使用無襯線字體

使用無襯線 San-Serif 類型的字體當作內文,文章內容的字體,例如 Hevatica, Arial等。使得閱讀更為輕鬆。要避免內文使用有襯線字體,這會讓閱讀者閱讀上較為吃力。

 

標題匡線的顏色

				
					h2, h2.elementor-heading-title {  
    border-left: 5px red solid;
    padding-left: 20px;
}
				
			

例如以上CSS樣式,可以達到你現在看到的網頁的 h2 標題,左邊多出紅色的匡線

 

圖片加上半圓, 頭像使用圓形

				
					img {  
    border-radius: 8px;
}
				
			

例如以上 CSS 樣式,可以讓圖片四周呈現圓弧狀。如果將 8px 調整為 100% 則可以讓圖片呈現出圓形。你可以到 w3schools 查看各種實用的 CSS 語法,幫助你的網站更加漂亮。

 

配色

請不要把 紅色綠色藍色
放在一起大亂鬥,會很醜。
如果要用 藍色 搭配 黃色,請降低彩度,因為自然界的正常顏色都是比較黯淡的,如果過於明亮,就會給人很人工,很假的感覺,很像廉價的壓克力板。
例如以下範例,同樣是黃色文字和藍色背景,左邊看起來就像是廉價的塑膠招牌,而右邊則有一種低調的奢華感。

在這裡新增您的標題文本
在這裡新增您的標題文本

提升自己的審美

請多觀察日常生活中,好看漂亮的網站,App,實體店家的配色,字體等。多思考什麼是美。

分享到

發佈留言