如何使用 Divi 創建虛擬峰會登陸頁面
已發表: 2020-07-02推廣虛擬活動涉及多種推廣策略。 創建邀請登錄頁面就是其中之一。 為您的虛擬峰會創建登錄頁面是讓您的觀眾好奇的完美方式。 通過正確的部分組合，您可以邀請、通知和收集註冊的與會者。 今天我們將向您展示如何創建一個包含五個部分的虛擬峰會登陸頁面。 該設計包括雙色調圖像和滾動部分分隔符。 如果您想跳過分步教程，我們還提供了一個可下載的 JSON 文件。 在該文件夾中，您還可以找到 PNG 和 AI 格式的頁眉和頁腳圖形。
讓我們開始吧！
預覽
讓我們來看看不同屏幕尺寸下的著陸頁設計。
桌面
藥片
移動的
免費下載虛擬峰會登陸頁面
要了解免費的虛擬峰會登陸頁面佈局，您首先需要使用下面的按鈕進行下載。 要訪問下載，您需要使用下面的表格訂閱我們的 Divi Daily 電子郵件列表。 作為新訂戶，您每週一將收到更多的 Divi 善良和免費的 Divi 佈局包！ 如果您已經在列表中，只需在下面輸入您的電子郵件地址，然後單擊下載。 您不會被“重新訂閱”或收到額外的電子郵件。
免費下載
加入 Divi 時事通訊，我們將通過電子郵件向您發送一份最終的 Divi 登陸頁面佈局包，以及大量其他令人驚嘆的免費 Divi 資源、提示和技巧。 跟隨，您將很快成為 Divi 大師。 如果您已經訂閱，只需在下面輸入您的電子郵件地址，然後單擊下載即可訪問佈局包。
您已成功訂閱。 請檢查您的電子郵件地址以確認您的訂閱並獲得免費的每週 Divi 佈局包！
虛擬峰會登陸頁面部分
為了讓您的著陸頁發揮作用，它需要一組特定的部分。 除了吸引觀眾的眼球外，著陸頁還必須進行轉換。 例如，虛擬峰會登陸頁面需要包含相關信息和號召性用語。 所有部分都必須無縫地從一個部分流向另一個部分，以便觀眾感受到行動和註冊的靈感。
我們在虛擬峰會登陸頁面中包含了以下部分：
標題
標題部分包含重要信息，例如峰會名稱和活動日期。 這是最重要的信息，因此它位於最頂部。 沒有號召性用語和輕鬆導航到頁面的其餘部分，沒有標題是完整的。
在我們的設計中，我們包含了兩個帶有錨鏈接的按鈕，可以導航到演講者和日程安排部分。 最重要的是，我們包含了一個帶有註冊部分鏈接的按鈕。 在整個頁面中，所有“註冊”按鈕看起來都一樣，以便在設計中具有視覺統一性。
信息
第二部分是信息部分，鼓勵觀眾考慮參加虛擬峰會。 在設計中，我們添加了四個簡介和一個可以輕鬆轉換為視頻的圖像。 簡介列出了參加峰會的四個理由，圖像（或視頻）是支持該決定的視覺效果。
演講者
在下一部分中，您將找到一組 6 人模塊。 您可以在這裡介紹將參加峰會的演講者。 每個模塊包括以下元素：
- 圖片
- 姓名
- 位置
- 描述
- 社交媒體鏈接
確保輸入每個揚聲器的所有相關信息。 此外，嘗試在正文中使用相同數量的行，以保持設計看起來清晰。 如您所見，我們在所有揚聲器的照片上使用了雙色調效果，使設計具有有趣的外觀和感覺。 下面有一個關於如何在 Photoshop 中實現這種效果的分步教程。
如果您有六個以上的揚聲器，只需將行或克隆模塊複製到具有更多或更少列的行中。
日程安排
接下來是日程部分。 在這方面，我們優雅地分享了峰會的日程安排，並確保它是結構性的。 為了保持文本設計的風格，請確保更改內容而不是標題級別。 盡量保持內容的長度大致相同，以便設計保持整潔。
行按天組織，帶有標題圖像和一組簡介。 在最後一欄的底部，您可以找到一個號召性用語按鈕，供觀眾註冊。
登記
最後但並非最不重要的是註冊部分。 我們加入了倒數計時器以增加緊迫感。 聯繫表格應直接鏈接到您的 RSVP 列表，以便自動註冊每個受邀者。
在整個虛擬峰會登錄頁面設計中，您會發現三個按鈕導航到此部分以優化潛在客戶生成。
使用 Photoshop 創建雙色調漸變映射
在 Adobe Photoshop 中打開圖像
如果您想在我們的設計中模仿雙色調圖像，請按照以下步驟操作。 首先，在Photoshop中打開一張圖片。
打開調整併選擇漸變映射
打開調整工具欄並單擊漸變圖。 在屬性選項卡中，雙擊漸變欄以打開設置彈出窗口。
調整漸變顏色
在漸變設置中，雙擊每種顏色以自定義設置。
為達到我們設計的效果，調整漸變如下：
- 漸變類型：固體
- 平滑度：100%
- 不透明度停止 #1：100%
- 色標 #2
- 深紫色#202060
- 位置：19%
- 中點：
- 不透明度中點：85%
- 顏色中點：50%
- 不透明度停止 #2：55%
- 色標#
- 紫羅蘭色#f895f8
- 位置：100%
另存為自定義漸變貼圖
為您的漸變添加一個名稱，然後單擊“新建”以保存它。 然後它將存儲在您的漸變庫中。 以 700 像素高保存網絡圖像。 根據需要使用盡可能多的圖像重複該過程。 應用漸變貼圖後，選擇您保存的漸變。
1. 創建標題部分
添加新部分
背景
讓我們開始重新創建虛擬峰會登錄頁面。 創建一個新頁面並使用 Divi Builder 打開它。 在添加行之前，將背景圖像和漸變添加到新部分。 您可以在上面的可下載文件夾中找到背景圖形。
- 背景漸變
- 顏色 1：#1f4068
- 顏色 2：#202040
- 背景圖像：標題圖形
漿紗
接下來調整最小高度。
- 最小高度：1050px
間距
間距也一樣。
- 頂部和底部填充
- 桌子和手機：90px
能見度
最後，在高級選項卡中調整可見性設置。
- 水平和垂直溢出：隱藏
添加新行
列結構
添加一個包含三列的行。 選擇 1/2、1/4、1/4 列結構。
漿紗
調整行的大小如下：
- 寬度：90%
- 最大寬度：1800px
- 對齊方式：居中
間距
\也添加一些上邊距。
- 上邊距：200px
第 2、3 列設置
間距
調整第 2 列和第 3 列的設置。首先是間距
- 上邊距：30px
能見度
然後，隱藏手機上的列。
- 禁用：電話
將第一個文本模塊添加到第 1 列
文本
在第 1 列中添加第一個文本模塊。插入標題作為 H1 內容。
- 正文：H1 內容
標題文字
在設計選項卡中，接下來設置標題文本的樣式。
- 標題級別：H1
- 字體：阿拉塔
- 重量：粗體
- 對齊方式：居中
- 顏色：灰白色#eaeaea
- 尺寸
- 桌面：85px
- 平板電腦：70px
- 電話：44px
- 字母間距：2px
- 線高：1.1em
- 文字陰影：第一個選項
- 陰影顏色：rgba(o,0,0,0.26)
將第二個文本模塊添加到第 1 列
文本
添加第二個文本模塊。 插入日期作為 H2 內容。
- 正文：H2 內容，2020 年 7 月 15 日 + 16 日
標題文字
接下來設置標題文本的樣式。
- 標題級別：H2
- 字體：阿拉塔
- 重量：常規
- 對齊方式：居中
- 顏色: 紫紅色#b030b0
- 尺寸
- 台式機和平板電腦：60px
- 電話：45 像素
- 線高：1.3em
間距
也增加一些間距。
- 底部填充：20px
將按鈕模塊添加到第 1 列
文本
為號召性用語添加按鈕模塊。
- 按鈕：註冊
關聯
添加錨鏈接。
- 鏈接地址：#註冊
結盟
移至設計選項卡並設置對齊方式。
- 按鈕對齊：居中
按鈕自定義樣式
樣式按鈕。
- 字體大小
- 桌面：30px
- 平板電腦：25 像素
- 電話：20px
- 文字顏色：白色#ffffff
- 背景：紫色 #602080
- 邊框半徑：35px
- 字母間距：1px
- 字體：阿拉塔
間距
最後，調整間距。
- 最高利潤率
- 平板電腦和手機：15px
- 頂部填充：2px
將按鈕模塊添加到第 2 列
文本
移至第 2 列並添加一個按鈕模塊。 添加您選擇的副本。
- 按鈕：揚聲器
關聯
接下來，添加一個錨鏈接。
- 鏈接網址：#Speakers
結盟
在設計選項卡中，設置對齊方式。
- 按鈕對齊
- 桌面：右
- 平板電腦和手機：中心
按鈕自定義樣式
調整自定義按鈕樣式。
- 文字大小：24px
- 文字顏色：白色#ffffff
- 背景：透明
- 字母間距：1px
- 按鈕字體：Alata
- 邊框半徑：0px
盒子陰影
最後，添加一個框陰影。
- 框陰影：第四個選項
- 水平位置：0px
- 垂直位置：5 px
- 陰影顏色：紫紅色：#b030b0
將按鈕模塊克隆到第 3 列
克隆按鈕
克隆第 2 列中的按鈕並將復制的模塊放在第 3 列中。
調整按鈕模塊
文本
更改克隆按鈕中的文本。
- 按鈕：時間表
關聯
也更改錨鏈接。
- 鏈接網址：#Schedule
結盟
不要忘記更改對齊方式。
- 按鈕對齊
- 桌面左側
添加新行
列結構
添加具有兩個相等列的新行。
漿紗
首先調整天溝寬度。
- 自定義天溝寬度：2
間距
接下來添加間距。
- 最高利潤率
- 電話：-35px
能見度
然後調整行的可見性。
- 禁用：平板電腦和台式機
克隆按鈕模塊並在第 1 列中放置重複項
克隆按鈕
克隆上一行第 2 列中的按鈕模塊，並將復制的模塊放置在新行的第 1 列中。
調整按鈕模塊
按鈕自定義樣式
調整新按鈕中的文本。
- 文字大小：20px
盒子陰影
也修改框陰影。
- 垂直位置：4px
將克隆的按鈕模塊添加到第 2 列
克隆按鈕
複製前一行第 3 列的按鈕模塊。 將其粘貼到該行的第 2 列。
調整按鈕模塊
文本
調整克隆按鈕中的文本內容。
- 文字：時間表
2. 創建信息部分
添加新部分
背景
要創建信息部分，請先添加一個新部分並設置背景樣式。
- 背景漸變
- 顏色 1：#202040
- 顏色 2：#202060
間距
也添加一些填充。
- 頂部填充：170px
- 底部填充：5px
能見度
最後，在高級選項卡中調整可見性設置。
- 水平和垂直溢出：隱藏
添加新行
列結構
添加一個包含一列的新行。 我們將其稱為標題行。
漿紗
接下來設置尺寸。
- 寬度：80%
- 最大寬度：1800px
添加文本模塊
文本
添加文本模塊。
- 正文：H2 內容 – 為什麼要參加數字營銷虛擬峰會？
標題文字
在設計選項卡中，設置標題文本的樣式。
- 標題級別：H2
- 字體：阿拉塔
- 文字顏色：白色#ffffff
- 尺寸
- 桌面：55px
- 平板電腦：45px
- 電話：40px
- 字母間距：2px
- 線高：1.1 em
添加分頻器模塊
線
現在添加一個分隔模塊並在設計選項卡中設置線條的樣式。
- 線條顏色：紫紅色#b030b0
漿紗
接下來調整大小。
- 分隔線重量：50px
- 最大高度：50px
滾動效果
在高級選項卡中，添加水平滾動效果。
- 啟用水平運動
- 桌面
- 起始偏移：-6
- 中間偏移：50% / 0
- 結束偏移：6
- 平板電腦和手機
- 說明偏移：-4
- 中間偏移：50% /0
- 結束偏移：4
添加新行
列結構
現在添加一個包含三列的新行。 選擇 1/2、1/4、1/4 列結構。
漿紗
在添加模塊之前，調整行大小。
- 寬度：80%
- 最大寬度：1800px
第 1 列設置
間距
另外，調整第一列的間距。
- 頂部填充：20px
將圖像模塊添加到第 1 列
圖片
現在將圖像模塊添加到第 1 列。使用具有雙色調效果的圖像之一。
- 圖片：具有雙色調效果的照片
邊界
也調整邊框。
- 圓角：15px
將 Blurb 模塊添加到第 2 列
文本
移至第 2 列並添加一個模糊模塊。 插入內容。
- 標題：建立新的聯繫
- 正文：描述性內容
圖片
上傳您可以在可下載文件夾中找到的數字 1 圖像。
- 圖片：#1 的 PNG
圖像和圖標
接下來調整圖像的位置。
- 放置：頂部
- 對齊方式：左
標題文字
標題文本的樣式。
- 標題級別：H4
- 字體：阿拉塔
- 顏色：白色#ffffff
- 尺寸：23px
文章主體
不要忘記設置正文的樣式。
- 字體：Open Sans
- 顏色：白色#ffffff
- 尺寸：14px
- 字母間距：1px
自定義 CSS
最後，使用自定義 CSS 向高級選項卡中的模糊標題添加一些額外的填充。
- 模糊標題：padding-bottom：15px；
padding-bottom: 15px;
克隆 Blurb 模塊並在第 2 列中放置重複項
克隆模糊
複製第 2 列中的第一個簡介。
內容
更新內容。
- 標題：新標題
- 正文：新的描述性文本
圖片
然後，更改數字圖像。 您可以在可下載的文件夾中找到新的。
- 圖片：#2 的 PNG
刪除第 3 列和克隆第 2 列
克隆列
在行設置中，刪除第 3 列並複制第 2 列。 確保將列結構返回到 1/2、1/4、1/4。
調整第 3 列中的模糊 1
內容
更新克隆的簡介中的文本內容。
- 標題：新標題
- 正文：新的描述性文本
圖片
也更改數字圖像。
- 圖片：#3 的 PNG
調整第 3 列中的模糊 2
內容
也修改此簡介的內容。 先說正文。
- 標題：新標題
- 正文：新的描述性文本
圖片
然後，更改數字圖像。
- 圖片：#4 的 PNG
3. 創建演講者部分
添加新部分
背景
轉到揚聲器部分。 添加一個新部分並設置背景樣式。
- 背景漸變
- 顏色 1：#202060
- 顏色 2：#162447
能見度
在高級選項卡中調整可見性設置。
- 水平和垂直溢出：隱藏
克隆標題行並在新部分中放置重複項
重複行
複製上面部分的標題行，並將副本放在克隆部分中。 我們將其稱為標題行 2。
調整文本模塊
文本
然後，在設計選項卡中設置 H3 文本設置的樣式。 還要調整克隆文本模塊中的 CSS ID。 接下來，更改分隔模塊的線條顏色。 現在添加一個新行，其中包含 5 個相同大小的模塊。 調整行的大小如下： 也增加一些間距。 將第一人稱模塊添加到第 1 列。 上傳帶有色彩效果的揚聲器圖像。 我們建議使用 550 x 770 像素的圖像大小。 接下來為圖像添加一些圓角。 然後，設置標題文本的樣式。 也為正文設置樣式。 不要忘記位置文本。 最後，添加一些自定義 CSS 以進行額外填充。 在行設置中，刪除第 2-5 列。 將第 1 列複製四次。 更新所有克隆模塊中的內容。 先說正文。 然後是圖像。 現在我們將創建時間表部分。 添加一個新部分並按如下方式設置背景樣式： 在高級選項卡中調整可見性設置。 從上面的部分克隆標題行並將其粘貼到此部分中。 更改標題內容。 更改克隆文本模塊中的 CSS ID。 還要更改分隔線的顏色。 現在，添加具有三個相同大小的列的新行。 調整行的大小。 也增加一些間距。 將文本模塊添加到第一列。 插入內容。 移至設計選項卡並設置標題文本的樣式。 接下來添加一些間距。 現在添加帶有您選擇的一些內容的號召性用語模塊。 也添加圖像背景。 在設計選項卡中，設置標題文本的樣式。 接下來為正文設置樣式。 也增加一些間距。 然後，設置邊框樣式。 最後，添加自定義 CSS 以獲得額外的樣式。 移至第 2 列並添加文本模塊。 遵循以下內容結構： 在設計選項卡中，設置文本樣式。 然後設置所有標題級別的樣式。 樣式邊框。 將第一個文本模塊複製兩次。 更改克隆文本模塊中的內容。 刪除列中最後一個模塊的邊框。 在行設置中，刪除第 3 列。複製第 2 列。 擦除克隆列中的第三個文本模塊。 更新每個新文本模塊中的內容。 複製標題部分中的“註冊”按鈕並將其粘貼到第 3 列中最後一個文本模塊下方。 將按鈕的對齊方式更改為左對齊。 稍微調整文字大小。 複製計劃部分的第一行。 更改克隆文本模塊中的內容。 調整號召性用語模塊的內容。 也更改背景圖像。 也調整文本模塊中的內容。 最後一部分專門用於註冊。 添加一個新部分並按如下方式設置背景樣式。 您將在上面的下載文件夾中找到頁腳圖形。 也調整部分的間距。 並在高級選項卡中更改可見性設置。 現在添加一個包含一列的新行。 添加一個隱形分隔線作為該部分的錨鏈接。 插入鏈接到所有“註冊”按鈕的 CSS ID。 添加具有兩個相等列的第二行。 調整行的大小設置。 將倒數計時器模塊添加到第一列。 添加事件的內容和日期。 接下來為背景設置樣式。 在設計選項卡中，設置標題文本的樣式。 設置數字文本的樣式。 此外，標籤文本。 然後，調整行的大小。 也添加一些填充。 最後，設置邊框樣式。 將新的聯繫表單模塊添加到第 2 列。刪除消息字段。 輸入每個字段的設置。 在設計選項卡的佈局下，單擊“製作全角”。 對第二個字段執行相同操作。 返回一般聯繫表單設置並添加一些內容。 然後，設置字段的樣式如下： 標題文本的樣式也是如此。 調整按鈕自定義樣式。 不要忘記調整邊界半徑。 最後，添加自定義 CSS 以進行額外填充。 我們完成了！ 讓我們再看看不同屏幕尺寸的著陸頁設計。 你做到了！ 您的虛擬峰會登陸頁面看起來如何？ 將此設計用於您自己的虛擬峰會或網頁設計客戶。 導航針對轉換進行了優化，並提供了恰到好處的信息量。 我們還添加了滾動部分分隔符，以獲得一些額外的視覺效果。 請在留言中讓我們知道你的想法。 您是下載佈局還是按照步驟操作？
標題文字
自定義 CSS
調整分頻器
線
添加新行
列結構
漿紗
間距
將人員模塊添加到第 1 列
文本
圖片
圖片
標題文字
文章主體
位置文本
自定義 CSS
padding-bottom: 10px;
padding-bottom: 20px;
padding-bottom: 20px;
重複第 1 列
克隆列
調整新人物模塊的內容
文本
圖片
4. 創建計劃部分
添加新部分
背景
能見度
克隆標題行 2
重複行
調整文本模塊
文本
自定義 CSS
調整分頻器
線
添加新行
列結構
漿紗
間距
將文本模塊添加到第 1 列
文本
標題文字
間距
將號召性用語添加到第 1 列
文本
背景
標題文字
文章主體
間距
邊界
自定義 CSS
border-radius: 15px;
background-color: #162447;
margin-top: 500px;
padding-bottom: 40px;
padding-bottom: 40px;
background-color: #q62447;
margin-top: 500px;
padding-bottom: 40px;
padding-bottom: 40px;
將文本模塊添加到第 2 列
文本
文本
標題文字
邊界
克隆文本模塊 2 次
克隆文本模塊
調整新的文本模塊
文本
刪除第三個文本模塊的邊框
邊界
刪除第 3 列和克隆第 2 列
克隆列
刪除和調整文本模塊
刪除文本模塊
調整內容
克隆按鈕模塊並在第 3 列中放置重複項
克隆按鈕
調整按鈕模塊
結盟
按鈕自定義樣式
克隆計劃部分的第一行
克隆行
調整第 1 列中的文本模塊
文本
調整號召性用語模塊
文本
背景
調整文本模塊
文本
5. 創建寄存器部分
添加新部分
背景
間距
能見度
添加新行
列結構
添加分頻器模塊
能見度
CSS ID
添加新行
列結構
漿紗
將倒數計時器模塊添加到第 1 列
文本
背景
標題文字
數字文本
標籤文字
漿紗
間距
邊界
將聯繫表單模塊添加到第 2 列
元素
字段佈局
文本
字段
標題文字
按鈕自定義樣式
邊界
自定義 CSS
padding-bottom: 30px;
預覽
桌面
藥片
移動的
這是一個包裝