Impreza主题

Live Editor编辑器操作手册

2023
  1. 本文档给需要学习Impreza主题的初学者使用。可作为Impreza说明文档。需有英语基础,因为Impreza主题的汉化不完善。
  2. 其他WordPress部分操作,比如发布新闻等,不在此列,具体请见WordPress文档。
  3. 阅读大约需要100分钟;难度约等于制作PPT报告。
  4. 阅读并不等于操作,建议到Test Drive练习。完成后可以做任意样式网站。
  5. 操作部分是短期培训可以习得,而设计需要审美和灵感等艺术部分。请见写给大家看设计系列

1

认识编辑器

作用,地位,ppt,横向对比其他,

wp5之前的经典编辑器,Visual和Text

古腾堡编辑器,模块化,是wp的发展方向,可以制作一般商用站点了

两巨头1蒸蒸日上的的Elementor,前台编辑器是潮流,wordpress庞大的群体首先考虑其易用性,但是wordpress 的Slogan是代码如诗,用前台编辑器容易造成代码如x。

和明日黄花的短代码编辑器

其他编辑器比如divi,Brizy等

1.1 编辑器切换

WordPress默认的编辑器是Block Editor,也就是古腾堡编辑器,是一种块编辑器。在Impreza主题中一般禁用此编辑器,此编辑器不足以独立支撑定制商业站点。而使用Wp5之前的经典编辑器,即 WYSIWYG 编辑器。这个编辑器右侧有 可视化/文本切换。

我们常用的是三个编辑器之间的切换,经典编辑器,后台编辑器和前台编辑器。

本文主要针对Edit Live,即前台可视化编辑器。

1.2 后台编辑器

后台编辑器前身是WP Bakery Page Builder,后台操作效率更高(不用渲染样式),一般适合初级框架基础搭建。

1.3 前台编辑器

前台编辑器是潮流,wordpress庞大的群体首先考虑其易用性,但是wordpress 的Slogan是代码如诗,用前台编辑器容易造成代码如x。

Edit Live 编辑器是借助短代码,所以一旦主题或者插件禁用,网站前台是不可读的。

  1. Edit Live的操作面板,左侧为工具元素区域,右侧是显示台。
  2. 可视化显示,拖拽操作;

2

认识元素

图文等构成了基础元素,更复杂的比如图标等;

有一部分是容器元素,比如tab,row,inner row等;

调用元素,或者成为循环,loop,grid,carousel元素,以及其他的比如过滤和排序;

4种元素分别用三种颜色代表

基础元素

调用元素

容器元素

模板元素

其他元素

2.1 基础元素 (6)

Text Block
Text
Button
IconBox
图片 / Image
Separator

2.2 调用元素 (4)

Grid / Listing
Grid Filter
Grid Order
Carousel

2.3 容器元素 (7)

Row/Section
Inner Row
Horizontal Wrapper
Vertical Wrapper
Accordion
Tabs
Vertical Tabs

2.4模板元素 (10)

Post Image
Post Title
Post Custom Field
Post Date
Post Taxonomy
Post Auhtor
Post Comments
Post Prev/Next Navigation
Post View
Breadcrumbs

2.5 其他不常用的元素

Counter
Flipbox
Image Slider
Interactive Banner
Interactive Text
Message Box
Popup
Progress Bar
Page Scroller

contact info/联系信息
action box
dropdown
map
login
person
pricing table
simple menu
search
sharing buttons
social links
video player
custom HTML

3

样式 / Designs

操作css的一种方式,更直观的在live eiditor中显示;

缺点是css样式并不全。

3.1 左上的菜单

操作css的一种方式,更直观的在live eiditor中显示;

缺点是css样式并不全。

3.2 左下的菜单

操作css的一种方式,更直观的在live eiditor中显示;

缺点是css样式并不全。

手机端:

文本

  • 颜色:可以选择预制颜色和自定义颜色,支持hex和rgba;
  • 对齐方式:左中右默认;
  • Font Size/字号:支持px,rem,em,vw等;
  • Line height/行高:支持 px和倍数;
  • Letter Spacing/字符间距:支持正负数,常用px和rem;
  • Font/字体:可以下拉选择字体;
  • Font Weight/字磅:字体粗细,根据不同字体,一般有100-900不同选项,数值越大越粗;
  • Text Transform/大小写转换;
  • Font Style/字体样式:是否斜体;

3.2 样式的复制和粘贴

可以将下面3.4已有的样式复制到新的元素中,仅仅有样式而没有内容。

3.4 样式

除了预制的全局样式外,Live Editor还支持每一个元素单独的样式。

除此之外,每一个元素还有手机端和重置选项。

文本

  • 颜色:可以选择预制颜色和自定义颜色,支持hex和rgba;
  • 对齐方式:左中右默认;
  • Font Size/字号:支持px,rem,em,vw等;
  • Line height/行高:支持 px和倍数;
  • Letter Spacing/字符间距:支持正负数,常用px和rem;
  • Font/字体:可以下拉选择字体;
  • Font Weight/字磅:字体粗细,根据不同字体,一般有100-900不同选项,数值越大越粗;
  • Text Transform/大小写转换;
  • Font Style/字体样式:是否斜体;

Background/背景

  • Background Color/背景颜色:可以选择预制颜色和自定义颜色,支持hex和rgba;支持渐变颜色;
  • Background Image/背景图像:选择背景图;
  • Background Position/背景图像位置
  • Background Size/背景图像大小: 可以用Cover/Contain,也可用百分比或者像素数值;
  • Background Repeat/背景图像重复:是否;
  • Background Attachment/背景图像的视差效果;

Size/尺寸

  • 宽度高度;
  • 最大宽度高度
  • 最小宽度高度

Spacing/间距

  • Margin/外边距:可以是负值,则向相反方向移动;
  • Padding/内边距;

Border/边框

  • Border Radius/圆角:一个数值可以指示四个角,也可以使用4个数值精确控制每一个角的弧度;
  • Border Style/边样式:有实心,点,线段等;
  • Border Width/边厚:
  • Border Color/边颜色;

Position/位置

  • 背景颜色:可以选择预制颜色和自定义颜色,支持hex和rgba;
  • 背景图像
  • 背景位置

Box Shadow/盒子阴影

  • Horizontal Offset/横向偏移
  • Vertical Offset/纵向偏移
  • Blur/模糊
  • Spread/延伸区域
  • 颜色:可以是hex或者rgba半透明色;

Text Shadow/文字阴影

  • Horizontal Offset/横向偏移
  • Vertical Offset/纵向偏移
  • Blur/模糊
  • 颜色:可以是hex或者rgba半透明色;

Overflow/覆盖

  • 下拉有遮盖,可视,自动三种;

Animation/动画

  • Animation/动画出现:下拉选择动画出现的方式
  • Animation Delay/动画延迟:以毫秒和秒为单位;

总结:这里是细节的调整,需要对平面设计和交互体验有一定的经验。

3.5 类和ID

  • 类/Class,一般对Js和手动修改css有用。
  • ID,对于页内的菜单,做锚点。比如本页面左侧的菜单用链接  a href=”#id123″ , 对应的ID填写 id123

3.6 在设备上隐藏

Desktops ≥1281px
Laptops 1025-此处所有的数字在Theme Options处任意调整
Tablets 601-1024px
Mobiles ≤600px

Hide on,勾选后在某些设备宽度上隐藏。对于调整多设备非常有用。

4

模板,页脚和页头

最后,模板,模块,模块的使用;

模板的选择;Options for Single & Archive,Taxonomy & Single Post,通过Custom Post Type UI添加的也可以。

Header

Footer

模板的编辑

页头的编辑

使用模板,页脚和页头

最后,模板,模块,模块的使用;

模板的选择;Options for Single & Archive,Taxonomy & Single Post,通过Custom Post Type UI添加的也可以。

Header

Footer

页脚的编辑

5

主题选项 / Theme Options

全剧控制部分

General / 常规

维护模式#

开启此选项,把你的网站处于维护模式。从页面列表中选择需要显示的具体页面,所有的游客没有登录将看到这个页面。

2351.png

启用“503服务不可用”状态#

打开此选项可以设置你的服务器发送503头(服务不可用)它可以帮助搜索引擎机器人,以避免此索引维护页面。使用此选项仅适用于很短的时间周期。

搜索结果页#

选择将被用作搜索结果页面模板的任何页面时,页面中必须包含显示当前查询的项目Grid元素。

文章页面#

文章页面是页面显示你最新的文章列表。默认情况下,这个页面是WordPress安装后您的网站的主页。

此外,文章页面相关页面,设置为“文章页”,在设置>阅读:

2304.png

选择将被用作文章页面模板的任何页面时,页面中必须包含显示当前查询的项目Grid元素。

404页” #

选择的页面将显示,而不是默认的“找不到网页”的消息。

网站图标#

选择这将被用来作为一个浏览器和应用程序图标为您的网站的图像。图标必须是正方形,并且至少512个像素宽和高。此选项只是重复WordPress的功能,更方便而已。

预载屏幕#

选择预定义的预加载的一个或指定自己的。

涟漪效果#

能够示出的以下元素,当点击的连锁反应:

圆角#

链接下划线#

打开/关闭文本链接下划线上徘徊。

键盘辅助#

接通/断开视觉高亮显示的可点击元素(按钮,菜单项,链接,表单字段),以指示他们的聚焦状态。

“返回顶部”按钮#

启用该选项来显示按钮,允许滚动页面返回顶部,并自定义其外观。

谷歌地图API密钥#

域名要使用谷歌地图API密钥,请阅读有关API密钥。

1.2 其他不常用的元素

恭喜,你已经毕业了

在此感谢Wordpress.org 平台和Impreza主题的作者们,我们所做的文档只是给予浅薄理解,做注解,致敬。

主题的官方帮助文档在 Help.us-themes.com,也可以在论坛提问作者。youtube地址在,

另外更新了WordPress的操作文档,有一些基础的操作在 help.imaiko.com 上,如遇问题,可以作为手册使用;自己平时的研究和记录等,更新在B站,https://space.bilibili.com/1778457908 ,比如研究VR,GPT,Scroll 动画,仿站等。