如何使用 Divi 和 Auto Testimonials 為您的婚禮創建在線留言簿

已發表: 2017-05-21

這篇文章是我們迷你係列《如何使用 Divi 創建優雅的婚禮網站》中的第 4 部分,共 5 部分 在本系列中,我們將指導您完成為自己或 Divi 客戶創建婚禮網站的最重要部分。


在這個迷你係列的前三部分中,我們向您展示瞭如何創建一個優雅的婚禮網站。 該網站包含一個公告頁面、一個圖庫頁面和一個禮品列表頁面。

在您的網站上擁有在線留言簿還可以讓您在婚禮後與客人互動。 這就是為什麼我們尋找適用於 Divi 的最簡單的解決方案。

我們想向您展示如何使用 Noou 的 Automatic Divi Testimonials 創建在線留言簿。 這個插件將幫助我們創建傳入推薦的自動流程。 該插件將使您的頁面易於使用且易於使用,此外,它還將為您節省大量時間。

在本教程中,我們將逐步向您展示如何將 Automatic Divi Testimonials 集成到您的留言簿頁面並為此目的對其進行自定義。 並且,如何創建與您已經製作的婚禮網站相匹配的以下自動推薦模塊佈局。

購買插件

首先,如果您還沒有插件,則需要從 Noou 的網站上購買 Automatic Automatic Divi Testimonials。 下訂單後,您將收到一個 ZIP 文件。 ZIP 文件包含使插件順利運行所需的所有文件。

上傳自動 Divi 推薦插件

在您的 WordPress 網站上上傳插件之前,您必須對 ZIP 文件中包含的文件之一進行一些修改。

轉到 Divi Automatic Testimonials Zip 文件 > Divi-automatic-testimonials > Frontend > 使用代碼編輯器打開表單文件。

在這個例子中,我們將使用 Notepad++ 來編輯文件,但也可以隨意使用任何選擇的代碼編輯器。

更改表單標題

預定義的表單通常用於商業目的。 一個人需要回答的標準問題與業務相關,例如職位和公司。 我們必須在上傳插件之前在 PHP 文件中進行修改,因為它們使用短代碼在您使用 Divi 構建的網站中顯示表單。

我們想更改這些標題,但由於它們目前仍在處理可以在 Divi 中編輯的專用表單,因此我們必須返回源代碼進行這些修改。 這是表格在網站上的樣子,沒有修改:

我們必須更改的三個字段是“職位名稱”字段、“公司名稱”和“公司 URL”。 您可以將這兩個字段更改為您想了解的有關此人的任何信息。 但在此示例中,我們將用“家人/朋友”、“婚禮中的角色”和“您自己的網站”替換它們。

給家人/朋友的職位

將標籤從“職位”更改為“家人/朋友”,並將佔位符從“請輸入您的職位”更改為“告訴我們誰邀請了您”。

在婚禮中扮演角色的公司名稱

將標籤從“公司名稱”更改為“婚禮中的角色”,並將佔位符從“請輸入您的公司名稱”更改為“告訴我們您在婚禮中的角色是什麼”。

個人網站的公司 URL

將標籤從“公司/您的網址”更改為“您的個人網站”,並將佔位符從“請輸入您的公司或個人網址,例如 http://google.com”更改為“輸入您的個人網站網址,例如 http://google” .com'。

注意:文件可能仍處於只讀模式。 要開始編輯,請轉到“編輯”選項卡並選擇“清除只讀標誌”。

更改代碼後,複製整個代碼並創建一個新的 Notepad++ 文件,用當前文件替換該文件。 更改可能不會保存在舊文件上,這就是我們需要用新文件替換文件的原因。 用包含新代碼的新文件替換舊文件將幫助您解決問題。

保存文件並退出。 稍後,您的表單將如下所示:

我們僅對插件的前端部分進行了更改,因此不會混淆訪問網站的訪客。 我們所做的修改並不適用於所有後端。

當您手動嘗試向 WordPress 網站添加推薦時,您仍會看到標題“職位”和“公司名稱”。 但是,這些永遠不會出現在您的網站上,因此請隨時輸入我們提出的新問題的答案。

上傳插件

現在,要將插件上傳到您的網站,請轉到插件 > 添加新插件並上傳保存在桌面上的修改後的插件。 激活 Automatic Divi Testimonials 插件後,它將出現在您的 WordPress 菜單中:

自動 Divi 推薦設置

Automatic Divi Testimonials 插件使客人可以輕鬆分享他們在婚禮上的體驗。 他們可以填寫網站上的表格,一封電子郵件將自動發送給網站所有者或您喜歡的任何其他電子郵件地址。 要進行這些調整,請轉到“設置”並添加您希望接收收到的推薦信的人的電子郵件地址。

添加新的推薦

有兩種方法可以將新的推薦添加到您的推薦列表中; 手動或自動。 在某些情況下,您必須自己添加推薦。 這個插件考慮到了這一點。

手動添加新推薦

您可以通過單擊 WordPress 網站的 Automatic Divi 推薦部分中的“添加推薦”來手動添加推薦。

在這裡,您會注意到我們之前所做的更改不適用於插件的後端。 “Family/friend of”字段仍稱為“職位名稱”。 你只需要記住,那是你寫下這個人與新婚夫婦的關係的地方。

其他兩個適合商業推薦的領域也同樣重要。 “公司名稱”是您將在其中輸入“婚禮中的角色”的字段,而“URL”字段與公司無關。

重要的是,所有這些標題都不會出現在網站本身上。 我們已經編輯了最初會出現在網站上(在表格中)的內容。 我們在上傳插件之前所做的編輯是使插件工作的最快方式,而無需對插件本身進行任何根本性的更改。

創建新的證詞時,您還可以添加作證人的特色圖片。 這將是出現在您婚禮網站上的推薦信中的圖像。

自動添加新推薦

然後我們有這個插件的有趣部分,它讓客人參與網站並為你做重複的工作。 客人可以向您發送他們自己的推薦信,無需任何進一步的手動工作。 通過填寫您網站上的表格,您的客人生成的評價將自動添加到評價列表中,您將收到一封通知電子郵件。

之後,您仍然可以決定如何處理推薦信; 您如何在您的網站上顯示它們以及您是否想要保留它們。 Automatic Divi Testimonials 插件的主要目的是幫助網站所有者從客人那裡獲得推薦,而無需任何一方付出很多努力。 客人無需通過婚禮網站以外的任何其他方式進行交流。

開始

現在,轉到您要添加在線留言簿的頁面。 這可能是一個單獨的頁面,但您也可以隨時向主頁添加一些自動推薦。 該表單當前未顯示在可視化構建器上,因為它通過短代碼顯示。 在本教程中,我們將使用頁面的常規 Divi 構建器來向您展示它是如何完成的。

現在,首先添加一個新頁面或打開您想要放置您的推薦的頁面。在該新頁面中,我們需要一個帶有全角行的標準部分。 向該行添加一個常規文本模塊。 在該文本模塊中,在“內容”選項卡的子類別文本中鍵入以下短代碼 [dup]。 此短代碼將使表單出現在網站上。

如果您預覽它,您的表單應該是這樣的:

分配不同的類別

將推薦信添加到列表後,您可以將它們放在不同的類別中。 只需轉到 Automatic Divi Testimonials 插件中的“類別”部分。 在這裡,您可以創建新類別,使幕後的一切更有條理。 例如,您可以為伴娘和伴郎創建一個單獨的類別。

在您的婚禮網站上展示推薦信

使用自動推薦模塊

乍一看,自動推薦模塊看起來與列表中的每個其他模塊相同。 創建一個新部分,添加一個全角行並將自動推薦模塊放入其中。 如果您已經收集了推薦信,這些推薦信將自動顯示在您的網站上。

當然,您可以相應地調整樣式。 在此示例中,我們將使您的推薦看起來如下圖所示。 這種風格將符合這些迷你劇前三部的風格。

打開自動 Divi 推薦模塊的設置,轉到“內容”選項卡的“背景”子類別,然後選擇要展示的推薦數量。 在同一個選項卡中,選擇“Standard Divi 4 Column”推薦版式。

繼續,轉到“高級設計設置”選項卡,並將“間距”子類別中的“報價圖標顏色”更改為“#9b857b”。

接下來,轉到 Advanced 選項卡並將以下代碼添加到 Custom CSS 選項卡中的 Main Element:

border-radius: 25px;
background: -webkit-linear-gradient(-90deg, #fffaf6 , #fae4de );
background: -o-linear-gradient(-90deg, #fffaf6 , #fae4de );
background: -moz-linear-gradient((-90deg, #fffaf6 , #fae4de );
background: linear-gradient((-90deg, #fffaf6 , #fae4de );

你已經完成了。 推薦信現在將具有與您的婚禮網站上的其他頁面相匹配的漸變背景顏色。

下一個

在本迷你係列的最後一部分中,我們將了解如何為您的婚禮網站創建時間表,您可以在其中展示婚禮日程。 如果您對本教程有任何疑問,或者您對以後的教程有任何要求; 請確保您在此博文的評論部分發表評論,以便我們回复您!

請務必訂閱我們的電子郵件通訊和 YouTube 頻道,這樣您就不會錯過重大公告、有用提示或 Divi 免費贈品!