gdocweb Blog

Single Page from Multiple Documents

January 19th, 2024

by Shai Almog

Placeholder image

A common type of website on the internet and in the startup world is the multi-section page. In such a page a single web page is divided into multiple distinct sections. Each section is colored differently and might even feature completely different stylings. This is possible to accomplish in Google Docs but is awkward. The big problem is the menu, in such sites it doesn’t navigate to a different page. It navigates within the page by scrolling the page down or up. Up until this week this was impossible to accomplish in gdocweb, but it’s possible now.

Page Sections

This week we added a new option to the page type creation process “Page Section” as shown in the following screenshot:

When we define that a document is a “Page Section” we append its contents to the previous document but mark it as a separate section. Here we see a screenshot covering the creation of the Startup demo, each document represents one part of the page.

Notice in the demo that the menu includes the document names and scrolls to the applicable area in the page instead of navigating away.

New Theme

The problem with this approach is that sections are spaced out from one another. By default we add a great deal of padding between elements to create an experience similar to Google Docs. However, this doesn’t necessarily fit well when running such a demo. We want to stretch the sections out all the way to the edge of the browser and all the way down to the next section.

To do that we introduced a new theme called “Startup”, it isn’t adaptive since it’s hard to adapt such a theme when running with multiple colors. However, if there’s demand for this we can add additional options.

Better GitHub Projects

You might have noticed that I linked earlier to the GitHub project for startup. To make our templates/demos easier to read I reworked the project pages as you can see for each template:

Hopefully these projects can help you discover new templates and approaches to build websites with gdocweb.

You can see the document that generated this post here.

horizontal line


footer graphic