網站設計編排,我可以怎麼做?(第二篇)


文、KK

 

哈囉!我是kk,一個『從事數位行銷十多年,也熱愛幫你透過網路,創造財富』的分享家。

網站設計跟每個圖文、排版等細節息息相關。WordPress預設區塊編輯器(Block Editor),又稱古騰堡編輯器(Gutenberg Editor)有提供小工具,當使用者在編輯內容時,可直接使用,不用再另外安裝外掛。進入WordPress後台,在選單列表內,選擇「文章」>「新增文章」,觀看編輯畫面並開始編輯。

 
 

但區塊編輯器(Block Editor)對於設計美感上其實還有可以優化的空間。因此,本文介紹一款兼具美觀與實用的編輯器「Elementor Website Builder」。進入WordPress後台,在選單列表內,選擇「外掛」>「安裝外掛」,搜尋外掛「Elementor Website Builder」。

 

再進入WordPress後台,在選單列表內,選擇「文章」>「新增文章」,點選「使用Elementor編輯」。

 

進入到Elementor編輯區,左欄顯示小工具列表,將「內部段」拖曳到「將小工具拖到此處」,進行內文版面配置。

 

將左欄顯示小工具列表之「標題」、「內容編輯器」拖曳到使用「內部段」建立之欄位,設定標題、內文。

 

將「圖片」拖曳到「將小工具拖到此處」,點選「選取圖片」在媒體庫內選擇一張圖片。可進行圖片尺寸調整、圖片對齊、將圖片設定標題和連結。

 

點選「樣式」,可進行圖片大小細部調整。

 

點選「樣式」>「懸停」>「CSS濾鏡」>「色調」,調整顏色。完成該設定,滑鼠移到圖片上,會呈現剛才設定的色調變化。

 

接著選取「懸停動畫」為圖片加入各種型態的動畫,滑鼠移到圖片上,會產生動態效果。

arrow
arrow
    全站熱搜

    菜鳥救星 發表在 痞客邦 留言(0) 人氣()