Skip to main content

Canvas Pages — Full Creative Freedom

Updated over 2 weeks ago

Canvas Pages — Full Creative Freedom

Canvas pages give you pixel-perfect, free-form design without grid or layout constraints. Place elements anywhere on the page and create unique, immersive layouts. They are replacing the former "Freestyle Pages" that were restricted to grid design based in 20 year old technique called WYSIWYG (What you see is what you get). It was simply impossible to edit those pages freely -now yo have all the freedom!

Adding Elements

Canvas pages support four element types:

elements.jpg

  • Text — choose heading levels (H1–H6) or body text, pick any font, set size and color

  • Image — upload or paste a URL; add alt text for SEO; double-click to reposition the image within its frame

  • Video — embed a YouTube or Vimeo link, or upload your own; choose between autoplay or click-to-play

  • Button — set label text, link URL, background and text colors, and border radius

Element Settings

Every element can be fine-tuned:

  • Position & size — set X (%), Y (px), width (%), and height (px) for precise placement

  • Rotation — rotate any element from 0° to 360°

  • Layer order — right-click an element to send it to front or back (z-index control)

  • Click actions — link to an internal page or external URL; images can open in a detail modal with gallery navigation

Click action - Modal

Click action on image can be a link or a Modal. You can choose to open the image in a window or enable the gallery option and the window will become a scrollable gallery that you can fill with images or videos and also select the overlay color

click-action.jpg

Page Background

Set the background for the entire canvas page:

  • Website background — transparent / default color of your website

  • Color — pick any solid color

  • Image — upload or paste a URL, then use the focus point picker to control which part stays visible on different screen sizes

  • Video — embed or upload a video background with a focus point; add an optional color overlay with adjustable opacity for better readability

background.jpg

Responsive Viewports

Canvas pages support three independent viewports:

  • Desktop (1440 px)

  • iPad Air (820 px)

  • iPhone 16 Pro (430 px)

Each viewport has its own element layout. Right-click elements on the desktop view to copy them to iPad, iPhone, or both at once. Then adjust positions and sizes independently per viewport to ensure your design looks great on every device.

Header & Footer

When creating a canvas page you can choose to show or hide the website header and footer. This is ideal for standalone landing pages or immersive full-screen experiences.

Start Page

Any canvas page can be set as your website's start (home) page, making it the first thing visitors see.

landing-video-canvas.gif

Example: Landing Page with Video Background

1. Create a new canvas page and hide the header and footer
2. Set the background to Video and paste a YouTube or Vimeo link
3. Adjust the focus point so the key scene stays centered on all devices
4. Add a color overlay (e.g., black at 40 % opacity) for contrast
5. Place an H1 text element with your headline
6. Add a Button element, label it "View Portfolio," and link it to your gallery page
7. Switch to iPad and iPhone viewports, copy elements from desktop, and fine-tune positions
8. Set this canvas page as your start page

The result is a cinematic, full-screen landing page that works seamlessly across all devices.

Did this answer your question?