適用於 Gutenberg 和 Kadence 塊的 AI 圖像生成器!

已發表: 2023-08-18

使用人工智能(AI) 在WordPress 塊編輯器(也稱為古騰堡)中通過AI Image Lab 生成圖像變得更加容易,並且隨著AI Image Lab 1.0.3 更新的集成度更高,該更新引入了為創建 AI 而創建的古騰堡塊圖像生成是內容創建過程的無縫部分! AI 圖像塊旨在允許用戶直接在其他內容中為 WordPress 頁面或帖子快速生成各種自定義 AI 生成圖像,而不是使用單獨的窗口或媒體庫覆蓋來嘗試選擇外部的最佳圖像。周圍元素的上下文。 一旦找到並選擇了完美的圖像, AI 圖像塊就可以輕鬆轉換為多個核心古騰堡塊或 Kadence 塊之一,這些塊提供了額外的樣式和佈局選項。

快速教程

沒有比示例更好的方式來展示古騰堡的 AI 圖像塊的功能了! 我們將使用 Kadence Blocks 插件中的塊,但使用核心 Gutenberg 塊時的過程是相同的。

對於我們的示例,我們將為假設的房地產公司創建基本的主頁佈局。 頁面結構將包括一個帶有文本覆蓋的頂部橫幅,後面是一個包含圖像和文本的兩列行。

為了創建橫幅,我們首先在頁面頂部插入一個AI 圖像塊。 從工具欄中,我們將對齊設置更改為“全寬”。 在塊設置側欄中,我們將寬高比更改為“自定義尺寸”,並輸入寬度 2048(當前最大值)和高度 600。(假設我們使用的是 AI Image Lab Pro,因為最大尺寸在免費版本是768。)

接下來,我們在塊中顯示的文本框中輸入圖像的一些描述性提示文本。 讓我們嘗試用一個詞“neighborhood”。 然後我們單擊“生成圖像”按鈕並等待該塊填充圖像。 由於我們的圖像非常寬,因此預覽圖像可能會有些模糊,因為預覽的渲染分辨率低於高清模式下的最終圖像。

現在,我們可以使用 AI 圖像塊工具欄中的箭頭來瀏覽預覽圖像。 如果我們接近一組預覽圖像的末尾,則會自動生成一組新的圖像,因此如果我們快速瀏覽大量預覽圖像,可能會出現一些延遲。 在任何時候,我們都可以單擊塊工具欄中的編輯按鈕來更改提示文本; 我們在塊設置側欄中所做的任何更改也將觸發生成一組新的圖像。 找到要使用的圖像後,單擊工具欄中的複選標記圖標,這會將全分辨率圖像下載到我們的網站,並使其替換塊中顯示的低分辨率預覽。 由於我們選擇的高分辨率,此過程可能需要一些時間。

這是我們在此示例中使用的圖像:

由於我們想要在此圖像上覆蓋一些文本並進行一些其他樣式更改,因此我們應該將 AI Image 塊轉換為更適合我們需求的不同塊。 在本例中,我們將使用 Kadence Blocks 中的行佈局塊。 只需單擊塊工具欄最左側的 AI 圖像圖標,然後選擇“轉換為”下的行佈局(假設 Kadence Blocks 插件處於活動狀態)。 出現提示時,我們為行選擇單列佈局。

此時,我們可能需要將行佈局塊上的對齊方式重置為全寬。 我們還需要將頂部和底部填充設置為 3XL,然後轉到塊設置側邊欄的“樣式”選項卡中的“背景疊加設置”開關,並啟用不透明度為 60% 的黑色疊加,以便在文本和背景圖像。 然後我們可以在該行中插入一個“文本(高級)”塊,將文本顏色設置為白色,對齊方式設置為居中,HTML標籤設置為“H1”,行高設置為2。現在我們添加文本,其中作為一個非常基本的示例,可能會產生以下結果:

對於橫幅下方的兩列行,我們插入另一個行佈局塊,這次是兩列佈局。 我們在每一列中插入一個AI 圖像塊,並將每個塊的長寬比設置為“3:2(橫向)”(在本例中,我們將像素尺寸保留為默認值,但在生產中可能應該調整這些尺寸)以及生成較小的圖像文件大小)。 對於左列,我們使用圖像提示文本“公寓樓”,在右列中簡單地使用“房屋”。 以下是我們在上傳圖像並轉換 AI 圖像塊之前要進行的圖像預覽:

接下來,我們單擊工具欄中每個AI圖像塊的複選標記按鈕來上傳圖像,上傳完成後,我們單擊工具欄左側的AI圖像塊圖標,然後選擇將每個圖像轉換為信息的選項Kadence Blocks 的盒式積木。 添加一些文本後,我們的頁面如下所示:

結論

雖然 AI Image Lab 插件由於與 WordPress 媒體庫和媒體選擇器集成,自第一個測試版發布以來就幾乎與古騰堡兼容,但 AI Image 塊通過允許用戶創建、預覽、並根據使用場景上傳人工智能生成的圖像,從而更輕鬆地選擇與周圍內容配合良好的圖像、找到正確的長寬比以及可視化成品。 AI Image Lab 與內置的 Kadence Blocks 插件(可選)兼容,是一款功能強大的工具,旨在使古騰堡內容創建者能夠創建令人驚嘆的基於塊的視覺效果!

AI Image Lab 可免費使用,但對每 24 小時可以上傳到網站的圖像數量、這些圖像的分辨率可以有多高等有一些限制。要獲得創建高質量圖像的更多功能,請查看AI Image Lab Pro計劃!