原來漂亮的網站圖片排版是這麼來的！

圖片是網站關鍵的視覺元素，相信大家都會在網站圖片上狠下功夫，把圖片弄得美美噠。然而，這還不夠，漂亮的圖片沒有漂亮的排版仍然是白搭。所以今天小編就跟大家來聊聊關於網站圖片排版的二三事，幫助你打造高逼格的視覺效果。

如果是有一定的美術功底，自由設計圖片排版自然不是什麼難事，但如果是這方面的天賦確實比較抓急的話，也可以利用在線建站工具的圖片排版功能，簡單快捷地完成美觀的網站圖片排版。下面以凡科建站為例子，介紹幾種好用的圖片排版方法。

1、列表多圖

在凡科建站編輯器左端點擊「模塊」，找到「基礎」的下拉頁，選擇「列表多圖」。

在「添加模塊（列表多圖）」的彈窗，「常規」欄目設置展示樣式和上傳圖片。展示樣式有三種，分別是「橫向平鋪」、「箭頭滑動」、「走馬燈」。其中「橫向平鋪」屬於靜態完整展示，適用於4個以下的圖片排版。「箭頭滑動」與「走馬燈」屬於動態展示，適用於4個以上的圖片排版。

「圖片特效」欄目設置滑鼠懸停效果，「展示設置」欄目設置點擊圖片後的跳轉。

添加完成後，如果想設置每張圖片的描述和跳轉鏈接，則把滑鼠移至圖片的右下角，點擊「編輯圖片」，在彈窗輸入圖片描述和跳轉鏈接即可。

2、輪播多圖

在凡科建站編輯器左端點擊「模塊」，找到「基礎」的下拉頁，選擇「輪播多圖」。

在「添加模塊（輪播多圖）」的彈窗，「常規」欄目設置展示樣式和上傳圖片。一般來說，輪播時顯示不宜超過8張圖片。至於展示樣式也是有三種，分別是「圓點輪播」、「數字輪播」、「大圖預覽」。輪播多圖和動態式的列表多圖最大的區別就在於，輪播多圖允許設置自動切換播放，而列表多圖默認為通過滑鼠手動切換的。

「展示設置」欄目設置輪播方式、展示時間、切換速度、點擊跳轉。如果把點擊跳轉設置為彈出幻燈片，還可以在「幻燈片」欄目設置幻燈片樣式。

3、魔方多圖

在凡科建站編輯器左端點擊「模塊」，找到「高級」的下拉頁，選擇「魔方多圖」。

在「添加模塊（魔方多圖）」的彈窗，「常規」欄目設置拼圖形式和上傳圖片，拼圖形式共有13種選擇，大家可以按需設置。「展示設置」欄目可自定義圖片間距。

以上是凡科建站的三種圖片排版功能，在此基礎上再給大家介紹兩個圖片排版的小技巧，適當運用的話能讓圖片排版呈現更精彩多元的布局哦~

1、形狀變換

俗語說「月盈則虧」，過於飽滿或無缺損，都不是真正的完美，有時只展現冰山一角，反而有種朦朧的吸引力。像以下這個網站案例，作為網站「戲玉」的美食圖片沒有像常規情況那樣佔據大部分的版面，只有四分之一的部分，但是絲毫沒有影響吸引力，反而讓人對這樣別緻的布局留下深刻印象。這種局部美學，其實通過變換圖片形狀就可實現了。

凡科建站也能支持圖片形狀的變換。在凡科建站編輯器左端點擊「+模塊」，找到「常用」的下拉頁，選擇「圖片」。

添加圖片後，在圖片上方的快捷工具欄點擊「圖片形狀」，選擇心儀的形狀即可。

如果想把圖片變換成橢圓形，還可以在「個性設置」里自定義圓角半徑。

以下分享幾個運用圖片形狀變換來進行頁面排版的網站設計案例。

2、巧用色塊

有的時候，如果圖片尺寸偏小，或者圖片數量不足，無法呈現均衡統一的排版，我們可以添加文字色塊來補充版面，這樣的文字色塊也能看作是一張圖片，適當地把文字色塊穿插在圖片排列里更有一種錯落有致的感覺，添加了活潑的變化，避免了頁面的單調和死板。需要注意的是，這個色塊的配色應該是圖片主色調的相近色或者互補色，否則會顯得眼花繚亂，干擾視覺。

當然，以上只是網站圖片排版的入門方法，真正讓網站出彩的，還需要你多多發揮靈感，大膽突破哦~
推薦閱讀：