O editor visual
Clique em qualquer parte do orçamento para editá-lo. Os textos são digitados direto na página.
Este recurso é novo e pode ainda não estar habilitado na sua conta. Se você não o vir, fale com a gente.
O que é
O Editor de design abre o orçamento em tela cheia, do jeito que seu cliente vai vê-lo, e permite mudá-lo ali mesmo. Você o abre de duas maneiras:
- Em Orçamentos › Designs, com Editar ou Novo design: você muda um design da empresa. Veja Seus designs.
- Nos detalhes de um rascunho, com Criar o design deste orçamento, ou no editor dele, com Personalizar este orçamento: você muda só esse orçamento. Faz parte do plano Profissional. Veja Crie o design de um único orçamento.
Use o editor em um computador: ele precisa da largura de uma tela de desktop.
As partes do editor
- Barra superior: a seta para voltar, o nome do design, o estado de salvamento, os botões Desktop, Tablet e Celular, Desfazer, Refazer, Prévia e Salvar.
- Painel esquerdo, com cinco abas: Adicionar, Mídia, Camadas, Tema e Código.
- No centro, o orçamento. Em um design da empresa, ele traz dados de exemplo; em um rascunho, os dele.
- Painel direito, o inspetor: o conteúdo e o estilo do bloco selecionado.
Selecionar, mover e adicionar blocos
Ao passar o ponteiro, cada bloco é marcado com o nome dele. Clique para selecioná-lo: ele abre no inspetor e aparece a sua barra flutuante:
| Botão | O que faz |
|---|---|
| Subir / Descer | Move o bloco uma posição. |
| Duplicar | Cria uma cópia abaixo. Só nos seus blocos. |
| Configurações do bloco | Leva o foco ao inspetor. Só nos seus blocos. |
| Remover | Remove o bloco, com Desfazer no aviso. Não aparece nos blocos de que o cliente precisa antes de aprovar. |
Para adicionar um bloco:
- O + acima ou abaixo do bloco abre Adicionar um bloco e o coloca nesse lugar.
- Na aba Adicionar, um clique adiciona o bloco depois do selecionado; sem seleção, antes da aprovação.
- Arraste um cartão da aba Adicionar para a página: uma linha marca onde ele vai ficar.
Uma mudança que deixaria seu cliente sem o que ele precisa para aprovar não é feita: o aviso diz por quê, por exemplo “Este bloco fica antes da aprovação: o cliente o lê antes de aprovar.”
Escrever na página
Clique em um texto dos seus blocos e escreva. Enter termina um texto de uma linha e Esc desfaz o que você escreveu nele. Um texto obrigatório, como o título da capa, não pode ficar vazio. A partir do plano Profissional, você também escreve assim os textos próprios dos blocos do Cord, como o título dos itens ou o rótulo do total.
Nos textos com formatação (o bloco Texto, as colunas e as respostas de Perguntas
frequentes), ao selecionar uma parte aparece a barra de formatação: Negrito,
Itálico, Título, Subtítulo, Parágrafo, Lista, Lista numerada,
Link e Variável. Os links só aceitam endereços que começam com https://.
Variáveis
Digite-as entre chaves em qualquer texto e elas são trocadas pelo dado de cada orçamento. Sem um bloco selecionado, o inspetor as lista: clique em uma para copiá-la.
| Variável | É trocada por |
|---|---|
{cliente.nombre} |
Nome do cliente |
{cliente.empresa} |
Empresa do cliente |
{negocio.nombre} |
Seu negócio |
{folio} |
Número |
{fecha} |
Data |
{vigencia} |
Validade |
{total} |
Total, com a moeda |
As datas e o total saem no idioma e no formato do documento. Uma variável que o Cord não conhece aparece como está, e o editor avisa você.
Blocos que você pode adicionar
| Grupo | Bloco | O que leva |
|---|---|---|
| Capa e texto | Capa | Sobretítulo (uma linha curta em maiúsculas acima do título), título, subtítulo e altura (Média ou Tela cheia). |
| Capa e texto | Texto | Parágrafos, títulos e listas. |
| Capa e texto | Colunas | De 2 a 3 colunas, cada uma com título, texto e uma Imagem opcional. |
| Capa e texto | Tela livre | Textos, formas, linhas, setas, ícones, padrões e imagens colocados livremente e em camadas, na proporção que você escolher. |
| Conteúdo | Cronograma | Título e de 1 a 20 etapas com data e descrição. |
| Conteúdo | Números | Título e de 1 a 6 números com o seu rótulo. |
| Conteúdo | Perguntas frequentes | Título e de 1 a 20 perguntas que se abrem com um toque. |
| Conteúdo | Equipe | Título e de 1 a 12 pessoas com cargo, biografia e Foto opcional. |
| Confiança | Depoimentos | Título e de 1 a 8 depoimentos com autor, cargo e Foto opcional. |
| Confiança | Encerramento | Uma mensagem de encerramento com nome, cargo e Imagem da assinatura opcional. |
| Confiança | Logos | Título e de 1 a 24 logos da sua biblioteca, cada um com o seu texto alternativo, e a opção Em cinza. |
| Imagens e vídeo | Imagem | Uma foto ou ilustração da sua biblioteca com Texto alternativo, Legenda, Proporção (Original, 16:9, 4:3, 1:1 ou 3:4) e Ajuste (Preencher ou Inteira). |
| Imagens e vídeo | Galeria | De 2 a 12 imagens da sua biblioteca, cada uma com o seu texto alternativo, em 2, 3 ou 4 colunas. No celular aparecem em 2. |
| Imagens e vídeo | Vídeo | Título e um vídeo: Da sua biblioteca, com uma capa que o Cord tira do próprio vídeo, ou do YouTube ou Vimeo com o link. |
| Estrutura | Separador | Linha, Espaço, Pontos, Ondas, Zigue-zague ou Estrelas, com altura Pequena, Média ou Grande e na Cor das bordas do tema ou de uma da sua marca. |
Ao adicionar Imagem, Galeria, Vídeo ou Logos, abre-se Escolha na sua biblioteca para escolher o que eles mostram (uma galeria leva pelo menos duas imagens). Num vídeo do YouTube ou do Vimeo, o player do terceiro só carrega quando seu cliente clica, e o do YouTube é o youtube-nocookie.
Cada bloco novo traz um texto de exemplo para você ver como fica. Mude-o antes de usar o design.
Biblioteca de mídia
Suas fotos, logos e vídeos ficam na aba Mídia do painel esquerdo, e qualquer design da sua empresa pode usá-los. Ali você também vê o espaço que ocupam, por exemplo “Usando 12 MB de 100 MB”.
- Enviar: clique em Enviar ou arraste os arquivos para o painel. Você também envia pelo seletor Escolha na sua biblioteca.
- Usar: arraste uma foto ou um vídeo para o orçamento, ou escolha-o a partir de um bloco.
- Descrever: dê a cada arquivo um Nome e um Texto alternativo, a descrição para quem não vê a imagem; ele é usado ao escolhê-la num bloco.
- Apagar: com Apagar, depois de confirmar.
O seletor da biblioteca aparece ao adicionar os blocos Imagem, Galeria, Vídeo ou Logos; na Foto de Equipe e Depoimentos, na Imagem de Colunas e na Imagem da assinatura; no fundo de uma seção ou de um bloco; no fundo da página do tema ou da aba Tema, e na ferramenta Imagem da tela livre.
Formatos
| Tipo | Formatos | Tamanho máximo |
|---|---|---|
| Imagem | JPG, PNG, WebP, AVIF, GIF (usa-se o primeiro quadro) ou SVG | 15 MB |
| Vídeo | MP4 | 6 MB |
- Um SVG vira imagem. Um que traz scripts ou links para outros arquivos é recusado.
- Cada imagem é guardada otimizada em WebP, em até quatro larguras (480, 960, 1600 e 2400 px), e o navegador do seu cliente baixa só a que precisa.
- O Cord tira os dados do arquivo, como a localização gravada no EXIF, e mantém a orientação da foto. Do MP4 tira os metadados sem recodificá-lo.
- O arquivo original nunca é servido.
Espaço por plano
| Plano | Espaço |
|---|---|
| Grátis | 100 MB |
| Starter | 1 GB |
| Profissional | 5 GB |
| Scale | 20 GB |
| Developer | 20 GB |
Conta o que fica guardado, já otimizado. Ao chegar ao limite, nada mais é enviado até você apagar algo ou mudar de plano. A biblioteca e todos os seus blocos estão em todos os planos, a partir do Grátis.
Apagar um arquivo
- Um arquivo em uso não é apagado. Se um design que não está arquivado, o design próprio de um orçamento ou o fundo do seu tema o usa, a biblioteca diz onde, para você tirá-lo de lá primeiro.
- O que seu cliente já recebeu não muda. Um arquivo que só aparece em orçamentos já enviados sai da biblioteca, mas esses orçamentos continuam a mostrá-lo e ele continua ocupando espaço.
- Um design só usa arquivos da sua biblioteca, nunca um endereço da internet nem um arquivo de outra empresa.
- Ao excluir a organização, tudo é apagado. A exportação de dados da organização inclui a biblioteca: os dados dela, não os arquivos.
A tela livre
O bloco Tela livre é uma área de trabalho: você coloca textos, formas, linhas, setas, ícones e padrões onde quiser, um sobre o outro, como numa ferramenta de design. Ele começa com um título e uma forma de exemplo.
- Entrar: clique na tela. Fica selecionado o elemento mais acima sob o ponteiro, com suas alças; Concluir ou Esc voltam ao bloco.
- Selecionar vários: ⇧ clique adiciona ou remove um elemento; arraste a partir de uma área livre ou bloqueada para selecionar com um retângulo; ⌘A seleciona tudo. Um clique num elemento agrupado escolhe o grupo, e o clique duplo, só esse elemento.
- Mover e redimensionar: arraste o elemento ou suas alças. As guias se encaixam nas bordas e nos centros da tela e dos outros elementos, e à mesma distância entre eles, que aparece com a medida; com ⌘ ou Ctrl ele se move livremente. Com ⇧ ele se move em linha reta e mantém a proporção, com ⌥ cresce a partir do centro, e arrastar com ⌥ o duplica. As setas do teclado o movem um pouco (com ⇧, dez vezes mais).
- Girar: arraste a alça redonda de cima (com ⇧, de 15 em 15 graus) ou digite a Rotação.
- Alinhar e distribuir: com um elemento, ele se alinha à tela; com vários, entre si (⌥A, ⌥H e ⌥D na horizontal; ⌥W, ⌥V e ⌥S na vertical). Distribuir reparte três ou mais com o mesmo espaço.
- Adicionar: em Adicionar no inspetor, ou pelo teclado e arrastando sobre a tela: T texto, R retângulo, O elipse, L linha, ⇧L seta e V para voltar a mover. Imagem abre sua biblioteca e coloca a imagem que você escolher no centro da tela.
- Escrever: clique duas vezes num texto, ou pressione Enter com o texto selecionado. Um texto que fica vazio é removido.
- Camadas e grupos: Camadas da tela lista os elementos da frente para o fundo: arraste-os para mudar a ordem e bloqueie ou oculte cada um (o oculto não aparece no link). ⌘G agrupa e ⇧⌘G desagrupa; ⌘[ e ⌘] mudam a camada (com ⌥, para trás ou para frente de tudo). ⌘D duplica e ⌫ remove.
- Copiar: ⌘C, ⌘X e ⌘V copiam, recortam e colam elementos, também em outra tela. Copiar estilo e Colar estilo (⌥⌘C e ⌥⌘V) levam cores, bordas e efeitos.
- Visualização: ⌘’ mostra a grade, que também atrai o que você move, e ⇧R as réguas.
Com a tela selecionada, o inspetor mostra a Proporção (16:9, 4:3, 1:1, 3:1, 4:5 ou Livre), a Altura, os Cantos, o Fundo e uma Descrição para leitores de tela. Com um elemento selecionado, mostra a Posição e tamanho (a tela mede 1000 de largura) e a Rotação; o que é próprio de cada elemento (estilo, tamanho e fonte de um texto; forma, preenchimento e borda de uma forma; espessura e pontas de uma linha; o ícone e o que significa; o texto alternativo de uma imagem, ou a caixa Decorativa, o ajuste, os Cantos e a Borda); os Efeitos (opacidade, sombra, desfoque e mesclagem) e a Camada. As cores são as do tema, então mudam com ele, ou uma própria.
O que o Cord cuida numa tela livre:
- Ela fica entre blocos, nunca em cima de um. O que passa da borda é cortado.
- Cada texto se lê sobre o que está atrás dele, no claro e no escuro: o fundo, as formas que cruza, os padrões e as imagens (contra o pixel menos favorável), com contraste de 4,5 para 1 (3 para 1 se for grande).
- No celular ela aparece inteira, em escala. Use textos grandes: o editor avisa quando um ficaria pequeno.
Blocos do Cord
São preenchidos sozinhos com os dados de cada orçamento. Você pode movê-los de lugar e de coluna e, a partir do plano Profissional, personalizar os textos, a aparência e a superfície deles, mas o que mostram sai de cada orçamento.
| Bloco | O que mostra | Pode ser removido? |
|---|---|---|
| Cabeçalho | Seu logo, o número e a data. | Não |
| Dados do orçamento | Para quem é, a validade e o prazo de pagamento. | Não |
| Total | O total a pagar com os impostos. | Não |
| Itens | Os produtos e serviços com seus preços. | Não |
| Plano de pagamento | Os pagamentos por etapas, se o orçamento tiver plano. | Não |
| Notas | As notas que você escreve em cada orçamento. | Não |
| Texto legal | Suas condições e o texto legal do seu negócio. | Não |
| Aprovação e pagamento | Aprovar, assinar e pagar. | Não |
| Conversa | O chat com seu cliente. | Sim |
| Contato | E-mail, WhatsApp e telefone do seu negócio. | Sim |
| Rodapé | O crédito do Cord no final. | Sim |
Se você remover a conversa, o contato ou o rodapé, eles voltam a aparecer na aba Adicionar, em Blocos do Cord, para você colocá-los de novo.
O inspetor
Com um dos seus blocos selecionado, o inspetor tem duas partes:
- Conteúdo: os campos do bloco. Os que são listas (etapas, pessoas, perguntas) são adicionados, reordenados com Subir e Descer e removidos, dentro dos limites de cada bloco. Os textos com formatação são editados na página com Escrever na página.
- Estilo:
- Fundo: Nenhum, Marca (principal, secundária, destaque, superfície ou fundo da página), Cor, Degradê, Imagem ou Vídeo. Com uma imagem ou um vídeo você escolhe a Posição (o centro, um lado ou um canto), o Tom (cor e intensidade), a Opacidade, o Desfoque (até 40 px), a Mesclagem e Texto sobre um cartão. O texto por cima fica branco ou preto conforme o tom; se não der para ler, ele vai sobre um cartão.
- Padrão: Linhas, Grade, Pontos, Ondas ou Granulado, atrás do conteúdo, em uma Cor do tema, com sua Intensidade (até 30%) e sua Escala.
- Adorno: uma forma em um canto (Estrela, Brilho, Flor, Espiral, Rabisco ou Círculo), em uma Cor do tema e no tamanho Pequeno, Médio ou Grande. Fica atrás do texto e é cortado na borda do bloco: escolha um canto sem texto para que tudo continue legível. Os blocos do Cord não levam padrão nem adorno.
- Espaçamento: Nenhum, Compacto, Normal ou Amplo.
- Largura: Conteúdo, Ampla ou Total.
- Alinhamento: Esquerda, Centro ou Direita.
- Animação de entrada: Nenhuma, Aparecer, Subir, Deslizar, Zoom ou Desfoque.
- Aparece em: Todos, Desktop ou Celular.
Com um bloco do Cord selecionado, o inspetor o marca como Bloco do Cord, diz o que ele mostra e oferece:
- Coluna: em qual coluna da seção ele fica, quando a seção tem mais de uma. Está em todos os planos.
- Personalizar: a partir do plano Profissional, o que muda em cada bloco, na tabela abaixo. Um texto que você deixa vazio mostra O texto padrão, e os textos aceitam variáveis.
- Superfície: a partir do plano Profissional, Cartão (o painel de sempre), Liso (sem painel nem sombra) ou Transparente (é lido direto sobre o fundo da página).
| Bloco | O que você personaliza |
|---|---|
| Cabeçalho | Alinhamento: Esquerda ou Centro. |
| Total | Rótulo, Tamanho (Compacto, Normal ou Grande) e Alinhamento (Esquerda, Centro ou Direita). |
| Itens | Título, Apresentação (Tabela, Cartões ou Compacta) e Colunas visíveis (Quantidade e Preço unitário). O valor de cada item sempre aparece. |
| Notas, Texto legal, Conversa e Contato | Título. |
| Aprovação e pagamento | Texto do botão. |
| Rodapé | Legenda: Verificado por Cord ou Feita com Cord. |
A superfície se nota nos layouts de página Documento e Página web. Um bloco transparente precisa que o texto dele fique legível sobre o fundo da página, nas duas cores se for um degradê.
Sem o plano Profissional, Personalizar e Superfície aparecem desativados, com o selo A partir do plano Profissional e a nota “Com o plano Profissional, você muda os textos, o tamanho e o alinhamento do total, como os itens aparecem e a superfície. Sem ele, seus orçamentos os mostram como sempre e o que você já salvou é mantido.” Os textos dos blocos do Cord também não são escritos na página, e o orçamento os mostra como sempre. Coluna continua disponível.
Camadas
A aba Camadas lista todos os blocos em ordem. Arraste um para mudar o lugar dele ou clique para selecioná-lo. Os blocos do Cord levam a marca Do Cord, e um sem dados no orçamento diz Sem conteúdo neste orçamento.
Voltar ao design do Cord remove seus blocos e deixa a ordem de sempre. Ele pede confirmação e você pode desfazer.
Tema do design
A aba Tema tem os mesmos controles de Tema e design padrão: temas prontos, layout da página, cores, fundo, tipografia, forma e movimento. Parte do tema da sua empresa, e o que você mudar aqui vale só para este design.
O fundo da página de um design é o fundo do link inteiro e substitui o do tema. Em Código, só a primeira página tem fundo próprio.
Código
A aba Código mostra o design completo em JSON. Você pode copiá-lo com Copiar, editá-lo e clicar em Aplicar. O Cord o valida com as mesmas regras do editor: se o JSON não é válido, ele avisa e não o aplica; se está certo, diz Sem erros. Um design pesa até 64 KB.
A aba Código está em todos os planos, mas não contorna o plano: sem o Profissional, uma nova personalização dos blocos do Cord que você colar ali não é salva. O aviso diz “Personalizar os blocos do Cord: disponível a partir do plano Profissional.” e o estado, Não foi possível salvar. Desfaça a mudança para voltar a salvar. Remover uma personalização sempre é possível.
Salvamento e pontos para revisar
O editor salva sozinho alguns segundos depois de cada mudança, e também com Salvar ou ⌘S / Ctrl+S. Ao lado do nome você vê o estado: Salvo, Alterações não salvas, Salvando… ou Não foi possível salvar. Se você sair com alterações não salvas, o navegador pergunta antes.
Alguns problemas não impedem a mudança, mas impedem o salvamento. O botão N para revisar da barra superior os lista e, enquanto restarem, o estado diz Revise os avisos para salvar:
- “O texto não fica legível sobre esse fundo. Escolha uma cor com mais contraste.” Uma cor do tema ou o fundo de um bloco do Cord não chega ao contraste de 4,5 para 1.
- “Um bloco do Cord fica sobre uma cor sólida.” O bloco do Cord está transparente sobre um fundo que não é uma cor nem um degradê.
- “Um texto da tela não dá para ler sobre o que está atrás dele. Mude a cor ou coloque uma forma por trás.” Um texto da tela livre não chega a 4,5 para 1 (3 para 1 se for grande) sobre o fundo, as formas ou os padrões que tem atrás.
- “O texto sobre uma imagem precisa de uma sobreposição de cor para ficar legível.” Uma seção, um bloco ou a página tem uma foto ou um vídeo de fundo com texto por cima, sem tom ou com um tom tão leve que o texto não chega a 4,5 para 1 contra o ponto menos favorável da imagem. Aumente a intensidade do Tom ou ative Texto sobre um cartão.
- “Só a primeira página tem fundo próprio: ele é o fundo do link inteiro.” Em
Código, uma página que não é a primeira tem
fondo. Tire-o; o fundo do link inteiro vai na primeira página ou na aba Tema.
Ao salvar, o Cord também confere se cada imagem e vídeo está na biblioteca da sua empresa. Um design colado em Código a partir de outra conta não é salvo assim: o status diz Não foi possível salvar até você trocar essas imagens por outras da sua biblioteca ou tirá-las.
Outros são só avisos e não impedem nada: uma variável que o Cord não conhece, um texto dos seus blocos difícil de ler sobre o fundo, ou o total pintado com a cor do texto porque a sua cor principal não fica legível.
Numa tela livre, também avisa quando um texto ficaria muito pequeno no celular, quando dois textos ficam um em cima do outro, quando um elemento ficou fora da tela ou quando uma imagem não tem descrição nem está marcada como Decorativa.
Desfazer e Refazer lembram até 100 passos enquanto o editor está aberto.
Prévia e dispositivos
Desktop (até 1180 px de largura), Tablet (820 px) e Celular (390 px) mudam a largura do orçamento. Prévia esconde as molduras e as barras para você vê-lo como seu cliente; Sair da prévia ou Esc volta à edição. Aprovar ou pagar dentro do editor não faz nada de verdade: é uma visualização de exemplo.
Atalhos de teclado
| Ação | Mac | Windows |
|---|---|---|
| Desfazer | ⌘Z | Ctrl+Z |
| Refazer | ⇧⌘Z | Shift+Ctrl+Z ou Ctrl+Y |
| Duplicar bloco | ⌘D | Ctrl+D |
| Remover bloco | ⌫ | Delete ou Backspace |
| Mover bloco | ⌥↑ / ⌥↓ | Alt+↑ / Alt+↓ |
| Bloco anterior ou seguinte | ↑ / ↓ | ↑ / ↓ |
| Escrever no bloco | Enter | Enter |
| Limpar a seleção | Esc | Esc |
| Salvar | ⌘S | Ctrl+S |
Problemas comuns
- Um texto da tela livre fica pequeno no celular. A tela aparece inteira e em escala no celular: aumente o texto, ou deixe menos texto na tela e mais num bloco Texto.
- Não consigo remover um bloco. É um dos que o cliente precisa ver antes de aprovar. Você pode movê-lo, sempre antes de Aprovação e pagamento.
- O estado diz “Revise os avisos para salvar”. Abra N para revisar e corrija cada ponto; o editor salva assim que não sobrar nenhum.
- “Não cabe na sua biblioteca: restam … de …” Você chegou ao espaço do seu plano. Apague algo em Mídia ou mude de plano em Configurações › Planos e assinatura.
- “Este arquivo é usado em um design. Tire-o de lá antes de apagá-lo.” A biblioteca diz onde ele é usado: o nome do design, o número do orçamento ou o fundo do seu tema.
- “Este SVG traz scripts ou links para outros arquivos e não pode ser usado.” Exporte como PNG ou como um SVG simples.
- O vídeo de fundo não se mexe. Quem o vê pediu ao sistema menos movimento ou ativou a economia de dados: o vídeo fica parado na capa.
- Meu texto mostra
{exemplo}como está. Essa variável não existe. Use uma da tabela de variáveis desta página. - O bloco não aparece no celular. Confira Aparece em no estilo dele.
- Personalizar e Superfície dizem A partir do plano Profissional. Personalizar os blocos do Cord faz parte do plano Profissional. O que você já salvou é mantido e volta a ser aplicado ao mudar de plano em Configurações › Planos e assinatura.
- “Personalizar os blocos do Cord: disponível a partir do plano Profissional.” Seu plano não inclui essa personalização. Desfaça a mudança ou remova-a na aba Código.