Impreza options

网站元素

Impreza options

本章节并不难,同时需要花时间练习。我们这里没有制作视频,而是模拟后台样式做成了指导书,点击图标就滑动到具体的说明。方便在以后遇到编辑问题时,可以快速找到对应的编辑元素。

Add Element
不常用的元素如下
内容

  1. 分别为文档,添加元素,模板,粘贴代码;
  2. 上一步,重做,全屏,css代码;
  3. 移动,分列,添加一内行
  4. 折叠箭头,复制代码,编辑,复制,删除
  5. 此处分别代表,列,横向,纵向,标题。

我们这一节主要说明鼠标在4和5处,点击编辑后的行和列的编辑选项,行和列为容器元素,主要有背景控制等作用。

点击任何元素编辑,右上角有齿轮,可以另存为一种新的元素,加快编辑。

常规选项

行高,Row Height

Default from Theme Options
Equals the content height
Small
Medium
Large
Huge
Full Screen

拉伸全宽,Full Width Content,Stretch content of this row to the screen width

颜色,Row Color Style

Content colors
Alternate Content colors
Primary bg & White text
Secondary bg & White text
Footer colors
Alternate Footer colors

背景图Background Image

None
Custom
Featured Image
Custom appearance in Grid: Additional Image

其他背景,Show on background

None
Video
Image Slider

  • 背景蒙版,Background Overlay
  • 固定行,Sticky Row,Fix this row at the top of a page during scroll
  • 锁定行,锁定后前台不可见。Disable row。
Shape

可以在顶部或者地步增加不同形状的分割线,设定高度和颜色。具体请参考演示

Columns

列对齐方式,Columns Content Position
列间隙,Additional gap
添加内间距,Add extra padding around columns content
纵向排列是左右(上下)对调,Reverse order for columns stacking

Design请参考文本

column

点击5处,设定列的编辑时候。

链接,Link
动画,Animation
固定列,Sticky Column
拉伸列,Stretched Column
背景蒙版,Background Overlay

TextBlock Setting

适合文本较多。WYSIWYG使用编辑器请见 

更多设置:

Hide part of a content with the “Show More” link

Height of visible content
In pixels: 100px, 150px, 200px

Text when content is hidden,标签,比如显示更多

Text when content is shown,标签,比如显示更少
Leave blank to prevent content from being hidden again.

Alignment Default Left Center Right

Page Block Settings

反复使用部分可以做成模块/Pageblock,页脚最有代表性。

下拉选择,选择需要的模块

Exclude Rows and Columns

None
Inside selected Page Block/去掉所选模块的行和列
Around this element/周围的元素的行和列

Stretch content of Rows to the full width/拉伸全宽

Image Settings

添加图片:Add image
图片大小:Image Size
对齐方式:

图片样式:Image Style None-Circle-Outlined-Simple Shadow-Colored Shadow等

显示图片标题和描述:Show image title and description
位置:Title and Description Style,Below the image,Over the image

链接/Link

  • None
  • Open original image in a popup
  • Onclick JavaScript action
  • Custom appearance in Grid: Custom Link
  • Custom

动画/Animation

None
Fade
Appear From Center
Appear From Left
Appear From Right
Appear From Bottom
Appear From Top
Height From Center
Width From Center

Design 请见链接

Image Slider Settings

轮播图,跟元素Carousel一列类似。

添加图片:多选,可以通过拖动调整位置。

箭头:Prev/Next arrows Show always,Show on hover,Hide
导航点:Additional Navigation None,Dots,Thumbnails
切换效果:Transition Effect Slide,Fade
切换时间:Transition Duration,In milliseconds: 300, 600, 1000

  • 显示标题和描述Show image title and description
  • 随机顺序Display items in random order
  • 允许全屏Allow Full Screen view
  • 自动轮播:Auto Rotation
  • Pause on hover鼠标滑移是否暂停
  • Auto Rotation Interval选中后有轮播间隔时间

图片大小,Images Size见Image元素

图片适应:Images Fit

Initial
Fit to Area
Fill Area

Images Style/图片样式见Image元素

Design 请见链接

Separator Setting

注意,这里出现了多个tab标签,比如general,icon and title,responsive options等。

General

高度:Height Small,Medium,Large,Huge,Custom,其中自定义可以用像素px,rem,em,百分比,vh,vw,vmax等,详细请看网站的计量单位。

显示横线Show horizontal line in the middle

宽度:Line Width

Container width
Screen width
30% of container width
50% of container width

厚度Line Thickness

颜色:Line Color

类型:Line Style Solid/Dashed/Dotted/Double

图标:Icon

Font Awesome Solid
Font Awesome Regular
Font Awesome Light
Font Awesome Duotone
Font Awesome Brands
Material Icons

  • 标题:Title
  • 链接:Link
  • 标签:Title HTML tag,h1,h2,h3,h4,h5,h6,div,p,span
  • 对齐:Alignment
自适应Responsive

低于某宽度,分割线高度为xx

Design 请见链接

Button Settings
  • 按钮标签,Button Label
  • 链接:Link,参考图片
  • 样式:Style,从Theme Options——Buttons中添加或者编辑
  • 宽度:Width,Auto,Stretch to the full width
  • 对齐:Button Position:Left,Center,Right
  • 图标,Icon,参考分割线图标
  • 图标位置:Icon Position,Left,Right

Design 请见链接

Iconbox Settings

图标:见分割线
图标颜色:Icon Color
图标类型:Icon Style,纯图标,在实心圈内,在线圈内
图标大小,Icon Size,单位见分割线
图标位置:Icon Position,顶部Top,左侧Left,右侧Right

标题:Title
标题大小Title Size
标签:Title HTML tag,见分割线
描述:Description,所见即所得编辑器

More Options

链接:Link
对其:Alignment
图片:Image,图片将替代图标

Design 请见链接

ActionBox Settings

标题Title
标题大小Title Size
标签,Title HTML tag
文字描述:Description

颜色:Colors

Primary bg & White text
Secondary bg & White text
Alternate bg & Content text

按钮位置:Buttons Location,按钮在右Right,按钮在底Bottom

按钮:Button Label

Actionsbox 最多可以有两个按钮,按钮的选项跟元素按钮一样。

Design 请见链接

Share Settings

分享目前支持分享到以下9个平台 Email, Facebook, Twitter, LinkedIn, Pinterest, Vkontakte, WhatsApp, Xing, Reddit

样式:Style Simple,Solid,Outlined,Fixed
对齐:Alignment
颜色:Colors,Default brands colors图标固有颜色,等
被分享次数:Share Counters

  • 允许选中部分分享,Allow to share selected textWhen you select text on a page, a panel with buttons appears, and you can quickly share the selected text.
  • 分享的链接:Sharing URL (optional)
    If not specified, the opened page URL will be used by default

Design 请见链接

Social Link Settings

可以通过下拉添加几乎任何社交链接,另外还有自定义图标。

图标颜色:Icons Color,Default brands colors,Text (theme color),Link (theme color)
图标外形:Icons Shape,None,Square,Rounded Square,Circle
图标样式:Icons Style,Simple,With outline,With light background,With colored background
滑移样式:Hover Style,Fade,Slide,None
图标间隙:Gap between Icons,
隐藏滑移提示:Hide tooltip on hover

500px
Behance
DeviantArt
Discord
Dribbble
Email
Facebook
Flickr
Foursquare
GitHub
Google
Houzz
IMDb
Instagram
LinkedIn
Medium
Odnoklassniki
Pinterest
Reddit
RSS
Skype
SoundCloud
Telegram
Tripadvisor
Tumblr
Twitch
Twitter
Vimeo
Vkontakte
WeChat
WhatsApp
Xing
Yelp
YouTube
Custom Icon

Design 请见链接

Grid Settings

之前的元素无非是文字,图片,图标的组合。而Grid是直接调用不同文章类型的字段。如果说图文组合是静态编辑元素;Grid则是动态的元素。

显示Show,不同文章类型:

Posts (post)
Pages (page)
Media (attachment)
Course (us_portfolio)
Items with the same taxonomy of current post
Items of the current query (used for archives and search results)
Сhild pages of current page
Manually selected items
Terms of selected taxonomy
Child terms of current taxonomy
Manually selected terms

忽略置顶:Ignore sticky posts

Show Items of selected Categories
Show Items of selected Tags

顺序Order by

Date of creation
Date of update
Title
Random
Number of Comments
Manually for selected images and items
Total views

顺序反过来,Invert order

显示的数量Items Quantity

排除项目,Exclude Items

None
of previous Grids on this page
by the given quantity from the beginning of output

如果没有任何结果,Message when no items

翻页Pagination

None
Numbered pagination
Load items on button click
Load items on page scroll

Appearance/外观

格子样式:Grid Layout,这里可以选择,或者创建。具体参考Grid制作。

展示形式:Display as

Regular Grid
Masonry
METRO (works with square items only)

  • 纵向剧中,Center items vertically
  • 列数,Columns
  • 间隔,Gap between Items

图片大小,Post Image Size
标题大小,Post Title Size
图片比例,Items Aspect Ratio
重写链接,Overriding Link

过滤/Filter
  • 过滤方式,Filter by
  • 过滤样式:Filter Bar Style
  • 对齐方式,Filter Bar Alignment
  • 显示全部,Show “All” item in filter bar
自适应选项Responsive Options
  • 低于某个宽度,显示几列,Below screen width X,show X  columns

Design 请见链接

Carousel Setting

General 和 Appearance 跟Grid类似,具体参考Grid

Carousel 滑块选项
  • Prev/Next arrows,显示箭头
  • Navigation Dots,导航点
  • First item in the center,第一个项目剧中
  • Slide by several items instead of one,一次滑动多个
  • Infinite loop,无限循环
  • Auto height (for 1 column only),自动高度
  • Fade transition (for 1 column only)

Auto Rotation,自动轮播
Transition Duration,时间
Transition Effect,动画效果

Design 请见链接

Filter Settings

过滤是将页面中的Grid或者Carousel,根据其分类方法来筛选的一种方法。

General/综合

Filter by过滤方法

Categories (category)
Tags (post_tag)
Product categories (product_cat)
Product tags (product_tag)
Formats (post_format)

类型:Type

Checkboxes
Dropdown
Radio buttons
Number Range

显示数字,Show amount of relevant posts

外观,Appearance

1. 布局,Layout,横向,Horizontal

2.布局,Layout,纵向,Vertical

Style/样式

Dropdown – Default
Dropdown – Trendy
Switch – Default
Switch – Trendy

对齐/Alignment

表现形式,Show the list of values

On hover
On click

  • 最高值,Max Height of the list of values
  • 隐藏空值,Hide unavailable values
手机版,Mobile

小于x宽度使用手机样式,Mobile view at screen width

按钮设置请见按钮

Design 请见链接

Filter Ordering
  • 排序方法OrderDate of creation
    Date of update
    Title
    Random
    Comments
    “Order” value from “Page Attributes” box
    Custom Field
  • 对调,Invert order
  • 标题,Title,Leave blank to use the default.
  • 第一个值的标题,First Value Title
  • 下拉前文字,Text before dropdown
  • 全宽Stretch to the full width

Design 请见链接

Text Settings

这个元素很简单,可以参考按钮,所以我们介绍下Design标签。Design几乎在每一个元素中都有,对文字,背景,尺寸,间距,边角,位置,阴影等一般样式直接控制,不用写css代码。

  • 点击手机符号,可以独立设置手机,平板版的样式。
  • Extra class,额外的类
  • Element ID,额外的ID

Text,颜色,对齐,字体,字磅,字号,大小写,行高,斜体,字符间距;
Background,设置单一,简便背景色;或者背景图,背景图位置,大小,重复,视差;
Sizes,宽度,高度,最小,最大值;
Spacing,内边距,外边距;
Border,边框样式,圆角,线条宽度,颜色;
Position,相对,绝对,固定,粘性,距离上下左右位置,以及z-index
Box Shadow, 元素的阴影,纵横便宜,模糊,颜色等

Contact Form Settings

输入框形式Type

Text (single line),单行文字
Text (multiple lines),多行文字
Email,邮箱
Dropdown,下拉
Checkboxes,复选框
Radio buttons,单选框
Text Block,文字内容
Agreement checkbox,勾选同意条款
Captcha,简单人机识别

  • 标题,Title
    Shown above the field
  • 补充Description
    Shown below the field
  • 替代,Placeholder
    Shown inside the field
  • Required field
  • Move title on focus
  • Use the value of this field as sender’ name of emails

图标,Icon,请参考分割线

宽度,Width,Full,1/2,1/3,1/4

发送按钮,请参考按钮

  • 收件人邮箱,Receiver Email,可以添加多个收件人,用逗号隔开
  • 邮件标题,Subject of emails to be sent
  • 发送成功提示,Message after sending
  • 输入框排列,Fields Layout,有纵向Vertical,横向Horizontal
  • 输入框间隔,Gap between Fields

Design 请见链接

Search Settings

Placeholder,占位符。

图标Icon请见分割线

导航栏的搜索更加复杂,具体请参考导航搜索

Design 请见链接

Horizontal Settings

跟row,column,以及下边谈到的tab,vertical tab,和according等都是容器。会对其内部的元素产生影响。

内容横向排列,Content Horizontal Alignment,左,中,右,两端对齐
内容横向排列,Content Vertical Alignment,顶部,中部,底部,With baseline
间隔,Gap between Items
允许排列到下一行,Allow move content to the next line

Design 请见链接

Tabs Settings

跟下边的Vertical Tab,According是一样的,分成两部分,分别是总体部分和标题部分。分别用深蓝色Tabs和橙色Sections表示。

Tabs General

切换方式,Switch sections,点击On click,滑移On hover

标签,Sections Title HTML tag,具体见分割线

Tabs

Style样式

Simple
Modern
Trendy
Timeline
Timeline 2

拉伸到全宽,这样会剧中,Stretch tabs to the full available width

文字大小,见分割线

Sections
  • Title 标题
  • 链接:Link
  • 默认展开,Show this section open
  • 拉伸内容到全宽,Stretch this section content to the full available area
  • 图标 Icon见分割线
  • 图标位置,Icon Position
  • Section ID
  • Extra class name

Design 请见链接

Vertical Tabs

设计思路跟上面的Tabs基本一致,就是tab位置有变化,可以在左右,自定义tab宽度。

Design 请见链接

According Settings

其中的sections章节设计跟上面的tab和vertical tab一模一样,我们只介绍其中区别。

  • 允许多个章节同时打开,Allow several sections to be opened at the same time
  • 滑动到制定章节,Scroll to the beginning of the section when opening
  • 移除左右提示,Remove left and right indents
  • 添加FAQ到数据化内容标示,Add FAQ structured data markup
  • 标题对齐,Title Alignment
  • 标题大小,Title Size
  • 图标,Icon,无,Chevron,Plus,Triangle
  • 图标位置,Icon Position

Design 请见链接

Video Settings

视频元素可以直接引用youtube和vimeo中的视频。

Video link视频链接
隐藏vimeo标题,Hide Vimeo video title (only if the owner allows)
隐藏youtube控制,Hide YouTube controls while watching
视频比例:Aspect Ratio,21:9,16:9,4:3,3:2,1:1
视频对齐,Video Alignment
封面,Image Overlay,可以设置蒙版,颜色和播放图标大小。

Design 请见链接

结构
Widget Settings

小工具是在外观-小工具下设置的。可以创建多个小工具。现在wordpress已经弱化小工具的作用,(强化编辑器)

小工具标题,Widget title

下拉选择小工具,Sidebar

  • Element ID
  • Extra class name
Raw HTML Settings

输入纯html内容,Enter your HTML content.

JavaScript Code

输入纯js内容, Enter your JavaScript code.

模板元素
Post Title Setting

请留意,之前的是静态元素,比如视频,图片等,这里是模板元素比如标题,特色图像等都是动态元素。

链接


To a Post
Custom appearance in Grid: Custom Link
Custom

对齐方式

HTML tag请见分割线

Design 请见链接

Post Content Setting

显示 Show

Excerpt, if it’s empty, show part of a content
Excerpt, if it’s empty, show nothing
Part of a content
Full content

Exclude Rows and Columns

None
Inside a content
Around this element

拉伸,Stretch content of Rows to the full width

More Options,其中的展开折叠,参考文本

Design 请见链接

Post Image Setting

参考链接请见

Show placeholder when post image is absent/显示占位图
Show media preview for posts with video, audio and gallery format/显示不同文章类型的格式
Stretch the image to the container width/拉伸
Enable rounded image/圆角
Set Aspect Ratio/固定高宽比

图像大小

Design 请见链接

Breadcrumbs

主页标签Homepage Label
留空为空白,Leave blank to hide the homepage link
显示当前页面,Show current page
对齐方式
分隔符号,Separator between items
可以选择图标,或者文本

Design 请见链接

Post Views Settings

图标,Icon,参考
前面文字Text before value
后面文字Text after value
使用K标示千,Use “K” shorthand for thousands
三位数分割符号,Thousand separator

Design 请见链接

Date Settings

显示

创建时间,Date of creation
更新时间,Date of update

样式,可以下拉选择,自定义可以参考 上文wordpress,setting中的时间设置

日期前面的文字Text before value

Design 请见链接

Taxonomy Settings

分类法一般是指标签或者分类。

下拉选择,请注意,如果有产品,(product),有新闻(post),其分类方法名字也不一样,分别是product category和category。

显示方法,文本或者按钮
分割方法,Separator between items

链接

To a Post,链接到具体的文章中
To a Post Archive,最常用,连接到这一个分类方法的合集
Custom,自定义

  • 链接颜色,Link Color
  • 前面的文字Text before value

Design 请见链接

Author Settings

链接

To the page with the Author’s posts
To the Author’s website (if specified on his profile)
To a Post
Custom

Link Color,Inherit from text color

  • 资料图片
  • 文章数量,Posts count
  • 站点,在个人资料中添加
  • 个人说明

Design 请见链接

Post Custom Field Settings

可以下拉显示Custom appearance in Grid和插件ACF中设置的字段,字段可以是文字,图片等。

Custom appearance in Grid: Additional Image
Custom appearance in Grid: Icon
Custom Field

如空请隐藏,Hide this element if its value is empty

链接


To a Post
Use the element value as link
Onclick JavaScript action
Custom appearance in Grid: Custom LinkCustom

  • 前面文字,Text before value
  • 后面文字,Text after value

Design 请见链接

Comments  Settings

显示

List of comments with response form
Comments amount

Design 请见链接

Header Image Settings

一般是放logo,跟图片元素相似,增加了以下几个功能。

  1. 透明头部的logo
  2. 在固定和非固定头部,图片的高度,在pc,平板和手机的高度。

Design 请见链接

其中所有的头部design标签多了两个元素,分别是非固定隐藏和固定隐藏。

Hide this element when the header is sticky
Hide this element when the header is NOT sticky

Search Settings

搜索元素类似

样式,Layout一共有四种

Simple,显示搜索框
Modern,显示图标,点击出现指定宽度搜索框
Full width,显示图标,点击出现全宽搜索框
Full Screen,显示图标,点击出现全屏搜索框

Design 请见链接

Menu Settings

在导航栏有两个菜单,分别命名为Menu和Simple Menu,其中的简单菜单可以参考上面元素,以下重点了解不同点。

  • 间隙,Distance Between Main Items
  • 平均分布,Spread menu items evenly over the available width
  • 拉伸高度跟头部一样,Stretch to the full available height
  • 滑移效果,Main Items Hover Effect
    • Simple
    • Underline
  • 下拉提示符Dropdown Indication
  • 下拉效果Dropdown Effect
    • None
    • Fade
    • SlideDown
    • Fade + SlideDown
    • Appear From Bottom
    • Horizontal Slide
    • Material Design Effect
  • 下拉宽度Dropdown Width,Limit full-width dropdowns by a menu width

关于颜色,我们介绍下名词

  • Active,活动
  • Background,背景
  • Text,文字
  • Transparent ,透明
  • hover,鼠标滑移
  • Dropdown ,下拉
手机菜单

显示手机菜单的宽度,Show mobile menu when screen width is less than

手机菜单样式有三个,Mobile Menu Layout

Dropdown,下拉
Vertical Panel,侧边出现
Full Screen,全屏菜单

出现方式Show dropdown by click on

点击箭头,Arrow
点击文字,Label and Arrow

汉堡包菜单(三条横线)的线宽,Icon Thickness

是否出现菜单单词,以及位置Position of “Menu” word

Design 请见链接

Dropdown Settings

有两种方式,第一种是可以自定义简单的下拉文字和链接,另一种是下拉内容为小工具widget

Custom Links
Sidebar with Widgets

  • 下拉标题,Dropdown Title
  • 打开方式,Open Dropdown,点击,滑移
  • 下拉方向,左右,Dropdown Direction
  • 出现动画,Dropdown Effect

Design 请见链接

菜单