How to load all content in one page without use of multiple pages?

Design help Animations & Interactions
1

I am using Webflow mainly for simple landing pages. Problem I have is that as of now I can only create a website with various pages, which makes it very tough when editing the header for example because then I have to go on all the pages to edit them manually in my server.

I want to know if it is possible to allow for different content to be shown on the same page instead of having to rely on multiple pages. So basically Page 1 will have 2 buttons that goes to either Page 2 or Page 3.

But the contents should only be revealed after user clicks a specific button.

2

Hi @filipebr, thanks for your post. Can you update this post to include the read-only link to the site you are working with, so we can see how you have this setup? Share a read-only link | Webflow University

Cheers,
Dave

3

Yes, I haven’t uploaded the site to my server so practically I want to keep my Header and section intact. For example

How old are you?
[18-25]
[25+ ]

Next question should appear immediately without having to load another page.

Choose your Operating System:
[Windows]
[Mac]

As of now I am linking the button to PAGE 2, when it shouldn’t be on a different page, just load the section/question on the same spot, all I’m changing is the question and buttons.

4

Hi there! :smile:
Have you tried using the “Click to show/hide” interaction?

This might be the solution you’re looking for.

5

I uploaded a test here
http://test4222.webflow.io/

As you can see, it goes to another page, I want to keep these questions coming but without loading another page, the hide feature seems a bit confusing since I can only show or hide an element that is already there, how would I do that for a website with let’s say 10 questions?

Get what I mean?

6

Hi @filipebr, As @PixelGeek mentioned, you can do this with interactions :slight_smile: The interactions and triggers needed would need a little planning :smile:

Another option is to use a little jquery and ajax and load content into your page from other pages on your site, so that the main home page never changes.

Here is the site if you want to clone it and play around:

https://webflow.com/website/ajax-content-load
Test site: ajax-content-load.webflow.io

​I hope this helps. If not, please let me know – I’m happy to assist further! :slight_smile:

Cheers,
Dave

1 Like
7

That’s exactly what i was looking for, thanks!

8

Just a quick question, I see the link links to content18 but where do you define what is content18 for example? I can’t find anything with the words “content18”

9

Hi @filipebr , if you look on the Content page, each section has a unique id of content18, content25, etc… anything you put in those sections will get loaded when you pass in the content ID for the desired section.

You can do this completely without any custom code using interactions, where each link has an interaction with multiple triggers to show or hide 10 different layers that are positioned on top of each other… Webflow can help you in multiple ways with this :smile:

Cheers,
Dave

10

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.