網站設計基礎篇 Elementor教學PART 5 設計不規則網頁

190726每日_工作區域 1

嗨~各位光粉們的大家好~又到了每週網頁設計的教學時間啦,這次光先生要來介紹如何在Elementor裡設計不規則造型的網頁,做出看似簡單卻有層次的感覺,快跟著光先生一起看下去吧!

每日學,內容精要,重點快速瀏覽學習,輕鬆掌握重點。

在瀏覽網站時,常常可以看到採用不規則背景做設計,簡單的效果就能讓原本很平凡的網站達到不錯的感覺,使網頁更添設計感。蠻多網站都會採用這種形式,讓帶給瀏覽者較有律動的感受。如下面的範例,就是採用留白的雲朵造型讓原本的風景畫面多點層次感,也讓網頁顯得舒服很多!

像是曲線波浪特效,是不是隔著螢幕也感受到水的波動了呢?

以前要製作這種效果其實並不容易,那最簡單的方法可以事先將圖片製作成需要的形狀再置入網頁,但如果要修改造型或是做其他編輯可能會很麻煩,因此,目前使用的Elementor頁面編輯器就能解決了這個問題,因為它的功能支援背景變化造型,不僅便利且又能自由修改樣式,那麼,快跟著光先生動手操作一次吧!

如何製作不規則背景呢?

1.進入elementor編輯頁中,並在右方點選加號,新增段
2.滑鼠移到段,看到藍色框後並移至最上方,點選中間的編輯段
3.左方編輯欄找到『樣式』,在『背景』新增背景圖片

4.接著在『樣式』,下滑選擇『形狀分隔線』,分別有上和下可以做選擇,就是在圖片的上或下加上形狀,『類型』的下拉框,點擊會有顏色、寬高度、翻轉、反轉、帶到前面等選項,可根據需求做設定。
5. 例如:這張圖使用波浪效果,一一調整高度、是否反轉等,因為配合下面段的一致性,所以空白處使用下方段的顏色作銜接。

形狀分隔線的特色

  • 簡單好上手,更改方便
  • 提供10幾種不同的形狀可選,如常用的箭頭、三角形、傾斜等。
  • 可同時替圖片背景的頂部和底部添加特效
箭頭👇
三角形👇
傾斜👇
上下都有特效👇👆
上一篇
下一篇

形狀分隔線其實還很多好看的效果,主要就看如何去做排版美化,因為不需程式碼,因此對不懂程式碼的設計師來說,也能很輕易上手操作,也就省去另外製作圖檔的時間了,是不是相當方便呢?

介紹到這邊,相信大家對於Elementor的形狀背景應該有更加的了解, 你在找購物網站/部落格/電商/官網/一頁式網站嗎?選擇我們的網站不僅有提供Elementor pro專業版還送你網站教學影片!辣麼好的優惠快來了解吧!手刀前往

喜歡的話請幫我們到「光先生」粉絲團按讚分享,或訂閱我們的Youtube頻道哦!我們會推出更多的內容及影片的!

「以不一樣的思維進行廣告行銷,進而認同品牌價值」,
立志讓更多人知道原來廣告行銷也可以這麼好玩!!

每日學,文章推廣

每日學,內容精要,重點快速瀏覽學習,輕鬆掌握重點。

發表留言