The visual editor
Click anywhere on the quote to edit it. You type text directly on the page.
This feature is new and may not be enabled on your account yet. If you don’t see it, write to us.
What it is
The Design editor opens the quote in full screen, exactly as your client will see it, and lets you change it in place. You open it in two ways:
- From Quotes › Designs, with Edit or New design: you change one of your business’s designs. See Your designs.
- From a draft’s detail page, with Design this quote, or from its editor, with Customize this quote: you change only that quote. It’s part of the Professional plan. See Design a single quote.
Use the editor on a computer: it needs the width of a desktop screen.
The parts of the editor
- Top bar: the arrow to go back, the design’s name, its save status, the Desktop, Tablet, and Mobile buttons, Undo, Redo, Preview, and Save.
- Left panel, with four tabs: Add, Layers, Theme, and Code.
- In the center, the quote. In a business design it has sample data; in a draft, its own.
- Right panel, the inspector: the content and style of the selected block.
Select, move, and add blocks
When you hover over it, each block is marked with its name. Click to select it: it opens in the inspector and its floating toolbar appears:
| Button | What it does |
|---|---|
| Move up / Move down | Moves it one place. |
| Duplicate | Creates a copy below. Only on your own blocks. |
| Block settings | Moves the focus to the inspector. Only on your own blocks. |
| Remove | Removes it, with Undo in the notice. It doesn’t appear on the blocks the client needs before approving. |
To add a block:
- The + above or below the block opens Add a block and places it in that spot.
- In the Add tab, one click adds the block after the selected one; with nothing selected, before approval.
- Drag a card from the Add tab onto the page: a line marks where it will go.
A change that would leave your client without what they need to approve isn’t made: the notice says why, for example “This block goes before approval: the client reads it before approving.”
Type on the page
Click a text in your own blocks and type. Enter finishes a one-line text and Esc undoes what you typed in it. A required text, such as the cover title, can’t be left empty. From the Professional plan you also type this way the custom text of Cord blocks, such as the line items’ title or the total’s label.
In formatted texts (the Text block, the columns, and the answers in FAQ), when you
select part of the text, the formatting bar appears: Bold, Italic, Heading,
Subheading, Paragraph, List, Numbered list, Link, and Variable.
Links only accept addresses that start with https://.
Variables
Type them in curly braces in any text and they’re replaced with each quote’s details. With no block selected, the inspector lists them: click one to copy it.
| Variable | Replaced with |
|---|---|
{cliente.nombre} |
Client name |
{cliente.empresa} |
Client company |
{negocio.nombre} |
Your business |
{folio} |
Number |
{fecha} |
Date |
{vigencia} |
Valid until |
{total} |
Total, with its currency |
Dates and the total come out in the document’s language and format. A variable Cord doesn’t recognize shows as typed, and the editor warns you.
Blocks you can add
| Group | Block | What it has |
|---|---|---|
| Cover and text | Cover | Eyebrow (a short uppercase line above the title), title, subtitle, and height (Medium or Full screen). |
| Cover and text | Text | Paragraphs, headings, and lists. |
| Cover and text | Columns | 2 to 3 columns, each with a title and text. |
| Cover and text | Canvas | Text, shapes, lines, arrows, icons, and patterns placed freely and in layers, in the aspect ratio you choose. |
| Content | Timeline | A title and 1 to 20 stages with a date and description. |
| Content | Stats | A title and 1 to 6 stats with their label. |
| Content | FAQ | A title and 1 to 20 questions that expand when clicked. |
| Content | Team | A title and 1 to 12 people with a role and bio. |
| Trust | Testimonials | A title and 1 to 8 testimonials with an author and role. |
| Trust | Sign-off | A closing message with a name and role. |
| Structure | Divider | Line, Space, Dots, Waves, Zigzag, or Stars, with a Small, Medium, or Large height, in the Color of the theme borders or one of your brand colors. |
Logos, Image, Gallery, and Video say Coming soon: they arrive with your business’s image and video library.
Each new block comes with sample text so you can see how it looks. Change it before using the design.
The canvas
The Canvas block is a workspace: you place text, shapes, lines, arrows, icons, and patterns anywhere, one on top of another, like in a design tool. It starts with a sample title and shape.
- Enter: click the canvas. The topmost element under the pointer is selected, with its handles; Done or Esc takes you back to the block.
- Select several: ⇧-click adds or removes an element; drag from an empty or locked area to select with a marquee; ⌘A selects everything. Clicking a grouped element picks its group, and double-clicking picks only that element.
- Move and resize: drag the element or its handles. Guides snap to the edges and centers of the canvas and the other elements, and to equal spacing between them, shown with its measurement; hold ⌘ or Ctrl to move freely. With ⇧ it moves in a straight line and keeps its proportions, with ⌥ it grows from the center, and ⌥-dragging duplicates it. The arrow keys nudge it (with ⇧, ten times as far).
- Rotate: drag the round handle on top (with ⇧, in 15-degree steps) or type the Rotation.
- Align and distribute: one element aligns to the canvas; several align to each other (⌥A, ⌥H, and ⌥D horizontally; ⌥W, ⌥V, and ⌥S vertically). Distribute spaces three or more evenly.
- Add: from Add in the inspector, or with the keyboard and dragging on the canvas: T text, R rectangle, O ellipse, L line, ⇧L arrow, and V to go back to moving. Image says Coming soon.
- Type: double-click a text, or press Enter with the text selected. A text you leave empty is removed.
- Layers and groups: Canvas layers lists the elements from front to back: drag them to change their order, and lock or hide each one (hidden ones don’t show in the link). ⌘G groups and ⇧⌘G ungroups; ⌘[ and ⌘] change the layer (with ⌥, to the back or front). ⌘D duplicates and ⌫ removes.
- Copy: ⌘C, ⌘X, and ⌘V copy, cut, and paste elements, also into another canvas. Copy style and Paste style (⌥⌘C and ⌥⌘V) carry colors, borders, and effects.
- View: ⌘’ shows the grid, which also attracts what you move, and ⇧R the rulers.
With the canvas selected, the inspector shows its Aspect ratio (16:9, 4:3, 1:1, 3:1, 4:5, or Free), Height, Corners, Background, and a Description for screen readers. With an element selected, it shows its Position and size (the canvas is 1000 wide) and Rotation; what’s specific to each element (style, size, and font of a text; shape, fill, and border of a shape; thickness and ends of a line; the icon and what it means); its Effects (opacity, shadow, blur, and blend), and its Layer. Colors are the theme’s, so they change with it, or a custom one.
What Cord protects on a canvas:
- It goes between blocks, never on top of one. Anything past its edge is clipped.
- Every text is readable over what’s behind it, in light and dark: the background, the shapes it crosses, and the patterns, with a contrast of 4.5 to 1 (3 to 1 if it’s large).
- On a phone it shows whole, scaled down. Use large text: the editor warns you when one would look small.
Cord blocks
They fill in on their own with each quote’s details. You can move them to another place or column and, from the Professional plan, customize their text, how they look, and their surface, but what they show comes from each quote.
| Block | What it shows | Can it be removed? |
|---|---|---|
| Header | Your logo, the quote number, and the date. | No |
| Quote details | Who it’s for, how long it’s valid, and the payment terms. | No |
| Total | The total due, with taxes. | No |
| Line items | The products and services with their prices. | No |
| Payment plan | Milestone payments, if the quote has a plan. | No |
| Notes | The notes you write on each quote. | No |
| Legal text | Your terms and your business’s legal text. | No |
| Approval and payment | Approve, sign, and pay. | No |
| Conversation | The chat with your client. | Yes |
| Contact | Your business’s email, WhatsApp, and phone. | Yes |
| Footer | The Cord credit at the bottom. | Yes |
If you remove the conversation, the contact, or the footer, they show up again in the Add tab, under Cord blocks, so you can put them back.
The inspector
With one of your own blocks selected, the inspector has two parts:
- Content: the block’s fields. Fields that are lists (stages, people, questions) can be added, reordered with Move up and Move down, and removed, within each block’s limits. Formatted texts are edited on the page with Type on the page.
- Style:
- Background: None, Brand (primary, secondary, accent, surface, or page background), Color, or Gradient.
- Pattern: Lines, Grid, Dots, Waves, or Grain, behind the content, in a theme Color, with its Intensity (up to 30%) and Scale.
- Shape: a shape in one corner (Star, Sparkle, Flower, Spiral, Squiggle, or Circle), in a theme Color and a Small, Medium, or Large size. It sits behind the text and is cut off at the edge of its block: pick a corner without text so everything stays readable. Cord blocks don’t take a pattern or a shape.
- Spacing: None, Compact, Normal, or Spacious.
- Width: Content, Wide, or Full.
- Alignment: Left, Center, or Right.
- Entrance animation: None, Fade in, Rise, Slide, Scale, or Blur.
- Visible on: All, Desktop, or Mobile.
With a Cord block selected, the inspector marks it as a Cord block, says what it shows, and offers:
- Column: which column of its section it goes in, when the section has more than one. It’s on every plan.
- Customize: from the Professional plan, what you can change on each block, in the table below. A text you leave empty shows The default text, and texts accept variables.
- Surface: from the Professional plan, Card (its usual panel), Flat (no panel or shadow), or Transparent (it’s read directly on the page background).
| Block | What you customize |
|---|---|
| Header | Alignment: Left or Center. |
| Total | Label, Size (Compact, Normal, or Large), and Alignment (Left, Center, or Right). |
| Line items | Title, Layout (Table, Cards, or Compact), and Visible columns (Quantity and Unit price). Each line’s amount is always shown. |
| Notes, Legal text, Conversation, and Contact | Title. |
| Approval and payment | Button text. |
| Footer | Caption: Verified by Cord or Made with Cord. |
The surface is noticeable in the Document and Web page layouts. A transparent block needs its text to be readable on the page background, in both of its colors if it’s a gradient.
Without the Professional plan, Customize and Surface appear dimmed, with the From Professional badge and the note “With Professional you can change their text, the total’s size and alignment, how line items look and their surface. Without it, your quotes show them as usual and what you already saved is kept.” The text of Cord blocks can’t be typed on the page either, and the quote shows them as usual. Column is still available.
Layers
The Layers tab lists all the blocks in order. Drag one to change its place or click it to select it. Cord blocks have the By Cord tag, and one with no data in the quote says No content in this quote.
Reset to Cord’s design removes your blocks and restores the usual order. It asks you to confirm and you can undo it.
Design theme
The Theme tab has the same controls as Theme and default design: ready-made themes, page layout, colors, background, typography, shape, and motion. It starts from your business’s theme, and what you change here applies only to this design.
Code
The Code tab shows the full design as JSON. You can copy it with Copy, edit it, and click Apply. Cord validates it with the same rules as the editor: if the JSON isn’t valid, it says so and doesn’t apply it; if it’s fine, it says No errors. A design weighs up to 64 KB.
The Code tab is on every plan, but it doesn’t get around the plan: without Professional, a new customization of Cord blocks that you paste there isn’t saved. The notice says “Customize Cord blocks: requires the Professional plan or higher.” and the status, Couldn’t save. Undo the change to keep saving. You can always remove a customization.
Saving and items to review
The editor saves on its own a few seconds after each change, and also with Save or ⌘S / Ctrl+S. Next to the name you see the status: Saved, Unsaved changes, Saving…, or Couldn’t save. If you leave with unsaved changes, the browser asks you first.
Some problems don’t block the change, but they do block saving. The N to review button in the top bar lists them, and while any remain, the status says Review the warnings to save:
- “The text isn’t readable on that background. Choose a color with more contrast.” A theme color or the background of a Cord block doesn’t reach a contrast of 4.5 to 1.
- “A Cord block goes on a solid color.” The Cord block is transparent on a background that isn’t a color or a gradient.
- “A text on the canvas can’t be read over what’s behind it. Change its color or put a shape behind it.” A canvas text doesn’t reach 4.5 to 1 (3 to 1 if it’s large) over the background, shapes, or patterns behind it.
Others are only warnings and don’t stop anything: a variable Cord doesn’t recognize, a text in your own blocks that’s hard to read on its background, or the total painted with the text color because your primary color isn’t readable.
On a canvas it also warns you when a text would look very small on a phone, when two texts sit on top of each other, or when an element is outside the canvas.
Undo and Redo remember up to 100 steps while the editor is open.
Preview and devices
Desktop (up to 1180 px wide), Tablet (820 px), and Mobile (390 px) change the quote’s width. Preview hides the frames and bars so you see it as your client does; Exit preview or Esc takes you back to editing. Approving or paying inside the editor doesn’t do anything real: it’s a sample view.
Keyboard shortcuts
| Action | Mac | Windows |
|---|---|---|
| Undo | ⌘Z | Ctrl+Z |
| Redo | ⇧⌘Z | Shift+Ctrl+Z or Ctrl+Y |
| Duplicate block | ⌘D | Ctrl+D |
| Remove block | ⌫ | Delete or Backspace |
| Move block | ⌥↑ / ⌥↓ | Alt+↑ / Alt+↓ |
| Previous or next block | ↑ / ↓ | ↑ / ↓ |
| Type in the block | Enter | Enter |
| Clear the selection | Esc | Esc |
| Save | ⌘S | Ctrl+S |
Common problems
- A canvas text looks small on my phone. The canvas shows whole and scaled down on a phone: make the text bigger, or keep less text on the canvas and more in a Text block.
- I can’t remove a block. It’s one of the blocks the client needs to see before approving. You can move it, as long as it stays before Approval and payment.
- The status says “Review the warnings to save”. Open N to review and fix each item; the editor saves as soon as none are left.
- A card says Coming soon. Image, gallery, logos, and video arrive with your business’s image and video library.
- My text shows
{something}as typed. That variable doesn’t exist. Use one from the variables table on this page. - The block doesn’t show on a phone. Check Visible on in its style.
- Customize and Surface say From Professional. Customizing Cord blocks is part of the Professional plan. What you already saved is kept and applies again when you change your plan in Settings › Plans & subscription.
- “Customize Cord blocks: requires the Professional plan or higher.” Your plan doesn’t include that customization. Undo the change or remove it in the Code tab.