小Q的博客

  • 首页
  • net编程
    • 产品和框架
    • 开发实例
    • 经验技巧
    • 开源组件
  • wp独立站
  • 自媒体
  • 日记本
  • 工具箱
每个程序员,都应该有一个自己的博客站
  1. 首页
  2. wp独立站
  3. 正文

WordPress中Elementor教程 基本面板元素示例

2023年3月31日 1870点热度 0人点赞 0条评论

上一篇讲解的是WordPress中使用Elementor插件如何制作网站Header,我们将继续学习有关它的教程。因为这个插件提供了非常直观的实时预览功能,所以关于样式的属性调整不过多描述,制作时直接调整即可。这里只讲元素有什么用途以及效果展示图。今天讲解的是基本面板里的元素,如下图所示。元素包括:内部区段、标题、图像、文本编辑器、视频、按钮、分隔线、间隔、谷歌地图、图标

Table of Contents

Toggle
  • 1、内部区段
  • 2、标题
  • 3、图像
  • 4、文本编辑器
  • 5、视频
  • 6、按钮
  • 7-8、分隔线和间隔线
  • 9、谷歌地图
  • 10、图标

1、内部区段

这个元素相当于Winform中的Panel容器控件。虽然制作网页时有很多结构可选,但我们在一个子结构中,还是想加入不止一个元素,这时就可以用到它。看下效果图,内部区段里放了2个标题元素

2、标题


就是页面中的H2标题,也可以设置成H3、H4等。

3、图像


这个元素就是加载一张图片,看效果图即可

4、文本编辑器


相当于一个富文本编辑框,可以加载文字、图片等

 

5、视频


与图像相比,这个元素就是加载一个视频。来源可以包括YouTube、Vimeo平台,也可以放到自己的服务器上,只需要提供一个Url地址即可

6、按钮


就是一个按钮,可以定义Url链接。虽然Winform中很常用,网站里用到的不会很多

 

7-8、分隔线和间隔线


这2种线放到一起展示比较好,效果一目了然。

分隔线和间隔-2(右:分隔线、左:间隔线)

分隔线和间隔-2(右:分隔线、左:间隔线)

 

9、谷歌地图


就是嵌入了谷歌地图,只需提供公司的经纬坐标即可

 

10、图标


就是一个图标,Elementor插件比较好的是提供了一个图标库供我们选择,完全够用。当然,它也允许我们使用自定义的图标。

 

最后还是建议,就是我们在设计过程中,要及时发布。因为各种情况都有可能发生,最后再发布可能会失败。这样很悲催了,因此,完成一点就发布,及时发现问题。

 

相关阅读

WordPress中Elementor教程 开篇+制作网站Header

 

标签: Elementor教程 WordPres教程 基本面板
最后更新:2023年4月1日

小Q

80后中年不油腻大叔,喜欢编写代码、打羽毛球、做木制玩具。目前定居浙江杭州

打赏 点赞
< 上一篇
下一篇 >

文章评论

razz evil exclaim smile redface biggrin eek confused idea lol mad twisted rolleyes wink cool arrow neutral cry mrgreen drooling persevering
取消回复

COPYRIGHT © 2022 小Q的博客. ALL RIGHTS RESERVED.

Theme Kratos Made By Seaton Jiang

浙ICP备2022019157号-2