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 动画,仿站等。

8条评论. Leave new

  • Simply wish to say your article is as amazing The clearness in your post is just nice and i could assume youre an expert on this subject Well with your permission let me to grab your feed to keep updated with forthcoming post Thanks a million and please carry on the gratifying work

  • I appreciated the historical context provided in the article, which added depth to the discussion.

  • My brother suggested I might like this blog He was totally right This post actually made my day You can not imagine simply how much time I had spent for this info Thanks

  • Create content that ranks higher on search engines with Cluc.io – https://cluc.io.

  • รับทำเว็บไซต์ผิดกฏหมาย ดูหนังโป๊ฟรี เราพร้อมให้บริการรับทำเว็บพนัน ครบวงจรจบในที่นี่ที่เดียวตอบโจทย์ทุกความต้องการงานคุณภาพในราคาย่อมเยาว์จ่ายจบไม่มีจุกจิกไม่มีบวกเพิ่มมีให้บริการทุกประเภทเกมเดิมพันเช่นกีฬาฟุตบอลคาสิโนบาคาร่าสล็อตยิงปลาและหวยเชื่อมต่อตรงค่ายเกมด้วยระบบAPIพร้อมทั้งออกแบบเว็บไซต์LandingPage,MemberPageและดีไซน์โลโก้ภาพโปรโมชั่นแถมVideoสำหรับโปรโมทพร้อมระบบหลังบ้านอัจฉริยะรวมถึงระบบฝาก-ถอนอัตโนมัติรวดเร็วบริการรับทำเว็บพนันที่มีให้คุณมากกว่าใครพร้อมฟีเจอร์มากมายที่คุณจะได้เมื่อทำเว็บพนันกับเรารับทำเว็บไซต์พนันเว็บพนันslotรับทำเว็บไซต์ผิดกฏหมายพนันคาบาร่าสลอตหวยของผิดกฏหมายหวยลาวดูหนังโป๊ฟรีเว็บไซต์ดูหนังโป๊ออนไลน์ยอดนิยมสามารถรับชมผ่านมือถือและคอมพิวเตอร์ได้หนังโป๊หนัง18+คลิปโป๊จากทั่วทุกมุมโลกมีทั้งหนังโป๊ไทยXXXPORNหนังเอวีJAVหนังโป๊เกาหลีหนังโป๊แนวซาดิสส์หีสวยๆเนียนๆและหมวดหนังเกย์คัดสรรแต่หนังโป๊ใหม่ๆและอัพเดทในทุกๆวันพร้อมคุณภาพความชัดและความเด็ดคัดโดยนักโพสที่มีความเงี่ยนและมืออาชีพขอบคุณและโปรดอย่าพลาดที่จะรับชมหนังโป๊ของเรารับเปิดเว็บพนันรวมค่ายเกมชื่อดังไว้ให้คุณ SAGaming,PGSLOT และอื่นๆอีกมากมายคาสิโนออนไลน์ฝากถอนไม่มีขั้นต่ำรองรับวอลเล็ทปลอดภัย100%คาสิโนออนไลน์ฝากถอนไม่มีขั้นต่ำเว็บตรงรองรับวอลเล็ทเล่นผ่านมือถือระบบออโต้100%สมาชิกง่ายไม่มีขั้นต่ำรวมเกมคาสิโนยอดนิยมมาตรฐานระดับสากลความปลอดภัยอันดับ1ผู้ให้คาสิโนเว็บตรงทำรายการฝากถอนได้อย่างสะดวกรวดเร็วทันใจรองรับการทำรายการกับธนาคารได้ครอบคลุมทุกสถาบันและยังรองรับการให้บริการแก่นักเดิมพันผ่านทางTrueMoneyWalletคาสิโนที่ดีทีสุด2024ทุกช่องทางที่เราเปิดให้บริการแก่นักลงทุนทุกท่านนั้นมีความสะดวกรวดเร็วในด้านการให้บริการในระดับสูงและยังกล้าการันตีความปลอดภัยในด้านการให้บริการเต็มร้อยคาสิโนออนไลน์นอกเหนือจากการเปิดให้บริการแบบไม่มีขั้นต่ำแล้วนั้นเว็บคาสิโนเรายังจัดเตรียมสิทธิประโยชน์และศูนย์รวมเว็บพนันออนไลน์ค่ายใหญ่ครองใจนักเดิมพันอย่างต่อเนื่องรับเปิดเว็บพนันออนไลน์ออกแบบเว็บไซต์คาสิโนออนไลน์ทุกรูปแบบพร้อมเชื่อมต่อค่ายเกมส์ดังด้วยAPIโดยตรงกับทางผู้ให้บริการเกมส์พร้อมเกมส์เดิมพันมากมายอาทิเว็บสล็อตเว็บเดิมพันกีฬาเว็บเดิมพนันE-Sportสามารถออกแบบเว็บพนันได้ตามสั่งลงตัวพร้อมระบบออโต้ฟังก์ชั่นล้ำสมัยใช้งานง่ายรวมผู้ให้บริการชั้นนำและค่ายเกมที่นิยมจากทั่วโลกพร้อมระบบจัดการหลังบ้านอัจฉริยะและทีมงานคอยซัพพอร์ทพร้อมให้บริการคุณตลอด24ชั่วโมง

  • I have read some excellent stuff here Definitely value bookmarking for revisiting I wonder how much effort you put to make the sort of excellent informative website

  • Hi Neat post Theres an issue together with your web site in internet explorer may test this IE still is the marketplace chief and a good component of people will pass over your fantastic writing due to this problem

  • I was suggested this web site by my cousin Im not sure whether this post is written by him as no one else know such detailed about my trouble You are incredible Thanks

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

Fill out this field
Fill out this field
请输入有效的电子邮箱地址。