金博宝188官网网址

课程及扩展包

了解如何一个简单的基石元素可以增压您的网站建设的力量。

(有趣的事实:这个变化的背景是我们的新滑块在行动的一个例子)!

我们的新滑块元素几乎没有发生……

事实上,如果不是因为一个叫德文·埃尔斯顿的人它就永远见不到天日。

我听到你在问谁是戴文·埃尔斯顿?现在他来到了2018年。

德温

除了是Themeco的长期客户和全能的好人,Devin还是一个开发者中的开发者。他曾与Hulu、CBS和目前的Beachbody等一些大品牌合作。

他拥有独特而罕见的能力,可以同时谈论技术、争论代码和战略思考。

“你知道你需要什么,凯尔。”他说。“你需要滑块元素。”

现在让我暂停一下,然后说,正如你们所预料的,我们得到一个很多对特性的请求。它与领土,它帮助我们保持基石在市场上最好的网站建设者!但他刚说完这句话,我就有了答案。

“是的,我同意,伙计……这就是为什么我们。已经有滑块元素。”

(凯尔1,德文0)。

“不,我说的不是旧元素……它确实很棒,但你真正需要的是更强大的东西。”

我又一次准备好了答案。

“那我们包含的第三方插件呢?”你可以用它们做任何你想做的事。”

(凯尔2,德文0)。

这时德文分享了他对更强大的,本地的滑块元素。它可以把我们已经构建的简单优雅的东西,赋予它更多的通用性,更多的可定制性,更多的应用。

不用说,在我们谈话结束时,游戏结束了,德文赢了。


几年后,我们的团队正在讨论我们的开发路线图。我一时兴起说:“滑动元素怎么样?”

在这一点上,我们的团队正在经历一个相当独特和非正统的过程。

我们不只是向前推进这个想法——就好像它会发生一样——而是先试着在它上面戳洞。

  • “是这样的不会工作……”
  • “这就是它分解的地方……”
  • “这就是为什么没人在乎这个……”
  • 这就是为什么没有人应该在意那个……”

但当我们开始搭建新的滑块元素的想法时,几乎是完全一样的相反发生了。

我们很喜欢!我们喜欢它所代表的东西,更重要的是我们喜欢它的未来。

你看,大多数人认为“滑块”是90年代末早期的网络怪物。它们通常是缓慢且随机的,并且几乎不能提供任何可识别的粘性价值。说实话,大部分都是眼中钉。

人们通常用图片或朗朗上口的口号填满它们,然后把它们贴在自己网站的顶部——最重要的房地产——甚至不加思索。

但它会滑动吗?
资料来源:华纳兄弟

更糟糕的是,它们也可能成为性能消耗者。这不仅会让你的访问者感到沮丧(谁喜欢坐着等待一个毫无意义的滑动条加载?),还会对你的搜索排名产生负面影响。

我们知道谷歌追踪性能、用户粘性和回弹率是3个重要指标。你最不想做的就是给他们更多的理由给你排名。

金博宝188官网网址另一方面,现代滑块更多功能。要微妙得多。更有效。

只是这是一个大问题。

在市场上的任何网站建设者中,还没有人真正解决这个问题。至少不是我们的愿景。

选项要么太窄(平庸),要么你必须使用一个复杂的插件,这就是过度杀戮的定义。

我们把它看作独特的机会。

所以我们开始重新定义什么是滑块可以,然后为我们的基石网站构建器创建一个原生元素。

对于那些可能不知道的人来说,Cornerstone是当今市场上最流行的两个WordPress主题——x和Pro背后的网站构建商。

随着视野逐渐清晰,我们意识到滑块可以用于这么多不同的东西。如果使用正确,它实际上可以变成the秘密武器在任何网站建设者的工具包中。

金博宝188官网网址可以用来做……

  • 定价表
  • 时间线
  • 产品的比较
  • 甚至是像netflix那样的内容呈现
  • 还有很多很多

所以再快进几年,请敲起鼓来,我们成功了很荣幸地宣布我们的新的滑块元素是活的!

从多年前的一次对话中开始的愿景现在成为了现实,我们不能更兴奋了(Devin也是如此……稍后再详细介绍)。

我们把一切我们知道现代滑块金博宝188官网网址应该为我们的客户建造和开发世界级的元素。

这是一个不可思议的工具,可以让你本机构建了一些绝对出色的网络体验,而元素就是免费为所有X和专业客户!

事实上,在发布几小时后,这些只是我们收到的评论(ps .你看到下面的滑块是用新的滑块元素建造的)。

“你滑球的深度很大。我喜欢!这可能是最好的一个。我们都知道滑块可能很糟糕,但如果使用得当,它们也可能是无价的,特别是在移动设备上。”
@Misho
“再一次出色的工作,多么棒的新元素,如此灵活!”
@JvP
“太好吃了!”已经做了几个环形使者和博客旋转木马。强大的工具,但易于使用。”
@RubberDuckers
“Element看起来很棒,伙计们,做得好@rohmann和其他团队成员!”
@sam_futr
“嘿,这真是太甜蜜了!
谢谢大家❤️”
@conorseed
“滑块太棒了!!”谢谢你建了这么好的附加设施。”
@draper3000
“这真是太好了!”我们可以用它做很多事情。”
@spedney

    但我们不想止步于此。元素的内涵远比我们看到的要丰富得多。

    是的,您可以使用它来做一些简单的事情,比如奖状或图片库——或者任何东西真的,这就是元素的力量。

    但如果你能从Themeco首席开发者Kory Wakefield的肩膀上看到15个不同的现实生活例子呢?

    如果,除了监视他,我们给了你吃了15块不可思议的滑块?像定价表,时间表,标题,和更多!

    滑块是专业制作和转换优化-准备立即使用或使用作为完美的起点- 100小时的头开始!

    这是完全你得到了什么金博宝188官网网址现代的滑块,我们邀请你们看看这门课程和扩展包中包含的所有内容。

    首先,让我们看看您将收到15个定制滑块。


    定价滑块

    特色您的价格信息在圆滑和时尚的方式。自定义导航和平滑过渡——这是一个做得很好的定价表。在这个例子中,你可以滑动或者使用触控板!

    起动器

    20美元

    /莫

    完美的爱好者或bootstrapping一个项目。

    • 1例

    • 达25000人次

    • 10gb存储空间

    • 免费SSL和CDN

    选择

    增长

    60美元

    /莫

    那些发现自己在帮助一两个朋友的人。

    • 3个实例

    • 达50000人次

    • 20gb存储空间

    • 免费SSL和CDN

    选择

    150美元

    /莫

    生意很兴隆,你是镇上的话题人物。

    • 5个实例

    • 达100000人次

    • 30gb存储空间

    • 免费SSL和CDN

    选择

    团队

    400美元

    /莫

    现在你有员工和医疗保险需要资助。

    • 10个实例

    • 达250000人次

    • 40gb存储

    • 免费SSL和CDN

    选择

    组织

    800美元

    /莫

    为那些有高级需求和不断增加的手术的人。

    • 20个实例

    • 达400000人次

    • 50gb存储空间

    • 免费SSL和CDN

    • 优先支持

    选择

    企业

    1600美元

    /莫

    如果您可以梦想它,我们的解决方案架构师可以构建它。

    • 60实例

    • 达1000000人次

    • 100gb存储空间

    • 免费SSL和CDN

    • 优先支持

    选择

    精英

    3200美元

    /莫

    有了这么多钱,我们很乐意做这项工作。

    • 150个实例

    • 达3000000人次

    • 250gb存储空间

    • 免费SSL和CDN

    • 优先支持

    • 我们基本上只是做你的工作

    选择

    全屏滑块

    谁不喜欢时不时的漂亮的全屏滑动呢?这种戏剧性的布局很容易通过Cornerstone的Elements实现。滑动功能已被禁用,以避免“诱捕”用户(这一点也不有趣)。

    这是一个全屏滑块。

    内容以两个轴为中心。

    你想放什么就放什么。

    选择权在你。

      时间滑块

      一个独特的采取流行的布局,这个滑块利用元素条件内置到基石输出可变内容。滑动已被禁用,以展示“点击通过”的过程。


      大毒蛇协议

      Ouroboros权益证明共识协议是Cardano网络的核心机制,它定义了节点就账本状态达成共识的方式。

      Ada Cryptocurrency

      ada基于Ouroboros股权证明共识协议,是最受尊敬的加密货币之一,也是市值最高的加密货币之一。

      卡达诺块资源管理器

      Cardano块资源管理器允许用户查看有关最新事务的信息。可以对Cardano网络上的地址、交易、时间和槽进行搜索。

      代达罗斯的钱包

      Daedalus是IOHK针对Cardano和ada加密货币的官方桌面钱包。这是一个功能齐全的桌面钱包,支持Windows、Mac和Linux。

      纸钱包

      在Cardano中引入纸质钱包为ada提供了安全的离线“冷”存储选项,使得离线存储和接收ada变得容易。

      更快的区块链同步

      Cardano SL 1.3包括加速区块链同步的增强功能。测试表明,根据网络环境的不同,钱包同步速度要快1.5到4倍。

      优化块存储

      更高效的存储提高了使用本地存储区块链数据的操作的性能,特别是钱包恢复和区块链同步。

      卡达诺·拜伦·特斯内特

      Cardano测试网是一个免费使用的区块链,专为测试目的而设计。它运行的代码是最新的Byron发布版本。

      集成Nix工具

      将Nix工具引入IOHK的内部开发流程,使DevOps团队能够创建更健壮的部署管道。

      提交可视化

      Medusa是一个3D图形工具,它通过绘制对GitHub文件的更改来显示Cardano软件开发的历史,允许用户探索代码库中的活动。

        页面产品滑块

        分页产品滑块具有一个有趣的,De stijl灵感的美学,把您的内容在聚光灯下而不分心。

          旋转手机

          旋转手机

          53美元
          .09点
          让我们像1929年一样打电话给对方。亚历山大·格雷厄姆·贝尔将很高兴在您的家中看到这些精美的标本。
          Swingline订书机

          Swingline订书机

          199美元
          获得
          别担心,我们不是从弥尔顿那里得到的,所以这座建筑不应该最终变成高耸的地狱。
          Game Boy(绿色)

          Game Boy(绿色)

          89美元
          获得
          完美的伴侣为您寻求成为Pokémon大师。如果你是鲍尔巴龙的初学者,这是为你准备的。
          Game Boy游戏机(紫色)

          Game Boy游戏机(紫色)

          89美元
          获得
          也许你不喜欢绿色?如果是这样的话,这个紫色的变体可能是你的门票。包括林克的觉醒。

          英雄提示滑块

          这种布局包括一个独特的幻灯片导航,感觉它是烘焙到内容。点击“更多课程”亲自查看!对于这个特定的设计模式,已经有意禁用了滑动操作。

          让你的事业更上一层楼

          我们是一家多学科的创意咨询公司,专注于数据挖掘实时社交指标在区块链技术中的应用。
          • 经营8年
          • 挖掘了728 TB的数据
          • 季度利润高达10亿美元
          • 购买4k NFTs
          从今天开始
          更多的课程
          英雄内容图片

          让你的利润增加3,267%

          注册我们的课程,并利用我们的专有方法,这是100%保证,使您的利润进入平流层。
          • 817小时的内容
          • 49个课程模块
          • 23位专家参与
          • 今天就获得认证
          从今天开始
          更多的课程
          英雄内容图片

          标志旋转滑块

          基石的滑块可以容纳可变宽度的内容。注意这些标识是如何总是在每个自动播放间隔的中心,无论它们的尺寸(滑动禁用)。

          堆叠证明滑块

          创建人造垂直滚动区域与点击配对堆叠滑块与基石的滚动效果动画库。

          • Kari拉斯穆森

            Kari拉斯穆森

            谷歌
            有时候,一件产品进入你的生活,让你怀疑没有它你会怎样。对我来说,这就是那个乘积。
          • Azul鲍德温

            Azul鲍德温

            脸谱网
            我不敢相信我有多爱这东西。它绝对让我的生活变得更好。
          • 薇薇安Kiser

            薇薇安Kiser

            Spotify
            几个月来,我从朋友那里听说了这个东西,我最终决定我需要它。我没有失望!
          • Jordy尤班克斯

            Jordy尤班克斯

            迪斯尼
            当你发现这么好的东西,你必须让所有人都知道。
          • Taelynn索普

            Taelynn索普

            苹果
            如果这个东西在我的工作流程中每节省一个小时,我就能得到一枚五分镍币,那我就需要一个硬币压路机了!

          透视旋转轮滑块

          在底层,所有的幻灯片都具有自定义属性,可以用来创建独特的转换,比如这个透视图覆盖流效果。由于这些更复杂的转换,已经禁用了滑动。

          图像画廊旋转木马滑块

          一个漂亮简单的图库,以您的内容为特色,如果需要,还包括可选的描述,这将在导航中显示。

          • 画廊的形象
          • 画廊的形象
            这是一个可选的描述,可以放在任何图像上。
          • 画廊的形象
          • 画廊的形象
          • 画廊的形象
            这是另一个可选的描述,可以放置在任何图像上。
          • 画廊的形象
          • 画廊的形象

            标准证明旋转盘滑块

            幻灯片可以利用强大的过滤器和转换效果直接在浏览器中设计“进”和“出”外观。

            • 薇薇安Kiser
              几个月来,我从朋友那里听说了这个东西,我最终决定我需要它。我没有失望!
              薇薇安Kiser
              Spotify创意总监
            • Kari拉斯穆森
              有时候,一件产品进入你的生活,让你怀疑没有它你会怎样。对我来说,这就是那个乘积。
              Kari拉斯穆森
              谷歌的首席设计官
            • Azul鲍德温
              我不敢相信我有多爱这东西。它绝对让我的生活变得更好。
              Azul鲍德温
              Facebook的高级UX架构师
            • Jordy尤班克斯
              当你发现这么好的东西,你必须让所有人都知道。
              Jordy尤班克斯
              迪士尼的想象师
            • Taelynn索普
              如果这个东西在我的工作流程中每节省一个小时我就能得到5美分,我就会有很多5美分,甚至需要一个硬币压路机!
              Taelynn索普
              苹果UI/UX研究

              自动播放进度滑块

              使用基石的滑块API提供的CSS自定义属性轻松创建独特的UI元素。

              幻灯片标题

              这是一个简短的文字介绍的图像所显示的内容。保持简单是有效的。

              了解更多

              幻灯片标题

              另一个

              在这里写一些吸引人的东西,激发用户的兴趣。还是那句话,简短总是好的。

              了解更多

              另一个

              还有另一个

              只要你想,我们可以让这些内容一直播放下去。用你拥有的任何内容填充滑块。

              了解更多

              还有另一个

              人们旋转滑梯

              这个滑块的特点是我们的字幕自动播放选项,它不断地以线性的方式进行,以创建一个迷人的采取,否则“静态”的一块内容(滑动禁用)。

              2022系列

              商店现在
              模型
              模型
              模型
              模型
              模型

              接下来,让我们来看看课程。除了这些漂亮的滑块,你还得到专家培训来自Themeco首席开发者Kory Wakefield。

              Kory构建了X的第一个版本,是当今WordPress中最有才华的前端开发人员之一。

              当他带你走的时候,从他的肩膀上看过去循序渐进的通过每个滑块的设置和思考过程。只需要一个样本你将学到的东西。

              • 截图

                视频1:定价滑块

                21分钟

                了解如何使用新的滑块元素建立美丽的定价部分。你会学到……

                1. 一个整洁的技巧,自动调整所有的字体大小,填充和定位与点击一个按钮。
                2. 一个简单的变换如何使滚动箭头垂直居中…以正确的方式。
                3. 如何让你的滑块“听”你是在链的开始还是结束。这是一个超级高端的抛光项目,将使你的最终设计完全不同。
                4. 最好的滚动效果,给你的导航项目微妙的弹出和动画。
                5. 幻灯片平衡控制如何提供完美的过渡动画滚动通过不同的价格水平。
              • 截图

                视频2:全屏滑块

                8分钟

                了解如何创建一个迷人的全屏滑块。你会学到……

                1. 如何使用背景色使过渡不那么突兀。
                2. 为什么你不应该在全屏滑块上使用滑动交互。
                3. 为什么100vh是完美的最小高度,以及它对你(和你的访客)有什么好处。
                4. 这是Kory最喜欢的字体大小技巧之一。
                5. Kory最喜欢的混合混合模式hack之一。
              • 截图

                视频3:时间轴滑块

                14分钟

                真正无限的可能性与这个水平时间轴滑块。你会学到……

                1. 在创建时间线或阶梯旅行时,“At Edges”容器选项的秘密力量。
                2. min-width如何为移动访问者提供完美的体验。
                3. 如何使用Looper来设置和管理您的时间线。
                4. 如何完成、待办事项和目标可以用来显示进度。
                5. 如何同时使用多个滚动效果。
              • 截图

                视频4:英雄帖子滑块

                18分钟

                你知道你可以制作“英雄”滑块吗?你可以的,我们会告诉你怎么做!你会学到……

                1. 如何滑动交互工作和如何不困住你的访问者。
                2. 全局容器的力量和重要性。
                3. 如何使用多个幻灯片分页。
                4. 如何交错效果创建一个美丽的,动画序列。
                5. 如何“隐藏”单词,直到它们进入视野与溢出。
              • 截图

                视频5:页面产品滑块

                26分钟

                我们的每日滑块(快说三倍)。你会学到……

                1. 如何在滑块中创建响应性的内容“页面”。
                2. 为什么基石中包含的幻灯片分页元素如此强大。
                3. 如何利用滑块的“Gap”控件作为内容之间的伪边界。
                4. 旋转木马滑块的一个创造性的定心技巧。
                5. 如何“主动地”对标记进行样式设置,使其能够预测各种类型的内容并作出相应的响应。
              • 截图

                视频6:英雄提示滑块

                20分钟

                这是我们将新的滑块元素推向极限。你会学到……

                1. 自适应高度如何在不同的幻灯片序列中工作。
                2. CSS Grid的强大功能以及它如何与滑块元素一起工作。
                3. 如何使幻灯片的内容在不同的断点处有不同的响应。
                4. 如何自动实现交错过渡。
                5. 如何使用按钮或文本作为下一个或上一个功能。
              • 截图

                视频7:后滚动滑块

                11分钟

                发现一种有趣和现代的方式来显示内容。你会学到……

                1. 如何创建受Netflix启发的内容演示。
                2. 对于这种类型的滑块,链接子交互的重要性。
                3. 如何使用最小高度和最大高度来创建地板和天花板。
              • 截图

                视频8:后旋转木马滑块

                16分钟

                了解如何在创造性的传送带中展示职位。你会学到……

                1. 一个有趣的hack,可以让悬停的阴影与照片的色调/色调相匹配。
                2. 分页如何兼顾功能和/或美感。很有创意!
                3. 幻灯片滚动和内容滚动的区别。
                4. 如何使用“过渡杂耍”来创造一些真正有创意的效果。
              • 截图

                视频9:Logo旋转滑块

                15分钟

                用这种强大的参与模式向你信任的合作伙伴和最大的粉丝炫耀。你会学到……

                1. 如何利用“自动”幻灯片宽度功能,允许在不同尺寸的幻灯片之间平滑过渡。
                2. 微妙的视觉调整需要实现这一技术的工作刚好。
                3. 如何创造性地使用CSS过滤器将用户的注意力吸引到当前幻灯片上。
                4. CSS对比度()过滤器的一个特别的细微差别,以及如何从它获得更多的里程。
              • 截图

                视频10:堆叠的证明滑块

                18分钟

                有很多人喜欢你的工作吗?用这种模式分享他们的话,而不让访问者感到不知所措。你会学到……

                1. 如何使用网格元素来定位您的滑块标记,并从一个地方轻松更改其大小。
                2. 为什么需要“自动”网格行来解释幻灯片中可变高度的内容。金宝搏体育官方网站
                3. 如何创建一个人造垂直滑动容器使用堆叠滑块模式搭配滚动效果。
                4. 如何实现一个独特的,垂直导向的幻灯片导航。
              • 截图

                视频11:透视旋转轮滑块

                20分钟

                用这个模块将您的滚动效果提升到一个全新的水平。你会学到……

                1. 秘密的“平衡”和“距离”属性应用于幻灯片,可以用于各种创造性的效果。
                2. 如何创建一个3D覆盖流效果。
                3. 关于新的CSS clamp()函数以及如何使用它来处理棘手的3D旋转。
                4. 如何将交互效果(如悬停状态)与滚动效果配对,以创建真正独特的东西。
                5. 如何为您的滑块使用响应导航,在所有设备上创建理想的用户体验。
              • 截图

                视频12:图片库旋转滑块

                17分钟

                谁不喜欢有格调的图片库呢?你会学到……

                1. 如何设置您的标记,以帮助您从设计中获得更多里程。
                2. 关于特殊的“逃生口”,基石的滑块可以让你的内容总是在你的网站上伸展,无论现在你的标记是深嵌套的。
                3. 如何使用元素条件在设计中输出可选内容。
                4. 如何将条件内容与滚动效果配对,以便只在需要时将用户的焦点吸引到该内容上。
                5. 如何在背景滤镜上使用模糊来减少内容周围的视觉噪音。
              • 截图

                视频13:标准的奖状旋转滑块

                14分钟

                从你的客户那里得到了更多的好评?有了这个滑块图案,你可以让它们闪闪发光。你会学到……

                1. 如何使用一个有用的CSS技巧在你的内容上垂直居中你的滑块导航。
                2. 为什么你需要基石中的“无指针事件”选项来正确实现垂直导航,而不妨碍用户体验。
                3. “对齐”控件如何通过点击鼠标改变内容的感觉。
                4. 如何使用滚动效果,将CSS过滤器、转换和不透明度结合起来,使不活动的幻灯片在成为“当前”幻灯片时,从较小的灰度输出转换为全尺寸彩色。
              • 截图

                视频14:自动播放进度滑块

                21分钟

                使用基石的滑块API可以轻松创建自定义UI元素。你会学到……

                1. 所有关于自动播放进度自定义属性和如何构建进度指示器。
                2. 一个难以置信的创造性的使用clamp()的方法,它利用了这个属性。
                3. 如何结合转换和不透明度的效果,以实现内容之间的平滑过渡。
              • 截图

                视频15:人们旋转木马滑块

                11分钟

                一个简单而吸引人的滑块,具有创造性的隔断美学。你会学到……

                1. 如何使用“自动播放”控件为原本静态的内容部分添加细微的移动,帮助它在页面上脱颖而出。
                2. 如何使用vmin单元配合“地板”和“天花板”来控制您的内容。
                3. box-shadow()和drop-shadow()过滤器的区别。
                4. 如何在浏览器中应用photoshop样式的过滤器。

              常见问题解答