Tayon Help

Style, copy and resize elements by hand

Set colours, text size, spacing, borders, width and shadow yourself, copy and move elements, and drag them to size — instantly, with no AI and no credits.

You’ll need: A website already generated by the AI Builder, open in the editor in its main language.

When you know exactly what you want — this padding, that colour, the same card again — you can do it yourself instead of describing it to the AI. Everything here is instant, free and undoable.

These tools sit in the row at the foot of the panel that opens when you click an element. See Edit your website by clicking it for the rest of that panel.

#Change the look with the Style panel

  1. Click the element in the preview.
  2. Choose 🎨 Style. The Style panel opens beside the page.
  3. Change what you want. The preview updates as you go, but nothing is saved yet.
  4. Choose Apply to keep the changes, or Revert to drop them.
The Style panel
  1. All screens or This device only
  2. Colours
The Style panel

The panel is grouped into sections you can fold open and closed:

Section What you can set
Colours Text, Background and Border colour
Text Size in pixels, Weight from Light to Black, and Alignment — Left, Centre, Right or Justify
Spacing Padding (inside) and Margin (outside) in pixels, for each side
Border Width, Style (Solid, Dashed, Dotted or None) and Corner radius
Size & shadow Width, Max width and Shadow from Small to Extra large

A ✕ beside a value sets it Back to default.

#Colours

Each colour offers swatches from your site’s own palette, plus Custom colour for anything else.

#Spacing

The 🔗 button keeps the Same value on all four sides. Turn it off to set Top, Right, Bottom and Left separately.

#Width

Width and Max width take pixels (320), a percentage (50%), or full / auto. Percentages shrink with the screen; pixels do not, so use a percentage for anything that must fit on a phone.

#Every screen, or just this one

At the top of the panel:

  • All screens — the change applies on desktops, tablets and phones.
  • This device only — the change applies only at the preview width you are using, named next to the button (for example This device only · phones). Switch the preview to 📱 first to fix something that only looks wrong on a phone. Your desktop layout is left as it was.

#Good to know

  • One Apply is one step in ↶ Undo, however many values you changed.
  • Click another element with changes still unapplied and you are asked whether to Discard them.
  • If one value cannot be used, nothing is applied: One of those values could not be used. Check the fields and try again.
  • The Style panel is only offered in the site’s main language. Design is shared by every language, so a translation cannot be styled separately.

#Copy, cut and paste

Button What it does
📋 Copy Copies the element
✂ Cut Picks the element up to move it
⧉ Duplicate Adds an identical copy right after it
📥 Paste Appears once something is copied. Click where it should go and paste
✨ Match style Gives the selected element the copied element’s formatting, keeping its own words

#Paste somewhere

  1. Select an element and choose 📋 Copy or ✂ Cut. A chip at the top of the tools row shows Copied: or Moving: and what it holds.
  2. Click the element you want to paste next to, or into.
  3. Choose 📥 Paste inside or 📥 Paste after — whichever suits what you clicked — or open ▾ for Paste inside this, Paste after this, Paste before this and Replace this.

To drop something at the end of a section, click the section’s background and choose 📥 in the Edit section panel. × on the chip clears the clipboard.

Copy and paste work across sections and pages of the same site, not between two different sites.

#Make one card match the others

AI rewrites see only the element you clicked, never its neighbours, so a card the AI reworks may not quite match the cards beside it. To be certain:

  • Need another card? Select one that looks right and choose ⧉ Duplicate, then change its words.
  • One card has drifted? 📋 Copy a card that looks right, select the odd one out and choose ✨ Match style. Its words stay; its formatting becomes the copied card’s.

#Resize by dragging

Select a box or a picture and handles appear on its edges. Drag one.

  • Items in a grid snap to the grid’s columns — 2 of 3 columns.
  • Pictures and stand-alone boxes snap to steps such as a quarter, a third, a half or full width.
  • A badge shows the size and the screen sizes it applies to.

It snaps on purpose: a fixed pixel width that looks right on your monitor overflows the first phone that opens the page. The element stays selected after you let go, so you can drag again.

Plain text has no handles — to make text bigger, use Size in the Style panel.

#If a change does not show

  • The Style button is missing — you are editing a translation. Switch the language menu in the toolbar back to the main language.
  • The change shows on desktop but not on a phone (or the other way round) — you applied it with This device only. Apply it again with All screens.
  • The live site has not changed — press Republish. Editor changes do not reach the published pages until you do.

Updated: