Creating templates/layouts for common pages

Hi, I’m trying to migrate an existing website from Kentico to Plasmic and want to check if I’m missing something about creating page templates/layouts (as in a base version of a page that content can then be added to creating multiple other pages), the docs (Pages | Learn Plasmic) suggest creating a template as a hidden page that you then duplicate, but presumably then if I change that hidden page the changes won’t carry over to the duplicated page?

Alternatively, I looked into using a component for this, but it seemed quite awkward to get the component to display as a full page and get the styling correct, is there a good way to do this?
Thanks.

Hi @duncan_quickfall, welcome!

if I change that hidden page the changes won’t carry over to the duplicated page?

Correct. If you want this behavior, you should a component, which can be used across multiple pages or other components.

it seemed quite awkward to get the component to display as a full page and get the styling correct

Make sure you set the component’s view mode to stretch mode. Click the floating dimensions on the top-right corner of an artboard.

I made an example project you can try that includes a Page Wrapper component and a _PageTemplate using the Page Wrapper: https://studio.plasmic.app/projects/pPBbJZ4rjGrm8opDJY9mzw

Would love to know any key differences you found that made you switch! Also, anything that we’re missing from Kentico that you’d like to see in Plasmic?

Hi @jason that is helpful to know, thanks. I’m still not sure how the styling side of this is supposed to work though, specifically when I try to add a header and footer as part of this component.

It seems like the header and footer need to be set to fixed positioning and obviously I would like the main content to be auto but then this can cause the content to overlap with the header and footer. The only way around this I’ve found is to add a margin to the main content at the top and bottom but this method doesn’t seem to work when using a component rather than just adding the elements directly to the page.

Is there a better way of doing this that I’m missing? Or is it not going to be possible to create a template like this that contains a header and footer? (I need it to work with scrolling as well)
Thanks.

Hi @duncan_quickfall, I’ve updated the example Page Wrapper component to include a header and footer. Plasmic

The way it works is to put a slot between the Header and Footer. Fixed positioning shouldn’t be necessary :slight_smile: