Divi Layouts AI:完整指南

已發表: 2024-04-29

在人工智慧 (AI) 革命開始之前,建立網頁需要編碼技能或僱用昂貴的開發人員。 對某些人來說,由於缺乏經驗或預算,這通常是遙不可及的。 由於新技術允許您使用文字提示建立整個網頁,因此這一切都改變了。

這篇文章將作為 Divi Layouts AI 指南,向您展示這款令人興奮的新產品的詳細資訊。 我們將解釋它的作用、工作原理以及如何輕鬆創建華麗的網頁。

讓我們深入了解一下。

目錄
  • 1什麼是 Divi Layouts AI?
  • 2 Divi Layouts AI 是如何運作的?
  • 3使用 Divi Layouts AI 建立完整的網頁
    • 3.1第1步:購買Divi Layouts AI
    • 3.2第二步:建立新頁面
    • 3.3步驟 3:向 Divi Layouts AI 提供資訊以產生網頁
    • 3.4步驟 4:使用 Divi Layouts AI 建立頁面
    • 3.5第 5 步:微調和定制
    • 3.6第 6 步:儲存網頁
  • 4 Divi 佈局 AI 範例
  • 5使用 Divi Layouts AI 有什麼好處?
  • 6 Divi 佈局 AI 將徹底改變您使用 Divi 的方式
  • 7常見問題

什麼是 Divi Layouts AI?

Divi 佈局 AI

Divi Layouts AI 是我們推出的新產品,它與我們的旗艦 WordPress 主題 Divi 搭配使用。 Divi 和 Divi AI 的強大力量相結合,使其成為目前市場上最好的人工智慧網站建立者之一。 它可以創建整個頁面,幫助您優化現有副本,生成圖像並添加程式碼,所有這些都帶有文字提示。 Divi Layouts AI 還可以透過讓您提供顏色和字體來建立與您的品牌相符的頁面。 這樣,您產生的每個頁面每次都會具有一致的外觀。

獲取迪維AI

Divi Layouts AI 是如何運作的?

Divi Layouts AI 直接內建於 Divi 的框架中,並與 Visual Builder 無縫協作。 由於它對 Divi 程式碼庫的深入了解,它可以從您的網站中學習。 它了解每一行程式碼和設計模組的工作原理,從而輕鬆創建漂亮的佈局。 Divi Layouts AI 就像設計師、開發人員和攝影師合而為一。

Divi AI 佈局選項

您提供一個簡單的文字提示來描述您需要的頁面類型,Divi Layouts AI 將創建一個完整的網頁,包括文字和圖像,並配有 Divi 的設計模組。 它跳過了規劃和建立網頁結構的初始階段,讓您在設計過程中搶佔先機。

使用 Divi Layouts AI 建立完整的網頁

要開始使用 Divi Layouts AI,您必須購買 Elegant Themes 會員資格和 Divi AI。 如果您已經是會員,則可以跳過訂閱註冊程序並單獨購買 Divi AI。 其價格為每月 17.04 美元(如果按月付費)或每年 153 美元

在本 Divi Layouts AI 指南中,我們將引導您完成使用 AI 建立網頁所需的步驟,從頁面的初始建立到最佳化輸出。

第 1 步:購買 Divi Layouts AI

首先前往 Elegant Themes 主網站並導覽至 Divi AI 頁面。 您可以註冊 Divi + Divi AI 或選擇 Divi AI 作為獨立產品(如果您已經在使用 Divi)。 點擊立即註冊! 按鈕繼續。

取得 Divi Layouts AI

對於這篇文章,我們假設您已經是 Elegant Themes 會員。 點擊註冊按鈕後,系統將提示您登入 Elegant Themes 帳戶。

優雅主題成員

登入後,您將被重新導向到Divi AI註冊頁面,您可以在其中新增其他服務,例如 Divi Cloud、Divi VIP 或 Divi Teams。 如果不進行額外購買,請點擊“不,謝謝,繼續結帳”

購買迪維AI

輸入您的信用卡資訊即可完成購買,或者如果您有信用卡存檔,只需點擊「購買 DIVI AI」按鈕即可。

完成 Divi AI 購買

購買後,您可以透過點擊帳戶 > 訂閱來查看您的 Divi AI 訂閱資訊。 您需要一個 API 金鑰才能在 WordPress 安裝中使用 Divi AI。 為每個 Divi 安裝產生一個唯一的金鑰是個好主意。 為此,請按一下「帳戶」標籤並導航至「使用者名稱和 API 金鑰」

Divi 佈局 AI 指南

頁面刷新後,向下捲動並點擊「產生新 API 金鑰」按鈕 (1)。 產生密鑰後,為其提供標籤會很有幫助 (2)。 如果您打算建立多個 Divi 網站,這種做法特別有用。

產生API金鑰

按一下該鍵進行複製。 您需要在 Divi 主題選項面板中啟動 Divi AI。 前往 WordPress 安裝,登入並導覽至Divi > 主題選項 > 更新

Divi 佈局 AI 指南

輸入您的使用者名稱和複製的 API 金鑰,然後按一下「儲存變更」按鈕進行儲存。

保存 API 金鑰

第 2 步:建立新頁面

現在您已經新增了 API 金鑰,您可以使用 Divi AI 建立網頁。 首先為您的 WordPress 網站新增一個新頁面。 導覽至頁面 > 新增頁面

新增 WordPress 頁面

頁面重新整理後,為頁面指定標題 (1),然後按一下「使用 Divi Builder」按鈕 (2)。

Divi 佈局 AI 指南

您將有三個選項可供選擇。 您可以從頭開始建立頁面、選擇預製佈局或使用 AI 建置。 選擇“使用 AI 建置”並點擊“生成佈局”

用人工智慧構建

步驟 3: 向 Divi Layouts AI 提供資訊以產生網頁

我們將在 Divi Layouts AI 指南的這一部分中引導您完成介面。 當頁面首次載入時,將出現一個對話框。 您將在此處描述要建立的頁面類型 (1)。 儘管是可選的,但為 Divi Layouts AI 提供盡可能多的上下文是一個好主意。 您可以輸入您的使命宣言和價值主張,或簡單地寫下有關您網站用途的簡短描述 (2)。 您也可以指定字體和顏色以符合您的公司品牌 (3)。

Divi Layouts AI 指南選項

當指示 Divi Layouts AI 產生頁面時,首先描述您的產品或服務以及目標受眾。 這樣做可以讓 Divi 更了解要產生什麼。 您甚至可以讓它創建引人注目的、經過 SEO 優化的標題。 其他需要考慮的是提及您的理想客戶,描述您想要包含的任何關鍵元素,以及提及您喜歡的任何特定風格。

為了讓您的事情變得更容易,這裡有一個簡短的提示列表,可以用來製作完美的提示:

  • 清晰是關鍵:撰寫提示時要清晰簡潔。 您越具體,Divi Layouts AI 就越能理解您想要的外觀。
  • 提供上下文:考慮在可選的告訴 Divi AI 關於您的網站欄位中包含資訊。 盡可能提供有關您的產品或服務以及目標受眾的背景資訊。
  • 使用關鍵字:包括描述您的業務或服務的相關關鍵字。 這不僅可以幫助 Divi AI 編寫內容,還可以確保您的頁面針對 SEO 進行最佳化。
  • 優化和重新生成: Divi AI 最好的事情之一是您可以產生任意數量的佈局。 如果您的第一次嘗試不是您想要的,請再試一次! 可能性是無止境。

第 4 步:使用 Divi Layouts AI 建立頁面

現在您已經了解了 Divi Layouts AI 是什麼以及它可以做什麼,下一步就是開始頁面產生過程。 在本教程中,我們將要求 Divi 為寵物零食業務產生佈局。 在第一個欄位中,輸入以下文字:為專業寵物零食業務建立登陸頁面。 該公司名為 Critter Cravings,專注於純天然成分。

Divi 佈局 AI 說明

我們將在「告訴 Divi AI 關於您的網站」欄位中加入使命聲明,以便為 Divi AI 提供盡可能多的信息。 輸入以下文字:

我們的公司 Critter Cravings 是一家純天然寵物零食企業,以為毛茸茸的朋友製作美味的烘焙食品而聞名。 我們精心手工製作每一種美食,確保只有最優質、有益健康的原料才能進入我們的食譜。 從鬆脆的餅乾到耐嚼的美食,每一口都一定會讓你最好的朋友發出吠聲或喵喵聲。

我們的零食不含人工添加劑、防腐劑和填充劑,使其成為各種體型和大小的寵物的健康選擇。 在 Critter Cravings,我們相信每隻寵物都應該得到一點寵愛,我們為提供主人可以信任和寵物喜愛的美食而感到自豪。

Divi Layouts AI 選用字段

在「自訂字體和顏色」下,您可以指定網頁中要使用的字體和顏色。 我們將選擇Lato作為標題字體 (1),並選擇Open Sans作為正文字體 (2)。 對於顏色,從下拉清單 (3) 中選擇自訂。 使用#000000作為標題和正文字體,並選擇#F3764D#6baaae作為主要顏色和次要顏色 (4)。 最後,按一下「產生版面配置」以建立網頁 (5)。

Divi Layout AI 字體與顏色

Divi AI 將在點擊「生成」後建立線框,套用字體和顏色,並產生文字和圖像。

使用 Divi AI 產生佈局

第 5 步:微調和定制

我們的 Divi Layouts AI 指南的下一步將向您展示如何優化您的佈局。 Divi AI 在製作精美頁面方面做得非常出色,但有時,您可能想要進行更改。

使用 Divi AI 產生影像

讓我們從為我們的英雄部分重新生成圖像開始。 將滑鼠懸停在主圖像上,然後點擊灰色設定圖示以顯示圖像模組設定。

編輯Divi圖像模組

當模組的彈出視窗處於活動狀態時,將滑鼠懸停在影像預覽上並點擊AI 按鈕

替換圖片 - Divi Layouts AI 指南

這將顯示幾個選項:使用 AI 生成、使用 AI 編輯(您可以在其中修改、擴展和填充、放大或增強圖像)、生成和替換圖像、更改圖像樣式或放大圖像。 讓我們選擇“生成”和“替換”

使用 Divi AI 編輯圖像

Divi AI會在原圖的基礎上自動為英雄產生4張新影像。 但是,您也可以產生新圖像,這允許您添加新提示、指定圖像大小等。 您可以從 12 種風格中進行選擇,包括照片、3D 渲染、繪畫等。

Divi AI 圖像風格

對於本 Divi Layouts AI 指南,我們將選擇照片作為樣式 (1),新增簡短描述 (2),選擇橫向縱橫比 (3),然後按一下產生(4)。 作為提示,我們使用了一隻可愛而忠誠的狗的照片,當他品嚐每一口多汁、入口即化的烘焙食品時,他的眼睛閃爍著期待的光芒。 您可以根據需要提供詳細信息,最多 200 個字元。 如果您發現自己很難想出提示,請查看我們關於最佳人工智慧提示產生器的帖子,以幫助您提出想法。

迪維AI提示

Divi AI 產生 4 張圖像後,我們可以點擊其中一張並選擇使用此圖像(1) 將其插入模組中。 您也可以再產生四個 (2)、透過產生更多類似所選影像 (3) 的影像來修改影像,或輸入新的描述 (4) 以重新開始。

修改Divi AI圖像

使用 Divi AI 精煉文本

Divi AI 的另一個強大功能是其精煉文字的能力。 首先點選英雄部分標題正下方文字模組中的灰色設定圖示

使用 Divi AI 編輯文本

點擊文字模組中的AI 按鈕以顯示 AI 選項。

迪維人工智慧選項

這將彈出一系列用於編輯現有文字的選項。 選項包括使用 AI 編寫、使用 AI 改進、編寫和替換以及使用 Divi AI 編輯文字的其他選項。

使用 Divi AI 編輯文本

讓我們為本 Divi Layouts AI 指南選擇「利用 AI 進行改進」 。 將出現一個對話框,讓您可以選擇內容類型 (1)、您所寫的內容 (2) 以及是否希望 Divi AI 應用程式頁面內容中新增的上下文 (3)。 您也可以點擊AI 按鈕(4) 讓 Divi AI 為您產生提示。

使用 Divi AI 進行書寫

無論您想要產生什麼類型的內容,Divi AI 都可以處理。

使用 Divi AI 產生程式碼

Divi AI 的另一個巨大好處是它產生程式碼的能力。 它僅在 Divi 的程式碼庫上進行訓練,這使其與其他大型語言模型不同。 這使得 Divi 和 Divi AI 成為所有類型使用者(從初學者到經驗豐富的開發人員)的強大工具。 您也可以使用 Divi AI 建立程式碼片段庫,幫助處理現有程式碼,並添加所有類型的效果,包括文字動畫。 例如,如果您想為我們頁面的主標題添加打字機效果,Divi AI 可以輕鬆處理。

若要開始使用 Divi AI 進行編碼,只需開啟模組的設置,導覽至進階標籤(1),開啟自訂 CSS下拉清單 (2),然後按一下AI 按鈕(3)。

Divi AI產生程式碼

當對話方塊出現時,只需輸入您想要建立的效果 (1),然後按一下產生程式碼按鈕 (2)。 在我們的範例中,我們將使用提示為標題提供打字機效果

迪維AI代碼提示

Divi AI 將使用選擇器產生並套用程式碼,並將其新增至自由格式的 CSS 欄位。 點擊“使用此代碼”按鈕來實現該代碼。

使用 Divi AI 產生程式碼

第 6 步:儲存您的網頁

產生佈局並進行最佳化以滿足您的需求後,我們的 Divi Layouts AI 指南的最後一步是儲存頁面。 值得慶幸的是,Divi 讓這部分變得簡單。 當 Visual Builder 處於活動狀態時,將滑鼠懸停在螢幕底部中央的紫色省略號選單上。

Divi 佈局 AI 指南

您可以將頁面儲存為草稿或使用螢幕右下角的相應按鈕發布。

儲存迪維頁面

這是生成佈局並進行一些編輯後的佈局的最終外觀:

Divi 佈局 AI 範例

在結束之前,我們提供了一些佈局和文字提示,以向您展示 Divi AI 的終極力量。

Divi Layouts AI 指導雪地摩托車租賃

提示:建立一個包含雪地摩托車租賃、套餐和體驗的登陸頁面。 使用色彩鮮豔的雪地摩托車、山脈背景和蓬鬆的白雪

強力清洗聯絡頁面

提示:為電力清洗業務建立聯絡頁面。 包括地圖、帶有背景圖像的英雄部分以及三個電話、電子郵件和地址簡介。

植物苗圃商店頁面

提示:為植物苗圃建立商店頁面。 包括服務部分、聯絡表單、帶有價格的特色產品部分,以及帶有充滿活力的背景圖像的視覺吸引力英雄部分。 包括免費送貨、即將舉行的銷售活動以及本月植物的簡介。

網路安全服務頁面

提示:為 IT 服務公司建立一個關於頁面。 包括概述其服務、價值主張、使命宣言和聯繫表的部分。 另外,在頁腳中包含新聞通訊註冊。 添加帶有背景圖像的大型英雄部分和帶有關鍵字“網絡安全”的標題

提示:為附近的健身房建立一個登陸頁面。 在英雄中加入新會員優惠,以及健身器材的圖像。 還包括「關於我們」部分,列出每項服務,並包括時事通訊註冊表。

餐廳菜單頁面 Divi Layouts AI

提示:為漢堡店建立一個選單頁面。 包括美味的食物圖片、菜單、線上訂購部分以及帶有時事通訊註冊的頁腳

線上課程登陸頁面

提示:建立一個線上學習課程頁面。 展示 6 個圖形設計、網頁設計、網頁開發、應用程式開發、原型設計和 UX/UI 課程。 還展示每個類別的定價、帶有背景圖像的英雄以及註冊用戶的登入表單。

Divi 佈局 AI 指南

提示:為汽車維修業務建立一個登陸頁面。 使主題變暗,並帶有紅色。 包括一個帶有汽車黑白背景圖像的英雄部分、一個帶有關鍵字「汽車修理」的超大標題和一個圖片庫。 也包括服務部分、我們做什麼部分和號召性用語部分。

使用 Divi Layouts AI 有哪些好處?

正如我們在 Divi Layouts AI 指南中所示範的那樣,使用人工智慧建立網頁非常簡單、快速且直觀。 它可以幫助初學者和經驗豐富的設計師比通常從頭開始設計佈局更快地創建佈局。 這也是激發創造力的好方法,因為 Divi AI 可以產生圖像、文字和程式碼,這為您提供了一個很好的起點。 Divi AI 的另一個好處是您可以產生無限的照片、文字、程式碼和佈局,而沒有使用限制。 Divi AI 也是任何 Divi 網站的完美伴侶,因為它了解 Divi 的核心。 最終,Divi AI 是一個令人難以置信的創意助手,可以簡化佈局創建過程,為您節省寶貴的時間和精力。

Divi 佈局 AI 將徹底改變您使用 Divi 的方式

Divi 是最受歡迎、功能豐富的 WordPress 主題。 無論您是想從頭開始設計網頁還是使用預製佈局,Divi 都提供了相應的工具。 隨著 Divi Layouts AI 的推出,您只需文字提示即可建立完整的網頁。 從建立新頁面到啟動它的整個過程都非常簡化,讓您可以在幾分鐘內建立漂亮、有效的登陸頁面。 透過 Divi + Divi AI,您可以使用前端、無程式碼 Visual Builder 在幾分鐘內產生圖像、文字、程式碼和完整佈局,讓您可以將時間集中在業務的其他方面。 有了 Divi,你的創作就沒有極限。

獲取迪維AI

經常問的問題

Divi AI 是什麼?
Divi AI 是一組專門為與 Divi 配合使用而建造的工具。 它幫助用戶生成圖像、文字、程式碼和完整的網站。 它甚至可以與主題生成器配合使用,因此您可以使用文字提示來設計網站的各個方面,包括頁首和頁尾。
Divi AI 如何產生適合我的網站的內容?
Divi AI 正在對 Divi 網站和程式碼的海量資料集進行訓練。 這使其能夠了解 Divi 網站的整體結構。 當您使用 Divi AI 時,它會分析您的特定網站的內容,包括網站標題、標語和描述,並產生與您的品牌標誌相符的內容。
Divi AI 難用嗎?
不! Divi AI 的設計宗旨是使用者友善。 它直接整合到 Visual Builder 中,因此您無需學習任何新軟體。 您只需提供文字描述和說明,Divi AI 就會為您產生文字、程式碼、圖像和版面。
與其他AI內容生成工具相比,Divi AI有哪些優勢?
與一些通用AI工具不同,Divi AI是專門為Divi用戶設計的。 這意味著它了解 Divi 的技術和程式碼庫,使其能夠產生更相關、更準確的內容。 此外,Divi AI 還提供圖像細化和 AI 支援的 CSS 編輯等功能,這些功能在其他內容生成工具中並不常見。
Divi AI 可以免費使用嗎?
Divi AI 不是一個獨立的產品。 它可以作為您的優雅主題訂閱的附加元件提供。 不過,新用戶可以在註冊前免費試用 Divi AI。