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

2019.05.25 朔州做网站

145

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

结果

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

 

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教程中使用了这些图像来创建设计。如果您有任何问题或建议,请确保在下面的评论部分留下评论!

 


最新案例

寒枫总监

来电咨询

18868949445

微信咨询

寒枫总监

TOP