原來漂亮的網(wǎng)站圖片排版是這么來的！

時間：2022-08-15 17:39:02 | 來源：網(wǎng)站運營

時間：2022-08-15 17:39:02 來源：網(wǎng)站運營

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


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


1、列表多圖


在凡科建站編輯器左端點擊“模塊”，找到“基礎(chǔ)”的下拉頁，選擇“列表多圖”。




在“添加模塊（列表多圖）”的彈窗，“常規(guī)”欄目設(shè)置展示樣式和上傳圖片。展示樣式有三種，分別是“橫向平鋪”、“箭頭滑動”、“走馬燈”。其中“橫向平鋪”屬于靜態(tài)完整展示，適用于4個以下的圖片排版?！凹^滑動”與“走馬燈”屬于動態(tài)展示，適用于4個以上的圖片排版。




“圖片特效”欄目設(shè)置鼠標(biāo)懸停效果，“展示設(shè)置”欄目設(shè)置點擊圖片后的跳轉(zhuǎn)。




添加完成后，如果想設(shè)置每張圖片的描述和跳轉(zhuǎn)鏈接，則把鼠標(biāo)移至圖片的右下角，點擊“編輯圖片”，在彈窗輸入圖片描述和跳轉(zhuǎn)鏈接即可。






2、輪播多圖


在凡科建站編輯器左端點擊“模塊”，找到“基礎(chǔ)”的下拉頁，選擇“輪播多圖”。




在“添加模塊（輪播多圖）”的彈窗，“常規(guī)”欄目設(shè)置展示樣式和上傳圖片。一般來說，輪播時顯示不宜超過8張圖片。至于展示樣式也是有三種，分別是“圓點輪播”、“數(shù)字輪播”、“大圖預(yù)覽”。輪播多圖和動態(tài)式的列表多圖最大的區(qū)別就在于，輪播多圖允許設(shè)置自動切換播放，而列表多圖默認為通過鼠標(biāo)手動切換的。




“展示設(shè)置”欄目設(shè)置輪播方式、展示時間、切換速度、點擊跳轉(zhuǎn)。如果把點擊跳轉(zhuǎn)設(shè)置為彈出幻燈片，還可以在“幻燈片”欄目設(shè)置幻燈片樣式。






3、魔方多圖


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




在“添加模塊（魔方多圖）”的彈窗，“常規(guī)”欄目設(shè)置拼圖形式和上傳圖片，拼圖形式共有13種選擇，大家可以按需設(shè)置?！罢故驹O(shè)置”欄目可自定義圖片間距。






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


1、形狀變換


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




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




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






如果想把圖片變換成橢圓形，還可以在“個性設(shè)置”里自定義圓角半徑。






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










2、巧用色塊


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




當(dāng)然，以上只是網(wǎng)站圖片排版的入門方法，真正讓網(wǎng)站出彩的，還需要你多多發(fā)揮靈感，大膽突破哦~