古騰堡編輯器教程:如何使用Automatic的WordPress活動區塊外掛

古騰堡編輯器:如何使用Automatic的WordPress活動區塊-1

WordPress的母公司Automattic已經發布了一些最著名的WP外掛。WooCommerce、Jetpack、Akismet、BuddyPress、bbPress……等等。在列表中他們還增加了另一個強大的外掛:活動區塊外掛。這是一個非常簡單的解決方案,可以讓您的使用者知道您要做什麼。

什麼是活動區塊?

與WordPress 5.8的許多新區塊不同,活動區塊必須通過外掛庫手動安裝,而不是編輯器本身的區塊目錄。

古騰堡編輯器:如何使用Automatic的WordPress活動區塊-2

Automattic現代設計理念的精髓在這個外掛中如火如荼。它簡單、易於使用且時尚。只需導航到 管理面板中的外掛並搜尋或上傳即可安裝它。然後它將作為Event出現在您的外掛列表中 。

古騰堡編輯器:如何使用Automatic的WordPress活動區塊-3

該塊本身允許您新增事件、時間和位置的描述,並將圖片新增到顯示給訪問者的卡片中。此外,您還有特定於區塊的選項和設定,您可以調整這些選項和設定,以使區塊更適合您網站的設計和您正在顯示的事件的外觀。

如何將活動區塊新增到文章或頁面

安裝外掛後,將活動區塊新增到您的頁面就很容易了。在 WordPress區塊編輯器中,只需按 + 按鈕即可新增新區塊。您可以在頂部工具欄中或任何空白區塊的右側找到此按鈕。

古騰堡編輯器:如何使用Automatic的WordPress活動區塊-4

將出現區塊選擇側欄。如果您滾動瀏覽整組已安裝的區塊,您可以在小工具部分找到活動區塊。您還可以搜尋 Event 以查詢該區塊。(請注意,搜尋Event不會拉起區塊。)

古騰堡編輯器:如何使用Automatic的WordPress活動區塊-5

每個區塊為單個事件/活動顯示一張卡片。如果您打算使用它來顯示一個節日或一系列活動(例如連續播放多天的戲劇的放映時間),您將需要在描述中包含該資訊或為每個單獨的節目建立多張卡片。

活動區塊設定和選項

正如我們上面所說,一個包括在內的選項是能夠展示一系列事件。從技術上講,無法展示一系列日期。話雖如此,讓我們看看到底活動區塊外掛可以做什麼。

古騰堡編輯器:如何使用Automatic的WordPress活動區塊-6

要設定事件的日期,只需單擊“選擇日期(Choose a Date)”按鈕。將出現一個彈出式日曆,您可以在其中選擇事件/活動發生的日期和時間。如果您不選擇時間,則預設為您選擇日期的時間。然後日期將替換按鈕並出現在區塊的左上角。

古騰堡編輯器:如何使用Automatic的WordPress活動區塊-7

其他欄位—— titlelocationdescription —— 只是您在其中鍵入相關資訊的文字框。它們本質上是不言自明的。

古騰堡編輯器:如何使用Automatic的WordPress活動區塊-8

但是,此卡的一個主要缺點是位置不可點選。要將它們連結到地圖,您需要使用塊或其他方法將其單獨包含在文章中。預設情況下,電話號碼可在移動裝置上點選。

我們應該注意,您可以超連結描述或位置框中的任何文字。這意味著,如果您轉到Google地圖並輸入事件的位置,則可以獲取該搜尋的URL,並根據需要使用位置文字建立超連結。這不是一個理想的解決方案,但也許是您在不新增其他外掛的情況下擁有的最好的解決方案。

事件/活動影象本質上是一個影象區塊放置在活動區塊的側面。它將拉伸以適應區塊。您可以通過將藍色圓圈定位在焦點選取器標題下,將塊設定中影象的焦點向右調整 。

古騰堡編輯器:如何使用Automatic的WordPress活動區塊-9

下面是顏色設定部分。您可以使用這些來調整區塊的外觀,為整個區塊設定背景和文字顏色。

古騰堡編輯器:如何使用Automatic的WordPress活動區塊-10

幸運的是,編輯器會警告那些對顏色組合不甚瞭解的人,並且會在您選擇的組合難以閱讀時發出警告。

也許活動區塊的最佳選擇是您可以向其中新增子區塊。只需在描述後按回車/返回,您將獲得另一個 + 按鈕,就像在基本編輯器中一樣。從這裡,您可以在事件本身內新增任意數量的其他區塊。甚至其他事件

古騰堡編輯器:如何使用Automatic的WordPress活動區塊-11

活動區塊中的每個單獨元素都可以單獨調整。您可以將新建立​​的事件塊視為您正在處理的文章或頁面的較小內容區域。每個子事件都可以有自己的設計和影象,以及每個段落區塊或其他任何內容。根據您選擇的區塊,塊的選項將全部顯示在區塊選項側欄中的右側。

活動區塊外掛的最後一個選項是您決定將事件本身顯示為居中對齊的元素還是拉伸內容區域的寬度。

古騰堡編輯器:如何使用Automatic的WordPress活動區塊-12

在上下文選單中,對齊圖示可讓您選擇其中之一。無論您選擇哪個,您在其中建立的任何子區塊都會自行調整以適應更改。影象仍將聚焦在您指示的位置,但如果寬度允許,它們將擴充套件並顯示更多基本影象。

有效使用活動區塊的提示和最佳實踐

活動區塊外掛簡單而強大,你可以用它做很多事情。這裡有一些提示,可確保您在客人中脫穎而出。

1. 使用顏色

不要讓顏色選項浪費在事件塊上。利用能夠調整設計的優勢,以便您可以補充您的頁面設計以及事件/活動內和同一頁面上的其他區塊。

如果您在活動區塊本身中使用區塊,請確保將它們的樣式設定為從其容器中脫穎而出,以便您的使用者更有可能注意到它們。

2. 使用適當大小的影象

真的,影象可以成就或破壞一個事件。如果您的活動看起來不令人興奮或不吸引人,人們就不太可能想要參加。確保您使用能夠以各種尺寸和形狀呈現您的活動的高質量影象。由於影象具有響應性並根據它們擁有的空間調整它們的位置,因此可以設定沒有特別的顆粒狀照片。

始終測試您的影象以確保它們在多個方面都能很好地顯示。

3.利用子塊的優勢

不要害怕在活動本身中新增免費區塊。當然,您可以在頁面內容中新增一些內容,但是如果您想保證看到該資訊,將其嵌入到活動區塊中是最好的方法。

例如,您可以在事件中使用Divi區塊來使用地圖模組,因為WordPress中沒有一個預設值,並且活動區塊預設不呈現可點選的地址。(同樣請記住,如果您願意,您可以使用超連結將Google地圖URL貼上到該位置。)

4. 試驗Patterns選項卡

WordPress 5.8向編輯器引入了Patterns選項卡。結合Event Block外掛,你可以不費吹灰之力就做出一些非常賞心悅目的頁面設計。

古騰堡編輯器:如何使用Automatic的WordPress活動區塊-13

在任何可以新增區塊的情況下,您都可以選擇左側邊欄中的“模式”選項卡。選擇一個會將其新增到您的模板中,您可以從那裡開始。在上圖中,我們只是在模式放入的每一列的底部新增了一個事件塊,並在預設頁面列中新增了一個。因為古騰堡編輯器允許在任何地方進行調整,您也可以嘗試建立自己的模式。這樣,您的活動就不會在標準網格或列表中丟失。

小結

起初,活動區塊外掛可能並不健壯。但是通過一些周到的設計和瀏覽選項,您可以用一個來修飾任何頁面。有了各種可用的子區塊以及在其中巢狀其他事件的能力,活動區塊肯定會增強幾乎任何型別的站點。無論是面對面的活動、虛擬活動,還是隻是一個重要公告的佔位符,這個外掛可能是最簡單的方法。

評論留言