# 1

嘿,大家,

我整理一个网站的想法,您可以访问一个CMS收集项目页面从模态或托盘(在理论上)可以从任何地方。

在我在下面的例子中,它显示了一个建筑网站在主页上显示的项目。如果你点击第一个项目卡片,然后会出现一个托盘从正确的所有项目的信息,这将被输入在CMS的具体项目。

我的主要问题如下:

  • 这种方式是最优的巢/嵌入集合项吗?
  • 我怎么能保证托盘/模态都有自己的动态url ?

Figma原型显示交互:

这是我的网站只读:链接
(如何分享你的网站只读链接吗)

# 2

@Portfelio

这似乎并不是个问题。你只需要构建它。

当你建立模态或托盘,您将添加一组列表并选择适当的收集来的电话。

你可以收藏列表添加到任何你想要的。你只需要构建它。

# 3

谢谢@Kevin_Mooney!很有道理,但是我怎么能确保托盘或模态都有自己的动态url ?我会想要模态可链接,如果用户想要分享这个项目,然后他就可以抓住它的url。

# 4

Felio,你可能想要认为这是两种不同的观点。

  1. 只有一位是你们的缩写模态视图,它出现在你的右盘。这是调用从任何页面,通过点击一个项目卡片。
  2. 另一个标准的CMS条目页面,这代表你的全部项目的细节,也可以链接到一个合适的URL。这个URL将出现在你的网站地图。xml,这提高了搜索引擎优化和谷歌重新抓取速度,

你可以做一个modal-only情况,但是你谈论一些很有创意的URL编码来解决你的问题。我看不出,对你的价值——尤其是你在CMS收集、存储这些你会有收藏页面。为什么不使用它们呢?

# 5

嘿@memetican谢谢你的回应。

这就是问题所在!我认为有一个模态/托盘视图为用户可以是一个很好的经验,你可以查看项目详细信息,然后迅速退出托盘回到一个页面,所有的项目都可以去探索,而不是去使用浏览器后退按钮或所有项目页面,或建议的另一个项目的项目页面“相关项目”一节为例。这个模式中观察到许多应用程序和网站,在这种情况下,我认为可能是可行的。

当然这绝不应该SEO的损害,因此为什么它应该通过嵌入一个CMS项目页面。也许iframe可以使用吗?

# 6

嗨Felio——我只是指出URL问题不是一个问题。它已经解决了常规页面集合。

弹出,我想@Kevin_Mooney指的是Webflow Lightbox然而它似乎不支持任何东西但是图像。最有可能他是指使用一组列表+ Webflow交互创建您的卡片和动画从一侧的页面。

我不使用交互,但是这将是非常光滑和滑动托盘给你你想要的能力。我从这里开始。

或者,你有jQuery选择面向更多的模态/弹出。我刚刚开始搜索。如果不为你工作的相互作用,这些看起来有趣;

# 7

@memetican我认为这将是一个问题,如果我不想url链接项集合在一个页面状态,而是在一个模态/托盘状态。理想情况下我能够创建和构建集合项页面模板页面,并嵌入在一个托盘。

谢谢你的联系,我将检查出来。但是是的,看起来像Jquery是这个问题的答案。有趣的是,这youtube的样子他就有这种交互使用AJAX和Jquery的混合物welp

https://www.youtube.com/watch?v=fBU4mLX45HU

# 8

我想我明白你预想,但老实说我发现奇怪的作为一个用户。让我们想象一下我在你/对页面,点击一个项目卡片。如果我决定书签,或者分享你的URL/对页面,我不会期待也是书签情态动词和side-trays目前显示的配置。

在技术上是可行的和一些好的脚本,岩在浏览器历史创建您自适应url,但很多工作,国际海事组织不让用户体验更好。你可能会更好的保持它干净,只是添加一个(分享)按钮,你的托盘,所以,如果有人想分享或书签项目本身,他们可以独立于你的“关于”页面。

但这是一个个人设计的选择,所以对你有意义的内容。

你的模态/托盘设计和内容的选择也同样很有趣。

你有两个overlay-design-approach选项;

  1. Webflow的交互
  2. jQuery模态

和三个content-sourcing选项;

  1. 内联,从一组列表
  2. 克隆从源页面,使用jQuery
  3. IFRAME嵌入

我已下令这些我个人的顺序优先考虑他们。

交互给你最控制幻灯片的效果,和显然是最define_image_transformation。大多数jQuery解决方案我看过覆盖,没有滑入托盘,他们有限的样式。最重要的是,您不能创建他们的设计师,你必须的代码,然后发布视图和测试它们。这是一个痛苦的dev /测试周期,在最好的情况下。

为采购内容,集合列表方法可以工作好,会给你巨大的设计师的支持。如果做不到这一点,我使用jQuery来提取内容我想从“tray-card”隐藏在我的CMS集合页面。如果你习惯做一些jQuery和理解底层的HTML内容,这应该你在正确的方向上。

我会不惜一切代价避免IFRAMEs。你会纠结于浏览器不一致,滚动条,截断的内容,和移动响应能力。让他们最后一招。

如果你IFRAME,你可能会被迫使用你/项目/项目1CMS收藏页面嵌入的来源。问题是,这必须是一个专门的布局,没有导航,托盘的内容。如果有人点击你的项目页面上通过从谷歌和土地,他们会得到一个小卡片大小的网站没有导航。他们可能会认为它坏了。

1像
# 9

我很好奇有什么可能的交互和收藏列表,和Webflow。我没有做很多样式,或者添加了一个幻灯片的效果,但我很深刻的印象。

我嘲笑了2弹出式风格,基于@PixelGeek的演示。没有jQuery,没有IFRAMES,你收藏页面将不受阻碍的为完整项目的详细信息页面。

https://preview.www.raktarban.com/preview/tray-demo?utm_medium=preview_link&utm_source=designer&utm_content=tray-demo&preview=4f3c82cbd65dec53e1258f3f612e6976&workflow=preview

CMS post添加到弹出模态
# 10

@memetican这正是我在暗示什么。

# 11

谢谢@memetican和@Kevin_Mooney

的用户体验方面,该项目盘永远不会被链接的页面。来自于一个主页或一个项目的着陆页,所以用户会看到其他项目的项目内容中,总是这样。

我知道我以前见过这个网站,并发现了AREA17网站这差不多就是这个。

交互本身并不是一个问题,也不是一组列表的位置在模态或托盘。我熟悉所有的。

这是确保项目托盘结构有效和content-sourced SEO这是主要问题。所以,它看起来将会克隆,按照你的建议,使用Jquery Ajax。我有很少的经验,但是我想要一个起点。

# 12

托盘设计&搜索引擎优化

在托盘上面的解决方案,交互+收藏列表方法保持在线的内容,所以它会捡起搜索引擎优化的目的。你设计的内容用任何一种你喜欢的方式,最大化可读性和搜索引擎优化你的内容。IFRAME方法可能不接,内容,和一个jQuery方法只会把它捡起来在引擎可以执行结果和解析DOM。

的问题“我如何嵌入和覆盖的内容从一个CMS收藏在我的页面”是解决我上面讲的演示。

URL链接

好的,我看到你想模仿的影响。这是一个错觉。URL不链接并重新创建弹出。

点击一个项目,你会看到预览幻灯片,URL改变。现在单击refresh URL本身负载。加载项目内容,但不是在一个侧边栏,这是唯一的页面内容。

webflow,你使用我的上面的例子创建幻灯片预览但是你喜欢。然后你会添加一个脚本添加页面的URL集合项目浏览器历史记录。用户将看到它改变,如果他们书签,或刷新它,他们让你的项目的页面集合。

1像
# 13

我明白了,是的,你是正确的。项目页面本身负载没有上下文的背景,也没有被放在一个托盘上。这不正是我想要的,但它是有意义的,看到随着项目页面本身会做SEO的重任,而不是托盘的版本。

你知道我将如何创建这样一个脚本吗?我假设上述stackoverflow线程你联系可能是一个好的起点?

# 14

链接是关于jQuery和内容提取。收藏列表的方法做一个更好的工作,国际海事组织和无延迟弹出内容的外观。

关于URL改变,我有一个部分解决方案,我只是玩;

这是织机视频展示的功能和如何实现它;

2喜欢
# 15

嘿@memetican迈克,谢谢你的视频。太棒了,我刷了Jquery动机。我仍然在设计阶段的网站但是会回到这在适当的时候,把我的解决方案。:raised_hands: