Helloscroll Layout Reference

Attribute format
home section
parallax section
slider section
contact section
Complete page examples
Important rules
Config file
Config file — all keys
Resolution order

Attribute format

Set the page attribute helloscroll_sections in Page Properties → Custom Attributes. One section per line, fields separated by :. Optional field order does not matter.

type : id : [options in any order]

The attribute is only used when no config file exists for the page. See Resolution order.

home

home : id : [flow] : [arrow] : [#colour] : [bg_position]

Field	Values	Notes
`type`	`home`	Required, first field
`id`	`section-home`	Required. Unique anchor. Lowercase, hyphens only. Never change after adding content.
flow	`mobile-flow` or `standard-flow`	Optional. mobile-flow = top-aligned content at ≤576px. standard-flow = all screen sizes.
arrow	`arrow`	Optional. Shows bouncing scroll arrow pointing to the next section.
colour	`#1a1a2e`	Optional. CSS hex colour for section background.
bg_position	`30% 80%`	Optional. CSS background-position value.

Examples

home:section-home
home:section-home:mobile-flow
home:section-home:mobile-flow:arrow
home:section-home:mobile-flow:arrow:#1a1a2e
home:section-home:standard-flow:arrow:#1a1a2e:30% 80%

CCM Areas created

Area name	Use
`Home Background`	Drop one Image or Video (HTML block) here
`Home Content`	Drop any content blocks here

Area names use the nav label as prefix — if label is "Welcome", areas are "Welcome Background" and "Welcome Content".

parallax

parallax : id : [mode] : [flow] : [arrow] : [#colour]

Field	Values	Notes
`type`	`parallax`	Required
`id`	`section-story`	Required. Never change after adding content.
mode	`slow` `medium` `fast` `reverse` `fixed`	Optional. Default: `medium`. Controls speed and direction of image strip movement.
flow	`mobile-flow` or `standard-flow`	Optional
arrow	`arrow`	Optional
colour	`#2d1b69`	Optional. Section background colour.

Examples

parallax:section-story
parallax:section-story:medium
parallax:section-story:fast:arrow
parallax:section-story:medium:standard-flow:#2d1b69
parallax:section-story:reverse:mobile-flow:arrow:#0d1b2a

CCM Areas created

Area name	Use
`Story Top`	Text above the image strip
`Story Image`	Drop exactly one Image block (block limit 1)
`Story Bottom`	Text below the image strip

slider

slider : id : [count] : [flow] : [arrow] : [#section|#slide1|#slide2...] : [@section-pos|pos1|pos2...]

Field	Values	Notes
`type`	`slider`	Required
`id`	`section-show`	Required. Never change after adding content.
count	`3`	Optional integer ≥ 2. Default: 3. Number of slides.
flow	`mobile-flow` or `standard-flow`	Optional
arrow	`arrow`	Optional
colours	`#222` or `#222\|#e63946\|#457b9d`	Optional. Single `#colour` = section background only. With `\|` separators = section background then per-slide colours in order.
positions	`@center\|30% 80%\|center 20%`	Optional. `@` prefix. Section bg-position or per-slide positions with `\|` separators. Same indexing as colours.
nodots	`nodots`	Optional. Hides dot navigation.

Examples

slider:section-show
slider:section-show:3
slider:section-show:3:mobile-flow
slider:section-show:3:mobile-flow:#222
slider:section-show:3:mobile-flow:#222|#e63946|#457b9d|#2a9d8f
slider:section-show:3:mobile-flow:#222|#e63946|#457b9d:@center|30% 80%|center 20%
slider:section-show:5:standard-flow:arrow:#111|#e63946|#457b9d|#2a9d8f|#6a0572|#1d3461
slider:section-show:3:nodots:#222|#e63946|#457b9d

CCM Areas created (example: label "Show", 3 slides)

Area name	Use
`Show Dia 1 Background`	Drop one Image or Video
`Show Dia 1 Content`	Drop any content blocks
`Show Dia 2 Background`	Drop one Image or Video
`Show Dia 2 Content`	Drop any content blocks
`Show Dia 3 Background`	Drop one Image or Video
`Show Dia 3 Content`	Drop any content blocks

Slide IDs are built as {section-id}-dia-1, {section-id}-dia-2 etc. — e.g. section-show-dia-1.

contact

contact : id : [flow] : [arrow] : [#colour] : [bg_position]

Field	Values	Notes
`type`	`contact`	Required
`id`	`section-contact`	Required. Never change after adding content.
flow	`mobile-flow` or `standard-flow`	Optional
arrow	`arrow`	Optional
colour	`#0a0a0a`	Optional
bg_position	`center 30%`	Optional

Examples

contact:section-contact
contact:section-contact:mobile-flow
contact:section-contact:mobile-flow:#111
contact:section-contact:standard-flow:arrow:#0a0a0a:center 30%

CCM Areas created

Area name	Use
`Contact Background`	Drop one Image or Video
`Contact Content`	Drop any content blocks

Complete page examples

Minimal

home:section-home
slider:section-show:3
contact:section-contact

Typical production page

home:section-home:mobile-flow:arrow:#1a1a2e
parallax:section-story:medium:arrow:#0d1b2a
slider:section-show:3:mobile-flow:#222|#e63946|#457b9d|#2a9d8f
contact:section-contact:mobile-flow:#111

Two sliders with per-slide colours and positions

home:section-home:mobile-flow:arrow:#1a1a2e:center 30%
slider:section-show:3:mobile-flow:#222|#e63946|#457b9d|#2a9d8f:@center|30% 80%|center 20%
slider:section-gallery:5:mobile-flow:#111|#6a0572|#1d3461|#0d7377|#14a085|#2d1b69
contact:section-contact:mobile-flow:#0a0a0a

Custom nav labels using ?Label

home:section-home?Welcome:mobile-flow:arrow
parallax:section-story?Our Story:medium
slider:section-show?Portfolio:3
contact:section-contact?Get in Touch:mobile-flow

Important rules

Never change id or label after adding content.
The id is used for anchor links and scroll targets.
The label becomes the CCM Area name prefix — changing it after content is added creates new empty Areas and orphans the existing content in the old Areas.

Nav label customisation — append ?Label to the id to show a different label in the nav menu than what the id suggests.
Example: home:section-home?Welcome Page:mobile-flow

Config file

The config file is the preferred way to configure pages — cleaner than the attribute, supports all options including per-slide positions, and is version-controllable.

Location

packages/helloscroll_theme/themes/helloscroll/config/

One file per page, named after the page handle (URL slug):

config/
  default.php     ← used when no page-specific file exists
  home.php        ← used for the page at /home
  blink.php       ← used for the page at /blink

The page handle is whatever appears in the URL after your domain. For https://www.blink.ch/hs2/blink the handle is blink.

Format

A PHP file that returns an array. Each element is one section:

<?php
return [

    [
        'type'       => 'home',
        'id'         => 'section-home',
        'label'      => 'Home',
        'flow'       => 'mobile-flow',
        'arrow'      => true,
        'background' => '#1a1a2e',
        'bg_position'=> 'center 30%',
    ],

    [
        'type'      => 'parallax',
        'id'        => 'section-story',
        'label'     => 'Story',
        'flow'      => '',
        'arrow'     => true,
        'background'=> '#0d1b2a',
        'parallax'  => 'medium',
    ],

    [
        'type'               => 'slider',
        'id'                 => 'section-show',
        'label'              => 'Show',
        'flow'               => 'mobile-flow',
        'arrow'              => false,
        'background'         => '#222',
        'slides'             => 3,
        'dots'               => true,
        'slide_colors'       => ['#e63946', '#457b9d', '#2a9d8f'],
        'slide_bg_positions' => ['center center', '30% 80%', 'center 20%'],
    ],

    [
        'type'       => 'contact',
        'id'         => 'section-contact',
        'label'      => 'Contact',
        'flow'       => 'mobile-flow',
        'arrow'      => false,
        'background' => '#0a0a0a',
        'bg_position'=> '',
    ],

];

Config file — all available keys

Shared by all section types

Key	Type	Default	Notes
`type`	string	—	`home` `parallax` `slider` `contact`
`id`	string	—	Unique anchor. Never change after adding content.
`label`	string	—	Nav text + CCM Area name prefix. Never change after adding content.
`flow`	string	`''`	`''` `'mobile-flow'` `'standard-flow'`
`arrow`	bool	`false`	Bouncing scroll arrow pointing to next section
`background`	string	`''`	CSS colour e.g. `'#1a1a2e'` or `'var(--color-blue)'`
`bg_position`	string	`''`	CSS background-position e.g. `'30% 80%'`

Parallax only

Key	Type	Default	Notes
`parallax`	string	`'medium'`	`slow` `medium` `fast` `reverse` `fixed`

Slider only

Key	Type	Default	Notes
`slides`	int	`3`	Number of slides, minimum 2, no upper limit
`dots`	bool	`true`	Show dot navigation below slider
`slide_colors`	array	`[]`	Per-slide background colours. Index 0 = slide 1. e.g. `['#e63946', '#457b9d']`
`slide_bg_positions`	array	`[]`	Per-slide background-position values. Same indexing as slide_colors.

Resolution order

When helloscroll.php loads a page it looks for the layout config in this order:

#	Source	Location
1	Page-specific config file	`config/{page-handle}.php`
2	Page attribute	Page Properties → Custom Attributes → `helloscroll_sections`
3	Default config file	`config/default.php`
4	Emergency hardcoded fallback	Home + Contact only, no colours

The config file always wins over the page attribute. If both exist, the config file is used and the attribute is ignored.