金博宝188官网网址

课程及资料片

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

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

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

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

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

德温

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

他有一种独特而罕见的能力,可以同时谈论技术,争论代码,并进行战略思考!

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

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

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

(凯尔1,德文0)。

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

我又一次准备好了答案。

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

(凯尔2,德文0)。

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

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


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

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

我们首先要做的不是继续推进这个想法——就好像它会发生一样——而是试着戳穿它。

  • “是这样的不会工作……”
  • “这就是它分解的地方……”
  • “这就是为什么没人关心这件事……”
  • “这就是为什么没有人应该关心这个……”

但当我们开始脚手架的想法为新的滑动条元素,几乎是准确的相反发生了。

我们很喜欢!我们喜欢它所代表的东西,更重要的是我们喜欢它可能变成的样子。

你看,大多数人认为“滑块”是90年代末,早期的网络怪物。它们通常是缓慢的,随机的,并且几乎没有可识别的粘性价值。说实话,大多数都很难看。

人们通常用图片或朗朗上口的口号填满它们,然后毫不犹豫地把它们放在网站的顶部——最重要的地方。

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

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

我们知道谷歌将性能、用户粘性和跳出率作为3个重要指标。你最不想要的就是给他们更多的理由给你排名。

金博宝188官网网址另一方面,现代滑块更加通用。更加微妙。更有效。

只是一个大问题。

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

选项要么太窄(没有印象),要么你必须使用一个复杂的插件,这就是过度使用的定义。

我们把这个看做独特的机会。

所以我们开始重新定义什么是Slider可以,然后为我们的基石网站建设者创建一个本地元素。

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

随着视觉的聚焦,我们意识到滑块可以用于这么多不同的东西。如果使用得当,它实际上可以变成秘密武器在任何网站建设者的工具包。

金博宝188官网网址可以用于……

  • 定价表
  • 时间线
  • 产品的比较
  • 甚至是类似netflix的内容展示
  • 还有很多很多

再过几年,鼓声响起,我们到了很荣幸地宣布我们的新的滑块元素是活的!

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

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

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

事实上,在发布后的几个小时内,这些只是我们收到的关于它的评论(附注:你在下面看到的滑块是用新的滑块元素构建的)。

“你用滑块滑得太深了。我喜欢!这可能是最好的一个了。我们都知道滑动条可能不好,但如果使用得当,它们也可以是无价的,尤其是在移动设备上。”
@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’s Elements》实现。滑动已被禁用,以避免“诱捕”用户(从不好玩)。

    这是一个全屏滑块。

    内容以两个轴为中心。

    你想放什么就放什么。

    选择权在你。

      时间滑块

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


      大毒蛇协议

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

      Ada Cryptocurrency

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

      卡尔达诺块浏览器

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

      代达罗斯的钱包

      代达罗斯是IOHK的官方桌面钱包,用于卡尔达诺和ada加密货币。这是一个功能齐全的桌面钱包,可在Windows, Mac和Linux。

      纸钱包

      卡尔达诺纸质钱包的引入为用户提供了一个安全的离线“冷”存储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大师。如果你是一个Bulbasaur发烧友,这是为你准备的。
          Game Boy(紫色)

          Game Boy(紫色)

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

          英雄提示滑块

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

          让你的业务更上一层楼

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

          增加你的利润3267%

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

          标志旋转滑块

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

          堆叠见证滑块

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

          • Kari拉斯穆森

            Kari拉斯穆森

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

            Azul鲍德温

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

            薇薇安Kiser

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

            Jordy尤班克斯

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

            Taelynn索普

            苹果
            如果这东西在我的工作流程中每节省一个小时我就有一个五分镍币,我就会有很多五分镍币,我需要一个硬币滚轮!

          透视旋转木马滑块

          在引子下,所有幻灯片都具有自定义属性,可以用来创建独特的转换,如这个透视覆盖效果。由于涉及的转换较多,因此禁用了滑动。

          图像画廊旋转木马滑块

          一个漂亮的简单的画廊,特色您的内容,并包括可选的描述,如果需要,这是显示在导航。

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

            标准证明旋转木马滑块

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

            • 薇薇安Kiser
              几个月来,我从朋友那里听说了这件事,最后我决定我需要它。我没有失望!
              薇薇安Kiser
              Spotify创意总监
            • Kari拉斯穆森
              有时,一种产品进入你的生活,会让你怀疑没有它你该怎么办。对我来说,这就是那个乘积。
              Kari拉斯穆森
              谷歌的首席设计官
            • Azul鲍德温
              真不敢相信我有多爱这东西。它绝对让我的生活变得更好。
              Azul鲍德温
              Facebook高级用户体验架构师
            • Jordy尤班克斯
              当你发现这么好的东西,你必须让所有人都知道。
              Jordy尤班克斯
              迪士尼的想象工程师
            • Taelynn索普
              如果我在工作流程中每节省一个小时就有一个五分镍币,我就会有很多五分镍币,我需要一个硬币滚轮!
              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. 科里最喜欢的字体大小技巧之一。
                5. 科里最喜欢的混合混合模式的黑客之一。
              • 截图

                视频3:时间轴滑块

                14分钟

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

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

                视频4:英雄张贴滑块

                18分钟

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

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

                视频5:页面产品滑块

                26分钟

                我们的De Stijl滑块(快说三遍)。你会学到…

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

                视频6:英雄提示滑块

                20分钟

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

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

                视频7:后滚动滑块

                11分钟

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

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

                视频8:后旋转木马滑块

                16分钟

                了解如何在创意旋转木马中展示帖子。你会学到…

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

                视频9:标志旋转滑块

                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分钟

                自定义UI元素很容易创建与基石的滑块API。你会学到…

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

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

                11分钟

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

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

              常见问题解答