Elementor设计WordPress网站首页教程

当我们使用WordPress制作时,很多人都希望能自己设计网站的首页,比如一些企业、商城类型的网站,一般都需要自己定制首页,在本文我们来教大家如何用Elementor设计网站首页

在教程开始前,请确保你已安装好Elmentor插件

新建Elementor页面

首先,我们新建一个页面,并点击 使用Elementor编辑 按钮,将其转换为Elementor页面

1589197303-71a624cd25378c2

切换到Elementor界面后,你就会看到如下的Elementor编辑界面

1589197304-36e5bd12136d8ad

但是这里有一个问题,大部分时候网站首页都是全屏宽度的,这里的页面并不是全宽的,所以我们需要先把它设置为全宽(如果你的站点不需要的话,可以忽略这步)

点击Elementor编辑栏左下角 设置 按钮

1589197306-bc3068d611e06f5

然后在页面布局中设置为 Elementor全宽,这样Elementor编辑器就是全宽度了

用Elementor设计页面

调整好页面布局后,就可以开始着手设计网页了

在编辑器右侧,可以看到添加工具,有2种选择,你可以点击左侧的加号,添加栏位然后自己从零开始设计;或者点击右侧文件夹导入官方的模板,在模板基础上修改

1589197307-38693b26781aeb4

对于新手,建议大家先使用模板,熟悉后再自己手动创建,本文中WP主题站也是以使用模板为例

下图就是Elementor的模板库窗口,其包括3种模板

  • 模块:一般为单独的一个区块,比如网站的头图、产品展示、价格表等,可以多个组合使用
  • 网页:设计好的网页,可以直接导入使用
  • 我的模板:你自己保存的页面模板
1589197308-90a2b9e1087f1e0

建议大家先模块,即简单,又有一定的定制性

比如先添加一个Hero模块,插入后,界面是这样的

1589197310-32de3f8e9a130f2

我们可以通过编辑内容把文字、图片和链接替换为自己网站的

在Elementor中,大部分的文字都可以直接在页面中编辑,图片和一些样式设置则可以在左侧编辑栏中进行修改

1589197312-5508b12c2b7440a

简单修改后,Hero模块基本就做好了,是不是非常简单

1589197313-57601d5e213b20c

之后的工作就是重复上面的步骤,继续插入其他模块,比如产品、用户评价、特色等,然后修改与替换,这些步骤都差不多,这里就不重复演示了

1589197314-35dd64cf8cd4b44

当页面所有部分都完成后,先不要着急发布

点击一下菜单栏的响应模式按钮,选择手机

1589197316-1f83ce1576fcd80

查看手机或平板视图下,网站是否有错位,有的话调整对应元素样式

1589197317-afef353537bdbc9

确认都没问题后,再点击发布就可以了

设置Elementor页面为网站首页

发布后,我们只是得到了一个页面,此时用户输入域名还不能访问到该页面,我们还需要将这个Elementor页面设置为网站的首页

在WordPress后台依次打开:设置 – 阅读 – 静态页面

将主页设置为刚刚的Elementor页面,并保存

1589197318-888db5bf457e491

刷新网站,就可以看到WordPress首页已经是我们设置的Elementor页面了

1589197320-20e55dd821c151b
免责申明:
1. 本站所有教程、文章或资源分享目的仅供大家学习和交流,可进群讨论!
2. 如有无法查看或链接失效,烦请报告联系管理员处理!
3. 本站无法保证资源或其时效性,恕不接受任何提问。
4. 欢迎大家帮助本站出力,赞助费用仅维持本站的日常运营所需!故不接受任何形式的退款。
5. 搜5G网无法保证文章教程或资源的完善与安全,请自行检测解决。
6. 在本站下载的源码严禁杜绝任何形式的正式商业用途,请去程序官方购买。
本站资源素材仅提供学习的平台,所有资料均来自于网络,版权归原创者所有!本站不提供任何保证,并不承担任何法律责任,如果对您的版权或者利益造成损害,请提供相应的资质证明,我们将于3个工作日内予以删除。本作品采用BY-NC-SA 4.0 《国际知识共享署名许可协议4.0》 进行许可 。
本站所有图片素材均享自由版权下创作共用CC0协议。
搜5G资源网,5G资源网 » Elementor设计WordPress网站首页教程

发表评论

搜5G网永久会员限时优惠中,不限下载,免费更新

立即查看 了解详情