요소 튜토리얼, 워드프레스 튜토리얼

如何在 WordPress 中使用 Elementor 的完整指南

你是否觉得很奇怪为什么你做出来的WordPress页面跟平时看到的那些精美的网页有那么一点差距呢?明明用的都是WordPress为什么别人的网页会那么酷炫?

也许你会觉得那些精美的网页只有专业的网页设计师才能制作出来但其实不然,보기 좋게 보이도록、고급 웹사이트,웹 디자이너가 꼭 필요하지는 않습니다,필요한 건 하나뿐이야사용하기 쉬운 페이지 빌더

사실은,당신이 보는 그 아름다운 웹 페이지,99%강력한 페이지 편집기인 Elementor를 사용하여 모두 만들 수 있습니다.,필수 사항,아직은 무료야。

전문적인 웹사이트 디자이너가 되고 싶다면,다양하고 강력한 기능을 만들어보세요,看起来高大上的网页的话那你就不能错过Elementor这款强大的超过5百万个已启用安装数的免费WordPress页面编辑器插件。다음,就跟着这篇Elementor教程学习如何使用Elementor吧

关于Elementor

첫 번째,让我们来了解一下Elementor

Elementor是什么?

Elementor教程,最受欢迎的WordPress页面编辑器-1

요소是一款功能强大的WordPress页面编辑器插件(Page Builder)由以色列公司Elementor Ltd.于2016年创立并持续开发运营维护至今

距离Elementor上线(2016年)到现在(2022年)不过短短6年Elementor已经在整个WordPress生态圈里面产生了几乎不可取代的作用——超过500万已启用安装数近乎全五星的好评是目前最受欢迎的WordPress页面编辑器插件

Elementor最大的优点是它可以让我们通过鼠标拖曳区块的方式无需会写任何代码也能制作出好看而且功能强大的专业网站

Elementor的操作十分简单而且容易上手它有很多预设区块功能例如标题文本,그림,상,列表表格等等我们可以直接把这些区块通过鼠标拖曳到想要的地方然后轻松地就能制作出精美的网页

Elementor是免费的吗?

Elementor分成免费版与付费版的엘리멘터 프로免费版的Elementor直接在WordPress后台插件搜索Elementor Page Builder 即可安装启用

免费版的Elementor提供了一些基础的区块功能例如标题、그림、文字、동영상、단추、分隔线图标等其实已经挺够用的了目前NYPanda.com使用的就是免费版的Elementor

Elementor教程,最受欢迎的WordPress页面编辑器-2
免费版Elementor的基本区块功能

因为如果我们仔细地去拆解网页上的元素就会发现其实大部分网页都是由以上这些基本元素通过排列组合和变化组成的,그래서如果是刚入门的小伙伴我们建议可以先从Elementor免费版开始入手

Elementor教程,最受欢迎的WordPress页面编辑器-3

付费版的엘리멘터 프로则额外提供了更多的区块功能例如文章列表价格表幻灯片表单等等主要是添加了动态的网页元素能让网页看上去更加酷炫动态效果更多

如果要开启Elementor Pro的功能需要前往Elementor官网购买授权最便宜的方案是一个网站一年$49美元不算贵但也不便宜如果你想要做出一个极度酷炫的WordPress网站的话那这笔投资还是值得的

Elementor Pro也有提供30天无条件全额退款如果在买了之后觉得用起来不习惯或者性价比不高的话也可以直接跟客服申请退款不会浪费到任何钱

另外如果是网页设计师或者是想用Elementor专门为别人建网站的小伙伴建议可以直接买一年$999美金可用于1000个网站的方案多个网站分摊下来的话就会比较便宜(类似团购)

购买Elementor Pro

用Elementor来做页面编辑器插件有什么好处?

Elementor教程,最受欢迎的WordPress页面编辑器-4
  • 容易上手Elementor的操作界面十分简单易懂可以轻易地用【所见即所得】的方式来制作网站就算不会写代码或者没有任何设计基础也能轻松地通过拖曳区块(Drag & Drop)的方式将心目中想要的网站制作出来
  • 快速高效通过Elementor在设计网页的同时还可以给网页添加上各种强大的功能从而同时省下了请设计师그리고网页工程师的费用而且无需跟他们进行来回反复的沟通因为在网页设计中沟通是最大的时间成本
  • 适用性高Elementor几乎可以做出任何类型的网站无论是企业形象网站在线电商网站或者是线上课程网站都能用Elementor制作出来
  • 支持响应式网页设计我们可以通过Elementor调整网页在不同设备上所展现的外观并进行预览从而确保我们的网站在电脑手机平板上都能给访客提供良好的用户体验
  • 最多人用Elementor目前(2022年)在WordPress后台插件中显示的已启用安装数已经超过500万了并获得了5000多个将近满分的评价是现在市面上最多人使用的WordPress页面编辑器插件这代表着如果在使用过程中如果遇到任何问题几乎都能在网上找到答案
  • 完整的生态圈由于使用Elementor的人实在太多了以至于市面上有许多的独立开发者或者公司也自行研发了Elementor的相关扩展插件这使得Elementor逐渐拥有了一个完整的生态圈这也意味着几乎所有类型的网站功能Elementor都有相关方案

如何使用Elementor页面编辑器?

다음,我们将会和小伙伴们分享Elementor页面编辑器的使用概念和简单操作方法

在示范中我们用的是Astra主题+Elementor页面编辑器这个也是目前比较喜欢的WordPress制作页面的方案

安装 Elementor

Elementor教程,最受欢迎的WordPress页面编辑器-6

首先要我们要做的是安装Elementor插件前往WordPress后台插件区域,찾다Elementor搜索结果可能会出来很多Elementor相关的插件但其中只有一个是官方的

Elementor教程,最受欢迎的WordPress页面编辑器-7

认准上图然后我们就安装并启用这个超过500万次已启用安装数接近满星好评的WordPress页面编辑器Elementor Page Builder

禁用Elementor的默认颜色和字体

Elementor教程,最受欢迎的WordPress页面编辑器-8

因为我们要确保用Elementor做出来页面的风格跟我们使用的主题是一致的

所以我们要先前往WordPress后台 -> Elementor -> 设置

禁用Elementor的默认颜色 以及禁用Elementor的默认字体 都勾选起来

完成之后记得点击一下保存更改

使用 Elementor 创建页面

Elementor教程,最受欢迎的WordPress页面编辑器-9

设置完之后我们新建一个WordPress页面接着点击使用Elementor编辑 단추,就可以进入Elementor的编辑模式中

Elementor页面编辑器的使用逻辑

다음,就来到了这篇文章最重要的部分Elementor的使用逻辑

很久之前如果要做一个网页需要写HTML和CSS如果需要动态效果的话那还需要写JavaScript十分麻烦而Elementor的存在就是为了取代这些繁琐的过程让我们无需编写代码就能创建出好看而且功能强大的网站

有一部分刚开始接触Elementor的小伙伴可能会觉得Elementor怎么那么复杂想要改个颜色或者字体都不知道去哪改也太难上手了吧

其实这正是Elementor功能强大的体现,Elementor는 웹 프론트엔드 디자인의 3대 언어인 HTML을 대체하도록 설계되었기 때문에,CSS,JavaScript로 설계됨,따라서 웹페이지의 세 가지 주요 요소를 고려한다면,HTML,CSS,JavaScript에 대한 기본적인 이해를 마친 후,Elementor에 접속 후 5분 이내에 Elementor의 사용 로직을 파악하실 수 있습니다.。

하지만 이 세 가지 언어 개념을 전혀 이해하지 못하는 친구들을 위해,몇 달 동안 Elementor를 사용해 본 후에도 여전히 잘 이해하지 못할 수도 있습니다.,사용에 자신이 없음,원하는 웹 페이지를 만들려면 온라인 가이드와 비디오에 의존해야 합니다.。

그래서,Elementor의 사용법을 배우고 싶다면,그래도 먼저 해야지HTML로,CSS,자바스크립트이 세 가지 주요 언어에 대한 기본적인 이해가 있으면 더 좋습니다.,하지만 너무 복잡하게 생각하지 마세요。

Elementor와 함께 사용하기에 적합한 테마

Elementor와 함께 사용하기에 특히 적합한 테마는 무엇입니까? 공식 답변에 따르면,Elementor는 모든 테마에서 작동합니다.,관계자가 그렇게 말했지만,하지만 우리의 테스트에 따르면,일부 테마는 실제로 Elementor에 적합하지 않습니다.。

예를 들어 저는 이전에 Avada를 사용해 본 적이 있습니다., Flatsome 및 기타 테마,이 테마에는 자체 페이지 편집기가 있습니다.,테마 관계자도 자체 페이지 편집기와 함께 사용하는 것이 좋습니다.,따라서 그들은 Elementor를 특별히 지원하지 않습니다(그러나 원하는 경우 계속 사용할 수 있습니다).,다만 효과가 그다지 좋지는 않네요)。

그래서,WordPress 테마를 선택할 때,구매하기 전에 이 테마가 Elementor를 지원하는지 확인하세요.。하지만 너무 걱정하지 마세요,Elementor는 거대한 사용자 기반을 가지고 있기 때문에,따라서 일반적으로 테마 관계자는 Elementor 지원 여부를 구체적으로 작성합니다.。

다음,제가 사용해 본 세 가지를 소개하겠습니다,그리고 현재 Elementor와 함께 사용하기에 가장 적합한 테마라고 생각합니다,각각 이미지 웹사이트 구축에 적합、전자상거래 웹사이트 및 블로그 사이트。

Astra主题

Elementor教程,最受欢迎的WordPress页面编辑器-16

Astra主题유명 개발사인 Brainstorm Force가 2017년에 개발한 워드프레스 테마입니다.,불과 몇 년 만에,공식 WordPress 테마의 Astra,이미 100만 건 이상의 설치가 이루어졌습니다.,사용자들로부터 별 5개에 가까운 칭찬을 받았습니다.。

아스트라의 가장 큰 특징은 매우 가볍고 빠르다는 점입니다.,종종 몇 MB에 달하는 다른 테마와 비교,Astra 테마는 50KB에 불과합니다.。게다가,Astra는 또한 고도로 맞춤화 가능합니다.,아름답고 강력한 웹사이트를 만들 수 있습니다.,고속 웹 페이지 로딩 속도도 유지할 수 있습니다.。

Astra의 단순성과 속도 때문에,Elementor 페이지 편집기와 함께 사용할 수 있는 최고의 테마 중 하나로 만들기。

뿐만 아니라,Astra 관계자는 또한 사용자에게 Elementor를 사용하여 페이지를 만들 것을 적극 권장합니다.,Astra 기반 Elementor 확장 플러그인 출시Elementor를 위한 최고의 애드온,Elementor 생태계 합류 의지 선언。

게다가,Elementor 페이지 편집기를 사용한 Astra 테마,또한 전 세계적으로 많은 WordPress 마스터가 있습니다.、유튜버、웹 디자인 회사의 주류 매칭,지금 친구들이 검색하고 있는 npanda.com 포함,또한 Astra+Elementor로 제작되었습니다.。

Astra 테마로 제작된 웹사이트에 적합:이미지 웹사이트、블로그 사이트、전자상거래 웹사이트(거의 모든 유형의 웹사이트)。

Astra 테마 공식 홈페이지로 이동

우드마트 테마

Elementor教程,最受欢迎的WordPress页面编辑器-17

우드마트 테마2017년 8월에 출시된 WordPress 전자상거래 테마입니다.,비교적 새로운 전자상거래 테마입니다.,기존 페이지 편집기에서만 호환되는 기존 전자상거래 테마와 비교, WoodMart 테마를 Elementor와 함께 사용하여 전체 전자상거래 웹사이트를 만들 수 있습니다.。

전자상거래 웹사이트를 만드는 요소,특별히 유리한 적은 없었습니다.,전자상거래 웹사이트의 핵심은 웹사이트의 기능과 비즈니스 로직이기 때문입니다.,예를 들어 관련 제품、제품 믹스、재고관리, 소비자가 꼭 볼 수 없는 것들,웹사이트가 아름다운지 여부만 중요한 것이 아닙니다。

그러나 WoodMart는 이와 관련하여 Elementor의 단점을 매우 잘 보완합니다.,因为Woodmart主题有特别为这些电商功能做了开发可以直接搭配Elementor的区块拖曳式界面轻松地将想要的网站外观给做出来并且电商网站该有的功能也一样完整而且强大

适合用WoodMart主题制作的网站电商网站

启用Woodmart主题

有哪些好用的Elementor扩展插件

Elementor에서 공식적으로 제공하는 차단 기능이 부족하다고 느끼신다면,혹은 정식 버전에서 제공되지 않는 원하는 블록 기능이 있는 경우,다른 회사에서 개발한 일부 Elementor 확장을 설치할 수도 있습니다.,공식적으로 제공되지 않는 많은 인기 기능을 추가했습니다.。

그러나 이러한 유형의 플러그인을 너무 많이 설치하지 마십시오.,2~3개의 Elementor 확장을 설치하는 것이 좋습니다.,Elementor는 원래 많은 호스트 리소스를 차지하는 대규모 플러그인이기 때문입니다.,확장 플러그인을 너무 많이 설치하면,웹 사이트 열기 속도를 늦추는 것은 쉽습니다.。

Elementor용 필수 애드온

Elementor教程,最受欢迎的WordPress页面编辑器-19

Elementor용 필수 애드온(EA)는 유명한 WordPress 개발 회사인 WPDeveloper에서 출시한 Elementor 확장 플러그인입니다.,Pro에는 무료 버전과 유료 버전이 있습니다。

Elementor용 필수 애드온 무료 버전은 WordPress 백엔드 플러그인에 100만 번 이상 설치되었음을 보여줍니다.,거의 만점에 가까운 리뷰를 받았습니다,따라서 더 많은 Elementor 블록 기능을 원한다면,먼저 무료 버전을 설치하여 사용할 수 있습니다。

Elementor教程,最受欢迎的WordPress页面编辑器-20

EA는 약 77개의 Elementor 확장 기능을 추가합니다.,예를 들어 Elementor에서 가장 부족한 Table 기능은,如果你想要制作出美观又易懂的资料图表那么EA提供的进阶图表功能相信会符合你的需求

如果小伙伴们有兴趣的话可以参考EA的官方网站里面有许多功能的Demo可以让小伙伴们一一查看

启用Essential Addons for Elementor插件

Elementor를 위한 최고의 애드온

Elementor教程,最受欢迎的WordPress页面编辑器-21

Elementor를 위한 최고의 애드온(UAE)는 앞서 언급한 Astra 테마 개발사인 Brainstorm Force가 제작한 작품입니다.,그래서 기능이나 전체적인 디자인 면에서,또한 Astra와 Elementor Pro의 부족한 기능을 보완하기 위해 새롭게 추가 개발되었습니다.。

하지만 위에서 언급한 EA 플러그인과 다른 점은,UAE에는 유료 버전만 있습니다.,무료 평가판이 없습니다.,하지만 Astra 테마를 사용할 계획이라면,UAE는 Astra 테마와 함께 할인된 가격으로 구매 가능,많은 돈을 절약하는 데 도움이 될 수 있습니다。

Elementor教程,最受欢迎的WordPress页面编辑器-22

UAE, 약 54개의 흥미로운 새 Elementor 확장 추가,예를 들어 가격표를 전환할 수 있는 [콘텐츠 토글],매우 실용적,사용자가 다양한 솔루션 간의 차이점을 더 명확하게 이해하도록 도울 수 있습니다.,또한 UAE에서 가장 인기 있는 기능 중 하나입니다.。

더 많은 추가 기능,由于篇幅关系无法在此详述的描述如果你有兴趣的话可以参考UAE的官方网站里面有许多功能的Demo可以让你在购买之前查看一番

启用Ultimate Addons for Elementor插件

Elementor Custom Skin

Elementor教程,最受欢迎的WordPress页面编辑器-23

Elementor Custom Skin是一款受到全球网友大力推崇的Elementor插件,Elementor Pro에서 기사 블록의 모양을 사용자 정의할 수 있습니다.,다양한 기사 스킨 외관(스킨)을 생성하여,게시물 블록의 모양을 변경하려면。

예를 들어,Elementor Pro에서 원래 제공하는 기사 블록의 모습이 마음에 들지 않는다고 느끼신다면,사용자 정의 스킨 플러그인을 사용하여 다른 템플릿을 만들 수 있습니다,그리고 원하는걸로 바꿔주세요。

Elementor Custom Skin은 전체 Elementor 생태계에서 가장 인기 있는 구성 요소로 간주됩니다.,가장 중요한 필수 확장 프로그램 중 하나。다양한 모양으로 역동적인 콘텐츠를 만드는 데 도움이 됩니다.,예를 들어, 기사、WordPress를 통해 동적으로 생성된 포트폴리오 및 기타 콘텐츠。

Elementor Custom Skin 사용법을 배우고 싶다면,다음 10분 분량의 간단한 튜토리얼을 참조하세요.:

엘레멘터 FAQ

Elementor是什么?

요소강력한 WordPress 페이지 편집기 플러그인(Page Builder)입니다.,由以色列公司Elementor Ltd.于2016年创立并持续开发运营维护至今

距离Elementor上线(2016年)到现在(2022年)不过短短6年,Elementor는 전체 WordPress 생태계에서 거의 대체할 수 없는 역할을 수행했습니다. 활성화 횟수는 500만 건이 넘습니다.,近乎全五星的好评是目前最受欢迎的WordPress页面编辑器插件

Elementor最大的优点是,마우스로 블록을 드래그할 수 있습니다.,코드를 작성하지 않고도 아름답고 강력한 전문 웹사이트를 만들 수 있습니다.。

그리고,Elementor的操作十分简单而且容易上手它有很多预设区块功能例如标题文本,그림,상,列表表格等等我们可以直接把这些区块通过鼠标拖曳到想要的地方然后轻松地就能制作出精美的网页

Elementor是免费的吗?

Elementor는 무료 버전과 유료 버전 Elementor Pro로 구분됩니다.,免费版的Elementor直接在WordPress后台插件搜索【Elementor】即可安装启用

免费版的Elementor提供了一些基础的区块功能例如标题、그림、文字影片、단추、分隔线图标等其实已经挺够用的了目前NYPanda.com使用的就是免费版的Elementor

Elementor Pro 值得花钱买吗?

付费版的Elementor Pro相较于免费版额外提供了更多的区块功能例如文章列表价格表幻灯片表单等等主要是添加了动态的网页元素能让网页看上去更加酷炫动态效果更多

Elementor Pro需要前往Elementor官网购买授权最便宜的方案是一个网站一年$49美元不算贵但也不便宜如果你想要做出一个极度酷炫的WordPress网站的话那这笔投资还是值得的

Elementor Pro也有提供30天无条件全额退款如果在买了之后觉得用起来不习惯或者性价比不高的话也可以直接跟客服申请退款不会浪费到任何钱

另外如果是网页设计师或者是想用Elementor专门为别人建网站的小伙伴建议可以直接买一年$999美金可用于1000个网站的方案多个网站分摊下来的话就会比较便宜(类似团购)

Elementor可以在任何主题上使用吗?

Elementor可以在任何主题上面使用可以通过开启Elementor提供的画布功能将主题的设置以及Header, Footer去除掉并重新以Elementor进行网页设计

有哪些适合配搭Elementor使用的主题

适合搭配Elementor的主题有三款分别对照三种不同的功能

1.形象网站 –Astra
2.电商网站 –WoodMart

我可以用Elementor来写文章(Post)吗?

可以但是一般不建议这么做因为用Elementor所制作出来的区块在HTML的结构上包含着大量的 <div> 标签使用过多的Elementor区块在文章之中将会影响到网站的速度(除非你的文章很少或是使用到Elementor区块的部分很少)可以参考这篇 WordPress 谷腾堡编辑器教程或者使用经典编辑器插件

그러므로,在使用 Elementor 上建议小伙伴们遵循官方的建议将其用在【页面】上就好了

Elementor会降低网站速度吗?

会的因为Elementor其实包含了大量函数库才会令它的功能如此强大

所以当我们在使用Elementor的同时也导入了许多我们可能表面上或暂时没有用到的代码,이로 인해 웹사이트 속도가 약간 느려질 것입니다.。

웹사이트의 빠른 로딩 속도를 유지하고 싶다면,Astra 테마 및 Cloudways 호스팅을 권장합니다.。

WordPress와 Elementor의 차이점은 무엇입니까?

Elementor는 인기 있는 WordPress 웹사이트이자 웹 빌더 플러그인입니다.,WordPress 세계에 자체 도구를 제공합니다.。아마도 이를 보는 가장 간단한 방법은 WordPress가 아키텍처 프레임워크를 제공한다는 것입니다.,而 Elementor 可以让你在这个基础设施上建造美丽的豪宅

允许您构建“豪宅”的关键工具之一是 Elementor Editor这种可视化拖放编辑器允许 Web 创作者无缝构建具有复杂动态功能的网页通过使用编辑器将小部件拖放到您的页面上您可以节省创建杰作的时间这意味着工作更直观,코드를 작성하지 않고도 전문적인 웹사이트를 만드세요。

에 대한 편집부

kuajinggu의 편집진은 WordPress 전문가들로 구성된 팀입니다.,딜런이 이끄는,워드프레스에서、가상 호스트、전자상거래、SEO 및 마케팅 분야에서 10년 이상의 경험。kuajinggu는 다음에서 만들어졌습니다. 2014 년도,현재 업계 최대 규모의 무료 WordPress 리소스 웹사이트,흔히 WordPress의 Wikipedia라고 불립니다.。

답장을 남겨주세요