您所在的位置:佛山网站建设 > 网站制作

中山企业网站制作:Divi中使用图像的最终指南

发布时间:2019.05.06

作者:中山企业网站制作

点击量:1381

【导读】
divi使添加图片到您的网站很容易。然而,对于某些人来说,挑战在于了解在每个实例中要使用的正确的图像大小。没有标准的“完美”大小的所有网站,因为每个网站是不同的。但是,作为一名网页设计师,你可以做一些事情...

divi使添加图片到您的网站很容易。然而,对于某些人来说,挑战在于了解在每个实例中要使用的正确的图像大小。没有标准的“完美”大小的所有网站,因为每个网站是不同的。但是,作为一名网页设计师,你可以做一些事情来确保你的图像是合适的。你的迪维站点。这就是这篇文章的来龙去脉!

在本文中,中山企业网站制作将使用Divi中的图像进行猜测,并教您如何每次为Divi网站找到(或创建)完美大小的图像。

大图景

为Divi网站找到完美的图片大小取决于以下三个主要因素:

  1. 纵横比

    :图像的高度和宽度。
  2. 列布局

    :图像的最大宽度。
  3. 反应性

    在不同屏幕尺寸上对图像的尺寸所做的更改。

中山企业网站制作在下面的部分中,我将详细说明如何在整个Divi中使用这三个因素,从而为任何用例生成完美的图像大小。

图像优化指南

使用Divi的图像纵横比(16:9,4:3,3:4)

高宽比表示图像或屏幕的宽度和高度的比例尺寸。冒号左边的数字代表宽度(x轴),右边的数字表示高度(y轴)。最受欢迎的两种高宽比分别为4:3和16:9。如果你以前曾经调整过你的电视屏幕或显示器设置,你应该对它们很熟悉。4:3长宽比是老电视和显示器的标准屏幕尺寸,有一个更像盒子的显示器。新的高清晰度电视和显示器今天有16:9的纵横比,这有一个更广泛的显示。3:4的宽径比在DIVI中显示肖像画是非常有用的。

divi的构建考虑了三个纵横比-16:9、4:3和3:4。对于这篇文章,我将基于这些高宽比推荐的所有图像尺寸。如果你还没有这样做,你可以查看Divi的图像模板若要查看建议用于图像的标准大小和高宽比,请执行以下操作。

注:有一些有用的高宽比计算器可以帮助你找到正确的图像尺寸。

上传前优化图片

优化(调整大小、压缩、裁剪等…)总是最好的。你的图片上传到WordPress之前。同时,尽量保持所有的图像文件大小在60 kb到200 kb之间。这样,页面加载时间就不会太慢。关于如何优化图像的完整指南,到这里来.

别忘了SEO

在读取图像时,搜索引擎依赖于图像的文件名、“ALT”文本、标题、文件类型、文件大小等…此信息被放置在IMG标签中,它显示您的图像。当你上传一个新的图片到你的媒体画廊时,你一定要把这个信息添加到你的图片中。

中山企业网站制作

此外,DiviBuilder允许您在某些模块中添加“ALT”文本和标题文本。当使用某些Divi模块时,请注意这些模块。

据我所研究,谷歌不会自动读取背景图像,因为它们没有包装在一个IMG标签中。背景图像使用CSS显示,主要用于设计目的。

文件格式

通常,网络上的大多数图像要么是JPEG,PNG,GIF格式。JPEG在大多数情况下是好的,因为它的兼容性,颜色的使用,和小的文件大小。

JPEG应该用于您的所有彩色照片,如特色图像和背景图像。

PNG也是一种非常兼容的Web格式。PNG的是伟大的较小的图像与许多细节。PNG格式还支持透明的背景功能,这对于徽标和图形元素来说是完美的。

GIF适合于颜色有限的小图像。GIF是独一无二的,因为它们可以被动画化,这有时是有用的。

基于Divi列布局的图像尺寸准则

以下图像尺寸指南基于Divi的默认布局设置。这包括内容宽度为1080 px和沟槽宽度为3。中山企业网站制作更改这些设置可能需要稍微调整图像的尺寸。

一般的经验法则是,你的图像至少要和它所在的列一样宽。以下是根据每个列的布局,您的图像所需的尺寸。

这并不能解决你的图像所需要的高度。因此,这是一个根据4:3和16:9高宽比的尺寸列表。这有助于保持您的图像的宽度和高度,适当地缩放为移动。

以下图像尺寸符合16:9宽径比标准

1栏:1080 x 608
栏:795 x 447
⅔栏:700x394
5栏:510 x 287
⅓栏:320 x 181
1/4栏:225 x 128

以下图像尺寸遵循4:3宽径比标准

1栏:1080 x 810
栏:795 x 597
⅔栏:700x526
5栏:510 x 384
⅓栏:320 x 241
1/4栏:225 x 170

不同Divi模的图像维数

图像模块

在使用图像模块时,您可以简单地按照16:9和4:3的布局来选择每个列布局所需的图像大小。

例如,如果您使用的是4:3的纵横比的4列布局,那么您将为每列插入一个225 px到170 px的图像。

对每一列使用特定大小的好处是,它为您提供了所需的确切图像大小,而不会浪费图像文件大小,这可能会减慢您的页面加载时间。

缺点是,它不能填补小屏幕如平板电脑的列宽度。当屏幕大小下降到1080 px断点以下时,4列布局更改为2列布局。这2列布局有空间的图像大小,宽度为370 px。因此,如果希望图像填充平板显示器上的列宽度,则可能希望从宽度为370 px的图像大小开始,而不是从225 px宽度开始。

下面是2列平板显示器上有225 px×170 px图像的4列布局:

这看起来很不错,但是如果您从370 px宽的图像开始,您将得到一个填充2列平板显示器上的列宽的图像,如下所示:

因此,如果您希望让图像填充所有设备上列的最大宽度,那么在使用图像模块时,我建议每个列布局的大小如下。

4:3纵横比:

1栏:1080 x 810
⅔栏:770x578
栏:770x578
栏:770x578
⅓栏:770x578
栏:370 x 278

16:9纵横比:

1栏:1080 x 608
⅔栏:770x433
Re栏:770 x 433
1栏:770 x 433
⅓栏:770x433
1/4栏:370 x 208

滑块和后滑块背景图像

滑块背景图像至少应该是它所在的列的宽度。因此,确定图像大小是非常直接的。只需为每个列的宽度使用图像大小指南。

滑块背景图像的高度将由滑块的内容决定,因此您可能需要调整背景图像的高度。

以下图像尺寸符合16:9宽径比标准:

1栏:1080 x 608
栏:795 x 447
⅔栏:700x394
5栏:510 x 287
⅓栏:320 x 181
1/4栏:225 x 128

以下图像尺寸符合4:3宽比标准:

1栏:1080 x 810
栏:795 x 597
⅔栏:700x526
5栏:510 x 384
⅓栏:320 x 241
1/4栏:225 x 170

如果希望滑块跨越移动设备上列的宽度,请使用以下指南:

4:3纵横比:

1栏:1080 x 810
⅔栏:770x578
栏:770x578
栏:770x578
⅓栏:770x578
栏:370 x 278

16:9纵横比:

1栏:1080 x 608
⅔栏:770x433
Re栏:770 x 433
1栏:770 x 433
⅓栏:770x433
1/4栏:370 x 208

全宽度滑块背景图像

推荐最小宽度:192 px

全宽度滑块背景图像的宽度始终由浏览器宽度决定。根据标准屏幕大小,我们建议您的图像至少宽1280 px。但是对于更大的显示器来说,一个更安全的选择是使用一幅192 px宽的图像。

同样,对于滑块,高度总是由内容数量决定的,因此您可能需要调整高度以满足您的需要。

滑块和后滑块特征图像

幻灯片特征图像将仅显示在⅔列、Red列或1列宽度中的滑块中。我们建议您的幻灯片图像至少如此宽,以便对桌面和移动设备进行调整。

1栏:450
Re栏:330
⅔栏:320

注意:小于768 px的浏览器宽度将隐藏图像,只显示文章摘录。

Lightbox显示中的图像

如果您在图像中使用Lightbox功能,则可能需要使用更大的图像。通常1500 x 844很好地工作在一个好的全屏幕图像在灯箱显示大显示器。

音频模块覆盖艺术图像

宽度:至少780 px

尽管图像开头很小(230 X 130),但它跨越屏幕上小于780 px的内容部分的全部宽度。

博客模块以全宽布局的图片为特色

图像宽度:等于其列宽度的大小

将功能图片添加到您的文章中,使用博客模块显示是非常简单的。特征图像应该和它所在的列一样宽。例如,如果您使用的是带有右侧栏的三分之二列中的博客模块,则需要使用至少700 px宽度的特征图像,因为这是divi中三分之二列的宽度。

不要忘记,功能图像也将使用在您的单一帖子模板(页面显示您的完整文章后,您点击文章摘录)。因此,请确保您的单个页面模板也使用了三分之二的列来显示您的特色图像。

1栏:1080
Re栏:795
⅔栏:700
第510栏
⅓栏:320
1/4栏:225

带网格布局的博客模块特色图片

宽度:等于单个POST列宽度的大小(默认为795 px)

而且,就像博客模块的全宽布局一样,功能图像需要大一些才能显示。blog Grid布局的好处是Divi使用了上传到媒体库(宽度为400 px)的功能图像的较小版本。由于这个较小的图像是自动创建和显示的,中山企业网站制作所以不需要担心页面加载的图像文件大小对于网格列来说太大了。

Porfolio模块的特色图像(全宽度和网格布局;标准和可过滤)

宽度:等于您的单个POST列宽度(默认值:795 px)

单击从网格布局查看组合项时,功能图像将跨越内容部分的宽度。就像博客模块一样,

与博客模块一样,Divi创建了一个较小版本(400 px宽)的组合特色图像,用于PortfolioModule网格布局。这有助于减少文件大小和保持页面加载时间。因此,在创建一个新的项目组合项时,重要的是您的特征图像至少要与您的单个组合POST模板的列一样宽。

BLUURB模块图像

最大宽度:550 px

blurb图像遵循将图像宽度与列宽度匹配的相同规则,但1列除外,该列的最大宽度为550 px,而不是普通的1080 px。因此,一个安全的赌注是插入最大宽度为550 px的图像。以下是每个列布局中Blurb模块的图像宽度。

1栏:550 px
5栏:510 px
⅓列:320 px
1/4栏:225 px

图库模块图像(滑块和网格布局)

推荐尺寸:1500 x 844

由于图片库模块的图像是在Lightbox显示中打开的,所以我建议使用一个足够大的图像,以便在Lightbox中查看图像时填充浏览器窗口(对于大型监视器,大约在1500 px宽的地方)。

对于网格布局,Divi创建一个较小版本(400 px宽)的图库。因此,为Lightbox保留的大图像文件大小将不会显示在图片库网格上。这有助于减少文件大小和保持页面加载时间。

对于滑块显示,重要的是尝试保持所有图像的相同宽度和高度,因为图像的高度将随着您浏览幻灯片而发生变化。

人物模块图像

推荐尺寸

宽度:600 px

对于人物模块来说,是时候引入高宽比3:4了,这是一个很大的肖像尺寸。以下是推荐的Person模块图像大小,用于每一个纵横比:

3:4-600 x 800(推荐用于肖像画)
16:9-600 x 338
4:3-600 x 400

响应功能

1列布局上的Person模块图像将显示在320 px内容的左侧。

当屏幕大小小于767 px时,图像以600 px的最大宽度跨越内容区域的宽度。

下面的gif显示了在不同屏幕大小上使用600 x 800图像(使用3:4高宽比)的Person模块。

邮编模块特色形象

中山企业网站制作

宽度:等于列宽

POST标题模块显示当前文章的标题,以及可选的POST功能图像。你可以选择你的特色图片的位置在标题之上,标题下面,或者作为标题的背景。无论您选择什么,图像仍将跨越内容部分的宽度。因此,如果您使用1列布局为您的邮政标题模块,1080 px宽度是您的特色图像的理想选择。

车间模块产品图像

建议

推荐宽度:330 px
推荐栏数:3或更多

商店模块允许您以一列布局显示产品,直至六列布局。以下是在每个列布局上显示的产品图像的宽度:

6栏:150 px
5栏:183 px
4栏:240 px
3栏:332 px
2栏:520 px
1栏:1080 px

功能

divi生成一个较小版本的产品映像(最大宽度为400 px),因为Shop模块实际上是为在⅓列或更小的列上显示产品而构建的。这意味着您的2列和1列布局可能会显示产品图像的模糊版本。

此外,单击商店模块中的产品后,单个产品页面将以300 px的速度显示您的产品图像。

为了适应3列布局和单一产品页面,我建议坚持至少330 px宽的产品图像大小。

证明肖像图像

基于模块设置的图像大小

默认情况下,Divi将您的肖像图像转换为90x90大小和90边框宽度,并将其显示为一个圆圈。因此,如果您保留默认设置,我建议您的图像尺寸正好是90x90。如果没有1:1的纵横比,你就可以摆脱真正的大图片,但是这会浪费大量的文件大小,从而减缓页面加载时间。

您可以自定义肖像图像的尺寸和边界半径从高级设置的证明模块。

当更改这些设置时,如果要保持圆圈图像的外观良好,请确保宽度和高度保持不变,边框半径为100。

背景图像通用指南

当您的模块使用背景图像时,背景图像始终需要至少与其所在的列一样宽。只需遵循Divi列宽的准则:

1栏:1080
Re栏:795
⅔栏:700
第510栏
⅓栏:320
1/4栏:225

下面是一些需要背景图像来匹配其列宽度的模块:

投资组合模块
可过滤组合模块
呼叫行动模块
后滑块模块
职位名称模块
滑块模块
文本模块

全宽度背景图像通用指南

如果使用全宽度区域背景图像,这些图像将扩展到浏览器的全宽度。这意味着你应该让这些图像至少和大多数更大的显示器一样宽,大约是192 px。

以下模块将需要一个192 px宽度的背景图像:

全宽度标头
全宽投资组合
全宽滑块
全宽职位标题
全宽后滑块
全幅图像

另外,需要注意的是,对于所有这些模块,背景图像的高度取决于模块中的内容数量,因此您可能需要根据需要调整图像的高度。

全宽标头模块

全屏背景图像

不想与全宽度背景图像混淆,全屏背景图像是指在您的全宽度标题模块上的设置,该设置允许您的标题跨越浏览器窗口的全部大小(宽度和高度)。

由于大多数显示器遵循4:3和16:9的纵横比,并且只有1280 px或192 px宽,所以我建议全屏背景图像的尺寸如下:

4:3-1280 x 960(推荐用于肖像画)
16:9-1920 x 1080

全宽度标头模块标志图像

全宽度标头模块允许您在标头内容区域内放置徽标。

标识没有标准的图像大小。作为一般的指导方针,我建议保持徽标足够大,以便在大型台式机上清楚地看到,但足够小,以适应较小的设备,如智能手机。

迪维的主题标志是93x43,这给你一个好主意。

全宽标头图像

建议尺寸:510 x 288

除了徽标外,全宽度标头模块允许标题图像显示在标头内容区域中。默认情况下,标题图像将显示在2列布局的右列上。由于图像位于半列,所以510 x 288图像在大多数情况下是最有意义的。

更改模块的常规设置中的Text&Logo方向选项将允许将标题图像显示在左侧列上或居中(如果您喜欢该设置)。

你也可以调整垂直对齐底部,如果你想要你的图像拥抱底部的标题。

最后思想

正如中山企业网站制作前面提到的,没有一个完美的标准图像尺寸适用于所有网站和屏幕大小。然而,了解Divi列的布局和每个模块如何显示特定的图像,将允许您创建适合您的Divi站点的维度。


【版权申明】

本文章由佛山网站建设公司极简慕枫整理收集与网络,不代表本网站观点。如果你想了解更多关于佛山网站设计,企业网站建设的文章,请访问佛山网站设计板块,为客户免费提供优化方案。

原创文章,作者:极简慕枫,如若转载,请注明出处:http://www.jhszjm.com/newsshow-18-580-1.html
联系电话 400-6065-301

微信咨询 寒总监