几乎每个页面最终都需要一排小卡片,将图标与短标题和一行文本配对。功能、服务、步骤、联系方式,形状相同。 信息框 小部件在 Elementor 的主插件 builds that card。您选择一个图标或图像,键入标题和描述,从四个现成的布局中选择一个,并从Elementor面板中为每个部分进行样式设计。
它是您最终不断触及的小部件之一,因为图标、标题和句子涵盖了网站的如此多部分。下面是浏览每个设置,从样式预设到图标、标题和描述控件。
信息框小部件的作用 #
Info box 在标题和简短描述的顶部堆叠一个图标或图像,四个样式预设意味着相同的内容可以看起来像一张填充卡片、一张有边框的卡片或一个干净的中心块,并且可以并排排列几个以形成一个功能行。
Title可以任意链接,图标可以交换上传的图像,卡片可以携带自己的背景、边框和悬停动画,共有三个选项卡:图标的内容、标题和文本、颜色和间距的样式以及通常的Elementor选项的高级。
在开始之前 #
- 文字出版社 与 元素 已安装并处于活动状态。
- Elementor 的主插件 已安装并处于活动状态。插件新增?参见 安装指南.
- 心中的图标,或要上传的图像,以及标题和描述文本。
如何添加信息框小部件 #
在 Elementor 编辑器中,打开 元素 面板和搜索 信息框的, 或者滚动到主插件部分。拖到您的页面上。它加载了示例图标, “信息框标题,”和占位符描述, 所以你从工作卡开始, 而不是空白的。
设置内容 #
打开 内容 选项卡。 内容 部分保存卡片显示的所有内容,这是您大部分编辑发生的地方。
- 样式预设: pick变体一到四。每个都以不同的方式布局图标,标题和描述(下面将更多内容介绍)。
- 图像或图标: none、icon、image三路切换,选择图标使用图标库,或者图片上传自己的。
- 图标: icon 时,从字体真棒库中选择任何图标或上传 SVG。
- 标题: 标题文本,旁边有一个带有人工智能的写入选项。
- 标题 URL: 将标题转换为任何页面或外部 URL 的链接。
- 描述: 标题下的一两行文本,也用人工智能写。
在这些下你会发现一个 帮助文档 链接和a 包装链接 选项(专业版功能),使整个卡片可点击。
选择预设的样式 #
4个预设在不触及内容的情况下改变整个外观,因此在它们之间切换是找到适合该部分的布局的快速方法。
- 变体一: 中心卡片,图标、标题和描述堆叠在一起,通常位于填充的背景上。
- 变体二: 标题上方左对齐图标的边框卡片。
- 变体三: 将图标设置在标题上方的彩色方块中的卡片。
- 变体四: 图标位于圆形徽章内的居中布局。
使用图像而不是图标 #
如果照片或徽标比图标更适合,请设置 图像或图标 到 图像 器(media Library)中挑选一个文件,然后小部件在图标插槽中显示您的图像,这对于合作伙伴徽标、产品缩略图或插图功能卡都非常有效。将其设置回 没有 当您需要纯文本框时。
样式盒 #
的 风格 tab 分拆成 一般风格, 图标风格, 标题, 描述、和 图案 (一个 Pro 选项)。一般样式控制卡容器本身。
- 边框类型、宽度和颜色: 卡片周围的轮廓。
- 边界半径: 绕过角落。
- 填充和边缘: 盒子内部和周围的间距。
- 背景: 设置普通背景和悬停背景,无论是纯色还是图像。
- 悬停动画: bob 或 Grow 这样的内置运动效果,当有人悬停卡片时添加。
图标、标题和描述造型 #
的 图标风格 部分设置图标大小、颜色和背景,具有单独的正常状态和悬停状态以及对齐。
的 标题 並 描述 sections 处理文本的排版、颜色、对齐和间距,每个都有自己的 Normal 和 Hover 状态,因此卡片可以随着访客在上面移动而移动。
背景颜色和图像选项 #
回到一般风格 背景 控制需要任何一个坚实的 颜色 或者一个 图像。白色文字的有色背景,就像填好的“关于我们”卡一样,是使一个盒子在一排普通盒子中脱颖而出的简单方法。
页面上的结果 #
发布或预览,框中呈现您的图标、标题和描述。这是一排三个信息框,每个信息框都预设了不同的样式,这种布局适合功能或服务部分。
常见用例 #
- 特色亮点 在英雄下方的一排三四列中。
- 服务或产品 每个都有一个图标和一行摘要。
- 工作原理步骤 每步带有编号或主题图标。
- 联系方式 如电话、电子邮件和地址作为链接框。
- 关于或团队呼叫 使用填充背景预设脱颖而出。
使用信息框小部件的技巧 #
- 保持描述简短。 一两行读数最好,并保持一排牌均匀。
- 将图标大小匹配一行。 Icon Size 设置在每个盒子上,这样他们就排队了,这是通常在卡片不太匹配时会看不上的东西。
- 每行使用一个预设。 同一行中的混合预设往往看起来不均匀;当您想突出显示背景颜色时,请切换背景颜色。
- 链接标题或包装纸。 Title URL 將人們送到有用的地方,或者使用 Wrapper 連結讓整張卡片可點擊。
- 添加微妙的悬停动画。 悬停时的小 Bob 或 Grow 信号表明该卡是交互式的,不会妨碍。
常见问题 #
Master Addons 中的信息框小部件是什么?
Elementor 小部件,它将图标或图像、标题和简短描述组合成一张样式卡片,您将获得四个样式预设,并控制颜色、间距和悬停效果,因此您可以直接从面板构建功能行、服务列表和标注。
Info Box 有多少样式预设?
Four。Variation One 到 Four 各自以不同的方式排列图标、标题和描述,从填充的居中卡片到带有方形或圆形徽章中的图标的边框布局。您可以在它们之间从样式预设下拉切换,而无需重做您的内容。
我可以使用图像而不是图标吗?
是在内容选项卡中,将图像或图标设置为图像,然后从媒体库中选择一个文件,小部件显示您的图像代替图标,这对于徽标,产品镜头或插图卡片非常有效,仅文本框选择无。
我可以让信息框可点击吗?
Content标签页中的标题URL字段链接标题,要使整个卡片可点击,请使用包装链接选项,这是一个Pro功能,两者都让访问者点击该框即可到达另一个页面或部分。
我可以在信息框中添加悬停效果吗?
是的。一般风格有一个悬停动画下拉,具有像 Bob 和 Grow 这样的内置效果,图标、标题和描述部分在颜色和背景上都有自己的悬停状态。当有人移动时,它们会让卡片做出反应。
包裹起来 #
Info Box 小部件将图标、标题和句子变成一张干净的卡片,您可以在任何部分重复选择预设、选择图标或图像、添加您的文本和链接,然后对框进行样式以匹配您的页面相关布局工具,请参阅 翻转框小部件 和 团队成员小部件,浏览全文 主插件小部件和扩展并且检查 定价页面 对于每个计划包含的内容。
