Welcome to Clay Builder documentation!

This is where all the parts of Clay Builder are explained in a bit more depth. Whether you are just getting started or looking for a refresher on a specific feature, you will find everything you need here.

What is Clay Builder?

Clay Builder is a website builder that lets anyone create a professional website without needing to know how to code. You build your site visually — dragging in sections, adding components like text and images, adjusting colors and fonts — and Clay Builder handles everything behind the scenes to make it work on the web.

It is designed to be simple enough for someone who has never built a website before, while still being powerful enough to create something that looks and feels professional.

How the docs are organized

The documentation is broken into categories on the left. Each category covers a different part of Clay Builder:

• The Editor — everything about building and editing your pages.
• Media Library — managing your images, videos, and other files.
• Website Settings — configuring your site's details, SEO, appearance, and more.
• Publishing — getting your site live and connecting a domain.
• Settings — managing your account and billing.
• Key Terms — plain-English explanations of any terms you might not recognize.

Need help?

If you cannot find what you are looking for in the docs, you can reach the Clay Builder support team through the Help Center.

When you create a new site in Clay Builder you will be walked through a series of steps to get it set up. Here is what each step involves.

Step 1 — Name

Enter what the name of your site will be. This is used to identify your site inside Clay Builder and does not have to be your final domain name. The name must be at least 2 characters long.

Step 2 — Type

Choose what type of site you are building — either a business site or a personal site.

Step 3 — Category

Select up to 4 categories that describe your site. The available options are:

• Restaurant
• Portfolio
• E-commerce
• Blog
• Photography
• Education
• Gaming
• Health
• Non-Profit
• Real Estate
• Technology
• Travel
• News

Step 4 — Color Theme

Pick a color theme for your site. You can choose from pre-made template colors or create a custom color theme by setting each color yourself. The colors you can customize are:

• Nav & footer background
• Nav & footer text
• Section background
• Alt section background
• Heading text
• Body text
• Card background
• Card title
• Muted / subtitle text
• Button & accent color
• Button text
• Highlight / contrast

You can change your color theme at any time later in the website settings.

Step 5 — Fonts

Choose the fonts for your site. There are two font settings:

• Site font — used across components and sections. You can also set the weight and letter spacing under the Advanced options.
• Link & brand font — used for navbar and footer links, the brand name, and copyright text. Has its own weight, letter spacing, and transform options under Advanced.

Fonts can be changed at any time later in the website settings.

Step 6 — Template

Choose a starting template based on your categories and color theme, or start with a blank site that uses your chosen colors but has no pre-filled text or sections — just an empty page ready for you to build on.

Step 7 — Media

Optionally upload some media during setup — images or other files you want available right away in your Media Library.

Step 8 — Launch

Review your choices and launch your site. Clay Builder will create the site and take you into the editor where you can start building.

This is the editor — this is where you will spend most of your time creating your website.

What is an image component?

The image component lets you place an image inside a section. You choose the image from your Media Library, and then control how it fits its frame, its opacity, its border, and optionally make the whole image a clickable link.

Changing the image

Select the component in the LHS and click Change Image to open the Change Image popup and pick a different image. If no image has been set yet, a Change Image button will also appear directly on the component in the RHS.

Image Fill

Controls how the image fits inside its frame. The options are:

• Stretch to Fill — stretches the image to fill the frame exactly, which may distort it.
• Contain — fits the entire image inside the frame without cropping, leaving empty space on the sides if needed.
• Crop to Fill — fills the frame completely by cropping the image edges. No empty space, but part of the image may be cut off.
• Original Size — displays the image at its actual pixel size with no scaling.
• Scale Down — like Contain, but never scales the image up beyond its original size.

Border

• Border Radius — rounds the corners of the image frame.
• Border Width — sets how thick the border is.
• Border Type — choose the style of the border: solid, dashed, dotted, double, or none.
• Border Color — sets the color of the border.

Padding

• Top — adds space above the image.
• Left — adds space to the left of the image.
• Right — adds space to the right of the image.
• Bottom — adds space below the image.

You can also adjust padding directly on the RHS by dragging the orange circles inside the component.

Styling

The Styling tab has opacity controls and a background type option unique to the image component:

• Background Type — set a background color or gradient that sits behind the image.
• Image Opacity — controls how transparent the image itself is (0% fully transparent, 100% fully opaque).
• Background Opacity — controls the transparency of the background behind the image independently. This lets you fade the background without affecting the image, or vice versa.

Links

• Link — toggle to enable or disable the link on the image.
• Link Type — choose Internal to link to a page on your site, or External to provide a URL.

The video component plays a video file from your Media Library. Videos do not play in the editor — a static thumbnail is shown while you are editing. You will only see the video play on the preview or live site.

Selecting a video

Select the component in the LHS and click Select Video to choose a video from your library. Once a video is set the button changes to Change Video. You can also right-click the component and choose Change Video to open the Change Video popup.

Video Fill

Controls how the video fits inside its frame:

• Stretch to Fill — stretches the video to fill the frame exactly. May distort the aspect ratio.
• Crop to Fill — fills the frame completely by cropping the video edges. No empty space, but the sides may be cut off.
• Fit (Aspect Ratio) — fits the full video inside the frame without cropping, preserving the aspect ratio.

Playback settings

Found in the Video tab in the LHS:

• Autoplay — start playing the video automatically when the page loads.
• Mute — play the video without sound. On by default.
• Controls — show the play/pause bar and other player controls to the visitor. On by default.
• Loop — restart the video from the beginning when it ends.

Border

• Border Radius — rounds the corners of the video frame.
• Border Width — sets how thick the border is.
• Border Type — choose the style of the border: solid, dashed, dotted, double, or none.
• Border Color — sets the color of the border.

Styling

• Background Type — set a background color or gradient that sits behind the video. Visible in areas not covered by the video, such as when using Fit (Aspect Ratio) fill mode.
• Video Opacity — controls how transparent the video itself is (0% fully transparent, 100% fully opaque).
• Background Opacity — controls the transparency of the background independently.

The LHS (left-hand side) is the panel on the left of the editor where you can manage and configure everything on your site. The RHS (right-hand side) is the live canvas on the right where you can see what your site looks like. You can make edits from both sides — the LHS gives you precise controls while the RHS lets you interact with your content directly.

Switching views

The editor lets you switch between desktop and mobile view using the toggle buttons in the editor toolbar, or by pressing Cmd + Shift + V (Mac) / Ctrl + Shift + V (Windows). This changes the canvas to show how your site will look on that screen size.

Mobile overrides

Desktop and mobile are separate editing layers. When you switch to mobile view and make changes — such as adjusting padding, height, or background — those changes are saved specifically for mobile and will not affect how the site looks on desktop. This means you can fine-tune the look of your site independently for each screen size.

If you have made mobile-specific changes to a section or component, a reset button will appear in the LHS letting you clear those overrides and fall back to the desktop layout.

Hiding sections on specific screen sizes

You can hide any section on either desktop or mobile without deleting it. Open the section's settings dropdown and choose Hide on mobile or Hide on desktop. The section will still exist and be visible in the other view — it just will not appear for visitors on the hidden screen size.

The context menu

Right-clicking almost anything on the RHS opens a context menu with actions relevant to whatever you clicked. The top of the menu shows the element's name and type so you always know which element the actions will apply to. Click any item to run it immediately, or click anywhere outside the menu (or press Escape) to close it without doing anything.

Right-clicking a section

Right-clicking a section on the RHS gives you:

• Change Background Type — switch between Solid Color, Gradient, Image, and Video backgrounds.
• Change Color / Change Gradient / Change Image / Change Video — opens the relevant popup to edit the current background.
• Move Section Up / Move Section Down — reorder the section on the page.
• Delete — remove the section and all its contents.

Right-clicking a snap section also shows a Change Layout option that opens the Snap Layout popup. This option is grayed out if the section is using a custom layout.

Right-clicking a component

Right-clicking a component shows actions for that component, plus the parent section's actions in a separate group below a divider — so you can act on the section without having to close the menu and right-click again.

Common component actions:

• Duplicate — create a copy of the component in the same section.
• Move to Top / Move Forward / Move Backward / Move to Bottom — reorder the component within the section.
• Delete — remove the component.

Some components show extra options based on their type:

• Image — Change Image, which opens the Change Image popup.
• Button — Edit Link, to change where the button goes.
• Shape — Change Shape (Rectangle, Circle, Triangle, or Diamond) and Change Color.

Components inside a snap section replace the reorder options with background controls — Change Background Type and the matching edit action — since snap section components cannot be reordered in the standard way.

Right-clicking the navbar or footer

Right-clicking the navbar or footer opens background options:

• Change Background Type — switch between Solid Color, Gradient, and Image.
• Change Color / Change Gradient / Change Image — edit the current background.

Right-clicking in the LHS

You can also right-click sections in the LHS section list to get a menu with additional options not available on the RHS:

• New Section — add a section directly above or below this one.
• Rename — give the section a custom label.
• Duplicate Section — create a copy of the entire section.
• Move to Top / Move to Bottom — jump the section to the very top or bottom of the page.
• Change Background Type and the matching edit action.
• Delete — remove the section.

Right-clicking a custom code section in the LHS adds an Open Code Editor option at the top of the menu.

What is the tummy tuck?

The tummy tuck is a setting that limits how wide your page content appears on screen. When enabled, it creates space on both sides of your page — preventing text, images, and components from stretching edge-to-edge on large monitors. The result is a cleaner, more readable layout that keeps your content centered and contained.

Section backgrounds are not affected — they continue to fill the full width of the browser. Only the content inside each section is constrained.

Where to find it

Open the Website Settings panel and go to the Appearance tab. Scroll down to the Layout section. You will see a toggle labelled Limit section width and a Content width dropdown directly below it.

Enabling and disabling

Toggle Limit section width on to activate the tummy tuck. Toggle it off to let your sections stretch to fill the full browser width. Changes are reflected live as you toggle — no need to save first to see the effect.

Choosing a content width

The Content width dropdown lets you choose how narrow or wide the constrained area should be:

• 960px — Narrow: A tighter column suited to text-heavy or blog-style layouts.
• 1200px — Standard: The default. Works well for most sites.
• 1440px — Wide: A broader container that gives content more room to breathe.
• 1600px — Extra wide: The widest option, suited to full-featured landing pages or dashboards.

The selected width only takes effect when Limit section width is turned on. Your site updates in real time as you change the width, so you can compare options before saving.

Navigation

• E — switch to the editor tab.
• M — switch to the Media Library tab.
• S — switch to the settings tab.
• Cmd + Shift + V (Mac) / Ctrl + Shift + V (Windows) — toggle between desktop and mobile view. Only works while on the editor tab.

Components

• Cmd + C (Mac) / Ctrl + C (Windows) — copy the selected component.
• Cmd + X (Mac) / Ctrl + X (Windows) — cut the selected component.
• Cmd + V (Mac) / Ctrl + V (Windows) — paste the copied or cut component into the selected section.
• Shift + Click — select multiple components at once. Click additional components while holding Shift to add them to your selection.
• Escape — clear the current multi-selection.

Copy, cut, paste, and Shift + Click cannot be used on components inside snap sections.

Media Library

• G — switch to grid view. Only works while on the Media Library tab.
• L — switch to list view. Only works while on the Media Library tab.

What is a section?

Sections are the building blocks of your website. Every page is made up of sections stacked on top of each other — think of them as the rows or panels that divide your page into distinct areas, like a hero at the top, a features row in the middle, and a contact block at the bottom.

Inside each section you place components — things like text, images, and buttons — to build out the content of that area.

Adding a section

To add a new section, click the add button that appears between existing sections on the page, or use the add section button at the top of the LHS. This will open the Add section popup where you can choose the type of section you want to add. Once added it will appear on the page ready for you to fill with components.

Changing section height

Select a section and open the height dropdown in the LHS to change the height. You can also drag the bottom edge of a section on the RHS to resize it directly.

Changing the background

Each section has its own background that you can customize independently. You can set it to a solid color, a gradient, an image, or a video. Select a section and look for the background dropdown in the LHS to make changes.

Reordering sections

You can reorder sections in two ways. On the LHS, drag a section up or down or use the arrow buttons to move it. On the RHS, drag and drop sections directly into a new position. You can also right-click a section on the RHS to get reordering options.

Section settings

Each section has a settings dropdown that gives you additional options:

• Rename — give the section a custom name to help you identify it.
• Hide on mobile / Hide on desktop — make a section visible only on certain screen sizes.
• Lock — prevent the section from being accidentally edited or moved.
• Delete — remove the section and all its contents from the page.

What is a snap section?

A snap section is a type of section that divides its space into a fixed grid of slots. Instead of placing components freely anywhere on the section, each component is assigned to a specific slot and fills it completely. Snap sections are useful for building dashboard-style layouts, feature grids, image galleries, and any design where you want tightly controlled columns and rows.

Snap sections have a fixed height — components fill their slots rather than expanding the section.

Slot sizes

Each slot in a snap section has a size that determines how much of the grid it occupies:

• Small — 1 column × 1 row
• Medium — 1 column × 2 rows
• Large — 2 columns × 2 rows
• Extra Large — 3 columns × 4 rows

Empty slots show their size as a label inside a dashed placeholder, so you can always see what will go where before adding content.

Adding components to slots

Empty slots appear as dashed-border placeholders with a + icon and the slot's size label. Click a placeholder to open the Add component popup and choose what to place there. You can also drag a component that is already inside the section onto a different slot to swap their positions.

Note that the standard copy, cut, and paste keyboard shortcuts are not available for components inside a snap section.

Number of slots

Select a snap section and look for the Number of Slots control in the LHS. Use the slider or type a number (1–10) to set how many slots the section should have. When you change the slot count, the section automatically picks the first matching layout template for that count. You cannot reduce the slot count below the number of components currently placed — remove components first if you need to go lower.

Gap between slots

The Gap Between Slots control sets the spacing between slots in pixels (0–50 px). Use the slider or enter a number directly. The gap updates live as you drag so you can see the result immediately.

Choosing a layout

Click Select Layout in the LHS to open the Snap Layout popup. This shows a grid of layout templates for your current slot count, organized into named groups. Click any card to apply it immediately.

Build Layout mode

If none of the preset layouts suit your design, you can design your own grid from scratch using Build Layout mode.

What is Build Layout mode?

Build Layout mode lets you design a fully custom grid arrangement for a snap section instead of using one of the preset templates. You can move slots, resize them, add new ones, and delete ones you do not need.

Entering Build Layout mode

Select a snap section, then click Build Layout in the LHS. A Build Layout button also appears directly on the section itself in the editor — clicking either one enters the mode. Every slot in the section will get an orange outline to indicate you are in Build Layout mode.

Moving slots

Drag any slot to a new position within the grid. A ghost preview follows your cursor while dragging to show you where the slot will land.

Resizing slots

Each slot has a resize handle in its bottom-right corner. Drag it to expand or shrink the slot across grid cells. The slot snaps to the grid as you drag.

Deleting slots

Click the × button in the top-right corner of any slot to remove it. If the slot contains a component, a confirmation prompt will appear before removing it — the component itself is not deleted, it just loses its position in the layout.

Adding empty slots

Click the + button at the top of the section to add a new empty slot. You can then resize and position it where you need it.

Exiting and saving

When you are happy with your layout, click the checkmark button on the section to save and exit Build Layout mode. Your custom layout is applied immediately.

Reverting to a template

Once a custom layout is saved, the Number of Slots slider and Select Layout button in the LHS are locked — these controls only work with template-based layouts. A Revert button appears in the LHS. Click it to discard your custom layout and return to a preset template.

What is a component?

A component is a single content block that you place on a page — things like a line of text, a heading, an image, or a button. Think of components as the individual pieces that you stack and arrange to build a page, similar to how you might lay out a poster or a flyer.

Every piece of visible content on your site is made up of components. They are separate from sections, which act as the containers that hold and group components together.

Types of components

• Text — a line or paragraph of text, from a short label to a full block of copy.
• Button — a clickable button that can link to another page, a URL, or trigger an action.
• Media / Video — an image or video pulled from your media library or uploaded directly.

Adding a component

To add a component to your page, click the + button that appears when you hover over an existing section. A component picker will open where you can browse and select the type of component you want to add.

Once added, the component will appear inside the section and be ready to edit immediately.

Editing a component

Click any component on the page to select it. A toolbar will appear with options to edit the content, adjust styling, or delete the component. Changes are saved automatically as you make them.

Reordering components

To move a component up or down within a section, select it and use the arrow buttons in the toolbar. You can also drag and drop components into a new position within the same section.

Deleting a component

Select the component you want to remove, then click the Delete button in the toolbar. Deleted components cannot be recovered, so make sure you no longer need the content before removing it.

Where to find it

The Add Page popup can be found in the middle of the editor navbar, right between the pages list and the delete page button. Click it to open the popup and add a new page to your site.

Page Name

Enter the name for your new page. This is how the page will be identified in the editor and in the navbar if you choose to add it there.

Add to Navbar

A toggle that, when checked, will automatically add the new page as a link in your site's navbar the moment it is created. This saves you from having to add the link manually afterward.

Adding the page

Once you have entered a name and set your preferences, click Add Page to create the page. You will be taken to it immediately and can start building right away.

What it does

The Delete Page popup allows you to remove a page from your site. Deleted pages can be restored within 93 days, after which they are permanently removed.

The home page cannot be deleted

Your site must always have at least one page, so the home page is protected and cannot be deleted. If you want to remove the home page you would need to set a different page as the home page first.

Opening the popup

The Add Component popup appears when you click the + button inside any empty component slot in a section. It shows you all available components organized by category.

Browsing components

Components are grouped into categories so you can find what you need quickly. Each component shows a small preview of what it looks like. When you hover over a component, a live render appears showing exactly how it will look in the spot you are adding it to — using your site's actual theme, colors, and fonts.

Theme and styling

When a component is added it automatically picks up your site's colors, fonts, and theme so it fits in with the rest of your page right away. You can adjust its styling further from the LHS after it is added.

Opening the popup

The Add Section popup appears when you click the add button between existing sections on the RHS, or the add section button at the top of the LHS. The new section will be inserted at the position you clicked.

Sections

The Sections category shows the available blank section types. Each one has a small preview so you can see what it looks like before adding it. When you hover over a section it shows you a render of how it will look on your page using your site's theme, colors, and fonts. Click any section to add it to your page.

Templates

The Templates category shows pre-built sections that already have content, layout, and styling applied. These are a fast way to add a polished section to your page without building it from scratch. Like regular sections, they will use your site's theme colors and fonts when added.

What is the hamburger menu?

The hamburger menu is the sliding panel that contains all of your navbar links. When a visitor clicks the menu icon in the navbar, a panel slides in from the right side of the screen showing all of your pages and links. Clicking anywhere outside the panel or clicking the close button inside the panel will close it.

What goes inside it

Every link you add to your navbar will appear inside the hamburger menu. This includes regular page links and any dropdown menus you have set up. The links inside the hamburger menu match exactly what you have configured in the navbar.

Opening and closing

• Click the menu icon in the navbar to open the panel.
• Click the X button inside the panel to close it.
• Click anywhere on the dark overlay to the left of the panel to close it.

The hamburger menu can only be opened on the preview or live site. It cannot be clicked inside the editor.

What is a custom code section?

A custom code section is a special type of section that gives you full control over the HTML, CSS, and JavaScript inside it. Unlike a regular section where you add components from the LHS, a custom code section is a blank canvas — you write the code yourself. This is useful for embedding third-party widgets, building something that the standard components cannot do, or adding any custom design or functionality you need.

How it works

When you add a custom code section to your page it appears as a full-width section. To write your code, select the section and click the Custom Code Editor button in the LHS. This opens the Custom Code popup where you can write your HTML, CSS, and JavaScript.

How code is handled

Your CSS and JavaScript are automatically scoped to your section so they cannot accidentally affect the rest of your page. This means you can write CSS selectors and JavaScript without worrying about them breaking other parts of your site.

Important notes

• Custom code sections cannot contain regular components — the whole section is your code.

Opening the popup

Select a custom code section on your page and click the Custom Code Editor button in the LHS. The custom code popup will open with three editors.

The three editors

• HTML — write the markup for your section. You can include standard HTML elements, embed codes from third-party services, or any valid HTML. You can also write <style> and <script> tags directly inside the HTML field and they will be extracted and handled automatically.
• CSS — write styles for the elements in your HTML. Your CSS is automatically scoped to your section so it only affects elements inside it and cannot break the rest of your page.
• JavaScript — write JavaScript to add interactivity. Your code runs inside the section only.

Scoped selectors

Inside the JavaScript editor, two helper functions are available to make selecting elements easier:

• $(selector) — selects the first matching element inside your section, equivalent to container.querySelector().
• $$(selector) — selects all matching elements inside your section, equivalent to container.querySelectorAll().

Using these instead of document.querySelector() ensures your JavaScript only targets elements inside your own section.

Opening the popup

The snap layout popup opens when you click the Choose Layout button in the LHS while a snap section is selected. The popup title shows the current slot count — for example "Select Layout (4 Slots)".

Slot count

The slot count is set using the slots slider in the LHS before opening the popup. If you try to reduce the slot count below the number of components already placed in the section, a warning appears and the slider resets to the minimum allowed value — you need to remove components first before shrinking the grid.

Choosing a layout

The popup shows a grid of layout templates organized into named groups. Each card displays the layout's name and a color-coded visual preview of how the slots will be arranged. The layouts shown always match the slot count you have selected — if you have 4 slots selected you will see 4-slot layouts, change to 5 slots and the popup will show 5-slot layouts instead. Click any card to apply it — the layout is applied immediately and the popup closes automatically.

Currently selected

If the section already has a layout applied, it is highlighted in the grid and shown in a "Currently selected" indicator at the top of the popup with a small preview of the layout.

Slot sizes

Each slot in a layout has a size that determines how much space it takes up in the grid:

• Small — 1 column wide, 1 row tall.
• Medium — 1 column wide, 2 rows tall.
• Large — 2 columns wide, 2 rows tall.
• Extra Large — 3 columns wide, 4 rows tall.

The preview in each card color-codes slots by size so you can see the composition at a glance.

Search and filters

Use the search bar to find layouts by name or group. The filter pills — Small, Medium, Large, and Extra Large — let you narrow the grid to layouts that contain slots of a particular size. Multiple filters can be active at once.

Opening the popup

The gradient popup opens when you click the Change Gradient button on a component or section whose background type is set to gradient. You can find this in the LHS when the element is selected.

Presets tab

The popup opens on the Presets tab showing a large grid of ready-made gradients — linear, radial, and conic styles across dozens of color combinations. Click any preset to apply it immediately. The currently applied gradient is highlighted with a "Current Background" label. There is no Apply button on this tab; clicking a preset applies it straight away and closes the popup.

Custom tab

Switch to the Custom tab to build your own gradient from scratch. This tab has three main areas:

Gradient type

Choose between three types from the dropdown at the top:

• Linear — colors flow in a straight line at any angle.
• Radial — colors radiate outward from a center point in a circle or ellipse.
• Conic — colors sweep around a center point like a color wheel.

Direction and angle

For linear gradients, a circular dial lets you drag an arrow to set the flow direction. You can also type an angle directly into the degree field (0–359). For conic gradients, the same dial controls the starting angle of the sweep.

Color stops

The color bar shows your gradient's color stops as draggable markers. Click a marker to open the color picker and change its color. Drag a marker left or right to reposition it along the gradient. Click anywhere on the bar between markers to add a new stop at that exact point — the color is automatically interpolated from the surrounding stops. Use Add Color to append a new stop at the end, and Remove to delete the currently selected stop. You can have up to 20 color stops. A gradient must always have at least two stops.

Advanced settings

Expand the Advanced Settings section for additional controls:

• Repeating gradient — tiles the gradient pattern across the element instead of stretching it once.
• Radial shape (radial only) — toggle between circle and ellipse.
• Radial size (radial only) — controls how far the gradient extends: closest side, farthest side, closest corner, or farthest corner.
• Center position (radial and conic) — click a square preview to reposition the center point of the gradient.

Applying and canceling

On the Custom tab, click Apply Gradient to save your gradient to the element. Click Cancel or the X button to discard changes and close the popup.

Opening the picker

The color picker opens whenever you click a color swatch in the LHS — for example a border color, text color, or background color field on any component or section.

Site theme swatches

At the top of the picker is a row of swatches pulled from your site's current theme. These give you quick access to your palette colors — nav background, nav text, section, card, heading, body, button, button text, and accent — so your choices stay consistent across the site.

Preset swatches

Below the theme row is a grid of 30 preset colors covering a broad range of common values. Click any swatch to jump straight to that color.

HSL mode

The default tab shows an HSL picker with two controls:

• Saturation / lightness area — click or drag anywhere in the square to set the color's saturation (left–right) and lightness (top–bottom).
• Hue slider — drag the bar beneath the square to sweep through the full color spectrum from red to violet.

RGB mode

Switch to the RGB tab to dial in exact red, green, and blue values using three sliders. The HSL picker stays in sync — switching tabs updates both views.

Hex input

The hex field at the top shows the current color value. You can type or paste any valid hex code directly (e.g. #3a7bd5) and the picker will update to match.

Eyedropper

Click the eyedropper icon next to the hex field to sample a color from anywhere on your screen. Move the cursor over the page — a magnified preview circle follows it showing the color underneath. Click to pick that color. Press Escape to cancel.

Saving and canceling

Click Save to apply the chosen color to the field. Click Cancel, press Escape, or click outside the picker to discard the change and revert to the original color.

Opening the popup

The media upload popup opens when you click Add Image in the change image popup, Add Video in the change video popup, or the upload button in the media library.

Adding files

Drag and drop files onto the dropzone or click it to open your device's file picker. You can add multiple files at once. Uploads start automatically as soon as files are added — there is no separate upload button.

Supported file types

• Images — JPEG, PNG, GIF, WebP, HEIC, HEIF, DNG
• Videos — MP4, MPEG, MOV, AVI, WebM
• Audio — MP3, WAV, OGG, M4A
• Other — PDF, TXT

The maximum file size is 1GB. Files 100MB and over are uploaded in chunks automatically — no extra steps needed on your end.

Renaming files

Each file in the queue shows a name field pre-filled with the filename. You can edit this before or after the upload completes. Changing the name after upload updates it in your media library straight away.

Progress

Each file shows its own progress bar and an overall progress bar tracks the full batch. If any file fails to upload a retry button appears so you can try those files again without re-uploading the ones that already succeeded.

HEIC photos

HEIC and HEIF photos taken on iPhone are automatically converted to JPEG for web compatibility. A notification appears at the end of the upload letting you know how many photos were converted.

After uploading

When all files have uploaded successfully the underlying selector (change image or change video popup) refreshes its grid with the new files. If you uploaded exactly one image while the change image popup was open, that image is automatically applied to the component and the popup closes for you.

Opening the popup

The change video popup opens when you click the Change Video button on a video component. You can find this button in the LHS when the component is selected.

Choosing a video

The popup shows a grid of every video in your media library. Each tile shows a preview thumbnail, the video name, who uploaded it, and the date it was added. Click any video to select it — the popup closes automatically and the component updates immediately.

Adding a new video

If the video you want is not in your library yet, click the Add Video tile in the grid. This opens the media upload popup so you can upload a file from your device. Once uploaded the video appears in the grid and you can click it to apply it to the component.

Empty library

If you have not uploaded any videos yet, the grid shows a message prompting you to use the Add Video tile to upload your first video.

Opening the popup

The change image popup opens when you click the Change Image button on an image component. You can find this button in the LHS when the component is selected, or directly on the component in the RHS if no image has been set yet.

Choosing an image

The popup shows a grid of every image in your media library. Each thumbnail displays the image name, who uploaded it, and the date it was added. Click any image to select it — the popup closes automatically and the component updates immediately.

Adding a new image

If the image you want is not in your library yet, click the Add Image tile in the grid. This opens the media upload popup so you can upload a file from your device. If you upload a single image it is automatically applied to the component and the popup closes. If you upload multiple images they are added to your library and you can click whichever one you want to apply.

Empty library

If you have not uploaded any images yet, the grid shows a message prompting you to use the Add Image tile to upload your first image.

What is the Media Library?

The Media Library is where you manage all of your media — images, videos, audio, and other files used across your site. Any file you upload to Clay Builder lives here, and you can access it from anywhere in the editor when you need it.

What can you store?

• Images — photos, graphics, logos, and any other image files used on your site.
• Videos — video files you want to display as backgrounds or content on your pages.
• Audio — audio files and other media assets.

Where your media is used

Popups like the Change image and Change video popup pull directly from your Media Library — so anything you upload there is immediately available to use anywhere on your site.

Accessing the Media Library

You can open the Media Library by clicking the folder icon in the top right of the editor, or by pressing the M key on your keyboard.

Once open, you can view your files in a grid for a visual overview, or switch to a table view for more details.

You can also search your media by name using the search bar, or filter it using the sort dropdown. The available filter options are:

• Alphabetical (A–Z)
• Date Added (Newest)
• Date Added (Oldest)
• File Type

How to upload

You can add media by clicking the plus button at the top of the navbar. Doing so will open the Media upload popup where you can select files from your device to upload.

File limits and supported formats

• Maximum file size: 1GB per file
• Supported formats: Images, Videos, Audio, PDFs

Opening the edit panel

Click on any piece of media in the Media Library to open its edit options. You will see a preview along with all of its details and options.

Preview and view options

A thumbnail preview of the file is shown at the top. Below it you have two buttons:

• View Full Resolution Image — opens the image at full resolution in a new tab. For videos this button is replaced with View Video in New Tab.
• Change Thumbnail — replace the preview thumbnail shown for the file in the Media Library. Note that videos do not play in the editor and will display the thumbnail instead — you will only see the video play on the preview or live site.

Name

You can rename the file by editing the name field. Click Save to apply the change.

Description

An optional description field where you can add notes about the file.

File info

Below the description you will find read-only details about the file:

• Created — the date and time the file was uploaded.
• Modified — the date and time the file was last changed.
• Size — the file size.

Saving and deleting

Click Save to apply any changes you have made to the name or description. Click Delete to permanently remove the file from your Media Library. Deleted files cannot be recovered.

How to use media on your site

There are a few ways to place media onto your pages.

Via the LHS

Select an image or video component on your page and look for the change button in the LHS. Clicking it will open the Change image or Change video popup where you can pick media from your library.

Via the RHS (images only)

For image components, a change image button is also available directly on the component in the RHS, giving you quick access to swap the image without needing to go through the LHS first.

Via right-click

You can also right-click any image or video component on the RHS to get the option to change the media directly from the context menu.

Uploading directly from the popup

You do not need to upload media to the library beforehand. Inside both the Change image and Change video popups you can upload additional files directly, and they will be added to your Media Library and selected at the same time.

Connecting your profiles

The Social Media section lets you link your social profiles to your site. Enter the full URL for any platform you want to connect. You only need to fill in the ones that apply to you — any field left blank will simply not appear on your site.

• Facebook Page — link to your Facebook business page.
• X Profile — link to your X (formerly Twitter) profile.
• Instagram Profile — link to your Instagram profile.
• LinkedIn Page — link to your LinkedIn company page or profile.
• YouTube Channel — link to your YouTube channel.
• TikTok Profile — link to your TikTok profile.

Display options

Four toggles control how your social icons appear on your site:

• Show in Footer — display your social icons in your site's footer.
• Open in New Tab — social links open in a new browser tab, keeping visitors on your site. Recommended to leave this on.
• Circle Icons — show icons inside a circle background.
• Use Brand Colors — display each icon in its official brand color. Turn this off for a black look.

Footer Preview

A live preview at the bottom of the page shows how your social icons will look in the footer. You can drag the icons to reorder them. Other changes update after each save.

Site Title

Your website's main title shown in browser tabs and search results. This is what people will see at the top of their browser when they visit your site.

Site Favicon

The small icon that appears on the top left of the browser tab next to your site title. Click Select Favicon Image to choose an image from your Media Library. A square image of 32x32 pixels or larger is recommended for the best result.

Browser Tab Preview

A live preview showing exactly how your site title and favicon will appear in a browser tab. This updates as you make changes so you can see the result before saving.

Contact Email

The primary contact email address for your website. This can be used by Clay Builder features that reference your contact details.

Contact Phone

Your primary contact phone number. Use the dropdown on the left to select a country code, then enter your number in the field on the right.

Business Address

The physical address of your business. This field is optional and can be left blank if it does not apply to you.

What is font size?

Font size controls how large text appears on the page. A larger value makes text bigger; a smaller value makes it smaller. Font size can be set independently on each text component and is usually found in the styling options in the LHS when a text component is selected.

Units

Font size can be expressed in different units. The two most common you will encounter in Clay Builder are:

• px (pixels) — a fixed size that does not change regardless of the user's browser settings. For example, 16px is always 16 pixels tall.
• rem — a size relative to the browser's base font size. See the rem article for a full explanation.

Choosing a size

Body text is typically set between 14px and 18px. Headings are larger — commonly 24px to 48px or more depending on their level. There are no hard rules, but consistency across your site makes it easier for visitors to read and navigate.

What is rem?

rem stands for root em. It is a CSS unit of measurement for size that is relative to the base font size set by the browser — rather than being a fixed number of pixels. On most browsers the default base font size is 16px, which means:

• 1rem = 16px
• 1.5rem = 24px
• 2rem = 32px
• 0.875rem ≈ 14px

Why does it matter?

Because rem scales with the user's browser font size preference, designs that use rem tend to be more accessible than designs that use fixed pixel values. If a visitor has increased their browser's default text size for readability, rem-based sizes will grow with that preference while px-based sizes will stay the same.

rem vs px

Both units appear in Clay Builder's styling options. Pixels give you precise, predictable control. rem gives you sizing that respects the user's environment. For most text sizing, either works — rem is simply the more flexible choice for accessibility.