標籤: 式樣設計

WordPress Additional CSS – 附加的 CSS

WordPress Additional CSS 透過編輯附加的 CSS,讓網站擁有自己需要的自訂樣式,是管理 WordPress 網站的第一步。很多剛剛接觸 WordPress 網站架設的朋友,對於修改網站樣式總是有著非常多的問題,除了這裡經常跟大家分享的建立子佈景主題的方式,另外就是今天要跟大家分享的附加的 CSS。如果只是簡單的字型、顏色、又或是單一區塊的樣式,都可以利用佈景主題提供的附加的 CSS,填入適當的 CSS 語法,就可以讓網站的樣式符合自己的需求,相較於子佈景主題建置的方式,這個方法在操作上會比較簡單。有興趣的朋友可以參考看看。

繼續閱讀

WordPress Plugin Blocks CSS – 區塊樣式設計外掛程式

WordPress Plugin Blocks CSS 透過這一個外掛程式的設計,喜歡式樣設計的朋友,可以很輕鬆的為文章或是頁面內容作變化,提供訪客更棒的閱讀體驗。很多 WordPress 網站的管理者,對於內建編輯器的樣式設計很不滿意,一些小小的樣式修改都需要花費很大的功夫。今天分享的這一個外掛程式,對於 CSS 設計語法瞭解的朋友,可以很容易的為區塊內的內容,建立個別的樣式設計,達到自己希望的內容展示效果。如果你也懂得使用 CSS 式樣設計語法,那麼今天分享的這一個外掛程式不要錯過了。

繼續閱讀

WordPress Blocks Order – 手機區塊排序設計

WordPress Blocks Order 透過簡單的式樣設計,讓手機上區塊排序的設計,更符合訪的的閱讀習慣,創造更好的閱讀體驗。使用區塊編輯器來編輯 WordPress 文章內容,已經越來越受到大家的喜愛。也因為如此文章內容的版面設計,可以更多樣化、更吸引訪客的閱讀。以今天要分享的式樣小技巧來說,讓圖文區塊的排序,在手機上的展示效果,比較接近符合一般訪客的閱讀習慣,不受到區塊編輯器的排版影響,這也是我常常跟大家提到的,透過小小的改善,讓訪客的使用體驗更好,這是每位網站設計者必要的功課。

繼續閱讀

WordPress CSS Filter – 圖片濾鏡效果樣式設計

WordPress CSS Filter 透過式樣設計,讓圖片展示各種濾鏡效果,豐富網站的頁面設計!今天分享的 CSS 設計技巧非常有趣,不需要透過影像軟體的編輯,就可以讓圖片直接產生濾鏡效果,讓 WordPress 網頁設計變得多樣化。網站架設的過程,網頁設計也是其中很重要的一環,雖然對於很多新手朋友來說,開始透過設計語法來設計網頁,可能有些難度,不過線上的教學資源真的非常多,今天介紹的 MDN 就是一個很棒的網站,雖然中文文件還沒有很完整,不過提供這麼多免費的學習文件,仍然是一個每位網頁設計者應該到訪的網站。

繼續閱讀

Custom Colored Underline – 自訂底線效果式樣設計

Custom Colored Underline 透過自訂底線效果的式樣設計,讓重點文字或是連結有了焦點效果。漸層顏色效果一直是我個人很喜歡的一種網頁設計效果,除了可以提供訪客不同的視覺感受,更進一步可以達到推廣頁面內容的作用,這兩年也被大量的運用在網頁設計上。今天分享的內容是示範如何建立漸層效果的底線,來增加重點文字的關注效果,提升訪客的注意力,同樣也可以套用在連結上,創造出不同的式樣感覺。

繼續閱讀

WordPress Sliding Underline Effect – 超連結式樣設計

WordPress Sliding Underline Effect 今天介紹的超連結式樣設計,目的在幫助站內文章提高點擊率,這是改善網站 SEO 的第一步。有使用 Yoast SEO 外掛程式的朋友,應該會感覺到最近在編輯文章時,要達到綠燈的機會越來越高,多半的原因是因為 SEO 針對文章內容的設計提示,越來越容易讓編輯者檢視並進行修改。如果您的網站經營一段時間,發覺自己網站的文章內容點擊率沒有顯著提升,那麼我們建議您透過 Yoast SEO 外掛程式的設計協助,可以逐步改善網站文章內容的點擊成效。今天分享的文章重點不是 SEO 外掛程式的說明,而是其中的一項功能 internal links 站內連結,透過超連結的式樣設計,進一步達到提升站內其他文章內容的點閱率。

繼續閱讀

WordPress Gradient Text – 文字顏色漸層變化式樣

WordPress Gradient Text 在網頁展示文字顏色漸層變化式樣,讓活動頁面的效果更加精彩。今天跟大家分享的一個式樣技巧,我個人非常喜歡。就是透過在 WordPress 網站的分頁,製作活動頁面時,活動頁面標題或是活動訊息,透過式樣設計變化字體的顏色,不是製作圖像,可以讓頁面更活潑,更吸引訪客的目光。另外透過式樣設計(CSS),檔案小執行效率也會好,不需要多增加網頁的圖檔,目前也適用多數的瀏覽器,所以分享給大家,您可以在下列看見展示的預覽圖片,有興趣的朋友可以參考一下。

繼續閱讀

WordPress Link Hover Effects – 文章連結效果

WordPress Link Hover Effects 透過增加網站內容文章連結效果,提升訪客對於網站的閱覽。架設 WordPress 網站這麼長時間以來,一直希望網站的文章內容,可以幫助訪客獲得最好的閱讀效果,所以文章內容中帶到的連結,沒有使用連結式樣效果,與內文設計一體。但是最近兩年觀察下來,很多訪客對於文章的閱讀比較沒有耐心,忽略了文章中提到的相關訊息,因此重複性的問題一直出現在詢問的信件中。所以從 8 月份開始,網站文章內容中提到的連結,新增加了顏色漸進的效果,重點式的標示出文章相關資訊連結,希望透過這樣的修改,讓訪客可以更清楚的取得更完整的教學資訊。

繼續閱讀

WordPress Plugin Header and Footer Scripts – 自訂程式碼置入外掛程式

WordPress Plugin Header and Footer Scripts 可以讓我們快速的在任何頁面或是文章,插入自訂的式樣設計碼,或是任何第三方的程式碼。使用 WordPress 網站一段時間以後的朋友,一定或多或少的會想要幫自己的網站建置一些自訂的功能或是式樣設計,而這些額外功能有時候是第三方的程式碼,所以要如何的正確在文章或是頁面來套用這些程式碼,長常會耗費很多時間來除錯。在 WordPress Style Specific Post – 自訂單一文章頁面式樣這一篇文章跟大家分享如何透過文章或是頁面的 ID,來建置專屬的式樣設計,有朋友反應這樣的修改方式,對他們來說還是有些困難。今天分享的外掛程式,可以完全解決這樣的困擾,可以在任何一篇文章或是頁面,新增置入任何自訂的程式碼。

繼續閱讀

WordPress Box Shadow – 高質感圖片陰影設計

WordPress Box Shadow 讓照片的質感一下子就提高了許多。在三月的時候跟大家分享過一個線上製作式樣(CSS)的網站,讓不懂得式樣設計語法的朋友,也可以輕鬆的在 WordPress 網頁設計出一些特別的式樣效果。今天延續這個設計的技巧,跟大家分享如何透過陰影的設計,讓照片的質感提升,建置出高質感的照片網站。如果您的網站使用大量的照片,而且照片多是簡約風格,那麼今天的式樣技巧可以參考,會讓照片呈現特別的質感。

繼續閱讀

網站架設

WordPress 虛擬主機免費安裝設定