玻璃态

Glassmorphism是磨砂玻璃外观:半透明的卡片,模糊了它后面任何东西,苹果和Windows跨界面的风格,在Elementor中手工构建它意味着自定义CSS,带有背景过滤器和一些浏览器怪癖 玻璃化效应 扩展于 Elementor 的主插件 将其变成任何元素的高级选项卡上的切换。

You switch on,设置模煳值和半透明底色,圆角,元素变成玻璃卡,这里是整个设置。

Glassmorphism 扩展的作用 #

扩展名添加了 a 玻璃态 部分到 高级 elementor每个元素的选项卡,从完整部分到单个小部件。启用它,元素会获得背景模糊,因此其背后的背景图像或内容会涂抹在磨砂玻璃中,而元素自己的文本保持清晰。

当元素位于视觉上繁忙的东西之上时,例如照片背景或渐变,外观效果最好。在纯白色部分上没有什么可模糊的,因此效果没有什么可展示的。

在开始之前 #

• 文字出版社 与 元素 已安装并处于活动状态。
• Elementor 的主插件 已安装并处于活动状态。插件新增?关注 安装指南 首先。
• Glassmorphism 是一个免费扩展,因此不需要 Pro 许可证。
• 放置在图像或彩色背景上的元素,因此模糊有一些东西可以处理。

如何启用 Glassmorphism 扩展 #

从您的 WordPress 仪表板,转到 主插件 并打开 扩展 选项卡。玻璃态位于 显示小部件 带有流行徽章的组,旁边是图案和 网格线。单击其切换使其变为紫色,然后点击 保存更改 在页面顶部等待绿色“设置保存成功”通知。

Elementor 编辑器中在哪里可以找到它 #

Elementor打开你的页面,选择你要变成玻璃的元素,在视频示例中它是坐在照片背景上的双标题小部件,转到 高级 tab,你就会找到 玻璃态 带有紫色 MA 徽章的部分,以及其他主插件扩展,例如显示条件和浮动效果。

解释了玻璃晶型设置 #

翻转 启用玻璃化 到是,并且控制出现。

• 模糊值: 元素涂抹背后的背景有多强烈,模糊适用于整个容器,甚至像 2 这样的小值在照片上读得很清楚。
• 背景颜色: 玻璃的色调。面板尖端清楚地表明:使用 RGBA 颜色进行最佳控制。纯 HEX 颜色会自动以 30% 的不透明度转换为 RGBA,因此玻璃永远不会变成固体。
• 边界半径: 每侧或相连的玻璃卡的角落都四舍五入。
• 边框宽度: 添加一个轮廓,其读数类似于浅色玻璃板的边缘。
• 修复溢出(如果模糊不起作用): a 救援开关。有些布局携带溢出:隐藏,它会阻止为模糊提供动力的背景过滤器。如果您启用所有功能并且仍然看不到任何效果,请打开此功能。

选择带有 RGBA 颜色的玻璃色调 #

单击旁边的自定义样本 背景颜色 er选择颜色,然后向下拉alpha滑块,在演示中值是一个半透明的红色(#dc4c4c8c),它使卡片着色,而后面照片中的座位通过模糊保持可见。

绕过角落,营救失踪的模糊物 #

设置一个 边界半径 to软化卡片。几个像素就足够玻璃看了。而且如果模煳不肯显示, 翻转 修复溢出 到是:它消除了在一些容器中阻止背景过滤器的溢出:隐藏规则。

完成的效果 #

这是前端的结果:一张带有红色调的圆形玻璃卡片,后面照片模糊,顶部标题和文字清晰。

玻璃化成型效果良好 #

• 英雄叠加。 全宽照片顶部的标题和 CTA 玻璃面板。
• 定价和功能卡。 渐变截面背景上的玻璃卡。
• 感言块。 浮在图像上而不隐藏它的引言。
• 粘性标题。 当内容在其下方滚动时,微妙的模糊使菜单保持可读性。
• 登录或注册框。 品牌形象上的经典磨砂面板。

常见问题 #

包裹起来 #

Glassmorphism Effects 扩展将一个小提琴 CSS 技巧变成高级选项卡上的四个控件:启用、模糊、着色和半径。将小部件放在照片上,保持背景颜色半透明,如果模糊曾经隐藏,则触及修复溢出。对于更多类似这样的编辑器升级,请浏览 主插件小部件和扩展或者从中获取现成的设计 模板套件 并将玻璃添加到顶部。