網站設計基礎篇~Elementor教學 PART 1

190608 每日_工作區域 1

嗨~又到了網頁設計的教學時間,相信目前有在使用Wordpress的各位一定不陌生這個外掛,那就是Elementor啦!本文會詳細的介紹基本Elementor的介面及特色,就跟著光先生一起看下去吧!


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

啟用Elementor

安裝好外掛並啟用後就會在全部文章/頁面看到一個“使用Elementor 編輯” 的按鈕,點擊後就會進入到Elementor編輯器

點進要編輯的文章/頁面也會看到“使用Elementor 編輯” 的按鈕

Elementor頁面布局

點編輯進到頁面後,找到右邊內容裡的頁面屬性

Elementor提供2款範本,共3種選項

  • 預設範本:佈景主題自帶的版型,一般會保留原主題的元素,常用在文章
  • Elementor全寬:內容部分設置為100%寬度,保留原主題頁首和頁尾
  • Elementor畫布:空白版型,不包含任何其他元素,適合做一頁式頁面

    注意!!佈局要先更新之後再開啟Elementor才會生效唷

Elementor操作介面

Elementor的左側是編輯欄,右側顯示實際網頁的版面, 使用Elementor,不需額外找空白版面,只要在Elementor頁面屬性的範本中選擇畫布就能獲得全新的頁面,也無其他主題或者外掛要求,可以在任何類型的WordPress主題中使用Elementor

 

 

(圖為進入Elementor編輯器更改頁面布局的方式/和文章一開始提到的右邊內容裡的頁面屬性是一樣的)

多樣化的列佈局

可根據設計圖選擇列的數量及樣式,滑鼠拖拉左方小工具移至合適位置,即可構成網站的頁面設計。

Elementor功能以及體驗

最重要的一點,大概就是文字能夠即時編輯,這是可以判斷一款頁面編輯器是否現代、有效率。Elementor是支援即時編輯的!

Elementor樣式設置

除了針對每個小工具的基本選項外,Elementor還提供了高級樣式設置,設置小工具的顏色、尺寸、內外邊距等,根據每個小工具的特色會有不同的選項

每個小工具都有三段可設定
內容/尺寸、對齊、加上URL等基本設定
樣式/可選擇字體、字體顏色、動畫、圓角等更細節的設定
進階/ 內外邊距、進場動畫、邊框、背景、CSS等進階設定

方便的右鍵功能

和其他頁面編輯器不同,Elementor支援右鍵功能,就像一般電腦一樣

  • 方便的刪除選項按鍵,當要刪除物件時可右鍵或者將滑鼠移至物件出現藍框後點選叉號即可刪除
  • 可重複複製區塊,省去同設計再度製作的動作

Elementor快捷鍵

Elementor也支援快捷鍵,如常用的複製 Ctrl + C、貼上Ctrl + V、歷史記錄Ctrl + Shift + H等,熟悉這些鍵的話在製作網頁時會更加的便利

導航選項

Elementor的導航選項的作用就是可以改變段的排序,減少滑鼠在頁面滾動的時間,蠻類似AI或PS的圖層

響應式編輯

製作頁面時,可以使用下方的響應模式進行調整,包括桌電、平板和手機,這三種裝置的樣式時不會互相影響,可對不同裝置單獨進行編輯

預覽變更

下方的預覽變更能夠及時查看網站實際上線的畫面,是不是很便利呢?

Elementor基本介面的介紹就先告一段落啦,這還只是其中一部分唷! 想知道更多Elementor的使用撇步嗎?那就千萬別錯過下次的文章哦!我們下次見啦!

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

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

每日學,文章推廣

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

發表留言