Advanced Techniques

Once you're comfortable with the basics, these techniques give you finer control over your site's design, data, and functionality.

Working with Assets

Uploading and referencing

Upload images through the Assets tab (drag and drop or click to browse). Once uploaded, the AI automatically sees them in its context.

By description:

Use the logo I uploaded for the header

Add the team photos to the about page

Put my hero image as the background of the main section

By exact path (copy the URL from the Assets tab):

Use /assets/images/logo-dark.svg as the nav logo

Set /assets/images/storefront.jpg as the hero background with a dark overlay

Add /assets/files/menu-spring-2025.pdf as a downloadable link in the footer

Replacing library images with your own

VoxelSite starts with built-in library images. As you upload your own, tell the AI to swap them:

Replace all the placeholder images with the photos I just uploaded

Use my actual product photos instead of the library images on the services page

Swap the hero background for the photo I uploaded called sunset-terrace.jpg

Image styling

Make all team photos circular with a subtle border

Add a Ken Burns zoom effect to the hero image

Apply a dark gradient overlay to the hero so the white text is readable

Make portfolio images display in a masonry grid with rounded corners

Data-Driven Content

VoxelSite stores structured content in JSON files. This means your menu, services, team, and other repeating content is data — not hardcoded HTML.

Why this matters

When your menu lives in assets/data/menu.json, you can:

• Update items by telling the AI without it rewriting the whole page
• Let the same data feed your website, Schema.org markup, and AI discovery endpoints
• Keep content consistent across pages

Prompting for data-driven content

Add a services section. Store the services as structured data so I can update them easily.

Create a menu page — store the menu items in a JSON file so I can change prices without touching the page layout.

Build a team page. I want the team data in a JSON file. Here are the members: [list them]

Updating data

Add a new service: "Garden Design Consultation — £150, 2 hours, includes a written plan"

Remove the Caesar Salad from the lunch menu

Update the opening hours to include Sundays: 10am to 4pm

Change Sarah's job title from "Designer" to "Creative Director"

The AI updates the JSON data file — the page automatically reflects the change.

Advanced Forms

Multi-step forms

Create a project enquiry form with two steps: first choose the project type and budget, then fill in contact details and a project description.

Conditional fields

Add a booking form where choosing "Wedding" shows extra fields for guest count and date, but choosing "Corporate Event" shows different fields for company name and number of attendees.

Form-specific styling

Style the contact form with floating labels and a dark background. Make the submit button match the site's primary colour.

Make the form fields have rounded corners and a subtle focus glow

Dynamic dropdowns from data

Add a service selection dropdown to the contact form that pulls the options from the services data file

This means when you update your services, the form options update automatically.

SEO and Meta Content

Page-level SEO

Update the meta description for the homepage to: "Award-winning interior design studio in Bristol. Residential projects that feel like home."

Change the page title format to "[Page Name] | [Business Name]"

Add Open Graph tags so the site previews nicely when shared on social media

Content strategy

Add an FAQ section to the services page — this helps with Google featured snippets. Questions: What is reformer Pilates? How long is a session? Do I need experience? What should I wear?

Rewrite the service descriptions to include location keywords — we serve Manchester, Salford, and Stockport

Add schema-friendly content: make sure each service has a clear name, description, and price

Structured data

VoxelSite automatically generates Schema.org markup from your site.json data when you publish. To improve it:

Add our business type to the site data — we're a "Restaurant" that serves "Italian" cuisine

Include our Google Maps coordinates in the location data

Add review ratings from our Google reviews: 4.8 stars from 127 reviews

Multi-Language Sites

Creating in any language

Write your prompt in the target language — VoxelSite follows your language automatically:

Erstelle eine Webseite für mein Restaurant, Gasthaus zum Löwen. Wir servieren traditionelle bayerische Küche — Schweinshaxe, Knödel, Kaiserschmarrn. Gemütlich, ehrlich, und rustikal.

私のカフェ「月と珈琲」のウェブサイトを作成してください。小さな自家焙煎のコーヒーショップです。落ち着いた雰囲気で、毎日手作りのケーキも提供しています。

Crea un sitio web para mi estudio de yoga, Sol Interior. Ofrezco clases de vinyasa y meditación en un espacio íntimo en el centro de Barcelona.

English prompt, different content language

Build a website for my restaurant in Tokyo. Generate all content in Japanese.

Create a site for my law firm in Munich. The interface should be in German.

RTL languages

For Arabic, Hebrew, and other right-to-left languages, VoxelSite automatically applies RTL layout:

أنشئ موقعًا لمخبزتي، الفرن الذهبي. نحن مخبز تقليدي في عمّان نصنع الخبز العربي الطازج والمعجنات كل يوم.

Design Refinements

Specific CSS adjustments

Add a subtle gradient to the hero section — from dark blue at the top to transparent at the bottom

Make the section dividers use a thin 1px line instead of the current gap

Add a box shadow to the nav when the user scrolls down

Make the footer background match the nav background

Animation and motion

Add a scroll reveal animation to all sections — they should fade in and slide up as they enter the viewport

Add a parallax scrolling effect to the hero background image

Make the CTA button pulse subtly to draw attention

Add a smooth scroll-to-top button that appears after scrolling down

Responsive adjustments

On mobile, stack the two-column section into one column

Hide the sidebar on tablet and mobile

Make the hero text smaller on mobile devices

The nav links should be full-width on mobile with larger tap targets

Typography fine-tuning

Increase the line height on the blog content — it's hard to read

Make headings use letter-spacing: -0.02em for a tighter, editorial look

The body font is too light — use 400 weight instead of 300

Use a monospace font for the pricing figures

Complete redesign

If you want to start fresh with the same content but a different look:

Redesign the entire site. Keep all the content but change the visual style to dark and editorial — think moody, sophisticated, with a serif heading font.

Give the site a completely new look. The current design is too corporate. Make it warmer, friendlier, more approachable. Keep the page structure but change all the visual elements.

Redo the color scheme. I want to move from the cool blues to something warmer — amber, cream, dark brown. Everything else can stay the same.

Troubleshooting with prompts

When something looks wrong

The hero text isn't readable — the background image is too bright. Add a darker overlay.

The nav links are invisible on mobile — they're white on white

The contact form is overflowing its container on small screens

There's too much space between the nav and the hero section — remove it

When you want to undo

You can always use the Undo button or Snapshots to revert, but you can also prompt:

Undo the last change — the old nav was better

Go back to the dark colour scheme — the light version doesn't work

Restore the original hero section layout

When the AI misunderstands

Be more specific:

When I said "make it darker" I meant the background, not the text. Change the page background to a dark charcoal and make the text light.

Not what I meant — I want the testimonials in a horizontal scrolling carousel, not a vertical stack

The portfolio grid is good but I wanted 4 columns, not 3. Also make the images square.