WordPress新手必學 | 設計師愛用網頁特效!如何用Elementor單頁版型做漂亮的動態網頁 操作圖解

WordPress新手必學 | 設計師愛用網頁特效!如何用Elementor單頁版型做漂亮的動態網頁 操作圖解

用Wordpress打造網站30幾個之後,發現好用的佈景主題確實能夠加快架站的速度,用OceanWP主題後,不需要懂HTML與CSS也能做出讓人喜歡的網站風格。加上Elementor視覺化編輯器做出更多想要的視覺效果。

前面幾篇文章的設定主要是在於整體網站版面的設定,這篇想要教學單頁的設計製作。

在使用Elementor之前我還有用過其他幾款頁面編輯器,但Elementor的RWD絕對是錯誤率最低,可控性最高,所以成為我的最愛。單純免費的部分就已經能夠讓我做出很多不同的效果了。所以若是你還沒安裝的話,趕快去外掛搜尋Elementor吧~

用漂亮的Elementor版型與可愛的動態效果為你的網站加分~GOGO

Step1.開啟Elementor資料夾按鈕

首先開啟一個頁面或是文章都可以,接著點選使用,就會看到以下畫面

打開畫面後有兩個按鈕,右邊進去就可以看到很多的版型囉~沒有標示Pro的部分都可以載入使用,若付費版的話就全部的版型都能載入,我這篇文章就先以免費版型的活用來做說明囉~

滑鼠滑過就可以看到插入的按鈕,點選插入後,會看到載入中的畫面,通常這個畫面需要等待一段時間,注意不要等不及就按叉叉喔~

Step2.認識Elementor區塊基本功能

每個段或每個區塊滑過都可以看到這個藍色的控制區塊,左邊的+號能夠在此段落的上方增加區塊或是內容,中間的編輯按鈕可設定此段的布局結構特效背景等的CSS樣式,右邊的叉叉則可刪除此區塊。

另外滑鼠右鍵點選藍色區塊可以呼叫開啟段的基本功能,此區為叫進階的功能,再這邊先大略做介紹,之後再寫活用的教學內容。

最上方區塊編輯與複製的功能是控制整個段的,中間區塊則是針對CSS樣式的操作,再往下看有存成版型的功能,此功能是把這個段存成自己設計的樣板,若在其他頁面想加入同樣的內容即可於資料夾呼叫出你製作的樣板,再下來有個Navigator的功能則能調整版面的順序。

區塊模板有些設計會設定在背景,而背景設定就放在藍色的編輯按鈕

點選藍色的編輯按鈕>左欄的中間的樣式,就能設定你想要的背景樣式,一般就是基本設定,懸停表示滑鼠滑過去的狀態。

Step3.修改Elementor模板文字的內容

模板內容文字區塊的修改相對較容易,只需要把滑鼠移到想修改的部分,可直接在區塊上做修改,也能在左側側欄做內容修改,但最近使用Elementor常常有故障的問題,我有發現在區塊修改比較容易故障,因此我推薦在左欄輸入內容比較穩定。

左欄的第一區塊是單純編輯內容,不管是文字區塊或是圖片區塊,按扭區塊亦是如此,中間欄位樣式則能夠設定顏色/大小/字型等細節,進階欄位則能夠設定邊距/邊框/CSS名稱/動態/RWD…設定。

Step4.用Elementor編輯器增加頁面動態效果

除了載入漂亮的模板以外,增加動態效果能讓你的頁面看起來更有趣。我在上方這個區塊示範了幾種不同的動態設定,元件與區塊欄位設定動態都有不同的效果,但我的頁面只是想同時示範多種效果,不建議同一個區塊有過於花俏的設計喔~這樣反而會讓使用者沒辦法專心看你所提供的資訊喔~

Step5.設計師常用的效果

我常用的方式有這兩種,一個是將所有的動態往中央集中,讓使用者馬上可以知道這個頁面的重點在哪裡。

另一個方式是在電商常用的把動態放在標題上,馬上增加可愛度~

下一篇將寫我此範例頁面所使用的Elementor元件與設定細節~

以上教學就到這邊~若有遇到其他問題歡迎留言與我討論~


此文章非贊助,純粹是出於愛用而撰寫之文章,若有其他的問題歡迎留言詢問,也希望您不吝嗇您的掌聲幫我點likecoin,贊助我寫教學文章囉~

發佈留言