Advanced Gutenberg文档

I. ADVANCED GUTENBERG安装

1.1安装

为了安装我们的插件,您应该使用标准的WordPress安装程序,或者解压缩并将所有内容放在/ wp-content / plugin中的文件夹中。

 

安装-WP-媒体文件夹


然后点击 激活插件,看到WordXress的左侧菜单中出现Advanced Gutenberg菜单。

可以从Gutenberg菜单访问Advanced Gutenberg。 您还可以在“设置”菜单下找到参数。

1.2更新插件

要更新Advanced Gutenberg,您可以使用WordPress的默认更新程序。 您还可以从下载的.zip文件中删除并安装新版本 www.joomunited.com。 在任何情况下,您都不会丢失任何内容,因为所有内容都存储在数据库中。

 

更新古滕贝格

 

请务必始终使用最新版本以避免安全性和稳定性问题。

II。 常用功能

2.1。 黑名单

通过使用我们的插件,您可以创建多个配置文件并选择中的哪些块 阻止列表 将为每个配置文件提供。

要设置自己的个人资料,您可以使用 “个人资料归属” 选项卡中 “Advanced Gutenberg” 菜单。 选择其中一个配置文件,您将看到配置文件配置。

 

用户编辑器型材

 

您可以通过单击启用/禁用Gutenberg中的块。 完成后,按“更新列表”按钮更新新的块图标。

 

黑名单

 

blocks-list-2

 

保存后,块将在编辑器中可用。

 

块使用的

 

高级按钮块

你可以创建一个 高级按钮 通过单击Advanced Gutenberg部分中的按钮。

 

先进的按钮

 

在右侧面板中,您可以调整按钮的某些设置:

  • 样式: 4种预定义样式

    • 默认

    • 概述

    • 平方

    • 平方轮廓

  • 按钮链接:

    • 链接网址

    • 在新标签页中打开:开/关。

 

ADV-按钮的设置

 

  • 文/颜色:

    • 字体大小

    • 背景颜色

    • 文字颜色

 

字体颜色按钮的设置

 

  • 边界:

    • 边界半径

    • 边框样式:实心,点缀,脊,......

    • 边框颜色

    • 边框宽度

 

ADV-按钮边界

 

  • 余量: 顶部,右侧,底部和左侧。

  • 填充: 顶部,右侧,底部和左侧。

 

先进的按钮,填充

 

  • 徘徊:

    • 颜色设置:背景颜色,文本颜色和阴影颜色。

    • 阴影(H(水平)偏移,V(垂直)偏移,模糊,扩散),不透明度和转换速度。

 

先进的按钮悬停

 

高级列表块

你可以创建一个 高级列表 单击Advanced Gutenberg类别中的按钮。

 

高级列表

 

输入内容后,您可以从右侧面板调整设置:

  • 文字设置

    • 字体大小

  • 图标设置

    • 图标(列表,颜色和大小)

    • 线高

    • 余量

    • 填充

 

先进列表的设置

 

摘要块

你可以创建一个 摘要 在帖子或页面中设置至少一个标题标记后,通过单击Advanced Gutenberg类别中的按钮来阻止。 摘要可以与左,中或右对齐。 要更新它,请使用“更新摘要”按钮。

 

总之,古腾堡内容

 

在右侧面板中,您可以调整一些选项:

  • 负载最小化: 默认情况下显示/隐藏摘要

  • 摘要标题标题: 摘要的标题文本,显示在 负载最小化 选项已启用

  • 锚色: 为摘要选择一种颜色

 

总之,设置

 

计数器(向上计数)块

 

你可以创建一个 计数 通过单击Advanced Gutenberg类别中的按钮阻止,可能带有符号。

 

计数

 

然后,从右侧面板中,您可以调整计数器的一些选项:

  • 颜色设置: 标题的颜色,Count Up的颜色和描述的颜色

  • 列: 1-3

  • 柜台号码尺寸: 设置数字的大小

  • 反击符号: 在计数器之前或之后添加一个字符

  • 切换按钮: 设置符号的位置(On表示符号在数字后面)

 

算机的设置

 

高级图像块

高级图像 块可用于创建图像。 要添加一个,请单击 高级图像 Advanced Gutenberg类别中的按钮,然后选择要插入的图像。

 

先进的图像按钮

 

接下来,您可以更改图像标题及其副标题。 您可以从右侧面板调整图像的设置。

  • 点击动作: 要么在灯箱中打开图像,要么打开自定义URL

  • 链接网址: 在新标签页中打开链接(切换按钮)

  • 在新的标签页打开链接: 开关

  • 图片尺寸: 图像是应以全宽显示还是以自定义高度和宽度显示

 

先进的图像的设置

 

  • 焦点选择器: 选择要聚焦在图像上的点或设置水平/垂直位置

  • 覆盖不透明度默认

  • 覆盖不透明度悬停

  • 颜色设置: 标题的颜色,字幕的颜色,叠加的颜色

  • 文字对齐: 垂直对齐(顶部,中心,底部),水平对齐(左侧,中心,右侧)

 

广告图像悬停

 

见证块

您可以点击相应的内容,在内容中插入推荐 见证 Advanced Gutenberg类别中的按钮。 然后,您可以更改推荐书的头像,姓名,工作职位和描述。

 

告别赛按钮

 

最后,在右侧面板中,您可以调整“个人鉴定”的设置。 禁用“滑块视图”选项时,以下设置如下:

  • 列: 普通视图中的列范围是1-3,而滑块视图中的列范围是4-10。

  • 阿凡达: 头像大小,背景颜色和边框设置,包括颜色,半径和宽度

  • 文字颜色:

    • 名称颜色

    • 位置颜色

    • 描述颜色

 

告别赛的设置

 

启用时 滑块视图 选项,将显示一些其他滑块选项:

  • 东西的个数
  • 显示项目
  • 滚动项目

滑块视图列

  • 中心模式
  • 悬停时暂停
  • 自动播放
  • 自动播放速度(毫秒)
  • 无限循环
  • 过渡速度(毫秒)
  • 显示点
  • 显示箭头
  • 箭头大小

 

滑块设置

  • 滑块颜色:
    • 箭头和边框颜色
    • 点色

 

滑块颜色

 

地图块

为了使用 地图 阻止,您需要在配置中添加Google API密钥。 之后,你应该遵循这个 链接, 点击 启用API和服务 按钮,然后搜索并启用Geolocation API,Maps JavaScript API。

添加后,您可以通过单击创建地图 地图 Advanced Gutenberg类别中的按钮。

 

地图块

 

在右侧面板中,您可以通过输入纬度和经度或输入地址,然后按提取位置按钮来插入位置。

可以使用地图的一些其他选项:

  • 缩放级别

  • 高度

  • 标记图标

  • 标记标题

  • 标记说明

  • 打开标记工具提示

  • 地图样式: 银色,复古,夜晚......还可以添加自定义样式。

 

地图设置

 

高级视频块

您可以通过单击来为帖子创建视频 高级视频 Advanced Gutenberg部分中的按钮。 然后,您可以粘贴Youtube或Vimeo中的URL,或使用服务器中的任何本地视频。 您可以通过单击左上角的“编辑”按钮来更改预览图像。

 

先进的视频

 

接下来,您可以在右侧面板中调整视频的设置。

  • 在灯箱中打开视频: 灯箱提供额外的显示选项

  • 全屏宽度: 如果它关闭,您需要为视频设置自定义宽度

  • 视频高度

  • 颜色设置: 叠加颜色和播放按钮颜色

  • 播放按钮:图标样式,播放按钮大小

 

先进的视频设置

 

高级表块

您可以通过单击创建表 高级表 Advanced Gutenberg类别中的按钮。

 

先进的表扣

 

您可以在设置列数和行数后编辑表。

 

先进的表

 

之后,您可以在表格块上方的编辑器本身输入文本或调整行和列。 可以在右侧面板中修改更多设置。

  • 样式

    • 默认

    • 条纹

 

样式表

 

  • 表设置

    • 最大宽度: 将此值设置为0可使最大宽度等于100%

    • 固定宽度表格单元格

    • 表头, 页脚

    • 边境崩溃了

 

advanced-table-settings1

 

  • 单元格设置

    • 颜色设置: 背景颜色,文本颜色

    • 边界: 边框样式,颜色和宽度

    • 填充: 顶部,底部,左侧和右侧填充

    • 文字对齐: 水平和垂直对齐

 

单细胞的设置

 

您甚至可以合并单元格(使用Shift按钮)并将合并的单元格拆分为 高级表 块。

高级手风琴座

你可以创建一个 高级手风琴 当您需要通过单击更小的区域显示更多内容时 高级 手风琴 Advanced Gutenberg类别中的按钮。 之后,默认会显示2组手风琴元素。

 

ADV-手风琴块

 

创建后,您可以从右侧面板调整标题,正文或边框选项。

  • 手风琴设置:

    • 底部间距: 定义每个手风琴之间的空间(仅限前端视图)

    • 初始崩溃: 默认情况下,所有手风琴都会折叠。

  • 标题设置

    • 标题图标样式

    • 颜色设置: 背景颜色,文本颜色和图标颜色

 

ADV-手风琴头

 

  • 体色设置

    • 背景颜色

    • 文字颜色

  • 边框设置

    • 边框风格: 坚实,虚线或点缀

    • 颜色设置

    • 边框宽度,半径

 

ADV-手风琴设置

 

高级标签块

同样,您可以创建一个高级 标签 当您需要在较小区域中显示更多内容时阻止。 要插入一个,请单击 进阶标签 Advanced Gutenberg类别中的按钮。

 

制表块

 

然后,您可以从右侧面板调整选项卡,正文或边框选项。

  • 标签样式
    • 台式机,平板电脑或手机
    • 水平或垂直
  • 标签设置
    • 初始打开选项卡

 

广告选项卡设置

 

  • 标签颜色

    • 背景颜色

    • 文字颜色

    • 活动标签背景颜色

    • 活动标签文本颜色

 

标签的设置

 

  • 身体颜色

    • 背景颜色

    • 文字颜色

  • 边框设置

    • 风格:实心,虚线或点缀

    • 颜色

    • 边框宽度,半径

 

tab-settings1

 

社交链接块

您可以 通过使用,轻松分享您的社交链接 社交链接 块,可以通过单击Advanced Gutenberg类别中的按钮来创建。

 

社会链接

 

您可以使用现成的图标或上传自己的图标,并从右侧面板调整更多选项。

  • 预设图标: 您可以上传自定义图标

  • 预设图标颜色

  • 图标设置

    • 图标大小,空间

 

社会链接的设置

 

最近的帖子块

有3种布局可用于显示您最近的帖子:网格,列表和滑块视图。 您可以通过单击创建任何这些视图 最近的帖子 Advanced Gutenberg类别中的按钮。

 

最近短柱块

 

您可以在上图或我们的图片中看到块如何显示在前端 Advanced Gutenberg演示.

在右侧面板中,您可以调整每个布局的设置:

  • 订购

订单通过

 

  • 类别

  • 东西的个数

  • (仅适用于网格视图)

  • 显示特色图片

  • 显示帖子作者

  • 显示发布日期

  • 显示阅读更多链接

  • 阅读更多文字

  • 显示帖子摘录

  • 首发文字摘录: 显示在帖子中找到的第一个文本的某些部分作为摘录。

 

最近,职位的设置

 

宇产品座

有2种布局可供选择 宇产品 阻止:普通视图和幻灯片视图可以在您的WordPress博客上显示WooCommerce产品。 您可以通过单击来插入此块 宇产品 Advanced Gutenberg类别中的按钮。

 

宇块

 

您可以在上图或我们的图片中看到块如何显示在前端 Advanced Gutenberg演示

在右侧面板中,您可以调整每个布局的设置:

  • 产品设置

    • 产品状态

    • 类别

  • 布局设置

    • 产品数量

    • 订购

 

宇设置

 

图像滑块

如果要将多个图像显示为幻灯片,请单击以执行 图像滑块 Advanced Gutenberg类别中的按钮。

 

新图像滑块

 

然后按 添加图片 按钮选择幻灯片中显示的图像。 之后,您可以输入文本 标题和文字 每个图像的描述。

 

图像滑块

 

您可以在右侧面板上编辑滑块的设置。

图像设置

  • 点击动作:无,在灯箱中打开图像并打开自定义链接

  • 全屏宽度

  • 自动高度

  • 始终显示叠加层

颜色设置

  • 悬停颜色

  • 标题颜色

  • 文字颜色

 

slide-settings-1

 

文字对齐

  • 垂直对齐

    • 最佳

    • 中央

    • 底部

  • 水平对齐

    • 剩下

    • 中央

slide-settings-2

 

联系表格块

您可以通过此块获取客户电子邮件联系通知。 您可以通过单击创建该表单 联系表 Advanced Gutenberg类别中的按钮。

 

联系表

 

您可以编辑的设置 联系表 在右侧面板上。

  • 注意: 如果在“设置”中启用reCAPTCHA选项,则不会出现。

  • 电邮发件人: 您可以在“设置”中更改。 每当提交联系表单时,都会向管理员电子邮件发送一封电子邮件(默认情况下)。

  • 文字标签:

    • 名称输入占位符

    • 电子邮件输入占位符

    • 消息输入占位符

    • 提交文字

    • 空的领域警告文本

    • 提交成功文本

 

contact-settings1

 

  • 输入颜色: 背景颜色和文本颜色

  • 边框设置: 边框颜色,边框样式和边框半径

  • 提交按钮设置:

    • 颜色设置: 边界和文本,背景

    • 按钮边框半径

    • 按钮位置: 左,中,右

contact-settings2

 

时事通讯块

要获取客户端电子邮件,您可以通过单击创建电子邮件块 通讯 Advanced Gutenberg类别中的按钮。

 

通讯

 

您可以在右侧面板上编辑新闻稿的设置。

  • 注意: 如果在“设置”中启用reCAPTCHA选项,则不会出现。

  • 表单设置:

    • 表单样式:默认/替代

    • 表格宽度(px)

  • 文字标签:

    • 电子邮件输入占位符

    • 提交文字

    • 空的领域警告文本

    • 提交成功文本

 

newsletter-settings1

 

  • 输入颜色: 背景颜色和文本颜色

  • 边框设置: 边框颜色,边框样式和边框半径

  • 提交按钮设置:

    • 颜色设置: 边界和文本,背景

    • 按钮边框半径

 

newsletter-settings2

 

列管理器块

如果要创建包含其他块的块,则应选择 专栏经理 在Advanced Gutenberg类别中。 创建新块时,它将显示块的样式。

 

加列经理块

 

然后,您可以在每列中添加所需的任何类型的块。 这是一个列管理器块,包括2列:左边是高级图像,右边是段落,高级列表。

 

列管理器块

 

在右侧面板上,您可以调整Column Manager块的设置。

  • 响应设置

    • 每种设备类型的样式:桌面,平板电脑,移动设备

    • 列之间的空格

    • 填充:顶部,右侧,左侧和底部

    • 保证金:上,右,左和下

 

column-settings-1

 

 

  • 行设置

    • 包裹的列:如果您的列溢出,它将被分隔为一个新行(例如:使用此列与列间距)。

    • 包装标签:Div,Header,Main,...

    • 内容最大宽度(px vw,%)

    • 内容最小高度(像素,大众,大众)

    • 内容最大高度(px,vw,vh)

 

column-settings-2

 

登录/注册表格块

您可以为您的网站创建登录表单或注册表单 通过点击 登录/注册表格 Advanced Gutenberg部分中的按钮。

 

登录状块

 

您可以在此块的导航栏或右侧面板上将视图从登录切换到注册。

 

登录寄存器状

 

然后,您可以转到右侧面板以调整有关表单的更多详细信息。

  • 初始表格: 登录或注册

  • 登录后重定向: 首页庭,仪表板或自定义

  • 表格宽度 (PX)

  • 显示徽标

  • 徽标宽度 (PX)

  • 显示输入字段图标

  • 显示注册/标题链接

  • 标题颜色

  • 显示丢失的密码链接

 

形状态setttings

 

  • 输入占位符

    • 登录输入占位符

    • 用户名输入占位符

    • 电子邮件输入占位符

  • 文字/输入颜色

    • 输入背景颜色

    • 输入颜色

    • 文字颜色

  • 边框设置

    • 边框颜色

    • 边框风格

    • 边框宽度

 

输入占位符的设置

 

  • 提交按钮设置

    • 边框和文字

    • 背景

    • 按钮边框半径

    • 按钮位置

  • 提交按钮悬停

    • 悬停颜色: 背景,文本和阴影颜色

    • 阴影: 不透明度,转换速度和阴影(H(水平)偏移,V(垂直)偏移,模糊,扩散)

  • 注意: 我们强烈建议启用Google reCaptcha以避免垃圾邮件僵尸程序。 您可以在Form Recaptcha中启用它 进阶 古腾堡>电子邮件和表格 .

 

提交按钮的设置

 

搜索栏块

您可以通过单击在前端创建搜索文本框 搜索栏 Advanced Gutenberg类别中的按钮。

 

搜索栏块

 

您可以在右侧面板上调整“搜索栏”设置。

  • 样式: 有2种预定义样式:默认和经典

  • 搜索栏状态

    • 全宽:开/关

    • 宽度

  • 搜索图标设置

    • 右侧的搜索图标:开/关

    • 搜索图标

 

搜索栏的设置

 

  • 搜索输入设置

    • 搜索占位符

    • 输入颜色:背景和文本颜色

 

搜索输入的设置

 

  • 搜索按钮设置

    • 显示提交按钮:开/关

    • 左侧的搜索按钮:开/关

    • 背景和文字颜色

    • 边界半径

  • 悬停颜色: 背景,文本和阴影颜色

  • 悬停阴影: 不透明度,转换速度和阴影(H(水平)偏移,V(垂直)偏移,模糊,扩散)

 

搜索按钮的设置

 

2.2。 组态

要为图像使用灯箱和标题功能,您需要启用 在灯箱中打开画廊 图片标题 选项分别在 Advanced Gutenberg的配置选项卡 在设置中。

 

ADV-古腾堡的设置

 

  • 在灯箱中打开画廊: 打开图库图像作为灯箱样式弹出窗口

  • 图片说明: 加载图像(alt)属性作为灯箱图像的标题

  • 删除Autop: 删除WordPress函数autop,用于防止在某些块中添加不需要的段落

  • Google API密钥: 使用Map Block需要此API密钥

阻止设置

  • 启用块间距: 自动应用最小垂直块间距 - 默认值为none,值应以像素为单位

  • 阻止图标颜色: 在admin上设置块图标的颜色,仅适用于Advanced Gutenberg块

  • 编辑宽度: 定义管理员Gutenberg编辑器宽度大小

  • 默认缩略图: 设置要在最近帖子块中使用的默认帖子缩略图

  • 启用列可视指南: 启用边框以实现Adv。 古腾堡柱块

你也可以找到 进阶 古腾堡设置 在编辑器的右上角,旁边是 设置 图标。

 

编辑-ADV古登堡的设置

 

2.3默认块配置

 

要调整Advanced Gutenberg中的块,可以进入菜单 Advanced Gutenberg> 配置>默认阻止配置选项卡.

 

默认块,配置

 

对于每个块,您可以通过单击相邻块来编辑其默认设置 设置 图标。

 

块编辑

 

2.4电子邮件和表格

电邮设定

您可以设置发件人和收件人信息 联系表 块:

 

电子邮件设置

 

表格ReCaptcha

首先,您应该在您的网站上注册reCaptcha 这里,然后点击 管理控制台 按钮输入信息。

之后,填写reCAPTCHA站点和reCAPTCHA密钥。 请记住启用reCAPTCHA选项。 您也可以为reCAPTCHA选择语言和主题。

 

表单验证码

 

表格数据

从这里你可以下载 联系表 通讯表格 数据。 您可以导出.CSV或.JSON文件。

 

形式数据

 

2.5自定义样式

Advanced Gutenberg 配置还允许您定义可在编辑器和HTML标记选项中使用的自定义CSS片段。 要使用自定义样式,请导航到 自定义样式 页面来自 Advanced Gutenberg的左菜单。

要创建新样式,请单击 “添加新课程” 样式列表底部的按钮。 您可以在自定义CSS字段中编辑CSS。

 

自定义样式古登堡

 

您所做的所有更改都将显示在页面的左侧。 它们将应用于“示例文本”的字符串。 字符串上方和下方的文本显示了样式在其余元素中的外观。 编辑自定义样式后,使用以下命令保存 “保存风格” 按钮。


要在编辑器中将元素应用于元素,您应该选择元素并从名为的下拉列表中选择一种样式 “自定义样式”。 要恢复默认样式并删除所有自定义样式,请选择 “段” 选项。

 

自定义CSS样式块