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 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 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)。 點擊立即註冊! 按鈕繼續。
對於這篇文章,我們假設您已經是 Elegant Themes 會員。 點擊註冊按鈕後,系統將提示您登入 Elegant Themes 帳戶。
登入後,您將被重新導向到Divi AI註冊頁面,您可以在其中新增其他服務,例如 Divi Cloud、Divi VIP 或 Divi Teams。 如果不進行額外購買,請點擊“不,謝謝,繼續結帳” 。
輸入您的信用卡資訊即可完成購買,或者如果您有信用卡存檔,只需點擊「購買 DIVI AI」按鈕即可。
購買後,您可以透過點擊帳戶 > 訂閱來查看您的 Divi AI 訂閱資訊。 您需要一個 API 金鑰才能在 WordPress 安裝中使用 Divi AI。 為每個 Divi 安裝產生一個唯一的金鑰是個好主意。 為此,請按一下「帳戶」標籤並導航至「使用者名稱和 API 金鑰」 。
頁面刷新後,向下捲動並點擊「產生新 API 金鑰」按鈕 (1)。 產生密鑰後,為其提供標籤會很有幫助 (2)。 如果您打算建立多個 Divi 網站,這種做法特別有用。
按一下該鍵進行複製。 您需要在 Divi 主題選項面板中啟動 Divi AI。 前往 WordPress 安裝,登入並導覽至Divi > 主題選項 > 更新。
輸入您的使用者名稱和複製的 API 金鑰,然後按一下「儲存變更」按鈕進行儲存。
第 2 步:建立新頁面
現在您已經新增了 API 金鑰,您可以使用 Divi AI 建立網頁。 首先為您的 WordPress 網站新增一個新頁面。 導覽至頁面 > 新增頁面。
頁面重新整理後,為頁面指定標題 (1),然後按一下「使用 Divi Builder」按鈕 (2)。
您將有三個選項可供選擇。 您可以從頭開始建立頁面、選擇預製佈局或使用 AI 建置。 選擇“使用 AI 建置”並點擊“生成佈局” 。
步驟 3: 向 Divi Layouts AI 提供資訊以產生網頁
我們將在 Divi Layouts AI 指南的這一部分中引導您完成介面。 當頁面首次載入時,將出現一個對話框。 您將在此處描述要建立的頁面類型 (1)。 儘管是可選的,但為 Divi Layouts AI 提供盡可能多的上下文是一個好主意。 您可以輸入您的使命宣言和價值主張,或簡單地寫下有關您網站用途的簡短描述 (2)。 您也可以指定字體和顏色以符合您的公司品牌 (3)。
當指示 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 提供盡可能多的信息。 輸入以下文字:
我們的公司 Critter Cravings 是一家純天然寵物零食企業,以為毛茸茸的朋友製作美味的烘焙食品而聞名。 我們精心手工製作每一種美食,確保只有最優質、有益健康的原料才能進入我們的食譜。 從鬆脆的餅乾到耐嚼的美食,每一口都一定會讓你最好的朋友發出吠聲或喵喵聲。
我們的零食不含人工添加劑、防腐劑和填充劑,使其成為各種體型和大小的寵物的健康選擇。 在 Critter Cravings,我們相信每隻寵物都應該得到一點寵愛,我們為提供主人可以信任和寵物喜愛的美食而感到自豪。
在「自訂字體和顏色」下,您可以指定網頁中要使用的字體和顏色。 我們將選擇Lato作為標題字體 (1),並選擇Open Sans作為正文字體 (2)。 對於顏色,從下拉清單 (3) 中選擇自訂。 使用#000000作為標題和正文字體,並選擇#F3764D和#6baaae作為主要顏色和次要顏色 (4)。 最後,按一下「產生版面配置」以建立網頁 (5)。
Divi AI 將在點擊「生成」後建立線框,套用字體和顏色,並產生文字和圖像。
第 5 步:微調和定制
我們的 Divi Layouts AI 指南的下一步將向您展示如何優化您的佈局。 Divi AI 在製作精美頁面方面做得非常出色,但有時,您可能想要進行更改。
使用 Divi AI 產生影像
讓我們從為我們的英雄部分重新生成圖像開始。 將滑鼠懸停在主圖像上,然後點擊灰色設定圖示以顯示圖像模組設定。
當模組的彈出視窗處於活動狀態時,將滑鼠懸停在影像預覽上並點擊AI 按鈕。
這將顯示幾個選項:使用 AI 生成、使用 AI 編輯(您可以在其中修改、擴展和填充、放大或增強圖像)、生成和替換圖像、更改圖像樣式或放大圖像。 讓我們選擇“生成”和“替換” 。
Divi AI會在原圖的基礎上自動為英雄產生4張新影像。 但是,您也可以產生新圖像,這允許您添加新提示、指定圖像大小等。 您可以從 12 種風格中進行選擇,包括照片、3D 渲染、繪畫等。
對於本 Divi Layouts AI 指南,我們將選擇照片作為樣式 (1),新增簡短描述 (2),選擇橫向縱橫比 (3),然後按一下產生(4)。 作為提示,我們使用了一隻可愛而忠誠的狗的照片,當他品嚐每一口多汁、入口即化的烘焙食品時,他的眼睛閃爍著期待的光芒。 您可以根據需要提供詳細信息,最多 200 個字元。 如果您發現自己很難想出提示,請查看我們關於最佳人工智慧提示產生器的帖子,以幫助您提出想法。
Divi AI 產生 4 張圖像後,我們可以點擊其中一張並選擇使用此圖像(1) 將其插入模組中。 您也可以再產生四個 (2)、透過產生更多類似所選影像 (3) 的影像來修改影像,或輸入新的描述 (4) 以重新開始。
使用 Divi AI 精煉文本
Divi AI 的另一個強大功能是其精煉文字的能力。 首先點選英雄部分標題正下方文字模組中的灰色設定圖示。
點擊文字模組中的AI 按鈕以顯示 AI 選項。
這將彈出一系列用於編輯現有文字的選項。 選項包括使用 AI 編寫、使用 AI 改進、編寫和替換以及使用 Divi AI 編輯文字的其他選項。
讓我們為本 Divi Layouts AI 指南選擇「利用 AI 進行改進」 。 將出現一個對話框,讓您可以選擇內容類型 (1)、您所寫的內容 (2) 以及是否希望 Divi AI 應用程式頁面內容中新增的上下文 (3)。 您也可以點擊AI 按鈕(4) 讓 Divi AI 為您產生提示。
無論您想要產生什麼類型的內容,Divi AI 都可以處理。
使用 Divi AI 產生程式碼
Divi AI 的另一個巨大好處是它產生程式碼的能力。 它僅在 Divi 的程式碼庫上進行訓練,這使其與其他大型語言模型不同。 這使得 Divi 和 Divi AI 成為所有類型使用者(從初學者到經驗豐富的開發人員)的強大工具。 您也可以使用 Divi AI 建立程式碼片段庫,幫助處理現有程式碼,並添加所有類型的效果,包括文字動畫。 例如,如果您想為我們頁面的主標題添加打字機效果,Divi AI 可以輕鬆處理。
若要開始使用 Divi AI 進行編碼,只需開啟模組的設置,導覽至進階標籤(1),開啟自訂 CSS下拉清單 (2),然後按一下AI 按鈕(3)。
當對話方塊出現時,只需輸入您想要建立的效果 (1),然後按一下產生程式碼按鈕 (2)。 在我們的範例中,我們將使用提示為標題提供打字機效果。
Divi AI 將使用選擇器產生並套用程式碼,並將其新增至自由格式的 CSS 欄位。 點擊“使用此代碼”按鈕來實現該代碼。
第 6 步:儲存您的網頁
產生佈局並進行最佳化以滿足您的需求後,我們的 Divi Layouts AI 指南的最後一步是儲存頁面。 值得慶幸的是,Divi 讓這部分變得簡單。 當 Visual Builder 處於活動狀態時,將滑鼠懸停在螢幕底部中央的紫色省略號選單上。
您可以將頁面儲存為草稿或使用螢幕右下角的相應按鈕發布。
這是生成佈局並進行一些編輯後的佈局的最終外觀:
Divi 佈局 AI 範例
在結束之前,我們提供了一些佈局和文字提示,以向您展示 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