如何使用Elementor和OceanWP创建WordPress网站
OceanWP是市场上最受欢迎的免费主题之一。它集成了许多WordPress页面构建器插件,通过简单的拖放操作为您提供了大量设计完整WordPress网站的方法。
在这篇文章中,我们将重点介绍如何使用Elementor WordPress插件来构建一个包含OceanWP的WordPress站点。让我们开始吧。
目录
- 安装和设置
- 安装必需的插件
- 安装Elementor
- OceanWP演示
- 选择演示
- 编辑OceanWP演示
- 使用Elementor构建主页
- 自定义顶栏
- WordPress标题设计
- 建立页脚
- 使用Elementor构建自定义页面
- 导入元素或模板
- OceanWP核心扩展套件
- 相关文章
安装和设置
首先安装主题。即使您之前从未安装过WordPress主题,它也相当简单。首先转到WordPress.org的OceanWP主题,然后下载获取OceanWP。
导航到网站仪表盘外观→主题。
单击页面顶部的“ 添加新项”按钮,然后单击下一页上的“上传主题”按钮。
单击下一页上的选择文件,然后选择您下载的ZIP文件夹。单击立即安装以安装主题。
主题安装应该没有任何麻烦。单击“ 激活”。
您将再次被重定向到主要主题页面。您会注意到以当前年份命名的其他主题已停用。至少保留其中一个默认主题。如果您的主题出现任何问题,您将需要它进行测试。
安装必需的插件
OceanWP主题最适合使用一些额外的插件来正常运行。其中一个是Elementor,一个用于WordPress的免费拖放页面构建器插件,但我们稍后会谈到它。但是,Ocean Extra也是必需的。
激活主题后,主题页面上应该有通知。单击此通知附带的Begin Installing Plugin链接以安装Ocean Extra。
单击下一页上的“ 安装 ”。
该插件应自动安装和激活。
继续,单击回到仪表盘。
安装Elementor
为了使“如何使用Elementor创建WordPress站点”作为我们教程的一部分,我们需要安装并激活Elementor WordPress插件。
导航到插件→添加新插件。
在搜索框中输入“elementor”,然后安装并激活Elementor.com的Elementor Page Builder插件。
您可能需要的任何其他插件都依赖于您安装的演示,如果您选择安装它。我们来谈谈OceanWP演示。
OceanWP演示
我们所有的演示都与Elementor兼容,但这里是需要 Elementor的演示,这意味着它们不会在没有Elementor的情况下以预览的方式运行:
- 超级健身房
- 瑜伽
- 教练
- 商店
- 旅行
- 律师
- 健身俱乐部
- 女用贴身内衣裤
- 建筑师
- 时尚
- 简单
选择演示
导入演示简化了构建网站的过程,特别是如果您是WordPress的新手。它们以“您所看到的就是您所获得的”样式工作,因为它们允许您将完全开发的设计导入您的站点。您真正需要做的就是更改内容以匹配您的品牌,并真正制作您自己的演示。
如果我们的演示中没有代表您的利基,请尝试选择最合适的一个。例如,我们的建筑师和时尚演示将适合建立作品的服务型企业,例如自由摄影师、自由平面设计师或创意机构。
编辑OceanWP演示
单击WordPress管理区域左上角的站点标题以访问站点的前端,然后单击使用Elementor编辑。
或者,您可以转到页面→所有页面,然后单击与主页关联的“使用Elementor编辑”链接。
您将看到Elementor编辑器,看起来就像Architect演示中一样。
从这里开始编辑很容易。如果您想要更改“WELCOME TO ARCHITECT!”文本,只需单击它即可打开该元素的编辑器。您可以在文本编辑器中更改文本。
打开样式编辑器以更改元素的颜色、字体和其他方面。
只需确保单击绿色的“保存”按钮,否则您所做的所有更改都将丢失。
如果要更改背景图像或徽标,请单击X,然后选择“ 查看页面”。
这将在新选项卡中打开页面的前端,并删除Elementor编辑器。单击“ 自定义”。
单击Architect徽标附近的铅笔图标。
单击“ 更改徽标”将徽标上载到站点。
如果要从 Elementor编辑器返回后端的页面编辑器,请单击X,然后选择“ 转到仪表板”。
从头开始
如前所述,OceanWP与Elementor 100%兼容。因此,您可以使用Elementor的拖放编辑器创建自己的设计。如果您不想创建自己的设计,您甚至可以导入Elementor模板并简单地更改内容。
这样,假设您在您的站点上安装了OceanWP主题和Elementor插件。让我们来看看如何做到这一点。
使用Elementor构建主页
创建一个新页面并将其命名为Home。
向下滚动到OceanWP设置部分,然后选择100%全宽作为内容布局。
打开“ 标题”部分,然后启用“ 顶栏”和“ 标题”。如果您决定不需要它们,可以稍后禁用它们。
打开标题部分,然后禁用它。这可确保页面标题“Home”不会显示在顶部。
打开“ 页脚”部分,然后启用“ 页脚窗口小部件”区域和“ 版权区域”。同样,如果您决定不使用它们,可以稍后禁用它们。
更新页面以保存我们所做的更改,然后转到设置→阅读,将首页显示设置更改为静态页面,然后选择Home页面。
确保保存更改。然后,转到外观→自定义以打开实时主题定制器。您将看到一个空的网站。
自定义顶栏
单击顶部栏以打开顶部栏设置部分。单击“ 常规”,以便我们可以首先添加背景颜色。我们还将文本颜色更改为白色。
您可以将背景颜色设置为与您的品牌相匹配的背景颜色。您可以使用W3Schools的HTML Color Picker等工具,或者只使用Google“html color picker”来使用Google搜索出的工具。
完成后单击后退按钮,然后打开顶部栏的“ 内容”部分。我将在本教程中使用一些Font Awesome图标。如果您想继续,请继续将其复制并粘贴到文本编辑器中。
如果要在对方的社交媒体帐户中添加链接,请打开顶部栏的“ 社交”部分,然后添加所有相关链接。您还应该更改社交链接颜色。
如果您不喜欢顶栏左侧和右侧的填充(间距),请启用顶栏全宽设置,并使用右侧和左侧填充设置设置您自己的填充。
单击“ 保存并发布”以保存更改。
WordPress标题设计
接下来是标题,你可以在这里做很多事情。让我们从徽标开始,转到标题→徽标。单击选择徽标,然后上载徽标。您可以看到我们建议维度为164 x 45像素。知道您也可以使用主题构建器设计标题。
如果您上传较大的尺寸,则可以上传,以全宽裁剪,并更改“ 最大宽度”设置。
接下来,您需要创建一个菜单,以便在头部添加一个菜单。如果您是WordPress的新手,请创建一些名为博客、关于和联系的页面,并使用WordPress中的该指南来学习如何创建菜单。
然后,返回自定义程序,转到菜单→菜单位置,然后选择主菜单下的菜单。
这是一个非常简单的标题,对于大多数人来说绰绰有余,但是如前所述,使用OceanWP的标题可以做很多事情。例如,如果您不想要顶部栏但仍希望保持链接到您网站顶部附近的社交媒体帐户,您可以返回页面编辑器,禁用顶部栏,重新打开自定义程序,转到页眉→菜单社交并在那里启用它们。
您还可以更改图标的样式。
建立页脚
您还可以向OceanWP的页脚小部件区域添加页脚小部件以完成页脚。
使用Elementor构建自定义页面
完成页眉和页脚后,您可以开始向页面添加内容,特别是在页眉和页脚之间。返回主页的页面编辑器,然后单击使用Elementor编辑。
从这里,您可以使用Elementor的部分和内容元素来构建自己的页面布局和设计。
导入元素或模板
或者,如果您不想学习如何创建和构建自己的设计,则可以导入元素或模板。这些模板的工作方式与OceanWP演示的工作方式非常相似。您可以选择自己喜欢的设计,导入它,并使用简单的点击操作来根据自己的喜好更改内容。
单击添加模板。
有六个免费的主页模板可供选择,但只要您有要推广的服务或产品,着陆网页模板也适用于主页。将鼠标悬停在要用于主页的模板上,然后单击“ 插入”。
这是我们现在拥有的:
现在,您可以将鼠标悬停在任何元素上进行编辑。
如果要更改背景图像,请单击“ 部分”按钮。
您可以在“ 样式”部分下找到图像编辑器。
与往常一样,请确保在退出编辑器之前单击“ 保存 ”以确保保存更改。
OceanWP核心扩展套件
OceanWP提供免费和高级扩展,您可以使用它们来扩展主题的功能。其中一个扩展称为Elementor Widgets。该扩展为Elementor编辑器添加了六个新的小部件,它们是:
- 警报消息小组件
- 博客轮播小工具
- 博客网格小工具
- 时事通讯小工具
- 定价小工具
- Skillbar小工具
这些小部件为您提供了使用已有元素的新方法,但有些内容,例如Blog Grid(您可以在这里学习如何创建博客)、Newsletter和Pricing小部件,都是新的。
Elementors Widget扩展单站点官方许可证的费用为39美元,五个站点许可证的费用为59美元,20个站点许可证的费用为79美元。但是,您可以通过购买会员资格来节省购买此扩展以及OceanWP提供的所有其他扩展的费用。
如何使用Elementor和OceanWP创建WordPress网站相关推荐
- WordPress网站创建和添加Google数据分析代码完整指南(2022年8月最新)
本文介绍WordPress网站创建和添加Google数据分析代码如何操作和实现.包含了Google Analytics实时数据流量(转化分析设置)和Google Search Console自然搜索流 ...
- 创建多个wordpress_如何轻松创建多语言WordPress网站
创建多个wordpress Do you want to translate your WordPress site in multiple languages? 您想用多种语言翻译WordPress ...
- wordpress创建_如何在WordPress中轻松创建优惠券网站
wordpress创建 Are you looking to create a coupon site with WordPress? We often get asked about how did ...
- wordpress创建_在WordPress网站上创建论坛的利弊
wordpress创建 The Pros and Cons of Creating a Forum on a WordPress Website 在WordPress网站上创建论坛的利弊 Forums ...
- 利用您的内容获利:使用UMP创建会员WordPress网站
您是否要开始从WordPress网站上赚钱? 您可以注册Amazon Associates计划并通过推介链接产生收入 ,使用诸如Adning之类的插件出售广告空间,或者甚至可以决定通过您的网站开始销售 ...
- Facebook,Twitter和实时聊天按钮:创建精通社交的WordPress网站
博客是您的日常工作还是一次又一次的业余爱好都没关系. 无论您是刚刚成立初创公司并梦想着使其成为"一天"的梦想,还是您的企业目标严格以满足该财务季度的要求,社交媒体都是提高网站访问量 ...
- 广告广告:为您的WordPress网站创建广告
广告是网站创收的主要方式之一. 也许您专门创建了一个博客,以吸引人们访问您网站的" 商店"页面,并希望给访问者额外的帮助? 也许您经营着几个网站,并想在整个投资组合中提升自己的最大 ...
- 如何轻松创建 WordPress 多语言网站
您想将您的 WordPress 网站翻译成多种语言吗? WordPress 为互联网上超过 42% 的网站提供支持.他们中的许多服务于非英语或多语种受众. 在本文中,我们将向您展示如何轻松创建 Wor ...
- 如何创建一个网站?初学者的分步指南
在2020年,任何人都可以在不了解Web开发,设计或编码的情况下建立和设计网站. 无论您是想为自己还是为企业创建网站,都可以使用正确的工具和资源轻松地做到这一点. 本分步指南将帮助您从头开始创建网站, ...
最新文章
- iOS集成alipay无线应用sdk错误问题
- 中南大学c语言程序设计2013年下学期期末考试,2013级计算机专业本科生C语言程序设计期末考试资料.doc...
- 【转】老男孩:Linux企业运维人员最常用150个命令汇总
- asp.net ajax技巧6
- POJ2391 Ombrophobic Bovines
- prometheus命令_Prometheus
- ajax post常用请求头
- 音视频处理之FFmpeg封装格式20180510
- vue可以编辑发布多长的视频_VUE做长视频的具体操作步骤_VUE可以调整视频时长吗-如何调整-VUE设置视频分段和时长的完整版教程_9号资讯...
- 在国内程序员是吃青春饭的职业吗?
- 小米wifi驱动 linux驱动,小米wifi驱动程序
- hutool对称加密
- Eclipse快捷键自动生成返回对象
- Dojo1.11官方教程文档翻译(3.4)Dojo特效
- Locality Sensitive Hashing ( LSH,局部敏感哈希 ) 详解
- Anima Toon:体素角色动画软件
- 在 Linux 中查找用户帐户和登录详细信息的 11 种方法
- 虾皮面试真题:虾皮后端15连问!
- 微服务 分布式配置中心Apollo详解
- .Net IIS 内存溢出(System.OutOfMemoryException)
热门文章
- **kwargs python_python中**kwargs怎么用?
- datawhale pandas 打卡02 pandas基础
- 【学术篇】oj.jzxx.net2701 无根树
- 1092: 【入门】时间的差! 题解
- C# 控制投影仪投影图片
- 多线程锁的升级原理是什么?
- v65.05 鸿蒙内核源码分析(挂载目录) | 为何文件系统需要挂载 | 百篇博客分析OpenHarmony源码
- Jupyter notebook 打开IE浏览器之后显示空白页面
- 其他智能手机支持鸿蒙系统吗,余承东:明年华为智能手机全面支持鸿蒙系统
- 常用手机号、邮箱正则表达式