Elementor教程

— 世界領先的WordPress可視化頁面構建器插件elementor使用指南

WordPress上面有很多優秀的可視化網頁設計工具(Website Builder),而Elementor更是這些頁面構建器中的佼佼者,本文奶爸建站筆記將為大家介紹如何一步一步使用Elementor來設計網站。

什麼是Elementor?

Elementor是WordPress平台上的一款可視化頁面構建器插件,你可以不需要具有專業的編程能力,就可以通過Elementor拖拽式設計和生成網頁,例如你看到的這篇Elementor教程,就是通過Elementor設計和製作出來的。

Elementor版本區別

Elementor分為免費版和高級版,高級版也就是付費版,價格為49美元/網站/年起,Pro(高級)版擁有更多的小部件、網頁模板、設計素材,並且支持生成WooCommerce頁面,能更加完全的定製網站外觀和功能。(具體區別

如果對網站設計要求不高,免費版的elementor就夠用了,奶爸建站筆記目前使用的是elementor免費版+Ultimate Addons For Elementor 設計的。

你是否需要用到Elementor?

elementor只是眾多頁面構建器的其中之一,如果你還沒有使用過其他的頁面構建器,那麼直接從elementor入手是一個不錯的選擇。如果你自己有對網站設計的想法,但是不會寫代碼,那麼elementor就是你所需要的工具。

Elementor Pro破解版靠譜嗎?

網上有Elementor破解版下載,在確保破解資源乾淨的情況下,是可以使用的。不過elementor pro激活是採用在線激活模式,破解版的elementor也只能使用元素小工具,並不能使用在線的素材,所以真的有需要,建議購買正版。Elementor Pro正版購買地址。(如果官方的售價你覺得太貴了,也可以Elementor Pro正版購買地址。,僅售99元/年/站點,正版保證。)

Elementor安裝教程

使用Elementor的前提是你已經有了一個WordPress網站,如果還沒有,請參見奶爸之間的WordPress安裝教程,先搭建一個WordPress網站。

進入WordPress後台,選擇插件,安裝,然後搜索elementor,找到截圖中的這個圖標,安裝並且激活。(或者從這裡下載安裝包後上傳到網站上安裝。)

安裝Elementor教程

安裝完畢後點擊激活(Activate)按鈕,會出現下圖。

elementor引導

提示你創建一個Elementor帳號,免費版的話創建了也沒什麼意義,直接跳過就好。

如果你想要購買高級版,可以到奶爸這裡購買

elementor 使用嚮導

讓你使用它們的hello主題,這個主題是一個完全空白的主題,任何東西都要你通過elementor去設計,不建議新手使用,自己沒設計功底做出來的網站會很醜。推薦使用astra這種簡單的主題。

elementor上傳LOGO

讓你上傳網站LOGO,如果還沒準備好,也可以後面再傳。

elementor使用教程

直接跳過。

elementor默認界面

激活成功後,在你網站後台左邊的菜單裡面,就可以看到Elementor對應的菜單入口。

elementor設置

提示:如果你購買了elementor Pro,那麼還需要手動上傳pro的安裝包到插件界面安裝,然後激活才能使用Pro的功能。

Elementor使用教程

安裝完畢Elementor,接下來我們就一起來看看怎麼使用Elementor進行網站界面設計。WordPress默認主題對於普通用戶來說,想要調整的美觀是比較難的事情,所以我們這裡推薦大家安裝Astra這款免費小巧的主題

創建第一個elementor頁面

1、在WordPress後台,選擇新建,頁面。

新建elementor頁面

2、點擊最頂上的使用Elementor編輯按鈕,出現的界面就是Elementor的工作界面。

使用elementor編輯

3、Elementor工作區介紹,在打開的頁面最左邊的,就是Elementor的小工具,帶鎖的就是Pro版本的功能,需要付費購買。右邊就是你網站頁面的可視化編輯區。

elementor工作區域

使用Elementor設計頁面教程

接下來奶爸教大家如何使用Elementor來設計頁面,當然,設計的前提是你知道自己要把這個頁面設計成什麼樣子,你可以先畫一個草圖,然後慢慢用elementor設計出來。

使用Elementor設計頁面有兩種方法:1、完全自己設計;2、導入設計好的模板修改。

最基礎的elementor使用方法如下:

elementor設計頁面方法

①、在左邊的這些元素,你需要使用什麼,就按住直接拖動到右邊的可視化編輯區域。

②、這個加號可以新增段,你可以理解成新增加一塊內容區域,和上一塊內容分開。

③、這裡是添加模板,點擊後你會發現裡面分為:模塊、網頁、我的模板。

elementor模板庫

這些模板庫裡面,帶有Pro標誌的,就是意味著要Elementor Pro才能使用,我們這裡隨便導入一個網頁來作為演示。

點擊插入,然後需要你使用elementor帳號進行連接,沒有elementor帳號的點擊這裡註冊一個。

elementor導入模板

成功導入後,就如上圖的樣子。

我們需要修改什麼地方,就點擊那個區域,然後左邊就會出現對應的元素設置窗口。

elementor設置界面

如果碰到不想要的部分,直接右鍵點擊刪除就可以了。

右鍵刪除elementor元素

如果需要新增內容,就點擊加號,然後選擇段,再把要添加的內容拖進去,例如圖片、文本、標題、視頻這些內容。

使用現有模板庫裡面的頁面進行設計相對來說更加簡單,便於新手學習和研究,當一切就緒後,點擊發布/更新按鈕,就可以完成這一個頁面的設計了。

免費Elementor功能增強教程

Elementor Pro的價格你覺得太貴不值得購買(找奶爸可以99元購買喲),奶爸教你幾招免費獲得elementor功能增強的技巧。

進入WordPress後台插件安裝界面,搜索elementor之後,你會發現有很多標題帶有elementor的插件,如下圖:

elementor相關插件

例如我們安裝Essential Addons和Premium Addons後,在使用elementor編輯器設計頁面的時候,左側的元素區域就會多出很多本身沒有的功能。

elementor功能增強

一些elementor Pro上的功能,通過安裝第三方Addons也可以實現,不過不建議安裝太多的擴展插件,因為不同的插件會包含不同的js和css等文件,容易引起網站打開速度變慢。

Elementor Pro高級功能使用教程

雖然通過第三方插件可以擴展免費版elementor的功能,不過一些高級的功能還是沒有辦法替代的,這裡奶爸就教大家如何使用elementor pro的一些高級功能。

使用elementor pro你可以完全從頭規劃你網站的各種配置,例如主題顏色、文字、排版、按鈕的樣式,如下圖:

elementor pro高級功能

設置好全局樣式之後,可以回到主題構建器,自己拼湊一個想要的網站設計。

elementor主題構建器

可以看到,你可以自己設計網站的header、footer、Single Post、Single page等頁面,如果你安裝了WooCommerce電子商務插件的,那麼電商頁面也可以自己設計。

例如我們選擇一個Header,點擊創建,然後會彈出一個模板庫,裡面所有的預製header模板你都可以直接導入使用,不滿意也可以自己手動設計。

elementor頭部設計

設計好了之後,點擊發布,會出現選擇在哪些頁面顯示的選項,如下圖。

elementor顯示位置

你可以設置整個網站(entire site)都顯示,或者只是部分頁面顯示這個頭部布局,其他的頁面也類似,這就為你網站自定義提供了很大的自定義空間。

elementor模板庫

在elementor pro的在线模板库里面包含了很多的预制模板,包括整个网站的,或者某一个部分功能的模板,使用pro都可以直接导入使用,也可以导入后自己修改。对于新手来说,无疑这是一个很强大的功能。

超便宜購買正版elementor pro

Elementor使用常見問答

如果你安裝了專業的幻燈片插件,例如Slider Revolution這種,那麼直接在編輯頁面的時候,選擇簡碼,然後把幻燈片的短代碼粘貼進去就可以了。

elementor短代碼

如果你沒有安裝任何Slider插件,那麼也可以使用elementor pro的Slider元素創建。

elementor Slider元素

elementor上面的文字顏色和大小都可以單獨設置,首先,找到你需要修改的文字元素,例如文本編輯器,然後選擇樣式標籤頁,就可以看到設置文字顏色和大小的地方了。

elementor文字顏色和大小修改

外貿網站建設上,網站的詢盤表單是必備的一個需求和功能,怎麼使用elementor製作聯繫表單呢?

首先,你需要安裝一個聯繫表單插件,直接在後台插件庫搜索contact就會出來很多免費的聯繫插件,安裝好之後,創建一個詢盤表單,然後複製短代碼到Elementor裡面添加簡碼元素即可。

頁面上的跳轉效果專業術語叫做錨點,這裡涉及到一點html基礎知識,例如這篇elementor教程的目錄功能點擊後可以跳轉。奶爸這裡使用的是文章目錄插件

不過我們也可以手動使用elementor創建錨點。點擊你想要跳轉到的元素或者段,然後高級裡面輸入一個唯一的id值。

elementor添加ID跳轉。
然後在需要跳轉的按鈕或者連接上,輸入當前文章的網址#id就可以了(id為你自己設置的那個,截圖上為jump1)

網站頭部和底部內容默認使用elementor是沒有辦法修改的,我們需要另外安裝一個插件:Elementor – Header, Footer & Blocks Template,安裝並且激活插件,接著就可以在主題菜單的內容區塊處看到。

elementor添加頭部和底部

在elementor的左側工具欄最底下,點擊電腦圖標,切換到手機端,就可以編輯網頁在手機上的顯示效果了。

elementor手機端

更多elementor教程

如果有沒能解答你elementor使用問題的教程,可以在本文末尾留言,我會適當更新相關操作說明到本文。

50關於 "Elementor教程,一文学会用Elementor建网站 "的想法

  1. 设计归档模板时,条件为作者归档。但发布后,归档页还是原主题自带的样式,自己设计的归档模版,并没有生效。不知是什么原因。条件切换为日期,模板就会生效。真是很奇怪。希望奶爸讲解一下。

    1. 我测试了下,设置之后没有问题。可能是你哪里设置的不对。Query设置根据作者筛选,日期所有,排序按照日期,倒序。设置之后多用户只显示自己设置的那个用户的文章归档。

  2. 安装Essential Addons插件后,左侧的elementor面板就变灰了,无法拖拽了。然后关闭Essential Addons插件就正常了,这是什么原因呢?

  3. Elementor是一个页面的编辑器,我对于Elementor与Theme的关系没搞明白:
    我想自建一个to B的外贸站,主要是接询盘,
    1)单用Elementor免费版行么?既然可以拖拽编辑,为什么还要用theme?
    2)用Elementor Pro可以替代theme么?
    3)如果用flatsome,那还要装Elementor么?
    4)to B的网站,需要用woocommerce么?
    5)to B的网站,用什么样的组合好?Elementor + Astra?
    我真的是没有搞清楚概念,麻烦奶爸答疑解惑,多谢。

    1. 1、可以
      2、可以,不推荐新手这么做
      3、不需要,flatsome自带构建器
      4、看情况,可用可不用
      5、合适自己的最合适。
      elementor类似于装修队,主题类似于不同户型的房子,如果你想自己布置房间布局,那就装elementor官方的hello主题,自己设计每个房间的布局和风格等等。

      1. 多谢您,您回复得太迅速了,感谢感谢。
        1)如果是to C的网站,用flatsome+woocommer,有问题么?这两者有重叠么?
        2)我刚刚浏览到别的网站,它提到用Elementor Pro + Astra免费版(说是最轻),这样的组合,比只用Elementor Pro,针对to B的网站,在建站难度、美观、功能,这3方面有多少差别呢?

          1. 就是你想要难度低,美观,功能强大的没有。功能强大难度肯定高。美观也需要有设计功底,所以也不简单。

  4. 多谢多谢。还有最后一个问题,to B 网站,如果要做多产品打包询盘,做成quote cart那种,elementor Pro + Woocommerce + yith woocommerce request a quote , 这样组合可以么?Woocommerce是 必须的是么?只是to B,不需要实际交易,Elementor Pro可以add to cart的话,是不是就可以不用Woocommerce了?原谅我问的可能很无语,但确实疑惑,还请指教,谢谢。

      1. 我换个网络试试,如果我想在图片上输入文字,应该怎么操作呢,或者说我想把问题放在图片上,该怎么设置?

  5. 奶爸你好,我建站的时候不管首页还是关于我们还是联系我们之类的页面点开都是首页的页面,不知道是哪里出了问题,然后我跟着网上的教程把阅读设置更改了之后首页变得不可编辑了,而且很容易卡死没办法进入网站,显示504错误,现在我懵了

        1. 504错误代表网关超时 (Gateway timeout),是指服务器作为网关或代理,但是没有及时从上游服务器收到请求。
          504通常是服务器配置不当或者是网站资源占用不正常引起的服务器崩溃,原因很多。

  6. 使用elementor设计网站,首页调用文章列表,文章标题和文章日期如何做到横排,在elementor找不到设置的地方,请指教

    1. 这个取决于你安装的elementor附加组件或者主题自带的元素是否支持横排,如果不支持的话你就没办法那么设置。elementor本身是把一些代码的内容可视化了,但是如果没有那么代码,你想可视化出来的效果就没有。

  7. 奶爸你好,我在下载Elementor插件的时候出现HTTP 500内部服务器错误的情况,在Elementor官网注册账号时也会出错,请问如何解决。我是在本地建站的,phpstudy集成环境

  8. 您好,总是提示出问题了,请再试一次。我这里再多试几次看看,也可能跟访问Google的一些相关服务产生障碍。

  9. 你好,我导入了主题模板后,用Elementor编辑网页。原本的网页的右上方有模板的logo,而我点开用Elementor编辑时,Elementor的菜单栏遮盖了logo部分,无法编辑提货logo图片。请问这种情况需要如何解决?谢谢

  10. 奶爸,你好,初用ELEMENTOR,不知道怎么回事。
    选中标题或图象需要编辑的地方,左边再选样式的时候,就不显示样式的菜单了,试过删除再安装,还是一样到选样式就卡了。

    但可以增加信息,每次增加信息,都提示更新,是每次都要更新么?

  11. 您好,想请教一下“简码”的问题:
    在wp后台下载并安装了插件YITH插件,通过elementor编辑插入简码:[yith_ywraq_button_quote]
    但是页面并没有生成按钮,只显示了我输入的简码本身:[yith_ywraq_button_quote]
    请问这个问题要如何排查修复呢? 谢谢!

    1. 没有,毕竟都要花钱买。目前的情况Elementor免费版就够很多网站用了。generateblock的那些效果实际上用ele基本上也都可以弄出来。

    1. 破解版,传上去随便哪个网站都可以用,但是只能用他的pro功能,不能用他在线的模板素材。正版的是一个网站绑定一个授权,可以用功能和在线模板库。模板库就是给你做了一些现成的模板,你可以直接点击导入到你网站上使用。

  12. 奶爸,你好,用elementor做完前端页面后,如何调取数据库数据呢,比如要实现新闻列表和详情页动态数据,怎么实现呢?

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。

回到頂端