Mass Page Builder — Choose Template Tab
This is the first tab you see when opening the form. It has two parts: selecting a visual template and configuring the design colours and typography.
The Template Grid
A visual grid of thumbnail cards shows all available templates. Each card displays a preview screenshot of the template and its name with a Select badge. Click any card to select it — a checkmark appears to confirm your selection.
Built-in YACSS templates appear first, followed by any custom templates you have uploaded in the Custom Templates section. You must select exactly one template before generating. The selected template controls the overall layout and structure of every page in the generated website.
Design Settings
Below the template grid is the Design Settings section where you customise the colour scheme and typography to match your branding. The following fields are available:
Font Family — A dropdown listing all available web fonts. The selected font is applied to all text across the generated website. Each template has a recommended default font that is pre-selected when you choose that template, but you can change it to any font from the list.
Primary Background Color — The main background colour used in the primary content sections of the page. Click the colour picker to select any colour.
Primary Text Color — The text colour used in primary content sections.
Secondary Background Color — The background colour for alternating content sections. On most templates the page alternates between primary and secondary background colours as you scroll through the content blocks, creating visual separation between sections.
Secondary Text Color — The text colour in secondary content sections.
Footer Background Color — The background colour of the footer area at the bottom of every page.
Footer Text Color — The text colour inside the footer.
Anchor/Footer Hover Color — The text colour of links and navigation items when the user hovers their mouse over them.
Anchor/Footer Hover Background Color — The background colour that appears behind links when hovered.
Nav Text Color — The colour of the navigation menu text items.
Contact Us Bg Color — The background colour of the Contact Us button in the navigation bar.
Contact Us Text Color — The text colour of the Contact Us button.
News Widget Bg Color — The background colour of the news widget section when it appears on a page.
News Widget Text Color — The text colour inside the news widget.
Special Content 1–4 Bg Color — The background colour for each of the four special content highlight boxes. Each block can have its own distinct background colour, allowing you to create a visually varied highlights section.
Special Content 1–4 Text Color — The text colour for each of the four special content boxes.
H1 Font Size — The font size of the main H1 heading on each page. Enter a value with a unit, for example 45px.
Paragraph Size — The font size of body text paragraphs. For example 16px.
Special Content H1 Size — The font size of the heading text inside the special content boxes.
Special Content Content Size — The font size of the body text inside the special content boxes.
