Media library, logo, fonts, and hero images
How to upload images and logos to the media library, set your site logo, choose fonts, and set a hero background image or video.
In this guide
The Media Library
Click the Media button (image icon) in the top bar to open the Media Library modal. This is your central store for all uploaded images, logos, and files for this website.
From here you can:
Setting your site logo
In the Media Library, your uploaded images are listed. Find the image you want to use as your logo and click Set as Logo.
The logo is stored against your website and automatically injected into every nav section across all pages. If you regenerate a nav section later, the logo is re-injected automatically — you never have to manually place it again.
Supported logo formats: PNG (recommended for transparency), SVG, JPG. PNG with transparent background looks best on colored nav bars.
Using uploaded images in AI prompts
Once you have uploaded an image to the media library, you can reference it in AI prompts by copying its URL:
The AI will inject that image into the generated section. This is how you get your own photos into your website without manually editing fields.
Hero background image or video
Hero sections support a full-bleed background image or video. To set one:
For a background video: paste a direct URL to an .mp4, .webm, or .mov file. The video plays on loop, muted, and is automatically covered by a dark gradient overlay so the text stays readable.
To remove the background: click Clear next to the Hero Image field. The section returns to whatever background color the AI generated.
Hero images persist across AI regenerations — if you regenerate the hero section, the background image is automatically re-injected into the new design.
Changing your site font
The font picker is at the top of the Live Preview panel, in the preview toolbar (the Aa button). Click it to open a dropdown of 50+ available fonts organized by style and language group.
Font choices include Latin serif/sans-serif/display fonts and Indian language fonts (Hindi/Devanagari, Bengali, Tamil, Telugu, Kannada, Malayalam, Gujarati, Punjabi/Gurmukhi) plus Arabic, Chinese, Japanese, and Korean.
Selecting a font from this picker applies it site-wide across all sections.
The font choice is saved to your website document immediately — it is not part of the draft system. It takes effect on the live site when you next publish.
Tip: Per-field font — you can also set a different font on a single field (like just the headline) using the font picker in the Edit tab's formatting bar. See "Editing content — the Edit tab" for details.
Images inside section content
Many sections have image fields for individual items (e.g. team member photos, gallery images, product images). These appear as small image upload areas in the Edit tab for each item.
Click the upload area to open a mini asset picker filtered to your uploaded files. Select an image and it appears in that specific slot in the preview.
Alternatively, paste an external image URL directly into the image field.
More in Builder
Builder layout and the top bar
Understand the full builder layout — the three panels, every top-bar button, the save system, and how to navigate pages.
Managing sections — add, reorder, duplicate, delete
Everything about sections: what they are, how to add them in the right position, reorder by dragging, duplicate, delete, and change their visual style.
Editing content — the Edit tab
How to edit text, buttons, links, colors, images, icons, and every other field in the content editor.
The AI Build & Edit drawer
How the AI chat works — generating new sections, redesigning existing ones, choosing models, using reference images, and understanding AI credits.
Power features — select mode, batch redesign, templates, shortcuts
Advanced builder techniques: select multiple sections for batch AI redesign, save custom section templates, use keyboard shortcuts, and apply full-site templates.
Managing pages in your website
How to add new pages, switch between pages, navigate internal links, and delete pages you no longer need.
Using templates smartly — get more with fewer AI credits
How to build a complete, professional website using ready-made templates without spending any AI credits — then use AI only where it matters most.
Empty Section — build any custom layout with AI or your own code
How to add a blank empty section to your page and use the AI drawer or Code Editor to turn it into any layout you can imagine — no templates, no limits.
Section Creator — build and save custom HTML/CSS sections
How to write your own HTML and CSS in the Section Creator, add editable fields with data attributes, run the AI security check, and reuse your sections across all your websites.
Section Creator — coding rules & what JavaScript is allowed
Understand exactly what HTML, CSS, and JavaScript you can use in the Section Creator — including how to write interactive components like menus, accordions, and animations correctly.
Creating new pages with AI — the complete guide
How to use the AI assistant to create full pages with sections and automatic nav wiring — including model choice, credit costs, and what to expect.
AI Assistant tips and tricks — get better results faster
Practical techniques for getting the most from the AI assistant — quick prompts, the right mode for the right job, how to save credits, and what the AI can actually do.
Save as My Template — reuse sections across all pages
How to save any section as a personal template and reuse it on any page or any website — the fastest way to keep your site consistent.