Edit text, images, icons, links, components, and connected fields

Use semantic fields before advanced controls #

Select one element and open Attributes. The first controls use plain-language labels for that element's meaningful content: text, image, destination, source, state, or behavior. Changes appear on the canvas as you make them. Double-click a text-first element to focus its main content field.

Scroll to Advanced settings when the semantic fields do not cover an intentional exception. Depending on the element, groups can include General, Spacing, Size, Grid layout, Alignment, Typography, Background, Borders, Shadows, Image, Link, Animation, Position, Visibility, Carousel, Pagination, Data source, and Layout behavior.

Advanced settings is expanded the first time the editor opens. Choose its summary to collapse or reopen the complete group; that choice is remembered for the current editing session as you select other elements. If a container has no curated fields but does have technical attributes, the panel shows a short “select an item inside” hint and keeps those advanced groups available.

Edit text, headings, buttons, and actions #

1. Select the text or heading and change Content. Use the element's color, font, size, weight, and alignment controls only when it should differ from Site Styles.
2. Keep heading levels in a logical outline. Do not choose a heading level only for its visual size.
3. For a button, edit its label, style, optional icon, and link. A label should describe the result, such as “View pricing” or “Send enquiry”.
4. Open Preview and activate the result with a keyboard as well as a pointer. The editing canvas intentionally prevents the visitor action.

Text alignment is also available from the compact selection toolbar. Buttons may expose variant and outline toggles. Check line wrapping at Mobile and at 200% browser zoom in the visitor preview; a button must not lose its label, focus outline, or usable target size.

Configure form labels as one accessible system #

Select the form itself—not an individual answer field—to set consistent label behavior across the form:

• Labels: Above, Beside, or Hidden. Hidden removes visible text. Text-like fields, text areas, selects, and radio hosts retain the form label as an accessible name; checkbox-group options deliberately retain their individual option names instead.
• Label size, Label weight, and Label colour: set a consistent visual hierarchy. Additional technical controls include case and letter spacing.
• Mark required answers with: Star, “required”, or Nothing. A visual marker supplements the field's required behavior; it must not be the only way validation is communicated.
• When Labels is Beside, use the advanced label-width setting to size the label column. Help text remains with the answer rather than becoming another column. At viewport widths of 479 px or less, Beside automatically stacks the label above its answer regardless of that width.

Visible labels focus their answer when selected and are usually clearer for everyone. Be especially careful with Hidden on a Pick several group: its individual options keep their own names, but the hidden group label does not become the group's programmatic name. Keep group labels visible unless you have verified equivalent context. Preview with keyboard and screen-reader behavior in mind: label wording, requirement, help, and error text should describe the same field.

Choose, upload, describe, and tune an image #

Select an image or logo and open its image field. The picker can provide URL, Upload, Library, and Stock photos, depending on the website configuration.

1. Use Upload for a file you own. Large raster images are optimized when that produces a smaller useful file; the longest edge is limited to 2560 pixels and WebP is used only when it is smaller. SVG and GIF keep their format.
2. Use Library for an existing site asset instead of uploading duplicates. Deleting a library asset is permanent and can break every page that still uses its URL, so find and replace usages first.
3. Write Image description for the image's purpose in context. Use an empty description for a purely decorative image. Do not repeat a nearby caption word for word.
4. Choose an image fit that keeps important content visible at Desktop, Tablet, and Mobile. Cropping can change as the container changes shape.
5. If the image is actionable, configure Click action and make sure its purpose is also available to keyboard and screen-reader users.

Look and effects include Original, Mono, Noir, Warm, Cool, Fade, and Vivid, plus brightness, contrast, saturation, black and white, sepia, hue, blur, and related fine tuning. These adjustments are non-destructive: return to Original to remove the visual treatment. Preview performance after using a large hero image.

Paste and verify a playable video address #

Select a video and open Video. Its preview remains visible while the address editor starts folded behind a status summary such as “No video yet — paste an address.” Choose that summary to reveal the field; its open or closed state is remembered for the current editing session. Paste the address from the browser bar: a YouTube or Vimeo watch, share, or embed link works, as does a direct playable video-file address such as an MP4 URL. There is no video Upload tab because the current media-upload endpoint accepts images, not video files.

The field confirms what it understood before saving. YouTube and Vimeo show a service-labelled poster; a direct file attempts to show its real first frame. A channel, profile, playlist, malformed address, or file that cannot play gets a specific message instead of silently leaving an empty canvas player.

Configure cover, autoplay, repeat, and muted behavior when the selected video offers them. Avoid forced sound and essential autoplay. Provide captions or a transcript for meaningful speech and ensure controls remain usable by keyboard. Finally, use visitor Preview—the poster verifies the source, but only the real player verifies playback, controls, captions, and mobile behavior.

Use a catalogue icon or your own picture #

Select an icon and open the icon field. Choose Library to search the catalogue or Your picture to use an image address or upload your own SVG, PNG, WebP, or supported image file. SVG is usually the sharpest and lightest choice for a simple custom symbol.

Catalogue search understands common related terms, ranks close matches, and shows the number found. Only a bounded set is rendered at once, so refine a broad query when the intended result is not visible. Then set color and size in the semantic icon controls.

Do not use a symbol as the only explanation of an unfamiliar action. Pair it with visible text or ensure the surrounding interactive control has an accessible name. Decorative icons should not add repeated meaning.

Create a clear, safe destination #

Open the link field or right-click and choose the link action. The picker supports:

A custom address remains available for destinations that do not fit a managed choice. Preview every destination. Avoid “click here”; link text should still make sense when read out of context. The editor blocks unsafe nested interactive content, such as a second link inside a clickable card. If a destination field is unavailable, select the correct outer element instead of forcing raw link values through Advanced settings.

Know which controls to expect #

Not every control belongs to every component. If a field is missing, confirm the selection and use the ancestor trail. A container can own background and layout while its child owns the content or destination.

Edit connected content without silently breaking it #

A compatible field inside a collection card or item-page context can read from a database column. Its Attributes control shows Connected to followed by the column name, or a From column notice, instead of behaving like ordinary free text.

1. Select the collection and choose Edit data to change rows, or Edit card design to change the repeated template.
2. Use Connect a database for an eligible unconnected collection. Nested lists can instead offer Connect this list to a column.
3. Inside the card or item design, use the binding control beside a compatible text, image, link, color, or other field and choose the intended column.
4. Check several representative rows. One row can hide missing values, long titles, unusual images, or an invalid item link.

Changing card design affects every rendered row. Changing Edit data changes records. Creating a page for each item also needs a stable unique slug and route; follow the dynamic-content guide before publishing item links.

Complete the content, mobile, and accessibility check #

• No placeholder copy, sample prices, false claims, or unexplained empty fields remain.
• Headings form a meaningful outline and controls have specific visible labels.
• Informative images have contextual descriptions; decorative images do not create repeated announcements.
• Every link and click action has a real destination and understandable purpose. External, email, and phone actions use the intended format.
• Connected elements still name the intended column and work across empty, typical, long, and missing-value records.
• Images are sharp enough but not unnecessarily heavy, and important content survives responsive cropping.
• Desktop, Tablet, Mobile, keyboard-only use, and 200% visitor browser zoom have been checked in Preview.