使用Elementor可视化编辑插件来创建网站全过程

使用Elementor来创建本站,此文足以,全称无需代码,轻松上手。

目标:创建一个完整的网站,使用Elementor Digital Agency模板工具包和Hello主题

前提:需要购买空间和域名,安装好WordPress。
空间域名在sitegroundVultr购买就行,然后一键安装WordPress

OK,以下教程开始:

一般网站的目录结构为:

  • 首页
  • 关于我们
  • 产品中心、产品详情页
  • 新闻资讯、新闻详情页
  • 联系我们
  • 页头和页尾
  • 404、搜索结果页

(更多…)

1评论

Elementor编辑器的栏(Column)的全面解析

编辑栏

编辑栏

栏的“全局”设置

  • 栏宽度:可以设置栏宽度的百分比
  • 垂直对齐:设置各种垂直对齐方式,您可以根据需要进行设置,然后查看效果。
  • 水平对齐:设置各种水平对齐方式,您可以根据需要进行设置,然后查看效果。
  • 小工具间距:一般在Elementor里面设置为0之后,这里就不用设置。
  • HTML标签:可以根据需要,转化代码的标签,利于SEO。

(更多…)

0评论

Elementor编辑器的段(Section)的全面解析

点击"栏"的图标,在左侧就可以对“栏”进行相关设置:

布局设置

段的编辑

拉伸段:是否为拉伸段可选,选择“是”之后,整个段不受布局宽度控制,直接拉伸到浏览器窗口的100%宽度。
内容宽度:可以设置方框或全宽度。就是我们通常说的“通栏”和“全屏”。下面可以拖动圆点滑块设置“段”的宽度值。
栏间距:设置段里面栏间距的宽度。
高度:一般为默认,可以改为:“最小高度”或“适应屏幕”
垂直对齐:设置部分内容的垂直对齐方式,可以多尝试一下显示的效果。
溢出:可以设置溢出隐藏,就是超出“段”之外的元素不会显示。
HTML标签:这里方便设置HTML标记,一般设置页头、页尾、主要内容等语义化标签,对SEO比较友好。

(更多…)

0评论

预览或发布Elementor编辑的页面

预览和发布

当您用Elementor可视化编辑器编辑完页面之后,您需要预览和发布它。

这时,我们通过点击左侧底部的按钮“发布”或点击“眼睛”来预览它。
(注意:预览的链接和实际上的链接不是同一个链接哦)

预览OK之后,就可以点击发布了,这时,可以点击“查看页面”就可以看到前台的页面了。

(更多…)

0评论