Google Web Stories WordPress 插件概述和評論

已發表: 2020-07-19

網絡故事是由 AMP 提供支持的全屏可點擊頁面。 它們讓您可以創建非常適合視覺信息的交互式視覺敘事。 故事是身臨其境的、可共享的和可追踪的。 借助 Google 的插件,它們現在可以添加到您的 WordPress 網站。 在這個插件概述和評論中,我們將看看 Google Web Stories WordPress 插件,看看它可以做什麼。

什麼是網絡故事?

正式名稱為 AMP Stories,Web Stories 是具有雜誌風格佈局的移動屏幕大小的頁面。 內容包括帶有較長內容鏈接的大文本、帶標題的縱向模式 15 秒視頻和帶標題的圖像。 Web Stories 是一個開源系統,而且是免費的。

它們適用於移動設備。 它們通常包含 4 到 30 頁,每頁 10 個字。 這是製作小塊內容的理想選擇。 它們是提供交互式內容的好方法,在吃午飯、坐在地鐵上等時,只需一隻手即可輕鬆使用這些內容。

為什麼要在 WordPress 上使用網絡故事?

Web Stories 的內容和設計非常適合 WordPress 網站上的博客內容。 該插件將它們集成到您的 WordPress 網站中,並有助於通過 Web Story 格式吸引流量。

它們甚至有助於提高您的 SEO 並在 Google 搜索、Google 圖片、Google Discover 和 Google 應用程序中排名靠前,使 Web Stories 成為提高 WordPress 流量的絕佳方式。

安裝 Google 網絡故事插件

安裝 Google 網絡故事插件

下載免費的測試版插件。 這是一個公共測試版插件,所以大部分主要功能都在那裡。 完整版將於今年夏天晚些時候發布。 它將具有更好的穩定性、性能和錯誤修復,並包括動畫和頁面附件支持。

由於它是測試版,您必須下載該文件並按照以下步驟手動安裝:

  1. 前往 Stories Github 頁面並下載測試版插件
  2. 在 WordPress 儀表板中,轉到插件>添加新
  3. 點擊上傳插件
  4. 從您的計算機中選擇壓縮文件
  5. 點擊立即安裝
  6. 看到“插件安裝成功”,點擊激活插件

網絡故事菜單

網絡故事菜單

儀表板中添加了一個名為 Stories 的新菜單項。 在這裡,您可以查看所有故事、添加新故事和探索模板。 您的故事將顯示在此處,您可以在其中在編輯器中打開、重命名、複製或刪除它們。

這是一種 Stories 帖子類型,可以顯示為 Stories 帖子,並且可以將這些帖子的鏈接添加到常規頁面和帖子中。

創造一個故事

創造一個故事

單擊創建新故事打開編輯器,您可以在其中訪問可視化工具。 沒有更改它們的大小或折疊它們的選項。 如果這讓您想起 Canva,那麼您並不孤單。 它的工作方式大致相同,而且同樣直觀。

左側是您可以添加到頁面創建者的內容。 它包括圖像、文本和形狀。 圖像還包括視頻。 中間是頁面創建者。 它包括編輯和發布故事的工具。 右側是設計和文檔工具。 添加到頁面的每個元素都是一個單獨的層。

內容

內容

圖像和其他內容來自您的媒體文件夾。 將鼠標懸停在 1 上會顯示三個點。 單擊圓點可打開編輯或刪除圖像的選項。 您還可以對圖像或視頻進行排序、搜索和上傳。 單擊內容將其添加到故事頁面。

內容

您可以雙擊添加內容或將內容拖放到故事頁面上。 在本例中,我將圖像拖到頁面上。

文本

文本

文本選項卡包括用於添加標題、副標題和正文文本的預設按鈕。 單擊一個或單擊添加新文本以向頁面添加預設文本。

文本

單擊文本以打開調整大小工具。 拖動以調整大小或抓住中間並將文本移動到新位置。 這也會在右側打開其工具,您可以在其中更改對齊方式、顏色、大小、位置、圖層、樣式等。

文本

您還可以一次選擇多個項目來調整大小或重新定位內容。

形狀

形狀

形狀選項卡包括正方形、圓形、三角形、心形、星形、五邊形、六邊形和斑點。 將它們拖放到頁面上,更改它們的顏色、不透明度、大小等。

頁

畫佈區域包括標題、發布選項、垃圾箱、複製、添加新頁面、撤消、重做、預覽和一次查看多個頁面的網格視圖。 單擊內容可為您提供一些拖放工具來調整大小和移動內容。 它還打開右側的設計工具選項。

頁

拖動內容以查看對齊選項。

頁

雙擊內容查看整個圖像並打開工具來調整縮放和對齊。 您可以調整內容大小並四處移動以獲得所需的確切圖像。

設計

設計

設計調整顯示您單擊的元素的控件。 我選擇了頁面的背景,然後點擊了顏色。 這將打開一個顏色選擇器,以便您可以設置背景顏色。

設計

對於圖像,這包括對齊、大小和位置、不透明度、鏈接、可訪問性和圖層。

設計

對於文本,這包括字體系列、樣式、對齊方式、顏色、背景顏色、填充和鏈接。

設計

對於形狀,這包括對齊、大小和位置以及顏色。

設計

文檔選項卡包括標準的 WordPress 發布選項並添加了更多選項。 另存為草稿或發佈為公共或私人。 調整日期、出版商標誌和封面圖片。 調整固定鏈接和頁面前進。 在自動和手動之間進行選擇,並設置自動前進時間。

模板

模板

“瀏覽模板”選項卡顯示您可以在故事中使用的模板。 目前有 8 個模板可以幫助您入門。 模板包括多個頁面,因此有很多設計可以提供幫助。

模板

單擊一個打開模板,您可以在其中看到模板中的所有頁面。

模板

所有頁面都可以選擇和調整。 選擇任何元素進行更改。

發表故事

發表故事

當您單擊發布故事時,您將看到用於查看故事或將其添加到新帖子的選項。

查看故事

查看故事

查看故事會在前端打開頁面。 每一頁都是可見的,但只有中間的那一頁是完全可讀的。 該頁面顯示側邊帶有箭頭的滑塊控件、頁面下方的導航欄、右上角的播放或暫停按鈕以及一個共享按鈕,以便訪問者輕鬆共享您的網絡故事。 單擊該按鈕允許訪問者復制 URL。

添加到新帖子

添加到新帖子

選擇“添加到新帖子”會自動創建標準博客帖子,其中包含已放置在帖子中的故事代碼。 這是一篇標準的博客文章,因此它出現在博客流中。 這是打開故事頁面的鏈接。 將任何其他內容添加到您想要的帖子中。 此代碼可以放置在任何帖子或頁面中,因此您可以將其用於博客帖子、Divi 佈局等。我使用的是經典編輯器,但它在 Gutenberg 中的工作方式類似。

添加到新帖子

使用 Gutenberg,它要求將代碼轉換為 HTML。 故事在此模式下工作,因此您可以在撰寫帖子時看到頁面翻轉。

更多使用故事帖子類型的方法

更多使用故事帖子類型的方法

您還可以將帖子類型添加到導航菜單中,將它們與 Divi 博客模塊、Divi Theme Builder 等一起使用。

在 Google 網絡故事中做廣告

獲利僅限於 Google 平台和聯屬網絡營銷銷售。 故事廣告由 Google Ad Manager 和 Google DV360(目前處於測試階段)提供。 未來將添加額外的廣告服務器支持。 它們可以包括贊助故事和附屬機構。

在 Google 網絡故事中做廣告

Google 廣告是整頁廣告,並顯示在網絡故事中。 它們可以包含指向網頁、AMP 頁面或應用的鏈接。 它們可以包括文本、圖像、按鈕、視頻、動畫和任意組合。 廣告在左上角被標記為廣告。 廣告的目標是具有與 Web Stories UX 融合的有凝聚力的設計。

文檔顯示瞭如何編碼和製作廣告的詳細信息。 有幾個模板可以幫助您入門。 上面的示例中顯示了一些。

結束的想法

Web Stories 是一種為 WordPress 網站發佈內容的有趣方式。 故事看起來像雜誌頁面,可用作滑塊。 它們甚至可以與 WordPress 導航結構以及 Divi 的佈局和模塊很好地集成。 它們適用於移動設備。

Google 的 Web Stories WordPress 插件的外觀和感覺就像 Canva 之類的圖形編輯工具。 它簡單易用。 如果您對創建簡單內容的簡單方法感興趣,這些內容看起來很棒並可以改善您的 SEO,我建議您查看 Web Stories WordPress 插件。

我們希望聽到您的意見。 您是否嘗試過 Google Web Stories WordPress 插件? 在下面的評論中讓我們知道您的體驗。

精選圖片來自 Jemastock/shutterstock.com