朔州做网站：如何用Divi创建滚动时尚目录

在朔州做网站这篇文章中，我们将向您展示如何创建一个滚动时尚目录。使用这种方法将有助于您与您的听众联系，就像您会通过给他们一份纸目录。创建一个在线滚动时尚目录可能有助于增加您从目录中获得的结果。例如，通过包括与商店物品的直接链接，购买过程也将得到加强。

结果

我们将向您展示如何一步地创建桌面上的结果看，像在电话和平板电脑上这样：

用Photoshop向图像添加透明形状

我们将向您展示的第一件事是如何使用Photoshop在图像中添加透明部分。Photoshop有一种免费的选择叫做Gimpshop，但在本教程的这一部分中，我们将只使用Photoshop。我们需要两个不同形状的图像：一个用于桌面，另一个用于移动和平板电脑。在这一部分中，我们将简单地向您展示如何向图像中添加透明的形状。之后，你可以自己制作所有你需要的图像。

开放Photoshop

从在您的计算机上打开Photoshop开始。

开放图像

接下来，打开要编辑的第一个图像。该方法对于您将在本教程中使用的所有三个图像都是相同的。所以我们只解释一次。

双击图像创建层

打开要编辑的图像后，双击图像并为其创建一个新层。

添加另一层

继续，在上面添加另一个空层。

选择第一层&多边形拉索工具

选择第一层并开始使用多边形拉索工具。

做一个形状

在激活多边形套索工具的同时，继续在你的图像中创建透明的形状。

使第一层不可见&选择0层时按下删除

一旦您选择了想要变得透明的区域，继续使第一层不可见，再次选择0层，然后按下键盘上的Delete按钮。

选择矩形选择工具&点击图片中的某个地方

完成后，选择矩形Marquee工具并单击图像中的某个位置。

将图像保存为PNG

最后，您需要将映像保存为PNG，并对整个布局中使用的所有四个图像重复相同的过程。

主菜单栏设置

我们要创建的布局所需的主菜单栏设置如下：

· 隐藏Logo图像：启用

· 菜单高度：30

· 文本大小：15

· 字母间距：-1

· 字体：Lato

· 字体样式：粗体和大写

· 文本颜色：#FFFFFF

· 活动链接颜色：#FFFFFF

· 背景颜色：RGBA(255，255，255，0)

· 下拉菜单背景颜色：RGBA(255，255，255，0)

版简介

一旦修改了主菜单栏，就可以继续添加一个新页面，使用DiviBuilder并切换到VisualBuilder。

增加新科

在该页面中，首先添加一个标准部分。

剖面背景色

该颜色的背景需要‘#d6d6d6’。

自定义填充

移至该部分的“设计”选项卡。在间隔子类别中，将“24 px”添加到顶部填充，0 px添加到底部。

增加一列行

一旦完成，您就可以继续向该节添加一个单列行。

上浆

转到“设计”选项卡并修改“大小”子类别：

· 全宽行：是的

· 使用自定义水槽宽度：1

自定义填充

向下滚动并将‘0px’添加到行的顶部填充。

第一文本模块

一旦完成，您可以向行添加一个文本模块。输入要显示的文本后，转到“设计”选项卡，确保以下更改适用于文本子类别：

· 文本字体：旧标准TT

· 字体样式：大写

· 文本字体大小：72(桌面)，41(平板电脑)，29(电话)

· 文本颜色：#000000

· 文字间距：11 px

· 文本行高：1em

· 文本定位：中心

打开间隔子类别，并将‘30 px’添加到顶部和底部填充。

分频器模块

在文本模块的正下方，添加一个分区模块并启用“ShowDivider”选项。

转到“设计”选项卡，选择“#FFFFFF”作为分隔颜色。

接下来，选择“Solid”作为“Divider”样式，选择“top”作为“样式”子类别中的“Divider”位置。

然后，打开“大小”子类别，并应用以下设置：

· 隔板重量：10 px

· 高度：23 px

· 宽度：100%

第二文本模块

在分离器模块的正下方，添加另一个文本模块。在您的字符地图(Windows)或字符调色板(Mac)中选择您想要的任何图标，并将其放在Content选项卡中。对于这个例子，我们使用了以下符号：‘↓’。然后，转到Design选项卡并应用以下设置：

· 文本字体大小：42 px

· 文本颜色：#000000

· 文本定位：中心

桌面时装目录(新科)

现在，添加另一个标准部分。本节将包含两行，它们将在桌面上显示目录的不同部分。

节设置

背景色

使用“#FFFFFF”作为本节的背景色。

自定义填充

然后，转到“设计”选项卡，将“15 px”添加到顶部填充。

第一排

柱结构

对设置进行更改后，添加具有以下列结构的行：

背景色

打开行设置并添加“RGBA(255，255，255，0.14)”作为背景色。

背景图像

在这篇文章的Photoshop部分添加一个图片，并使用‘Hue’作为背景图像的混合。

上浆

最后，对SING子类别进行以下更改：

· 全宽行：是的

· 使用自定义水槽宽度：是

· 排水沟宽度：1

第一文本模块

完成行设置后，将文本模块添加到第二列。对文本子类别使用以下设置：

· 文本字体：苦

· 文本字体大小：63 px

· 文本颜色：#000000

· 文本定位：中心

分频器模块

在朔州做网站第一个文本模块的正下方，添加一个分区模块，并启用‘ShowDivider’选项。

移到“设计”选项卡，使用“#000000”作为分隔颜色。

在样式子类别中，使用“Solid”作为分隔样式，使用“top”作为分区位置。

向下滚动同一选项卡，朔州做网站并使以下设置应用于“大小”子类别：

· 隔板重量：3 px

· 高度：23 px

· 宽度：57%

· 模块对齐：左

最后，添加一个‘30 px’和‘50 px’底部的边距。

第二文本模块

分配器就位后，继续添加包含标题的第二个文本模块。首先，在Content选项卡中使用‘#000000’作为它的背景色。

然后，转到“设计”选项卡，并将下列设置应用于文本子类别：

· 文本字体：苦

· 文本字体大小：92 px

· 文本颜色：#000000

· 文本行高：1em

· 文本方向：左

打开边界子类别并使用以下边界：

· 使用边框：是

· 边框颜色：#000000

· 边框宽度：3 px

· 边框风格：实心

此外，使用‘77%’宽度和左模块对齐。

最后，将“15 px”添加到文本模块的顶部、右侧、底部和左侧。

第三文本模块

添加另一个文本模块就在前面的一个。这个代表描述。转到“设计”选项卡，为文本子类别使用以下设置：

· 文本字体：Lato

· 文本字体大小：16 px

· 文本颜色：#000000

· 文本行高：1em

· 文本方向：左

打开“尺寸”子类别，使用“70%”作为宽度，并选择左模块对齐。

最后，添加一个‘20 px’的最高边距。

第五文本模块

第五个文本模块作为一个极简的按钮。在Content选项卡中，使用“→”符号+文本并在其后面放置一个链接。

然后，转到“设计”选项卡。对文本子类别使用以下设置：

· 文本字体：苦

· 文本字体大小：23 px

· 文字颜色：#000000

· 文本行高：1em

· 文本方向：左

向下滚动相同的选项卡，直到您看到“尺寸”子类别。在该子类别中，使用“49%”的宽度和正确的模块对齐方式。

最后，添加一个‘80 px’的最高边距。

第六文本模块

我们需要的第六个和最后一个模块几乎与前一个模块相同。使用“→”+文本并在其后面放置一个链接。

文本子类别的设置如下：

· 文本字体：苦

· 文本字体大小：23 px

· 文本颜色：#e02b20

· 文本行高：1em

· 文本方向：左

将宽度更改为“39%”，并使用正确的模块对齐方式。

第二排

背景色

打开行设置并添加“RGBA(255，255，255，0.14)”作为背景色。

背景图像

在这篇文章的Photoshop部分添加一个图片，并使用‘Hue’作为背景图像的混合。

柱结构

您需要添加到标准部分的第二行与前一行正好相反。

克隆模

我们在上一行中使用的模块与此行所需的模块相同，因此继续，克隆它们，将它们放在第一列而不是第二列中。我们需要在这篇文章的下一部分中做一些调整。

第一次文本模块修改

打开第一个文本模块并添加‘20 px’的上限。

分压器模块修改

然后，打开DividerModule并将Sizing子类别中的模块对齐更改为右侧。

第二文本模块修改

将第二个文本模块的文本方向设置为右侧。

并在“尺寸”子类别中选择正确的模块对齐方式。

第三文本模块修改

第三个文本模块也需要一个正确的文本方向。

以及正确的模块对齐。

第五文本模块修改

对于第五个文本模块，唯一需要做的就是将宽度更改为“82%”。

第六文本模块修改

对于第六个文本模块也是一样的，但是使用‘87%’代替。

平板电话隐藏部分

完成这两行之后，您可以在电话和平板电脑上禁用整个部分。

平板电脑及电话目录(新科)

为了让平板电脑和手机上的一切看起来都很棒，我们将创建一个新的标准部分。

节设置

背景色

添加“#FFFFFF”作为该部分的背景色。

自定义填充

移到“设计”选项卡并添加顶部填充“15 px”。

第一排

柱结构

然后，向节中添加两列行。

上浆

转到该行的大小子类别，并进行以下更改：

· 全宽行：是的

· 使用自定义水槽宽度：是

· 排水沟宽度：1

图像模块

我们不使用背景图像，而是使用图像模块。这样，我们就可以确保文本和图像不会重叠。继续将图像模块添加到行的第一列并上传图像。

桌面版第一排克隆模块

然后，克隆在桌面版本的第一行中使用的所有模块，并将它们放在第二列中。

更改第二个文本模块字体大小

只有一件事需要改变：第二个文本模块的字体大小。把它改成65便士。

第二排

柱结构

然后，继续向该部分添加另一个两列行。

上浆

此行还需要修改大小子类别：

· 全宽行：是的

· 使用自定义水槽宽度：是

· 排水沟宽度：1

图像模块

将图像模块添加到第一列并上传图像。

桌面版第二行克隆模块

然后，继续克隆放在桌面版本第二行中的模块。克隆完它们之后，将它们放在此行的第二列中。

更改第二个文本模块字体大小

第二个文本模块的文本大小也需要更改。继续，给它的字体大小为‘65 px’。

桌面隐藏科

完成两行之后，您可以继续禁用桌面上的整个部分。

以下是电话和平板电脑：

最后思想

在朔州做网站这篇文章中，我们向您展示了如何创建一个漂亮的滚动时尚目录。为了使我们的设计有效，我们首先向您展示了如何使用Photoshop在您的图像中创建一个透明的形状。之后，我们在Divi教程中使用了这些图像来创建设计。如果您有任何问题或建议，请确保在下面的评论部分留下评论！