網站美化: 9個讓網站超漂亮的秘訣!

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

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

預設行距 line-height 設定為 1.8

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

預設字體大小 20px

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

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

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

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

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

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

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

使用 Lottie 動畫

LottieFiles 找到最酷炫的動畫,然後在 Elementor 網站編輯器放到你的網站。Elementor 可能是你可以找得到的最好的網站編輯器之一。
 

使用動畫標題

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

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

標題匡線的顏色

				
					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,實體店家的配色,字體等。多思考什麼是美。

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

Leave a Comment

加入安淇藍 讓你數個月內 從自媒體作者 蛻變成經營者 開始光速擴張
分類

分享到

Share on facebook
Facebook