One pager
Just keep scrolling
This blueprint samples show how to setup a simple one pager using subpages for the individual parts/sections of the one pager. We included a few examples for sections, but - of course - the possibilities are endless.
Main page
Blueprint
title: One Pager
icon: 📔
sections:
parts:
label: Parts
type: pages
status: all
info: "{{ page.intendedTemplate }}"
image: false
templates:
- pager-headline
- pager-hero
- pager-text
- pager-video
![](https://v36.getkirby.com/media/pages/docs/reference/panel/samples/one-pager/7939cd9c8a-1704283981/one-page-960x.png)
Template
<main>
<?php foreach ($page->children()->listed() as $part) : ?>
<section class="<?= $part->intendedTemplate() ?>">
<?php snippet($part->intendedTemplate(), compact('part')) ?>
</section>
<?php endforeach ?>
</main>
Part: Headline
title: Headline section
icon: title
fields:
headline:
type: text
required: true
![](https://v36.getkirby.com/media/pages/docs/reference/panel/samples/one-pager/34247b3bfb-1704283981/headline-960x.png)
Part: Hero slider
title: Hero slider section
icon: image
sections:
images:
type: files
template: pager-hero
layout: cards
info: "{{ file.caption }}"
min: 1
max: 5
![](https://v36.getkirby.com/media/pages/docs/reference/panel/samples/one-pager/212dde84c5-1704283981/hero-960x.png)
title: Hero slide
icon: image
fields:
caption:
type: text
width: 1/2
link:
type: url
width: 1/2
![](https://v36.getkirby.com/media/pages/docs/reference/panel/samples/one-pager/399dedbfbd-1704283981/hero-files-960x.png)
Part: Text
title: Text section
icon: text
fields:
headline:
type: text
text:
type: textarea
required: true
![](https://v36.getkirby.com/media/pages/docs/reference/panel/samples/one-pager/4cfac3fa41-1704283981/text-960x.png)
Part: Video
title: Video section
icon: video
fields:
video:
type: text
before: https://youtube.com?watch=
icon: video
help: Copy the video ID from youtube here to embed the video.
![](https://v36.getkirby.com/media/pages/docs/reference/panel/samples/one-pager/286ae8ce6e-1704283981/video-960x.png)