2 分钟内即可导入 10 个免费元素英雄部分模板

Elementor hero大部分免费版块模板都有同样的问题:你导入一个JSON文件,得到一个冻结的布局,然后花一个小时点击各个标题小部件,图像小部件和间隔符,试图让它成为你的重音颜色?那就是十二个单独的样式面板。

在您滚动之前: 这个系列刚刚增长到11个。最新的, 松散的结局、坐在#11的gpu粒子英雄,是我们拍了youtube视频后建的,所以你不会在那里找到它,不要跳过。 1000个粒子围绕着你的标题,躲避访客的光标,这不是你在任何其他Elementor库中看到的东西,下面有一个动画预览,这样你就可以观看它的移动。

10个英雄段我们建的各不相同,每一个都导入为a 单个小部件 通过 主插件小部件生成器。当你把它拖到Elementor中时,每个标题、段落、按钮、链接和图像都是内容选项卡中的一个标记字段,整个配色方案都位于样式选项卡中,作为3到6个颜色选择器。更改一个“着色”和按钮,悬停状态,发光,并一起下划线所有更新,因为CSS从你选择的基色中导出每个辅助色调。

10个都可以在这个页面上免费下载,每个zip包含小部件文件,你在屏幕截图中看到的演示图像(作为上传就绪的PNG加上原始SVG),以及一个README,它将每个图像映射到其精确的字段,动画(视差山,自绘图表,轨道成分徽章)自动出现,并且每个都尊重访问者的缩减运动设置,因此您不会随眼糖一起运输可访问性问题。

Screenshoots 并没有说明动画实际的样子,我为你制作了一个你应该观看的视频,这样你就可以对动画有一个正确的了解,以及你下载英雄部分模板后会得到什么。

And a hero 只是第一个屏幕,游客在它之后滚动到的所有东西,以及解释的功能网格,说服的感言,关闭的定价表,杀死最后一个反对意见的常见问题解答,仍然需要构建,我们把所有这些都打包成一个配套的集合 30多个免费的元素单元模板的,构建了同样基于小部件的方式:在这里选择一个英雄,从那里堆叠页面的其余部分,一个完整的着陆页在一个下午而不是一周内聚集在一起。

下面您将找到所有 10 种设计,其中包含真实的屏幕截图、每种设计实际适合的诚实注释,然后是 逐步导入指南 带有精确工作流程的屏幕截图。

有些英雄的阅读效果比静态照片更好,如果这就是你要去的方向 20 元素轮播设计 是设置为这个覆盖流的配套件、图像手风琴、窗帘擦拭、轨道、拖动滚动条和名为 Plinth 的全流血英雄滑块,该滑块带有自己的标题面板和号召性用语。

它们的导入方式与下面的英雄一模一样:一个 JSON 文件、Widget Builder,然后是一个带有标记字段的小部件。二十个运行中的八个在免费插件上,十二个需要 Pro,这是您在选择之前值得了解的一个区别。每个设计都有一个实时演示,因此您可以观看十秒的动作风格,而不是从屏幕截图中猜测。

这个集合中有什么

• 1。脉板— SaaS/分析产品
• 2。阿尔彭鲁特—旅行&冒险
• 3。余烬&橡树—咖啡店/餐厅
• 4。诺尔工作室—时尚&电子商务
• 5。另类工作室—创意代理
• 6。锻造田径—健身房&健身
• 7。摇摆的心灵—儿童应用程序&教育
• 8。工作室子午线—建筑&室内
• 9。低音—活动&音乐
• 10。马讷—美容&护肤
• 11。Loose Ends适用于需要下巴掉落的作品集、工作室和启动页面
• 如何将英雄部分导入 Elementor(一步一步)
• 常见问题解答

为什么这些不是普通的章节模板

Showcase 之前快速区分,因为它会改变您将如何使用它们。

Elementor普通版块模板是保存的库存小部件排列,看起来已经完成了,但结构上是几十个松散的部分,这10个英雄是 自定义小部件 widget 构建器构建的: 封装在元素器控件后面的 HTML、CSS 和 JavaScript 三个实际后果:

• 编辑更快。 Music festival英雄有24个字段(日期、位置、三个有自己链接的阵容行、两个按钮、颜色),你在一个面板中编辑它们,而不是通过一棵嵌套的容器进行狩猎。
• 动画幸存下来。 JavaScript 导入小部件内部:磁性按钮、计数统计、鼠标视差。没有额外的插件,除了 Google Fonts 之外没有 CDN 调用,每个小部件自己加载一次。
• 没有任何泄漏。 Stylesheet都以自己的包装器类为范围,每个动画名称都以前缀,所以同一页的两个英雄不会互相争斗,也不会争斗你主题的风格,我们从中艰难地了解到其中一个。

你需要 主插件插件 PRO与Elementor一起安装。Widget Builder及其导入功能包含在免费版本中,这就是30,000多个站点已经运行它的方式。

1、SaaS、分析产品用脉板—

经典的分裂英雄,左侧复制,右侧产品,但有三个细节让游客停下来收入图表 自己画画 on load with a pulse dot traveling along the line。two stat cards float over dashboard on a slow bob。and the all visual tilts a few degrees to your cursor, which make a flat mockup read as a object。

下面的防社交行最多算您的号码(默认:4,700 个团队)。您在面板中输入普通号码,动画处理其余的。这是要选择的布局,如果您的产品有值得显示的屏幕:分析工具、CRM、仪表板、预订系统。如果您的产品在屏幕截图中演示效果不佳,请查看 Offbeat(#5),因为此布局在右侧图像上存活或消亡。

您可以编辑: 4部分标题(下划线的重音词是自己的字段),徽章文本,段落,2个按钮,带有完整的链接控件,计数号码,证明文本,3个图像,6种颜色。

2、旅行、旅游、户外品牌 阿尔彭鲁特—

3个独立的图像层构建的全屏山地全景图移动鼠标,层以不同的速度移动那是真正的深度,而不是顶部有文字的平面照片云在55秒和90秒的循环中漂移,右侧的垂直高度刻度计数从0到2,847 m作为页面加载,甚至还有一个小小的徒步旅行者,前脊上有一个闪烁的前照灯,没有人需要徒步旅行者,每个人都记得徒步旅行者。

Yin为景色来自三个影像场,可以把山换成自己的分层艺术品(沙丘、海岸线、城市天际线),保Cheng视差,事实行(27条路线/8个徒步者max/19年)是六个可编辑的场,Zhe是这位英雄赢得信任的地方:具体数字而不是形容词最适合:徒步公司、Tou线运营商、国家公园遗址、任何销售一个地方而不是一个产品的品牌。

您可以编辑: 2行标题,眉毛,段落,2个按钮 + 链接,海拔高度数字和标签,3个事实对,4个风景图像,4种颜色(整个天空梯度从一种基色重新着色)。

3。咖啡店、咖啡馆、餐厅用 余烬&橡树—

Dark espresso背景,衬线标题带有斜体琥珀色重音词,以及标志性作品:一圈文字阅读“小批量 · 每周四烘焙 · SINGLE ORIGIN”,它围绕自上而下的拿铁照片缓慢旋转,同时蒸汽从杯子中升起。一个咖啡袋倾斜到角落,盘旋时伸直。底部,一个起源名称大帐篷(Yirgacheffe,Huila,Sidra...)循环滚动,盘旋暂停。

Ring文字是一个可编辑的字段,所以面包店写着“SOURDOUGH · BAKED AT 5AM · NO SHORTCUTS”和整个个性转移,大帐篷也是如此:一个字段,内部打印两次,因此循环永远不会显示接缝,适用于任何以工艺为间距的食品企业—烘焙店,面包店,啤酒厂,农场到餐桌餐厅。

您可以编辑: 3部分标题带重音词,段落,价格注释,2个按钮 + 链接,环形文字,大帐篷文字,2个图像,5种颜色。

4。时尚标签和优质电子商务的诺尔工作室—

套装中最安静的设计,也是最具编辑性的。两个超大字(默认情况下为 QUIET/TAILORING)横跨一个拱形肖像框架,每个字在负载时从剪裁边缘擦拭。将肖像悬停并交叉淡入淡出,以获得第二眼,而下面的标题从 “01 / 02 — 延绳涂装”切换到 “02 / 02 — 垂坠裙”。那个两像悬停交换是微型中的整个小部件:克制,但还活着。

理(帆布、墨水、圣人腔)只有三种颜色,因为设计的力量是排版和负空间而不是调色板,如果你的品牌照片拍得好,你希望网站感觉像一本lookbook,这就是时尚、珠宝、陶瓷、家具,如果你需要塞在折叠上方五个价值主张,它会与你战斗,它应该。

您可以编辑: 两个标题词、垂直季节标签、段落、按钮+链接、悬停提示、2 个外观图像和 2 个标题、页脚条、3 种颜色。

5、另类工作室—创意机构、工作室

Off-white上的钴、珊瑚、柠檬—包豪斯海报能量 标题大写喊话加亮重音词加载半秒后获得黄色滑动下划线 在它下面,三个投资组合瓷砖像桌子上的印刷品一样微微旋转;每个都以3D方式在悬停时向光标伸直、提升和倾斜。一张“BOOKING FOR Q4”贴纸在拼贴画上方懒洋洋地旋转。

循环号召式行动是人们玩弄的那块,是 磁:它跟随光标在其半径内,当你离开时弹回。每个图块都有自己的链接字段,因此拼贴画兼作迷你作品集,其中包含三个案例研究,可直接从英雄处点击。对于代理机构、设计师、摄影师、任何有作品的人 於 的球场。

您可以编辑: 3服务标签,踢脚线,5部分标题(重音词分开),段落,磁性按钮 + 链接,3个带3个链接的瓷砖,贴纸文字,客户端大帐篷,5种颜色。

6、锻造田径—健身房健身品牌

木炭和伏特绿,浓缩大写,以及标题 猛击 in: 每行以斜缩和比例的按扣着陆,而不是礼貌的淡入淡出 第二行勾勒而不是填充,第三行采用伏特颜色 在一切事物背后,一个巨大的鬼字(FORGE)漂移在你的卷轴上 运动员图像坐在一个有角度的平行四边形框架中,伏特斜线切割布局对角线。

Stats沿着底部往上数:14个平台,31个班级,每个教练最多24名成员 注意最后一个数字是做什么的 “每个教练的成员,max”是一个承诺,而不是吹嘘,是那种线条填充介绍会话 在一个领域交换你的健身房名称的鬼字,为力量健身房,CrossFit盒子,武术工作室,以及品牌是强度的教练而建。

您可以编辑: 3行标题 眉毛段落 鬼字竖标 2个按钮 + 链接 3个统计对 运动员形象 4种颜色。

7。摇摆的心灵—对于儿童应用程序,学校,和教育

Candy pastels,圆润型,还有三个斑点吉祥物:一个看书,一个拿铅笔,一个挥舞星星棒,弹簧弹进来,轻轻地摆动,在光标移动时避开它,星星在背景上闪烁,黄色的波浪在倾斜的重音词下吸引自己,主按钮按下时像果冻一样向下挤压,白色的波浪关闭了部分,因此它会流入接下来发生的任何东西。

居中布局让家长(实际买家)走在一条清晰的道路上:年龄范围徽章、承诺、回答“这个屏幕时间我后悔了吗?”的一段话、信任线与App Store评级 吉祥物是三个图像字段。交换自己的角色,弹跳、阴影和光标害羞的行为自动应用。用于学习应用程序、日托、儿童俱乐部、儿科诊所和玩具品牌。

您可以编辑: 标题带有倾斜的重音单词、徽章、段落、2 个按钮 + 链接、信任线、3 个吉祥物图像、6 种颜色。

8、工作室子午线—为建筑师,室内设计师,作品集

Swiss grid纪律:一个元栏(实践,创立,现场项目),一个薄的300重量标题,一个砖下划线的字,还有一张大项目照片,用擦拭布显示一个纸色的窗帘滑落,图像从一个轻微的缩放到整整一秒钟就沉淀下来,人们给我们发电子邮件的细节是侧边栏中的平面图,其中 自己画画 —先墙壁,然后门摆动,然后房间标签褪去,是SVG动画,发货在演示图像内部,不涉及插件。

25个可编辑字段,使这个成为十个中最富数据英雄 每一个元标签,两个标题,甚至底部规则中的坐标 仅三种颜色,而且这是刻意的:石墨,纸张和砖块是一个系统,系统是这个受众所尊重的建筑公司,室内工作室,结构工程师,以及任何约束信号能力的投资组合。

您可以编辑: 5 部分标题,段落,按钮 + 带 URL 的文本链接,3 个元对,照片 + 标题,平面图 + 标题,坐标规则,3 种颜色。

9、节日、音乐会、活动页面低音—

这里最响亮的设计,它赢得了它。一个巨大的字标将中间的单词分成橙色到紫色的渐变,一个发光的球体漂移到内容后面并远离光标,并沿着底部运行一个全宽 均衡器:数十个小节,每个小节都按照自己的节奏进行动画处理,因此条带永远不会明显循环。小节由小部件自己的脚本生成,并从您的 Style 选项卡颜色中拉出渐变,因此重新着色节日会重新着色声音。

3个阵容行(FRI/SAT/SUN),每个行都带有自己的标签、表演列表和链接,因此您可以将每一天发送到自己的日程安排页面,渐变是Style选项卡中的三个单独的颜色停止,移位它们和字标、按钮、发光和均衡器都跟随在节日、场地、俱乐部之夜、带有标题的会议和专辑发布会上。

您可以编辑: 分割字标、日期、位置、段落、3 个阵容行,包含 3 个链接、2 个按钮 + 链接、球体图像、5 种颜色,包括所有 3 个渐变停止。

10、马讷—护肤、美容、养生品牌

雾蒙蒙的薰衣草和桃子朦胧模糊并漂移在衬线标题后面,其斜体线“夜班。”得到向外绽放的柔和渐变下划线。产品瓶子轻轻地漂浮在虚线环的中心,并带有三个成分徽章(2%视网膜、5%燕麦发酵液、0%香味) 轨道 它以 26 秒的循环方式反向旋转,因此它们始终保持直立。

那些徽章是转换游戏百分比声称是护肤品买家扫描的东西,在这里他们字面上环绕着产品所有六个徽章值和标签都是纯文本字段,下面的声明行(皮肤科医生测试 · 无香料 · 可回收玻璃)完善了信任故事对于护肤品,补充剂,蜡烛,护发—任何产品,其中成分列表是论点。

您可以编辑: 2部头条眉毛段落2个按钮 + 链接3个索赔3个轨道徽章对瓶身图像4种颜色。

11。Loose Ends适用于需要下巴掉落的作品集、工作室和启动页面

这是新的,也是我们迄今为止在 Widget Builder 中推送的最雄心勃勃的事情:一个位于漩涡眼中的全屏标题 1000个粒子,实时在访客的GPU上模拟。移动鼠标和光标周围的蜂群部分,然后弹回。相机也漂移了一点,这使得字段读取为空间而不是背景视频。标题用字符加载时扰乱自身解码,主按钮携带缓慢的光扫掠,薄膜颗粒层使黑暗背景免受束缚。

粒子不是一个固定的外观。样式选项卡中的下拉会在两者之间切换字段 股线 (彩色漩涡丝), 雪 (慢白漂), 星星 (近乎静止的星场),以及 宇宙 (长深空 wisps)。四个滑块控制密度(100到2000个粒子),大小,深度,以及群组对鼠标的反应有多大。还有一个对齐控制,可以将整个内容堆栈向左移动,向中移动,或向右移动,因此同一个小部件作为编辑左对齐英雄或居中的飞溅页面。一个诚实的注释:3D引擎从CDN加载,第一次访问后缓存约1.2 MB,并在Chrome和Edge的WebGPU上运行,其他地方都有WebGL2后备。如果该请求失败,英雄渲染为正常样式部分,没有任何中断。也没有图像可以上传;整个场景生成。

您可以编辑: 药丸文本、眉毛、标题、标语、2 个带有完整链接控制的按钮、滚动提示、3 个底栏文本、内容对齐(左/中/右)、粒子类型(股/雪/星/宇宙)、密度、尺寸、深度和鼠标反应滑块,5 种颜色。

Elementor中导入英雄部分模板的方法(一步一步)

每个小部件整个过程大约需要两分钟。您需要 WordPress 元素 和 主插件 PRO插件活动。以下是确切的工作流程,截图来自音乐节英雄的真实导入。

1步:解压下载

双击 zip(此处, music-festival-hero.zip)。里面会发现三样东西:小部件文件(widget-music-festival.json),a demo-images 带有上传就绪 PNG 的文件夹,以及 README.txt that告诉你哪个图像属于哪个字段,还有一个 svg-originals 文件夹—常见问题解答中的更多信息。

第 2 步:将 JSON 导入到 Widget Builder 中

在您的 WordPress 管理员中,转到 主插件 → 小部件生成器 然后单击 导入小部件.拖动 .json file 进入对话框,或者点击浏览文件,只有 JSON 才到这里,图片来得晚,通过普通媒体库。

3步:检查小部件并保存

Widget 在构建器中打开,所有内容都已经有线:左侧的内容部分,选项卡后面的 HTML/CSS/JS,以及一个文档侧边栏,列出了每个字段令牌,您无需触摸任何一个,只需点击即可 保存设置。如果您很好奇字段如何连接到代码, 小部件生成器设置指南 解释令牌系统。

4步:拖入你的页面

Elementor打开任何页面, 你的新小部件出现在面板下面 最喜欢的;不发现就搜其名,拖入容器中,给您一个提示:设置容器的 内容宽度到全宽度 因此,像节日和旅行英雄这样的边缘设计实际上可以到达边缘。

5步:编辑内容和链接

单击小部件和内容选项卡列出每个可编辑的部件,按照设计分组的方式分组:内容区域、阵容行、按钮、图像。键入任何文本并实时预览更新。每个按钮和链接行都有一个适当的元素链接控制粘贴您的 URL,然后按下齿轮切换"在新的窗口中打开"和"“nofollow"。

6步:上传演示图像

在"图像"部分,单击每个字段并从中上传匹配文件 demo-images folder。readme映射他们如果一个小部件有几个,演示pngs以2倍分辨率导出,因此它们在视网膜屏幕上保持清晰随时在自己的照片中交换;该字段是一个标准的wordpress媒体选择器。然后 发表.完成了。

重新设计:打开 样式选项卡。每个英雄都将其完整的调色板暴露为少数颜色控制,每个派生的色调(悬停状态,发光,边框,渐变)都从这些重新计算。你不能对这些设计进行半重新着色,这正是重点。

常见问题解答

10个英雄部分全部免费 个人及商业项目由Master Addons团队在Elementor上构建和测试与Master Addons v3。x。问题或小部件请求?在评论中告诉我们。收集增长基于人们的要求。