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