如何使用 Divi 和 GiveWP 創建一個捐贈星期二登錄頁面

如果您還沒有聽說過，我們正準備在 Elegant Themes 開始大規模的黑色星期五和網絡星期一活動。 但是每年的這個時候還會發生另一件很酷的事情。 它被稱為“捐贈星期二”（今年是 11 月 28 日），這是世界非營利組織的一項努力，旨在提醒每個人，雖然他們已經拿出錢包進行個人購物，但他們可能想考慮向那些在也需要。 多麼酷的主意！ 由於我們致力於為我們的社區賦權，我們認為幫助那些使用 Divi（或 Extra）並為非營利組織工作的人製作最好的周二捐贈登陸頁面是個好主意能夠。

這是我們今天將要創建的內容的快速瀏覽。

最終結果預覽

在今天的帖子中，我們將創建一個漂亮的 Giving 星期二登陸頁面，並配有一個視覺上令人驚嘆的（當然也是功能性的）捐贈表格。

安裝 GiveWP 插件並創建新表單

我們將在本教程中使用的捐贈表格由 GiveWP 插件生成。 要安裝它，請在您的 WordPress Admin 中導航到Plugins > Add New 。 在那裡，使用搜索功能找到 Give 插件。 單擊“立即安裝”按鈕，然後將其激活。

接下來，轉到Donations > Add Form 。 輸入表單標題。 我選擇了“支持當地農民和可持續農業”。

接下來，您會注意到捐贈表格選項。 讓我們逐個瀏覽它們。

在名為 Donation Options 的第一個選項卡中，在頂部配置以下設置。

捐贈方式：多級捐贈

捐贈展示：按鈕

自定義金額：已啟用

在捐贈級別部分，設置以下捐贈級別：$1、$5、$10、$25、$50、$100。 請務必將 5.00 美元的捐贈級別設置為新的默認值。

現在轉到“表單顯示”選項卡。 您在這裡唯一需要做的就是將“顯示選項”設置更改為“模態”。

在捐贈目標選項卡中，首先啟用捐贈目標選項。 完成後，設置目標金額。 我已將我的設置為 1,000 美元。 我還將目標格式設置為百分比。 這將使表單查看者知道我們實現的目標的百分比，而不是我們籌集的實際金額。 最後，我稍微更改了進度條顏色，以匹配我網站其餘部分使用的相同綠色 (#07c907)。

最後，我們需要添加一些表單內容。 在表單內容選項卡中，啟用顯示內容。 然後，向內容區域添加一些文本。

就本教程而言，這些都是我們需要配置的 Give 表單設置。 單擊“發布”按鈕並註意稍後您將需要此捐贈表格的短代碼這一事實。

真實地設置此表單時，您還需要轉到“捐贈”>“設置”並配置諸如支付網關、電子郵件等內容。

準備您的圖像資產

我們還需要為我們的表單部分自定義背景圖像。 這當然是可選的，它不會影響表單的工作方式。 但它看起來很酷，並為我們的農貿市場示例增添了不錯的設計搭配。

為了創建這個圖像，我使用了 Photoshop，但你也可以使用一個名為 Gimp 的免費軟件。 它是一個開源工具，具有許多相同的功能。

這是創建它的方法。

首先，找到一張包含與您的非營利組織相關的元素的圖片。 由於我使用的示例是針對農貿市場的，因此我決定使用蔬菜。 我在庫存圖片網站上搜索了“孤立的蔬菜”。 通常，庫存圖片網站上的“隔離”一詞是指白色背景上的項目。 這可以通過刪除背景輕鬆隔離它們。 這正是我所做的。

這是我找到的圖像。

然後我在photoshop中打開了那個圖像。

因為初始圖層默認是鎖定的，通過右鍵單擊它並選擇“複製圖層”來複製它。 然後，通過單擊旁邊的眼睛圖標隱藏第一層。

接下來，使用魔術棒工具選擇蔬菜元素周圍和內部的所有空白區域。 按退格鍵刪除它。

接下來，在頂部菜單中導航至圖像 > 畫布大小並將畫布大小調整為 1920×1080。 當您這樣做時，與您的新的、較小的畫布相比，您的元素可能會非常大。

在鍵盤上按 command+T 或轉到Edit > Transform > Scale 。 調整孤立元素層的大小以適應新的畫布大小。

這就是我們現在對這張圖片的了解。 只需確保您已經保存了這個新的 Photoshop 文件。 一旦我們有了新的捐贈表格作為尺寸參考，我們將繼續往下看。

在 Divi 中創建設計

如果您還沒有這樣做，您需要下載並安裝我們全新的（免費）農貿市場佈局包。 按照該帖子中的說明安裝佈局包。 安裝後，請按照此博客文章中的說明為您的網站設置下一階段的自定義，我們將在此處介紹。

準備好後，導航到您的捐贈頁面並使用頁面頂部的按鈕啟用可視化構建器。 我將在頁面​​上逐節帶您進行自定義。

由於我們正在為“捐贈星期二”活動準備此頁面，因此我們可能應該在頂部提及這一點。 因此，將鼠標懸停在您的英雄部分並通過單擊灰色模塊控件中的齒輪圖標打開模塊設置。

然後，仍然在“內容”選項卡中，向下滾動並打開鏈接設置。 在字段標題按鈕 #1 URL 中放置文本“#donate”。 這將用作我們將在下面創建的表單的錨鏈接。

最後，導航到“設計”選項卡並打開“副標題文本”設置。 將副標題字體粗細設置為粗體。

第一部分現已完成。 向下滾動到第三部分（帶有大引號的部分），然後單擊藍色部分控件中的齒輪圖標。 將背景顏色設置為#F6F6F6。

接下來，打開報價文本模塊的模塊設置。 將其背景也更改為#F6F6F6。

此部分現在也已完成。 移動到它正下方的第四部分。 這是我們的捐贈表格部分。

由於此部分存在於佈局包中，因此它更像是一個“承諾”部分，人們可以在其中使用聯繫表向您發送他們打算捐贈多少的承諾。 但是我們將把它變成一個真正的捐贈表格，我們可以直接接受錢。

讓我們從部分設置開始並開始工作。首先，我們需要更改背景顏色。 將其設置為與上述部分相同的 #F6F6F6。

然後，在“設計”選項卡部分中，打開“間距”選項。 添加以下自定義填充：

頂部：250px

右：40px

底部：250px

左：40px

最後，仍然在部分設置中，導航到高級選項卡並打開 CSS ID 和類控件。 在 CSS ID 下寫上“捐贈”這個詞。

保存您的新設置。

我們現在需要擺脫我們的承諾表格。 它由兩個文本模塊和一個聯繫表單模塊組成。 繼續並刪除它們。 在它們的位置添加一個文本模塊。

在新的測試模塊中，放置我們之前創建的 Give 捐贈表單的簡碼。 將背景設置為純白色 (#ffffff)。

現在，導航到“設計”選項卡。 一個鮮為人知的秘密是，可以使用文本模塊的設計設置在一定程度上自定義由第三方短代碼生成的元素。

在文本選項下，配置以下設置：

文字文字大小：18px

文本行高：1.8em

在 H2 的標題文本選項下，配置以下設置：

標題 2 文字大小：36px

標題 2 行高：1.5em

在間距選項下，配置以下設置：

自定義填充：50xp（適用於所有領域）

在 Box Shadow 選項下，選擇頂行（最右側）的最後一個選項。 然後配置這個選項：

框陰影擴散強度：-2px

最後，在動畫選項下，配置以下設置：

動畫風格：彈跳

動畫方向：向上

動畫持續時間：800ms

動畫延遲：400ms

動畫開始不透明度：100%

配置完所有這些設計設置後，請保存它們。 您的捐贈表格現在應如下所示。

當然，這是一種完全可以接受的形式。 但在我看來，這有點無聊。 我想做兩件事來增加它的趣味性。 首先，我們將匹配 Donate Now 按鈕樣式以匹配整個網站的其他 Donate 按鈕。

通過轉到Divi > Divi Library > General導航到您的主題選項向下滾動到自定義 CSS 框並將跟隨按鈕樣式粘貼到那裡：

/*Give Plugin Styles*/

.give-btn.give-btn-modal {
    background: #07C907;
    border: none;
    border-radius: 0px;
    color: #fff;
    padding: 20px;
    cursor: pointer;
    line-height: 1.2em;
    font-size: 18px;
    font-weight: bold;
}

#give-purchase-button.give-submit.give-btn {
    background: #07C907;
    border: none;
    border-radius: 0px;
    color: #fff;
    padding: 20px;
    cursor: pointer;
    line-height: 1.2em;
    font-size: 18px;
    font-weight: bold;
}

保存您的更改並返回到您的捐贈頁面。 刷新它並查看您的表單。 它現在應該是這樣的。

現在我們正在到達某個地方！ 讓我們添加最後的潤色。 我們之前開始創建的部分背景圖像。

要完成它，請將瀏覽器窗口的大小調整為 1920×1120。 您可以使用類似 whatsmybrowsersize.com 的網站。

然後，將您的捐贈頁面截圖，並以我們的新表格為中心。 它應該是這樣的。

在 Photoshop 中打開這個新屏幕截圖以及我們之前創建的 Photoshop 文件。

使用矩形選框工具選擇您的表單。 然後，轉到“選擇”>“反向”以選擇除表單之外的所有內容。 刪除您的新選擇。 你現在應該有一個看起來像這樣的畫布。

您現在擁有一個大小正確的“表單模型”，您可以將其用作背景圖像的參考。 打開兩個 photoshop 文件後，將包含孤立表單的 photoshop 圖層拖到背景圖像文件中。

在圖層面板中，將表單圖層的不透明度調整為 50%。 然後，在稍後仍選中表單的情況下，單擊鎖定圖標並將其鎖定。 它現在應該是這樣的。

您現在可以在圖層面板中選擇蔬菜圖層。 使用套索工具選擇單個元素，然後刪除它們或重新排列它們，直到獲得您喜歡的配置。 我的最終配置是這樣的。

有了自己的最終配置後，您將轉到文件 > 導出 > 導出為並選擇 PNG 以保持透明背景。

現在我們可以將該圖像添加到我們的捐贈頁面的捐贈表格部分，回到我們的 Divi 網站。

打開部分設置。 在背景下保留我們之前設置的顏色並選擇圖像選項。 在此處添加您的新背景圖片。 然後配置以下設置：

背景圖片尺寸：實際尺寸

背景圖片位置：中心

保存這些設置。 您的表單部分現在應該是完整的。

要完全完成您的設計（以匹配我們從文章開頭的整頁預覽），只需更改其餘頁面部分的背景顏色以匹配屏幕截圖中的背景顏色。 您將使用灰色 (#F6F6F6) 或白色 (#ffffff)。

眾籌快樂！

有了 Divi 和像 Give 一樣強大的插件，我們相信你在周二的捐贈努力一定會大受歡迎。 感謝您的關注。 如果您仍然需要本教程中涵蓋的任何內容的幫助，我將在今天下午 3 點在我們的 Facebook 頁面和 YouTube 頻道上進行直播，在那裡我將一次性展示整個過程。 隨著我們的進展，我也會回答問題。 希望在那裡見到你！