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樣式塊