主要外卖
- 所有六个示例都是使用相同小部件构建的实时演示页面,因此您可以打开每个示例并自己单击选项卡。
- 每个选项卡都使用四个类别和一个"全部"选项卡,该选项卡将条形保持在笔记本电脑上的单行上。
- All标签在每个设计中都重新命名:“所有列表”, “全菜单”, “所有工作”, “所有项目”, “全部购物”和“每个目的地”。
- 列计数从内部案例研究的两个到餐厅菜单和商店网格的四个。
- 每张卡片上的六个按钮中有两个使用打开图像的悬停图标,两个使用两者都不使用。
可过滤画廊根据其所持有的内容看起来有所不同。餐厅菜单需要密集的四列卡和价格,室内工作室需要两列大柱和一个案例研究链接,摄影师希望图片能够承载一切。
下面的六种设计是您可以点击浏览的实时演示页面,每个条目都注明类别、列数以及赋予其字符的设置,因此您可以复制与您的内容相匹配的形状。
目录
六个例子一目了然
| 例子 | 类别 | 项目 | 列 | 卡链接 |
|---|---|---|---|---|
| 房产列表 | 公寓、别墅、联排别墅、办公室 | 8 | 3 | 两个按钮 |
| 餐厅菜单 | 小盘子、主菜、甜点、鸡尾酒 | 8 | 4锛屽湪娴欐睙鏉 | 悬停图标 |
| 婚礼摄影 | 仪式、肖像、招待会、详细信息 | 9 | 3 | 悬停图标 |
| 室内项目 | 住宅、酒店、零售、工作场所 | 8 | 2 瀹跺涵涓杞杈 | 一键 |
| 产品目录 | 包袋、鞋类、手表、外套 | 8 | 4锛屽湪娴欐睙鏉 | 两个按钮 |
| 旅行目的地 | 欧洲、亚洲、美洲、非洲 | 8 | 3 | 悬停图标 |
可过滤图库示例
1。物业信息
8个列表,跨越四个类别,与All选项卡重命名为“All listings”, 每张卡片都带有物业名称作为标题, 规格行作为副标题,所以“2张床,1个浴缸,940平方英尺,$2,450/mo”坐在照片下方,每张卡片的两个按钮处理游客想要的两件事:细节,和观看。
值得复制的细节是丝带:八张卡片中的两张上写着"新"或"价格下跌"的角徽章可以吸引眼睛,而不会触及布局。
2。餐厅菜单
All标签页暗底四列, “全菜单” 菜名是标题, 价格是副标题, 是两个字段的整个菜单结构, 课程成为筛选条件, 所以一个只想要甜点的游客一键就到了。
4个栏目在这里工作,因为照片是单菜的紧凑作物,在4个栏目进行宽幅场景摄影是无法阅读的。
3、婚纱摄影
9帧,一天中的四个部分,几乎没有文字。All选项卡上写着“所有工作”, 卡片使用悬停图标而不是按钮,因此点击打开图片而不是导航离开。这是当照片是产品时复制的设计。
它的工作原理是它遗漏的内容:没有丝带,没有按钮,也没有与图像竞争的字幕。
4、室内工程
2列,因此每个项目都获得真实空间,叠加集随时显示而不是悬停。每卡一个按钮,读取“查看案例研究”。滤波器条向左对齐而不是居中,这符合编辑的感觉。
2列是值得复制的值得再看一眼的工作选择,两列的8个项目仍然适合滚动的一个屏幕。
5、产品目录
4列,商品名作为标题,价格作为副标题,两个按钮读取“快速查看”和“添加到袋” All选项卡上写着“Shop all”看起来像一个商店页面,而不是一张:卡片是带有链接的图像而不是产品,所以没有什么东西可以放在购物车上,对于指向商店的lookbook来说,这就足够了。
两个按钮图案是有用的部分:一个柔和的动作,一个坚固的动作。
6、旅行目的地
Continents 作为过滤器,All 选项卡更名为“每个目的地”, 悬停比例设置得比其他演示更高, 因此卡片在光标下提升得更明显, 标题命名地点, 字幕添加细节。
更名为 All 的选项卡在这里执行实际操作。 “每个目的地”都告诉访客该集合是什么; “All”什么也没告诉他们。
6个有何共同点
- 6种设计中的4个类别。四个标签加上所有标签都适合笔记本电脑上的一行,并在手机上包裹到两条。
- All 选项卡每次都会重命名,有六个不同的标签,默认时没有留下任何标签。
- 在每个使用文本的设计中,顶部有标题,下面有细节。
- 柱数遵循摄影:紧作物需要四列,场景和房间需要两到三列。
- 每张卡片的一键行为,无论是按钮还是灯箱图标,绝不能两者兼而有之。
建造其中之一
每个设计都是具有不同设置的同一小部件。构建是:每个图像添加一个项目,在每个图像上键入过滤标签以创建选项卡,设置列,然后决定卡片是否裁剪到具有图像纵横比的统一高度或保留自己的比例标题、字幕和覆盖行为住在覆盖设置部分,两个按钮位于每个项目上。
完整的演练已经完成 elementor 中如何创建可过滤图库并且小部件本身是 可过滤图像库.
常见问题
我可以将这些示例导入为模板吗?
它们是演示页面而不是可导入的套件。重建一个大约需要十分钟,因为结构是一小部分设置和您自己的图像。
过滤栏应该有多少个类别?
Four是所有六种设计的模式,过去六条将条包裹在笔记本电脑上,开始像第二个菜单一样阅读。
一个图像可以出现在两个选项卡下吗?
是。将两个类别名称都放在过滤标签字段中,用逗号分隔。
演示使用砖石吗?
No。六张裁剪卡全部到一个均匀的高度,这就是为什么网格看起来整洁的原因砖石是混合方向的集合的单独开关。
商店的例子可以付款吗?
No。是带按钮的图库,所以卡片指向哪里就链接哪里,结帐属于WooCommerce。
最后的想法
6个设计,一个小部件,以及它们之间的四个决策:有多少列,卡片是否裁剪,按钮的作用以及All选项卡的名称。从最接近您的内容的示例开始,更改这四个。
相关阅读
