网站元素

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

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 请见链接

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 请见链接

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 请见链接

Popup Settings

弹窗有三个部分，分别是弹出的内容，触发器，样式。这里的弹窗是一个元素，如果一些列的，可以使用gird的弹窗。

内容，Content

Title，Add Media，Desc

Trigger，触发器

Show Popup on，触发器是弹窗的 灵魂，有以下四种

1. Button click，具体参考按钮
2. Image click，参考图片
3. 特定元素，Custom element click 一般使用类，Class/或者ID，是指每次点击到这个元素的时候，就会弹窗。Class或者ID在DESIGN标签中。
4. 自动加载后弹窗，Page load，只需要设定等待时间。

Style 样式

宽度，Popup Width
内边距，Popup Padding
圆角，Popup Corners Radius

Background Overlay，背景覆盖

弹出的动画样式，Animation Type

Fade
Scale Up
Scale Down
Slide from the Top
Slide from the Bottom
3D Flip (Horizontal)
3D Flip (Vertical)

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 请见链接

Menu Settings

下拉选择需要显示的菜单。

布局，Layout有纵向与横向，其中横向有拉伸和变成纵向的宽度。

样式，Style有链接Link形式和Block块状形式，有间隔，横向的块状有间隔线。

Submenu，可以显示二级菜单。

颜色方面：颜色，背景色；当前，滑移颜色。

Menu Item Text on hover

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 请见链接

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 请见链接

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 请见链接

Pre/Next navigation Settings

Layout,样式有两种，分别是简单的链接，和固定在屏幕两端的格式。

Simple links
On sides of the screen

对调，Invert position of previous and next

在同一分类法下，Navigate within the specified taxonomy

• 上一篇标题，Previous Post subtitle
• 下一篇标题，Next Post subtitle

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 请见链接

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

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 请见链接