Elementor 图像框是一个小部件,它将图像与标题和简短描述配对在一个链接块中。 WordPress网站大多数都是如何构建服务网格、功能行和团队部分的。Elementor免费提供一个;下面的十六种设计用布局和运动默认小部件无法产生替换它。
由于每个人都有相同的小部件,利兹水管工工地上的服务部分的布局与里斯本设计工作室的布局相同。相同的三列,相同的中心图像,相同的 16 便士间隙。
So we build sixteen replacements。one one is a working Elementor widget, each has a live demo you can open on now and a download link on this page。you does not to hand over a
在这个页面上
目录
16款设计一览
| # | 设计 | 它做什么 | 最好的 |
|---|---|---|---|
| 01 | 流明图像盒 | 光源沿着光标穿过卡片 | 黑暗站点,技术服务 |
| 02 | 边缘图像框 | 当您滚动过去时打开的偏置板 | 社论、指南、户外品牌 |
| 03 | 光圈图像盒 | 每张图像都从剪切的孔径打开 | 摄影、印刷、六件式网格 |
| 04 | 凸轮图像盒 | 卡片打开铰链,显示背面 | 之前和之后,规格显示 |
| 05 | 级联图像框 | 四张牌按顺序排列,不是一次全部 | 流程步骤,工作室服务 |
| 06 | 花丝图像盒 | 小缩略图、细则、密集的两列列表 | 长服务菜单,价目表 |
| 07 | 楣带 | 您拖动或滚动穿过的水平条带 | 长序列,生产线 |
| 08 | 陀螺仪图像盒 | 卡片向指针倾斜,带有光泽 | 产品、工艺品 |
| 09 | 脉冲图像框 | 卡片像磁铁一样拉向光标 | 预订、课程、租赁 |
| 10 | 金杉图像盒 | 图像以碎片形式到达并重新组装 | 工艺、玻璃、陶瓷、修复 |
| 11绔 涔诲芥澶澧 | 栅栏图像盒 | 由垂直板条建造的高板 | 车间、细木工、窄柱 |
| 12绔 涔诲芥澶澧 | 折射图像盒 | 每张图像上都有一个混合模式的彩色清洗 | 工作室、音乐、许可 |
| 13绔 涔诲芥澶澧 | 立管图像盒 | 卡片的唇部与其文字相符 | 机构、生产 |
| 14绔 涔诲芥澶澧 | 至日图像盒 | 大型交错对,采用双调治疗 | 咖啡、采购、讲故事 |
| 15绔 涔诲芥澶澧 | 阈值图像框 | 门从中间部分向下,以显示图像 | 种植者、苗圃,揭示 |
| 16绔 涔诲芥澶澧 | 维勒姆图像盒 | 当卡片夹打开时,柔和的模糊会消失 | 装订、档案、安静的品牌 |
运行这些所需的内容
Elementor free 对页面本身来说就足够了,设计是另一回事。
- 所有十六个都需要主插件。 它们中的每一个都建立在完整的控件(中继器、排版、尺寸、边框、图标选择器、选项卡)之上 小部件生成器 provides。free 插件有一个小部件生成器,但那些控件显示为锁定。
- 此页面上的下载是免费的且不受门禁的。 JSON抓起来保留,在免费版里可以修改有限选项,但是pro版解锁一切。
- 现场演示根本不需要任何费用。 Open one,调整浏览器大小,拖动一张卡片,用键盘轻轻一拍,这样才是判断动作风格是否符合你内容的老实方法,而且免费。
如果您想要在免费插件上运行的设计,我们中的八个免费小部件 元素滑块模板 collection 不使用 Pro 控件,其中有几个是卡片布局而不是滑块。
01、流明图像盒
4张近黑底的牌,将指针移过,柔光随之移动,使光标下图像的部分亮起,其余部分昏暗,你看的牌就是点亮的牌。
What makes it working is the crontraint, 卡片在悬停时不会移动或缩放,唯一改变的是光线落下的地方,这接近你在灯下实际看待工作台上物体的方式。
用它来: 技术服务、黑暗主题网站、任何在黑暗地面上拍摄的东西。
不要用它来: white backgrounds。聚光灯没有什么可对抗的,整个事情读作一个略微肮脏的悬停状态。
02、边缘图像框
2根柱子,故意走位,所以右边柱子坐得比左边低,每块板子在交叉进入视野时打开,标题上带有一个小圆形箭头,下面坐着一个字母间隔的帽子眉标:SNOWCRAFT、SUMMITS、TRAVERSES。
That offset 做的是真实的工作,一个直网格告诉眼睛一行一行扫描就停止读取,错开列,它必须沿着页面向下移动,这是你实际想要的方向。
用它来: 社论页、指南,任何有四到六个实质性项目的内容。
不要用它来: 8条左右以上,错开累积,页面变得很高,很快。
03、光圈图像盒
6个盒子,每排三张,在温暖的纸灰色上,每个图像都被掩盖,并且随着行到达,掩模向外打开,就像镜头光圈一样,每张卡片在其描述下都带有小小的SEE DETAILS链接。
6样东西真心平等的时候伸手去做这件,大部分的图像框布局都是悄悄地按大小或位置对物品进行排序,这件没有。
用它来: 暗室和印刷服务、六项功能网格、任何摄影作品。
不要用它来: 3项,两排节奏是整个设计,单排三丢。
04、开合影像盒
Bridge命名,而不是平衡。每张卡片都打开一个水平铰链,后面有一个真正的背面等待,不是同一张图片上的CSS过滤器,而是你写入副本的实际第二面。
Building它的一张便条:翻转在断点下方关闭,这是故意的,手机上的铰链动画意味着轻按做一些意想不到的事情,修复方法是不做而不是做得更慢。
用它来: 之前和之后,规格表,任何第二条信息与第一条信息一样有趣的信息。
不要用它来: 您进入页面的主要导航。翻转后面的内容是大多数访问者从未见过的内容。
05、级联图像框
4张牌接连到而不是一起到,每张都比上一张落后一拍,差别很小,但你感觉到了,分段发给你,而不是仅仅出现。
每张卡都带有课程日期链接,这是该布局真正用途的赠品:按顺序重复出现、顺序重要的事情。
用它来: 工作室和研讨会服务、课程列表、流程步骤。
不要用它来: fold之上。交错游客看到的第一件事的入口,即使不是,你的网站也会感觉很慢。
06。花丝图像盒
The 宁静的。缩略图的大小邮票, 发际线规则, 两列,空间中的四项这些设计大多数用于一个。手套类型, 聚合物板, 模切,边缘绘画:贸易清单, 摆放像贸易清单。
Yin在,因为不是每个服务板块都值得英雄待遇,有Shi候你做十一点,来访者想扫一扫,不欣赏。
用它来: 长服务菜单、价目表、专业交易,包含大量产品线。
不要用它来: 三个头条服务。按计数,您似乎忘记完成该部分。
07、楣板条
Zhe里唯一横着走的,卡片从屏幕右边边跑出来,你拖着,滚动,Huo用右上方的两个圆箭头按钮,下面一条细细的规矩,Zai走的时候就填满了,所以你总是知道还剩多少。
纺纱、翘曲和横梁、多比编织、片状染色、精加工最差。磨机的五个阶段按照发生的顺序。一个网格会将该序列分解成行。一条带将其保持在一行上,这就是生产序列的实际情况。
用它来: 生产序列、会破坏网格的长列表,以及任何具有固有顺序的东西。
不要用它来: 4项。如果所有东西都已经适合屏幕,你是要求人们无偿横向滚动。
08、陀螺仪图像盒
Cards 朝指针所在的地方倾斜,一个光泽在移动时越过表面,是 2021 年大家尝试的效果,大多数人都做得过头了,这里的倾斜是几度,不是十五度。
键盘用户得到正确的处理,这几乎没有任何作用。将标签标记到卡片上,您会获得升降机和光泽,但没有旋转,因为键盘没有指针位置可以旋转,假装是无稽之谈。
用它来: 实体产品、框架、工艺品,任何表面值得捕捉光线的东西。
不要用它来: text-heavy卡片。在有人读的时候倾斜一段话是敌对的。
09、冲动图像盒
当光标接近时,卡片会向它倾斜,然后随着它离开而松开。拉力会对半张卡片进行标准化并夹紧,因此一旦超过边缘,它就会停止增加,而不是将卡片抛过屏幕。
每张卡片都以热橙色按钮结束。初级课程、辅导、董事会聘用。磁力是一种预订页面技巧,因为它让按钮感觉想要按下,而且在任何卡片不是号召性的地方都浪费了。
用它来: 课程、租赁、预订以及每张卡片都以按钮结尾的任何内容。
不要用它来: 无点击目标的信息卡。您承诺进行您不提供的互动。
10。金杉映像盒
图像碎片到达并重新组装。两个断裂图案与之一起运送:三个高大的碎片,就像一块窗格在其高度上破裂,六个从点辐射的楔子偏离中心,读作冲击而不是干净的断裂。
吹制容器、铸造和窑炉成型、修复、教学台。演示是玻璃作品贯穿始终。该设计是为热点商店建造的,它展示了,但它落在主题是制造、破碎或重新组合的任何地方。
用它来: 玻璃、陶瓷、修复、修复、保护。
不要用它来: 医院、保险、任何带有你不想要的含义的“破碎”。
11、栅栏形象箱
3块高板,每块板由依次到达的垂直板条组装而成,一块板一块地建造栅栏,板条数量适应板宽,因此较窄的柱子得到更少、更宽的板,而不是同样数量的挤得更薄。
楼梯、推拉窗、设备齐全的房间。所有这些都是您拍摄的站立而不是躺下的主题,这比风景卡更适合这种布局。
用它来: 细木工、建筑、室内装饰、高大产品镜头。
不要用它来: 风景摄影。人像面板将图片裁剪到插槽中,您就会丢失镜头。
12、折射图像盒
Color wash 在混合模式下坐在每张图像上,所以四张在四种不同灯光下在四天不同天拍摄的照片出来看起来像一组,这就是这里的实际工作,它不像听起来那么迷人。
Location录音、拟音和道具、还原、图书馆授权,是声音工作,不可避免地要进行库存摄影,而且图片永远不匹配,所以洗涤隐藏了接缝。
用它来: 混合源图像、库存照片,任何无法重拍的内容。
不要用它来: 产品颜色精度。油漆样品的清洗是一个退货问题。
13、立管图像盒
卡片从下面升起,底部显示一个字幕唇。唇部是根据其内部的文本来测量的,而不是设置为固定的高度,因此两个单词的字幕和两行的字幕都坐得正确,而不是其中一个剪裁。
Bespoke佣金,重新制定,小批量生产 三项,三张暗图,最小镀铬,是套装中最常规的设计,有时你想让布局走出工作。
用它来: 代理机构、制作公司、三服务页面。
不要用它来: long的描述。嘴唇是标题,不是段落。
14。至日影像盒
套装中最大的盒子。两列,故意严重失步,图像足够大,足以实际观看。图像上有一个双调处理链接,如果一张照片与之抗争,则可以每张卡片掉落。
批发烘焙、绿色采购、浓缩咖啡校准。三项服务给出了六个空间。当你没什么话要说时使用它,它们每项都值得一整个屏幕。
用它来: 2到4个优质服务、讲故事页面、咖啡和食品品牌。
不要用它来: 六个或更多项目。这个六项的设计是一个很长的页面,没有人能到达底部。
15、阈值图像框
2扇门在每张图像上都关闭,并在卡片进入视图时从中间部分向下,门是从图像自身来源构建的,因此它们永远不会与后面的图片不匹配。
Deep green ground,四张牌:温室收藏,种子库,冬季花园,学习课程,使用门进行一段关于进入花园是显而易见的,在这种情况下显而易见是可以的。
用它来: 花园、场地、开口,以及游客实际进入的任何东西。
不要用它来: 十二张牌。十二套门开门是很多门。
16、贝鲁姆图像盒
每张卡片从一个剪辑中打开,而柔和的模糊将图像清除,就像纸张被抽走一样。该部分中的每张卡片都武装在一次提交中,这意味着整行一次布局通过,而不是每张卡片一次。
Case装订,保育,盒子和外壳,版本工作。demo是一个装订机。这是片场最温和的动作,也是最有可能在客户说他们讨厌动画的情况下生存下来的动作。
用它来: 档案、装订、保护、安静且昂贵的品牌。
不要用它来: 任何需要紧急的事情。这个设计没有,也没有假装。
默认 Elementor 图像框小部件可以做什么?
Elementor 免费图像框为您提供图像、标题、描述和可选链接,在 Style 选项卡中您可以设置图像宽度、边框半径、图像和文本之间的间距、对齐方式以及图像位置(顶部、左侧或右侧),悬停效果仅限于 Elementor 的全局 CSS 过滤器和变换。
That覆盖了很多站点,如果覆盖了你的,就用它,你不需要一个插件,就可以把图片放在标题上面。
跑出来的地方就是运动和结构,没有背面,没有每张卡的排序,没有水平布局,没有办法让一张卡的行为与邻居不同,那就是上面十六种设计填补的空白。
图像框与图标框:您应该使用哪个?
当图片是内容时使用图像框,例如作品、房间或产品的照片。当图片是装饰且文字带有含义时使用图标框。小部件在其他方面几乎相同:都将带有标题和描述的图形配对在一个链接块中。
实际测试是您是否会注意到图形是否消失。如果服务网格在图标消失后仍然读取良好,它们是装饰性的,图标框是正确的调用。如果删除图像会给您留下姓名列表,则需要一个图像框。
人们忘记的第三个选择: 翻盖盒的,就是一个背面的图像框,上面的bascule就是那个用铰链重建的想法。
如何向 Elementor 图像框添加悬停效果?
择小部件,打开样式选项卡,展开图像部分并切换到悬停选项卡,您将获得不透明度、CSS滤波器(模糊、亮度、饱和度、对比度、色调)和过渡持续时间。对于像缩放或旋转这样的变换,请使用高级选项卡的悬停控制。
That’整个内置表面,任何超出它的东西,例如跟踪光标的光,磁力拉力,或在倾斜上交叉的光泽,都需要自定义CSS或附带行为的小部件。
如果您追求的是特定的图像文本效果,我们会进行编目 25+ 元素文本过图像悬停效果 单独使用,并且这些使用库存小部件。
如何导入这些 Elementor 图像框设计
从上述任何设计下载 JSON,然后在 WordPress 中转到 主插件 → 小部件生成器 → 导入小部件 并上传文件。该小部件出现在"收藏夹"下的 Elementor 面板中,在"内容和样式"选项卡中具有自己的控件。
- 单击 下载小部件 JSON on 您想要的设计。zip 包含 JSON 和预览图像。
- Unzip it。Elementor 自己的模板导入器不会读取这个文件,因为它会转到小部件生成器而不是模板。
- 去 主插件 → 小部件生成器 和选择 导入小部件.
- JSON 上传。Elementor 编辑任何页面,然后搜索面板中的小部件名称。
- 替换占位符图像和文本。卡片是中继器,因此可以在其中添加或删除项目,而不是复制小部件。
常见的错误是步骤 2。这些是 Widget Builder 小部件,而不是 元素单元部分模板因此,通过模板 → 导入它们将失败,并且错误消息无法解释原因。
这些图像框在移动设备上工作吗?它们可以访问吗?
是对两者,有一个设计级别的警告这里的每个小部件都尊重 prefers-reduced-motion:如果访问者在操作系统级别上启用了减少的动作,则入口动画不会运行,卡片渲染到最终状态。那是在小部件中处理的,而不是留给您。
Pointer驱动的设计降级而不是断裂Gyre的倾斜和Impulse的磁铁需要触摸屏无法提供的指针位置,因此在移动设备上,卡片呈现静态,所有内容都保持可读和可点击Bascule故意将其翻转关闭到断点下方。
Gyre 还将键盘对焦与悬停分开处理,Tab 到一张卡片,你就可以在没有旋转的情况下获得升降和光泽。大多数倾斜效果都会跳过它,让键盘用户一无所有。
您实际上应该选择哪个 Elementor 图像框?
从您的项目数量开始,而不是从效果开始。
- 2到4个项目,每个项目都很重要: 夏至或边缘。
- 正好有三项服务: 立管、陀螺仪或开合器。
- 四项: 流明、级联、金杉、阈值或 Vellum。
- 六项相等: 孔径。
- 八个或更多: 如果是序列,则为楣条;如果是列表,则为花丝条。
- 高大的肖像图像: 栅栏。
- 相【互不相】配的照片: 折射。
- 每张卡片都以按钮结尾: 冲动。
Ren检查对你的对象的效果,律师事务所上的Kintsugi是个坏笑话,花园上的门槛几乎太整齐了,如果动议没有说出工作,就掉下来用Riser。
常见问题
Elementor 图像框小部件免费吗?
是的。图像框在免费的 Elementor 插件中提供,包含图像、标题、描述、链接、图像位置和基本悬停过滤器。此页面上的十六种设计有所不同:它们是 Master Addons Widget Builder 小部件,需要 Master Addons Pro 进行编辑,尽管下载本身是免费的。
我可以向 Elementor 图像框添加按钮吗?
Not in the stock widget,它链接了整个盒子,而不是给你一个单独的按钮,要获得一个真正的按钮,你要么把一个按钮小部件放在同一个容器内,要么使用一个设计,包括一个脉冲,光圈,级联和Gyre都用卡中的一个按钮来运送。
如何使 Elementor 图像框具有相同的高度?
Flex容器中放入盒子,将容器的Align Items设置为Stretch,然后将每个图像盒列设置为全高,不均匀的文本长度是通常的原因,此页面上的每个设计在自己的CSS中处理相同的高度,因此不会出现问题。
图像框和图像小部件有什么区别?
1个图像小部件放置1张图片,可选配标题和链接,图像框为1个区块的合成:图像、标题、描述和链接,以1个单元为样式和间隔,使用图像小部件为1张独立照片,使用图像框为1张网格中的卡片。
这些设计需要 Elementor Pro 吗?
No。Elementor free 就足够了,因为设计是用 Master Addons 而不是 Elementor Pro 小部件构建的。您需要的是 Master Addons Pro,因为每个设计都使用锁定在免费插件中的 Widget Builder 控件(中继器、排版、尺寸、边框、图标、选项卡)。
下一步去哪里
如果您想要更多可导入的设计 20 元素滑块模板 collection 是与此页面最近的兄弟姐妹,其中八个在免费插件上运行。具体来说,有关旋转木马,请参阅 元素旋转木马小部件、或者 实际上什么是免费的 如果许可证问题是您关心的问题。
如果博客是您列表中的下一个,则有 15 元素者博客模板 此外:列出您的帖子的页面有 10 种布局,单个帖子有 5 种布局,每种布局都有一个实时演示和 JSON 下载。
对于相关的卡牌图案: 图像热点 为注释单个大图片, 团队成员部分 为人而不是服务,并且 3D翻盖动画 如果巴斯库尔引起了你的注意。许可证详细信息请参见 定价页面并且完整的小部件列表位于 100多个最佳元素添加剂.
