Como criar uma capa com campos inteligentes, como nome de cliente e data da proposta
Para editar os modelos de proposta, vamos em administração - modelos de documentos
Nesse caso, vou criar um novo modelo de propostas, mas isso pode ser feito com qualquer modelo existente!
Vou inserir minha capa em uma Seção separada:
Para facilitar sua edição, disponibilizamos um código que vai te auxiliar na edição da capa. Vamos abrir o código fonte e colá-lo lá.
O código é o seguinte:
<div style="position:relative"><img alt="" height="1122.5" src="https://ploomescrm.s3-sa-east-1.amazonaws.com/E9B11508301A/Images/3cc7f9d029384594a2f6f69f9838e748.png" width="800" />
<div style="position:absolute; top:670px">
<table border="0" cellpadding="1" cellspacing="1" style="width:800px">
<tbody>
<tr>
<td style="width:60px"> </td>
<td style="width:512px">
<p><span style="font-size:22px"><span style="font-family:Verdana,Geneva,sans-serif"><strong><field key="contact_name" path-id="1">[Cliente.Nome]</field></strong></span></span></p>
<p><span style="font-family:Verdana,Geneva,sans-serif"><field format="d" formattable="date" key="quote_date" path-id="56">[Proposta.Data]</field></span></p>
<p> </p>
</td>
<td style="width:214px"> </td>
</tr>
</tbody>
</table>
</div>
</div>
Colado o código, vamos sair da janela do código-fonte e editar a imagem!
Clique duas vezes na imagem para escolher uma nova;
Você pode escolher uma nova de seu computador ou uma que já tenha sido upada ao ploomes. Nesse caso já inseri a minha, então vou escolher direto do menu:
Agora, sem dar atenção à largura na tela de formatação, vamos dar o "ok"
Em "estilos", removo as bordas:
Agora, para formatar a imagem: Abro novamente o código-fonte e edito a altura para 1122.5 e a largura para 800 (ambos se situam na primeira linha)
Está feita a capa!
Agora, para configurar onde ficam os campos inteligentes, editamos o "top" na segunda linha:
Esse valor é o número de pixels entre o topo da tabela e o começo da capa. quanto maior esse valor, mais para baixo vão estar os campos.