How to add link to modal overlay block

Hello!

I am trying to add a link to my modal overlay block on my https://www.stacklingo.com/originals page. When a user clicks on the article, it just shows the modal overlay, but I can’t share the particular article (it still says stacklingo.com/originals in the browser). Is there a way when a user clicks on an article, the browser shows a link to the actual article?

It should display this link: http://www.stacklingo.com/originals/an-interview-with-the-irish-duo-behind-act-acre but right now it’s blank whenever someone goes there.

I’d appreciate any help!


Here is my site Read-Only: https://stacklingo-site.webflow.io/originals

Welcome to the community @andrewstacklingo!

The problem with modals is that they’re actually not changing where the user is on the website, but instead displays hidden content on the page they came from. That means that unless you’re duplicating the content on your collection item page (http://www.stacklingo.com/originals/an-interview-with-the-irish-duo-behind-act-acre) the link won’t show any of the collection item content.

Is there a reason you’d like these articles to open up in a modal instead of loading a new page? A compromise might be adding a bit of the information within the modal and instead including a link to click through to the full article on your collection item page—however this leads to requiring your users to click twice in order to see the full article when a single click from the list view (https://www.stacklingo.com/originals) would be the expected result.

Also I don’t believe we’ll need to dive into your read-only link just yet, but what you’ve included is your staging site link—instead you’ll need to follow the guide here to enable and grab the special link that will give users the ability to view the site in a read-only Designer environment.

Oh okay, so I should probably just take out the modal overlay all together and then make it just a separate page that users would be taken to so that I can use individual links?

Correct, but you won’t need to create a new page as it’s dynamic content—so just head over to your Originals Template under CMS Collection Pages and link up your dynamic fields.

If you’re having trouble getting that setup, just include your read-only link and I’ll walk you through getting that set up :+1:

1 Like

Perfect! thanks i’m going to try that today. appreciate the help!

Hi again! I just tried to get it set up, but I’m having troubles with it. Would you mind walking me through it?

Here’s my read-only link: https://preview.webflow.com/preview/stacklingo-site?utm_medium=preview_link&utm_source=designer&utm_content=stacklingo-site&preview=4f5409ec38ba8a5cfcc1c3587b3ba147&mode=preview

For this article: CASE STUDY: How to launch . . ., I wanted the link to be http://www.stacklingo.com/originals/how-to-launch-with-a-150-000-person-waitlist-in-6-months-like-caraway-home ,
and for this article: CASE STUDY: The genius way . . ., I wanted the link to be http://www.stacklingo.com/originals/an-interview-with-the-irish-duo-behind-act-acre .

Gonna post this here incase future readers like me end up in this thread. I found a solution to “Add a link to modal overlay block”

Here’s a link to the cloneable project.

Here’s the 4min tutorial video:

I hope this helps!