文章分类
新手入门学习建站主机推荐
非常适合外贸新手入门的一款共享主机,非常简洁的管理面板,第一年费低至300元!
文章标签

Hello Elementor主题(免费版)安装并导入模板

文章导航

Hello主题开箱即用,并与Elementor保持一致的兼容性。 而且是一款非常轻量的主题,如果你已经对Elementor非常熟悉和了解,并希望使用一个轻量的主题壳就可以使用Hello Elementor。

但是需要提醒的是,Hello Elementor主题非常简单,它所带来的优势完全基于Elementor页面编辑这个插件的结合使用。所以导入模板的过程也相对复杂,没有像Astra主题那样一键导入这么简单需要你对Elementor搭建网站有一定的了解。

免费版的主题我们可以直接在网站后台在线进行安装。

1、安装主题

【外观】–>【主题】–>【安装主题】–>搜索主题

Hello Elementor主题(免费版)安装

点击【安装】主题,安装之后【启用】主题

image 16 2 - Hello Elementor主题(免费版)安装并导入模板 - NUTSWP

2、安装Elementor插件

安装完成之后,系统会自动提示安装Elementor插件,点击安装即可。

安装Elementor插件

安装完成之后启用插件,进入插件主界面,网站左侧出现插件功能菜单。这里需要说明的是,安装的Elementor插件是免费版本的。如果你还不熟悉Elementor,可以利用入门指南进行学习,如果你已经了解并会使用Elementor,我们继续往下。

image 17 1 1024x795 2 - Hello Elementor主题(免费版)安装并导入模板 - NUTSWP

3、安装Envato Elements模板库插件

直接在网站后台插件库中搜索Envato Elements插件进行在线安装并启用。

安装Envato Elements模板库插件

安装完成之后,进入Free Template Kits,可以看到大概有13页的免费模板可以使用。

安装Envato Elements模板库插件

另外还有很多预设好的模块可以使用

image 19 1024x692 2 - Hello Elementor主题(免费版)安装并导入模板 - NUTSWP

4、导入模板

在Free Template Kits中找到自己心仪的末班,点击【Install Kit】安装这个模板。

导入模板

安装之后点击【View kit】查看模板

导入模板

我们会看到有个安装要求,我们点击【Install Requirements】查看一下安装要求。

image 20 2 1024x310 2 - Hello Elementor主题(免费版)安装并导入模板 - NUTSWP

这里提示我们有三个要求,这里我们暂时先不管。

image 20 2 - Hello Elementor主题(免费版)安装并导入模板 - NUTSWP

回到查看模板页面,我们看到部分页面下面也有提示,首先标记这个页面是Pro版本的,然后告诉你需要安装Elementor Pro才可以导入这个模板页面。

但我们会发现大部分Pro版本的模板页面都有免费版本的替代母版页,那么我们只需要导入我们需要使用到的模板页面就可以了。点击绿色的导入按钮即可。

image 21 1024x920 2 - Hello Elementor主题(免费版)安装并导入模板 - NUTSWP

在导入前我们还可以鼠标移动到模板图片的左下方,点开预览整个页面的效果。

image 21 2 1024x660 2 - Hello Elementor主题(免费版)安装并导入模板 - NUTSWP

全部导入之后我们可以在Elementor模板功能下看到我们导入的模板。

image 21 1024x659 2 - Hello Elementor主题(免费版)安装并导入模板 - NUTSWP

5、创建页面并添加模板内容到页面

以创建首页为例:

1)创建一个新的页面

创建页面

2)页面命名为Home

创建页面

3)使用Elementor编辑该页面

创建页面

4)隐藏标题

image 25 1024x803 2 - Hello Elementor主题(免费版)安装并导入模板 - NUTSWP
image 26 1024x611 2 - Hello Elementor主题(免费版)安装并导入模板 - NUTSWP

4)按照下面的步骤导入我们安装的模板

image 27 625x1024 2 - Hello Elementor主题(免费版)安装并导入模板 - NUTSWP

导入之后可以看到模板的内容已经被添加到我们穿件的页面中,这时我们只需要利用Elementor对页面进行修改和编辑即可。

image 28 1024x808 2 - Hello Elementor主题(免费版)安装并导入模板 - NUTSWP

5)保存并发布页面

image 28 1 1024x802 2 - Hello Elementor主题(免费版)安装并导入模板 - NUTSWP

6)预览页面

image 28 2 1024x800 2 - Hello Elementor主题(免费版)安装并导入模板 - NUTSWP
image 28 3 1024x755 2 - Hello Elementor主题(免费版)安装并导入模板 - NUTSWP

按照以上步骤,创建我们需要的其他页面。

image 28 1024x496 2 - Hello Elementor主题(免费版)安装并导入模板 - NUTSWP

6、创建网站主菜单

网站后台跑【外观】–>【菜单】–>创建菜单

创建网站主菜单
image 30 1024x518 2 - Hello Elementor主题(免费版)安装并导入模板 - NUTSWP

浏览网站,可以看到菜单已经显示。

创建网站主菜单

但网站首页并不是我们创建的页面,继续往下看

7、设置网站主页

网站后台【设置】–>【阅读】–>【您的主页显示】设置

设置网站主页

保存之后再留言网站时,首页就是我们所创建的首页

设置网站主页

页面创建完成之后,我们发现网站的Header部分不能自定义美化,而且网站没有固定的Footer,让我们继续往下。

8、ElementsKit Lite创建网站的Header和Footer

在线安装插件ElementsKit Lite,并启用该插件,注意这也是一个免费的插件。

ElementsKit Lite创建网站的Header和Footer

1)创建网站Header

创建一个Header模板

image 34 1024x756 2 - Hello Elementor主题(免费版)安装并导入模板 - NUTSWP

设置Header模板的标题,类型为Header,作用于整个网站(Entire Site),激活,然后保存。

image 35 2 - Hello Elementor主题(免费版)安装并导入模板 - NUTSWP

点击列表中对应的Header模板的编辑,然后在弹出框点击【Edit Content】

image 36 1024x775 2 - Hello Elementor主题(免费版)安装并导入模板 - NUTSWP

进入Elementor编辑状态

image 37 1024x367 2 - Hello Elementor主题(免费版)安装并导入模板 - NUTSWP

进入Elementor kits模板库

image 38 1024x329 2 - Hello Elementor主题(免费版)安装并导入模板 - NUTSWP

选择【Free blocks】,找到【Header】

image 39 1024x587 2 - Hello Elementor主题(免费版)安装并导入模板 - NUTSWP

选择你喜欢的模块模板,并导入

image 40 1024x879 2 - Hello Elementor主题(免费版)安装并导入模板 - NUTSWP

导入之后,我们还要对其进行修改。

image 42 1024x334 2 - Hello Elementor主题(免费版)安装并导入模板 - NUTSWP

添加菜单

image 43 1024x440 2 - Hello Elementor主题(免费版)安装并导入模板 - NUTSWP

选中被拖入到Header中建栏目的组件,在左侧编辑窗口,选择菜单后,我们创建的菜单会自动显示在编辑页面中

image 44 1024x391 2 - Hello Elementor主题(免费版)安装并导入模板 - NUTSWP
image 45 1024x309 2 - Hello Elementor主题(免费版)安装并导入模板 - NUTSWP

替换你的社交主页信息

image 46 1024x499 2 - Hello Elementor主题(免费版)安装并导入模板 - NUTSWP

替换你的LOGO信息

image 47 1024x547 2 - Hello Elementor主题(免费版)安装并导入模板 - NUTSWP

根据网站风格,我们再做一下颜色的修改,看一下整理效果。

image 49 1024x777 2 - Hello Elementor主题(免费版)安装并导入模板 - NUTSWP

2)创建网站Footer

创建Footer模板的方法和Header模板类似,类型需要选择Footer。

image 49 1024x750 2 - Hello Elementor主题(免费版)安装并导入模板 - NUTSWP

进入到编辑页面

image 51 1024x421 2 - Hello Elementor主题(免费版)安装并导入模板 - NUTSWP

在模板库中找到Footer模块

image 52 1024x656 2 - Hello Elementor主题(免费版)安装并导入模板 - NUTSWP

导入你喜欢的Footer模块

image 53 1024x462 2 - Hello Elementor主题(免费版)安装并导入模板 - NUTSWP

在对内容和颜色进行修改,最终效果

image 54 1024x708 2 - Hello Elementor主题(免费版)安装并导入模板 - NUTSWP

再看有效首页的整体效果

坚果外贸建站教程演示 – Just another WordPress site 1 - Hello Elementor主题(免费版)安装并导入模板 - NUTSWP

相关内容
2步解决ACF自定义产品固定链接中没有分类的问题

本文介绍如何解决ACF自定义产品固定链接中没有分类的问题,目前使用ACF(Advanced Custom Fields)创建的自定义内容类型默认是不注册分类的固定链接的,WordPress设置中的固定链接修改也对其无效,这样当我们创建产品和产品分类的时候,产品页面的固定链接中就不包含产品分类的信息。

阅读全文 »
Zapier Webhook 实现询盘提交关键词过滤和邮件转发教程

本文介绍如何使用Zapier Webhook 实现询盘提交关键词过滤和邮件转发教程,将Zapier流程集成到Elementor Form中可以实现表单消息关键词过滤和转发。 此方法适合需要过滤垃圾关键词询盘邮件消息的用户,一般表单安全验证主要是防止机器人提交垃圾信息,但是无法阻止人工发送的垃圾询盘,

阅读全文 »
如何通过CSS控制文本的行数?

我通常在使用Elementor Loop Items模版制作产品列表时,会使用CSS代码来控制一下摘要的行数,这样内容看起来比较整齐。 如果你直接选择的摘要元素,是可以控制文本单词数量。 但是如果你使用的摘要内容是一个自定义字段,通过文本元素去获取和展示,将没有长度选项去控制,这是我会通过下面的CS

阅读全文 »
WP基础:固定链接设置

本文介绍WordPress网站的固定链接设置,这是一项基础的WordPress设置,固定链接对SEO也有一定的影响。固定链接结构应该在网站创建之初或者网站上线之前设置好。 WordPress 中的固定链接是什么? 固定链接实际上就是用户通过浏览器访问某一个页面的唯一的地址,之所以称其为固定链接,就是

阅读全文 »
文章分类
新手入门学习建站主机推荐
非常适合外贸新手入门的一款共享主机,非常简洁的管理面板,第一年费低至300元!
文章标签
想快速搭建一个完全属于自己的外贸独立站?
本站提供专业的外贸建站服务,如果你不想自己花时间精力搭建网站,可以将你的需求告诉我,我来帮助你搭建一个专业外贸独立站!
文章导航
文章分类
文章标签
建站咨询请联系企业微信
感谢你的信任!
咨询和购买请通过微信和我联系!