主要外卖
- Masonry意味着图像保持自己的比例,而不是裁剪成统一的卡片,因此肖像照片保持高大。
- Elementor 免费的图片库小部件没有砖石选项,它的布局控制是柱子和间隙。
- Master Addons 可过滤图像库有一个砖石开关,可以停止裁剪,但前端脚本将项目排成一排,因此高牌在同一排的短牌下方留下一个间隙。
- 如果您想要紧密包装且没有间隙的列,集装箱上的 CSS 列是免费安装的诚实路线。
- 对于产品拍摄和团队照片,统一的网格通常比砖石读数更好,因此请打开图像宽高比。
Masonry是图像坐在其自然高度和柱子交错的布局,Pinterest使熟悉的形状它适合摄影,其中裁剪一个肖像框架成一个正方形,扔掉一半的图片。
Elementor可以通过三种不同的方式接近这一点,而且它们并不都产生相同的东西,其中一个有一个开关,标记为Masonry,其作用小于名称所示,这是你构建之前值得阅读的部分。
目录
砖石、网格和合理性:差异
| 布局 | 它对图像的作用 | 阅读最好 |
|---|---|---|
| 网格 | 将每个图像裁剪为相同的卡片大小 | 产品、团队照片、徽标,任何您想要的整洁 |
| 砌体 | 保持每张图像的高度,列错开 | 混合摄影、风景旁边的肖像 |
| 合理 | 保持比例,但将每行拉伸到相同的高度 | 照片文章和联系表 |
Masonry和justified都保护原始作物。区别在于数学运行的方向:砖石固定柱宽度并让高度变化,justified固定行高并让宽度变化。
1号路线:元素师的画廊小部件(专业版)
Elementor 免费的 Image Gallery 小部件有两个布局控件,列和间距,它会裁剪成一张统一的卡,Gallery 小部件,也就是 Pro,有一个布局控件,具有三个值:网格、合理和砌体。砌体是真实的东西,列堆积没有间隙,Pro Portfolio 小部件也有自己的砌体开关,如果你已经拥有 Pro,那是最短的路径,没有什么可以安装的。
路线 2:可过滤画廊中的砖石开关
在免费的 Elementor 安装上 可过滤图像库 在"设置"部分有一个砖石开关,紧邻"图像宽高比"和"排水沟"。
Masonry on 和 Image Aspect Ratio off,图像保持自己的比例,因此人像框架保持高大,没有裁剪任何东西,列打包是您没有得到的部分,在当前版本中,布局网格的脚本将项目排列成行,因此一个短图像在其下方留下一个空白空间,直到下一行开始。
当您的图像形状大致相似时,这很有用,因为没有任何东西被裁剪,并且行保持整齐。对于免费安装时打包的 Pinterest 外观,路线 3 是答案。
路线 3:集装箱上的 CSS 列
CSS有一个列布局,可以按照砖石应该的方式打包内容,把你的图像放在一个容器中,向其中添加几行CSS,浏览器在没有脚本的情况下完成工作。
selector {
column-count: 3;
column-gap: 24px;
}
selector img {
width: 100%;
margin-bottom: 24px;
break-inside: avoid;
}
@media (max-width: 767px) {
selector { column-count: 2; }
}的 selector keyword 针对的是您正在编辑的元素,因此此片段会进入容器本身的自定义 CSS 框中。在免费的 Elementor 安装中,该框来自附加组件,例如 自定义CSS因为 Elementor 将其自己的自定义 CSS 字段标记为 Pro。
权衡就是排序。CSS 列在每列中从上到下填充,因此读取顺序从第一列向下运行,然后从第二列向下运行。对于画廊来说,没有人按顺序读取,这很好。对于任何按时间顺序排列的东西,它都不是。
使砖石看起来正确的图像尺寸
- 1,200px左右以一致的宽度上传,对于三列网格来说是足够的,并且可以保持页面光线。
- 让高度变化并保持宽度相同,因为砖石是通过固定柱宽度来工作的。
- 故意设置图像分辨率。九个图像网格中的全尺寸文件是一个缓慢的页面,不会产生视觉增益。
- Gutter滑块响应灵敏,运行速度从0到40px,因此您可以在手机上收紧它。
- 避免一帧极端的画面。方形图像中一张非常高的全景图可以吸引人们的目光。
当均匀的网格是更好的答案时
打开图像宽高比,您将获得统一的网格,这是产品镜头、团队照片和徽标以及任何其他看起来像一组的东西所想要的。
1个简略的选取方法:假如影像是1个相机的设置在1个会话中拍摄的,就裁剪成网格,假如来自不同方位的不同拍摄,就让它们保持形状。
常见问题
Elementor 有砖石画廊吗?
不在免费的图像库小部件中,它只提供列和间隙。Elementor 的带有布局选项的图库小部件在其专业列表中。
为什么我的砖石画廊还有缺口?
为网格是排成行而不是填充列布局的,图像保持其自然高度,因此一个短图像排成一行,高一列,在下面留下空间,CSS列是真正填充的途径。
砖石结构与过滤片配合使用吗?
是。过滤和布局是分开的,因此单击类别会缩小网格,其余项目会重新布局。
我只能在移动设备上设置砖石吗?
号砌体开关适用于每种屏幕尺寸,地沟滑块是每个设备改变的控制。
砖石对页面速度有影响吗?
Layout 本身便宜,你要花的是图片,所以设定一个明智的 Image Resolution 而不是全尺寸的文件,并且记住图库中的每个项目都加载页面。
最后的想法
3条路线,三种不同的结果 Elementor Pro的Gallery小部件为您打包列 可过滤图库上的Masonry开关停止裁剪并保留行,这通常足够了 CSS列在免费安装时给打包后的外观,以读取订单为代价。
保护原始作物并保持整洁的网格是两个不同的目标,因此选择与您实际拥有的路线相匹配的路线。
相关阅读
