Just had a question. Ive read somewhere in this forum about exporting your code and editing it in order to achieve the success of having multiple pages. I understand that concept completely. But…I just don’t know how to implement that. If someone would be so kind as to help me out. Or at the very least, point me to a website that explains this,(possibly step-by-step) as I really don’t know what to Google regarding this “issue”. Any help is greatly appreciated. I do have some knowledge of coding, though I am not a guru by any means, Lol. But I am good at learning from what I see. Thank you guys.
Hi @JorEl. The Webflow team are releasing new updates constantly at the moment and I believe they said that in a couple of weeks the multi-page feature will be released. However, until then, it would be possible to try this ‘multi-page hack’ but I think the best, most easy method would be to:
1. Duplicate your first page
2. Design your second page as a new website, using the duplicate as a template/starting point
3. Now simply export the code for each website then merge each website into a separate page of one single website
This could be frustrating, but I know that if you wait a week or two, the Webflow team will have sorted multi-pages out.
Hope this helped!
Bertie.
1 Like
This is what I do that helps makes it all come together methodically using a single design in webflow that allows my client to see all pages in one view.
I create the following sections where only the bodywrapper will define each pages main content:
.headwrapper - this will be my logo and nav menu for every page
.bodywrapper - this will be my unique content for each page
.footwrapper - this will be my footer links for every page
Then within the .bodywrapper section, I add 1 more section inside it:
.content-wrapper
This is where I build my first page, I then select the .content-wrapper section, copy and paste a new one below it, one for each page and then go back add a descriptive class to it:
.content-wrapper .home
.content-wrapper .about
.content-wrapper .contact
Now I can use webflow to add unique content and custom tailor the design for each one but the base design was already created in the first one and saves me time of having to duplicate styles for paragraphs, headings, buttons etc.
Now my finished design html looks like this:
<div class="headwrapper">
<div class="headcontent">
<div class="logo"><!-- logo here --></div>
<div class="nav-menu"><!-- menu here --></div>
</div>
</div>
<div class="bodywrapper">
<div class="content-wrapper home"><!-- home page design inside this --></div>
<div class="content-wrapper about"><!-- about page design inside this --></div>
<div class="content-wrapper contact"><!-- contact page design inside this --></div>
</div>
<div class=".footwrapper">
<div class="footlinks"><!-- footer stuff here --></div>
</div>
Now simply export the design, duplicate the html page 3 times and rename each as:
home.html
about.html
contact.html
and delete the sections you dont need in each page
home.html - delete divs “content-wrapper about” and “content-wrapper contact”
about.html - delete divs “content-wrapper home” and “content-wrapper contact”
contact.html - delete divs “content-wrapper home” and “content-wrapper about”
3 Likes
You forgot to mention that you will need one CSS file for that from the last page created. It’s good to develop page-by-page and simply use the CSS file from the last page created 
1 Like
Edit:
Not sure I follow, I didn’t mention it because its included in the export and it doesn’t need any modification, the copied pages will already include it and the one css file should work just fine for all 3 pages (using my example above). If you really wanted to get down to the nitty gritty of optimization, you could split the css file into 4 files. One that is the master.css that includes all rules and styling that all 3 pages will use. And then the 3 individual files that each only have the rules specific to that pages content. For example.
master.css
body {
some rules here
}
a {
some rules here
}
p {
some rules here
}
.headwrapper, .footwrapper {
etc...
home.css
.home {
custom rules for home content container here
}
etc...
about.css
.about {
custom rules for about content container here
}
etc...
contact.css
.contact {
custom rules for contact content container here
}
etc...
Then each html page would include master.css and its individual “name”.css file
1 Like
Why not including one file and hold in the browser memory?
@pingram3541 You are clever my friends. Cheers !
Thanks a LOT guys. Im understanding the concept here. You guys are geniuses. Although I have a little coding knowledge, this is kind of my first time actually sitting down and goin all in with html to create a website. So thanks again.
If Im stuck again, is there any way to get in contact with anyone a little quicker? Although I think @pingram3541 made it pretty plain, but I do have my slow moments, Lol.
This is very helpful.
When you were talking about the three sections, did you mean the actual Webflow ‘sections’? As in, add a section, and name it headwrapper (bodywrapper, etc)?
@JorEl yup, exactly what I meant!
Getting the hang of it. I keep having to start over, but it’s cool. I keep changing my mind on the design. But, where do the webflow containers play into this? I forgot about the containers. I know the head and footwrappers are sections. But when you have the bodywrapper, is that a container placed into the main body, or did you just rename the main body, ‘bodywrapper?’
Nope, its a section just like the inner 3, this gives you the most flexibility because they are full width, then you can add stuff inside them.