如何使用 Divi 创建婚礼公告主页

这篇文章是我们迷你系列《如何使用 Divi 创建优雅的婚礼网站》中的第 1 部分。 在本系列中，我们将指导您完成为自己或 Divi 客户创建婚礼网站的最重要部分。

设置婚礼公告页面是让您的客人知道您要结婚的一种创造性方式。 通过向他们提供您的网站 URL，他们将保持联系。 他们还可以随时在线查看婚礼细节。

让我们来看看我们将帮助您逐步构建的主页布局：

创建您的导航菜单

我们将向您展示如何为您的婚礼网站创建公告页面、图库页面和礼品列表页面。 第一篇文章专门用于制作公告页面。 但在我们去那里之前，我们希望确保客人可以顺利通过您的网站。

这就是为什么您必须首先制作一个适当而优雅的导航菜单。

首先转到Divi > 主题选项 > 并上传您想在整个网站中使用的徽标。

单击“保存更改”并转到 WordPress 网站的页面。 添加一个新页面，您将在其中创建公告页面。 对图库页面和礼品列表页面执行相同的操作，我们将在接下来的帖子中向您展示如何创建。

让我们暂时将内容留空，然后转到您网站的主题定制器来修改导航菜单。 首先将您网站的页面添加到您的菜单中，方法是转到菜单 > 添加菜单 > 将页面添加到您的菜单中。 此菜单应该是您网站的主菜单。

接下来，转到标题和导航 > 主菜单栏并进行以下更改：

• 菜单高度：66
• 根据图片尺寸调整 Logo Max Height
• 文字大小：16
• 字母间距：2
• 字体: Raleway Light
• 字体样式：粗体
• 文字颜色：#9b7461
• 背景颜色：rgba(155,116,97,0.13)

现在，返回页眉和导航并将页眉样式更改为页眉格式中的“居中”。

保存并发布您所做的更改。

在公告页面上开始

该网站有四个部分，每个部分都为网站贡献其价值——使您的婚礼公告完整。 我们将详细解释每个部分，并向您展示如何创建与上述布局相同的设计。

英雄部分（含倒计时）

设计的第一部分是标题。 我们决定通过在其中放置一个倒计时模块，让客人立即感受到与网站和婚礼的互动。 在 Divi 构建器中，标题部分如下所示：

我们将在网站的这一部分以全角模式使用一个标准部分，其中包含一整行。 在行部分，您必须添加三个模块； 两个文本模块和一个倒计时模块。 倒计时模块位于两个文本模块的中间。

开始使用第一个文本模块

首先向该行添加一个文本模块。 编写您要使用的文本，将文本方向更改为“居中”，并将以下更改应用于高级设计设置选项卡：

• 文字字体大小：100px（桌面）、80px（平板电脑）、66px（手机）
• 文字字体：橘色
• 文字颜色：#9b857b

在同一个选项卡中，向下滚动并通过在顶部添加“10%”和在底部添加“5%”来更改文本模块的边距。

单击保存并退出。

计数模块（桌面）

在您刚刚创建的文本模块下方添加一个倒计时模块。 在“常规设置”选项卡中，添加婚礼的日期和时间并将背景颜色更改为“#fae4de”。 我们将仅在台式机上使用此倒计时，请继续为平板电脑和手机禁用它。

转到高级设计设置并进行以下更改：

• 数字字体：Tangerine
• 数字字体大小：74px
• 数字字体颜色：#9b857b
• 数字行高：70px
• 标签字体：Raleway Light
• 标签字体大小：14px
• 标签文字颜色：#9b857b
• 标签线高：25px

在同一个选项卡中，滚动到底部并将顶部自定义填充调整为“10%”，将底部自定义填充调整为“10%”。

接下来，转到第三个自定义 CSS 选项卡并将以下代码添加到主元素：

max-width: 50%;
margin-left: auto;
margin-right: auto;
box-shadow: 0px 12px 50px #a9a9a9;

您的倒计时现在看起来与我们上面显示的布局图像中的倒计时完全一样。

倒计时模块（平板和手机）

现在继续，克隆您之前制作的倒计时并在台式机（而不是平板电脑和手机）上禁用它。 接下来，对模块进行以下更改：

• 数字字体大小：72px（平板电脑和手机）
• 数字行高：70px
• 标签字体大小：14px（平板电脑），12px（手机）

并将 CSS 选项卡的 Main Element 中的代码更改为：

margin-left: auto;
margin-right: auto;
box-shadow: 0px 12px 50px #a9a9a9;

第二个文本模块

现在，在倒计时模块下，添加另一个文本模块。 在“常规设置”选项卡中，将“文本方向”更改为“居中”。 继续添加新郎和新娘的名字，然后转到“高级设计设置”选项卡。

在高级设计设置中，进行以下更改：

• 文字字体：橘色
• 文字字体大小：50px
• 文字颜色：#9b857b
• 文本行高：1.7em

继续在高级设计设置选项卡中滚动到自定义边距并将“10%”添加到顶部边距。

分隔线

这个英雄部分的最后一部分是分隔符。 添加分隔线并将“常规”选项卡中的颜色更改为“#9b857b”。 确保分隔线也“可见”。

接下来，转到“设计”选项卡并使分隔线样式为“实体”，分隔线位置为“顶部”，将分隔线权重更改为“1px”并在移动设备上隐藏。

移至 CSS 选项卡并将以下代码添加到主元素：

margin-left: auto;
margin-right: auto;
width: 30%;

单击保存并退出。 你完成了网站的第一部分，它应该是这样的：

我们现在可以转到此布局的第二部分，您可以开始向客人讲述您的故事。

讲故事 公告：第二部分

第二部分有两个对称的行，它们构成了婚礼主页的一部分。 这部分的宽度略小，可以在您的网站上创建更多视角。

该部分的第一行

首先制作一个标准部分，将背景颜色更改为“#fffaf6”并将“5%”添加到底部填充。 接下来，向此部分添加两列行。

接下来，打开行设置。 在常规设置中，选择“是”使用自定义宽度，将单位更改为百分比并填写“90%”。 在同一选项卡中向下滚动，激活装订线宽度并隐藏手机和平板电脑。

然后，转到“高级设计设置”选项卡，均衡列高并添加“#9b857b”作为第一列的背景色。 在同一个选项卡中，将第 1 列的填充更改为顶部“5%”、右侧“10%”、底部“5%”和左侧“10%”。

对于第二列，我们不需要设置背景颜色，而是上传背景图片。

文本模块

现在，在行的第一列中添加一个文本模块。 在“常规设置”选项卡中，将文本方向设置为“居中”，然后在文本框中键入要共享的文本。 然后转到高级设计设置选项卡。

在高级设计设置选项卡中，进行以下更改：

• 最大宽度：500px（仅适用于桌面）
• 文字字体：橘色
• 文字字体大小：44
• 文字颜色：#fffaf6

并在底部填充中添加 5%。

按保存并退出并添加另一个文本模块。 使文本方向“合理”。 继续对设计设置中的文本模块进行以下更改：

• 最大宽度：500px
• 文字字体大小：14px
• 文字字体：Raleway Light
• 字体样式：粗体
• 文字字体颜色：#fffaf6
• 文本行高：1.7em

按保存并退出。

克隆上一行

现在，克隆您刚刚创建的行。 克隆的行将自动放置在您刚刚创建的行下方。 但在这种情况下，我们需要模块位于相反的一侧。 将两个文本模块放在第二列而不是第一列。

然后，打开行设置并将背景图像添加到第一列。 删除我们在第一列填充中所做的所有填充设置，并将它们放在第二列填充中。

按保存并退出，你就可以开始了。

手机和平板电脑行

创建另一个两列行并隐藏桌面。 使行全宽并将装订线宽度更改为“3”。

接下来，转到“设计”选项卡并上传两列的背景图像，并对两列的自定义填充进行以下更改：

• 前5％
• 正确：10%
• 底部：5%
• 左：10%

添加第二部分后，您的布局现在应该是这样的：

伴郎、伴娘、新娘和伴郎

为什么不把你生命中最重要的人放在你的婚礼网站上？ 赠送谁将成为伴郎、伴娘、伴郎和伴郎，可以为您的网站带来一点额外的提升。

要将这部分添加到您的站点，请首先向您的页面添加一个新的标准部分。 在该新部分中，您必须创建具有不同列和模块的三行。

现在，一旦您创建了作为标准部分的部分，请为其指定以下背景颜色：“#fae4de”。 您无需更改该部分设置中的任何其他内容，因此您可以按保存并退出。

创建文本模块

接下来，创建您的第一个全角行。 您唯一需要放入的是文本模块。 打开文本模块，填写文本框并在文本方向字段中选择“居中”。

然后转到高级设计设置，将文本字体设置为“橘色”，将文本字体大小设置为“100px”（桌面和平板电脑）和“68%”（手机），将文本字体颜色设置为“#9b857b”。 向下滚动相同的选项卡并将边距更改为“10%”顶部和“5%”底部。

单击保存并退出。 您的第一个模块和行现已完成。

添加另一行，在本例中为两列，并在顶部和底部边距上添加 5%。 接下来，在行的第一列中添加一个人员模块。

图像和人物模块

继续，打开人员模块的设置。 上传一张图片，在字段中输入社交媒体渠道的 URL，并在文本框中写下一些关于它们的信息。 如果您不确定您的图像应该具有什么尺寸，请查看此博客文章。

接下来，转到高级设计设置并进行以下调整：

• 标题字体：Raleway Light
• 标题字体样式：粗体
• 标题字体大小：14
• 标题文本颜色：#9b857b
• 标题行高度：1em
• 主体字体：Raleway Light
• 正文字体样式：粗体
• 正文字体大小：14
• 正文颜色：#9b857b
• 车身线高：1.7em

打开人员模块的设置并转到 CSS 选项卡。 在 Member Image 字段中，添加以下代码：

-webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
margin-left: 5%;
margin-right: 5%;

现在继续克隆 Image 和 Person 模块并将它们放在正确的列中。

继续添加一个包含四列的新行并再次克隆 Image 和 Person 模块（四次）并将它们放入每一列。 我们第一次使用的代码和设置将适用于所有这些。

你的布局现在应该是这样的：

何时何地

这是您婚礼主页的最后一部分，您将在此向观众介绍婚礼的地点和时间。 对于本节，我们需要一行 3 列（1/2、1/4、1/4），背景颜色如下：“#fffaf6”。

添加地图

在本节的第一列中，添加一个 Map 模块。 为了能够使用地图功能，您必须输入一个 Google API 密钥。 如果您没有 API 密钥，请在此处阅读如何制作一个。 输入您的婚礼地址，让模块找到位置。 要在您的地图上创建图钉，请添加新图钉并再次放置该位置，图钉将显示在地图上。

在其他专栏中，我们将使用文本模块和简介。 添加文本模块并将常规设置中的文本方向设置为“居中”。 接下来，转到高级设计设置并进行以下更改：

• 文字字体：橘色
• 文字字体大小：50px
• 文字颜色：#9b857b
• 文本行高：1.7em

此文本模块的设置适用于两列中的文本模块。

模糊模块

在文本模块下，添加一个模糊模块。 选择位置图标，将其颜色更改为“#f9c8b8”，在文本框中添加位置并将文本方向更改为“中心”。 然后，转到高级设计设置并进行以下更改：

• 图标字体大小：42px
• 主体字体：Raleway Light
• 字体样式：粗体
• 正文字体大小：14
• 正文颜色：#9b857b
• 车身线高：1em

在下一列中，执行完全相同的操作。 仅将模糊图标​​更改为时钟并在文本框中添加“何时”详细信息。

就是这样。 您的布局现在应该与本教程中的布局一样平滑：

接下来

在这个迷你系列的第二部分中，我们将看到您如何创建一个专用于在婚礼后与客人分享照片的图库页面。 如果您对本教程有任何意见，或者您对以后的教程有任何要求； 请确保您在此博文的评论部分发表评论，以便我们回复您！

请务必订阅我们的电子邮件通讯和 YouTube 频道，这样您就不会错过重大公告、有用提示或 Divi 免费赠品！