如何使用 ELEMENTOR
原文 如何使用 Elementor – 入门 - elementor中文
Elementor 是一个用于 WordPress 的可视化网站构建器插件,能够以实时、可视的方式创建网页。
本分步指南将引导您了解如何使用 Elementor创建网站。https://www.youtube.com/embed/Em8oIBGy6bs?feature=oembed&enablejsapi=1&origin=https%3A%2F%2Felementor.com
安装清单(核心)
此清单将引导您完成在 WordPress 网站上安装和激活 Elementor 的整个过程。如需更多信息,请单击此处。
- 在 WordPress 仪表板中,单击插件 > 添加新的。
- 在搜索字段中,输入 Elementor 并选择要安装的 Elementor 网站构建器。
- 如果您已将 Elementor 下载为 zip 文件,请单击上传插件按钮并使用文件选择器安装为 WP 插件
- 安装后,点击激活。
如果此时未安装 Elementor Pro,请跳至连接到库
安装清单(专业版)
此清单将引导您完成在 WordPress 网站上安装和激活 Elementor Pro 的整个过程。如需更多信息,请单击此处。
- 购买 Elementor Pro 后,请访问my.elementor.com
- 购买后使用您在电子邮件中收到的详细信息登录
- 登录后,您将进入“我的帐户”页面。单击“我的帐户”部分右上角的“下载插件”按钮,然后将 .zip 文件下载到您的桌面
- 返回您网站的 WordPress 仪表板,然后单击插件 > 添加新的。选择您刚刚下载的 zip 文件。点击安装并激活
- 在您网站的仪表板顶部,您应该会收到一条消息,告诉您激活您的许可证密钥。
激活清单(专业版)
为了激活所有 Pro 功能,您需要有一个有效的订阅并能够登录到您的帐户。不再需要使用许可证密钥,并且输入字段已从 UI 中删除。如果您需要通过密钥手动激活,请联系支持人员。在这里了解更多。
- 转到 Elementor > 许可证。单击连接并激活
- 您将被重定向以登录您的帐户。单击连接。登录后,您的许可证将通过屏幕窗口自动激活
- 如果许可证密钥安装正确,仪表板顶部的消息应该会消失。
连接到模板库
第一次插入模板时,系统会提示您连接免费的 Elementor 帐户以访问模板库。如果您还没有帐户,您可以在此过程中注册一个免费帐户。有关此功能的更多信息以及为什么需要它,请单击此处。
- 单击连接到库按钮
- 您可能会被重定向以登录您的帐户。登录后,单击连接。您的连接将通过屏幕窗口自动授予,您将返回上一个图书馆
- 建立连接后,您将能够使用 Elementor 模板、工具包和登录页面。
使用元素
如果您是 Elementor 的新用户,这些步骤将帮助您了解成功构建页面的要点。
在 WordPress 中创建一个新页面
- 在 WordPress 仪表板中,单击页面 > 添加新的
- 为您的页面命名
- 单击发布按钮(如果页面要保持私密,则可以设置可见性选项)
- 点击 Edit with Elementor 进入 Elementor Website Builder
编辑您的第一页
Elementor 使用三个主要构建块:部分、列和小部件。部分是最大的构建块,其中包含一组列。列位于部分内部,用于容纳小部件。小部件放置在 Columns 内。您可以使用它们的句柄控制部分、列和小部件。单击“首选项”选项卡并将开关滑动到“是”以在将鼠标悬停在元素的编辑按钮上时显示“编辑手柄”或将“否”滑动到“悬停时隐藏手柄”。
编辑
要编辑部分、列或小部件,请右键单击它们的句柄。了解有关右键单击的更多信息
部分
- 单击 + 图标以创建一个部分,或单击文件夹图标以使用我们库中预先设计的页面或块
- 设置你的列结构
- 右键单击以编辑、复制、复制、删除等。
- 使用截面手柄可以:添加截面、拖动截面或删除。
列
- 设置列宽。您可以在布局下执行此操作,或拖动列之间的虚线。
- 添加更多列右键单击>添加新列
在此处了解有关使用列的更多信息。
小部件
- 在列中插入小部件
- Widget 的宽度由列宽自动设置。对于额外的宽度控制,您可以通过导航到高级选项卡 > 定位来使用自定义宽度选项
复制或删除所有内容
您可以通过右键单击添加部分和模板图标附近的空白部分来复制或删除页面上的所有内容。您还可以将项目粘贴到同一网站的另一个页面中。
添加模板
模板是预先设计的页面和块,只需单击一下即可插入任何页面。
- 在编辑屏幕中,单击文件夹图标
- 当模板库弹出时,单击放大镜图标以预览模板。
- 单击插入以选择您选择的模板。
- 您也可以给您最喜欢的模板一个心,并将它们保存到我的收藏夹。
- 有您在其他地方下载的要使用的模板吗?只需单击右上角的向上箭头图标即可上传其 .json 或 .zip 文件。
移动响应编辑
许多可编辑功能具有移动、平板电脑和桌面设置。最常见的用途包括:文本大小、元素的边距和填充等。
- 在您希望控制的单个元素旁边查找视口图标。
- 单击要编辑其设置的特定设备图标。
控制响应式背景图像和边框
Elementor 中的背景图像会自动响应设备,但您还可以控制每个设备的更多选项。
- 背景图像:如果需要,您可以为每个设备选择不同的背景图像,无论是同一图像的大小合适的版本,还是完全不同的图像。
- 背景图像显示选项:您可以为每个设备选择不同的图像位置、附件、重复和大小。通过这种方式,您可以更好地控制图像的哪个区域显示在不同的设备尺寸上。
能见度
您可以根据设备选择显示/隐藏部分。
- 转到部分设置>高级>响应
- 设置您的可见性首选项,从在桌面上隐藏、在平板电脑上隐藏或在移动设备上隐藏中进行选择。
当隐藏一个元素并切换到隐藏它的视图时,你会看到这个元素是“静音”的。这为您提供了一个明确的指示,即该元素将隐藏在实时站点上,但仍使您能够根据需要对其进行编辑。
您可以在不隐藏的响应模式下编辑该特定区域。例如,如果元素在移动设备上可见但在台式机和平板电脑上隐藏,您将能够在移动视图中编辑元素。
更改手机和平板电脑断点
您可以设置手机和平板电脑的断点值。
- 在任何 Elementor 页面或帖子编辑器中,单击小部件面板左上角的汉堡菜单,然后导航到站点设置 > 布局 > 断点,并为手机和平板电脑设置断点值
- 保存您的更改
- 转到 Elementor > 工具 > 常规选项卡 > 重新生成 CSS,单击重新生成文件
列排序
此功能颠倒了列的顺序。
要使用列排序,请转到部分设置 > 高级 > 响应 > 反向列并将其设置为是。
设备预览
通过单击面板底部的响应式编辑图标在设备视图之间切换。设备预览将位于编辑器的顶部。
预览和发布您的页面
完成页面设计后,您可以预览并发布它。
转到底部面板:
- 要预览,请单击预览图标。
- 如果您对结果感到满意,请继续并单击发布按钮。
- 单击“查看”以查看已发布的页面
注意:预览链接与实际页面链接不同
保存为草稿
在 Elementor 中,您可以编辑已发布的页面并将您的工作保存为草稿。这意味着您在将作品另存为草稿时不会破坏已发布的页面。
- 单击更新/发布旁边的箭头
- 选择保存草稿
如何使用 ELEMENTOR相关推荐
- js点击按钮改变字体大小并给他颜色_如何在Elementor中修改文本的字体、大小、颜色、样式...
本文将介绍Elementor网页编辑器中如何修改文本的字体.大小.颜色和样式. 原文首发于:https://loyseo.com/how-to-change-font-size-color-famil ...
- 前端开发中如何将文件夹中的图片变为背景图_如何用Elementor设计banner
Banner也可以称之为海报,一般出现在网页的顶部.因为前端设计采用的是Html语言,而Html语言采用的是从上往下依次展示内容的方式,所以Banner的内容往往是一个网站首先呈现给网站访客的内容.如 ...
- 【wordpress】Elementor插件图标显示错误:显示为空方格
问题描述 在wordpress中使用Elementor的增强插件Essential Addons时,使用其event calendar发现其图标显示有误,会显示成类似"口"字这样的 ...
- 关于 ELEMENTOR 的常见问题
原文 关于 Elementor 的常见问题 - elementor中文 一般的 什么是元素? Elementor 是终极且免费的 WordPress 页面构建器,可让您以最简单.最快捷的方式创建漂亮的 ...
- 加载elementor时出现问题_禁止elementor插件加载谷歌字体
WordPress好几款不错的可视化编辑器插件,其中我个人最爱elementor了,现在如果要买主题,都会看是否支持使用elementor了,elementor有免费和专业版本,我们一般用免费版本就可 ...
- 零基础创作专业wordpress网站06-制作主页(elementor)
这节课,我们来介绍简单快速并且非常方便的做法来制作主页: image 进去之后,会有一段上节课添加的文字和一个侧边栏,我们不需要. 我们希望做一个全页面宽的页面. 隐藏标题和侧边栏 所以我们先回到页面 ...
- Elementor教程:WordPress零基础建站(非常详细图文教程)
很多人认为建站太难了,又要懂代码.网页设计,数据库,又要配置服务器等等,无从下手.那怎么办?曾经的不可能,现在可以轻易的去现实它,这里教大家如何零基础用页面构建器插件 Elementor主题(超轻框架 ...
- elementor中文模板_23种最佳Elementor主题和模板(2020)
elementor中文模板 Are you looking for the best Elementor themes and templates? 您是否在寻找最佳的Elementor主题和模板? ...
- WordPress页面编辑器插件--Elementor
内容摘要: Elementor安装 Elementor中关于块/section和栏/Column的设置 Elementor页面构建组件使用和设置举例 Elementor页面编辑器插件是当前被广泛应用并 ...
- 如何使用Elementor和OceanWP创建WordPress网站
OceanWP是市场上最受欢迎的免费主题之一.它集成了许多WordPress页面构建器插件,通过简单的拖放操作为您提供了大量设计完整WordPress网站的方法. 在这篇文章中,我们将重点介绍如何使用 ...
最新文章
- Windows Server 2003 备份和恢复的最佳做法
- 09--MySQL自学教程:多表查询之内连接、外连接以及【子查询】
- 用递归合并两个排序的链表
- 初使用swagger遇到的问题(1)
- Mac OS X下安装nvm的方法
- 字符串匹配 sunday算法
- mysql建立作业_mysql创建作业及问题解决
- 无锁atomicInteger
- 用winformz时间格式不正确_煮八爪鱼,有人用冷水,有人用开水,大厨:都不对,教你正确做法...
- Sdut 2416 Fruit Ninja II(山东省第三届ACM省赛 J 题)(解析几何)
- 排球积分程序(二)——需求分析
- 文献管理三剑客之Noteexpress:更新一次文献后把文献自动插一次
- 64位的windows server 2003运行IIS6运行32位的.NET程序
- 【Kilav】数据库知识点速通 其二
- jemalloc java_jemalloc源码结构分析
- 在WORD里如何删除页(一整页,无内容)?
- Android开发-高德地图导航
- 用Matplotlib画两张花里胡哨的图
- Contiki之初步
- 剑客之剑——玄铁重剑(VS Code)
热门文章
- 今晚8点 | 矛与盾的对决——神经网络后门攻防
- qcc512x_qcc302x笔记之环境搭建(一)
- springcloud整合openfeign启动报错,Error creating bean with name ‘feignTargeter‘
- 【解决】Jupyter Notebook 内核似乎挂掉了,它很快将自动重启。
- 外贸管理软件之出口流程整理丨汇信外贸软件
- 怎么判断冠词用a还是an_怎么判断英语量词改用a还是an
- L1-039古风排版
- 计算机重启命令编码,电脑倒计时重启代码是什么
- 用自己的域名配置动态域名解析(DDNS) (二)
- 如何搭建免费的网络验证系统