Colocando imagem de fundo (marca d'água) no Documento

Neste artigo veremos como inserir uma marca d'água ou plano de fundo nos documentos emitidos no sistema. Uma ideia interessante para diferenciar seus documentos é a utilização de marcas d'água nos documentos, assim você poderá emitir certificados bem elaborados e personalizados.

Neste Artigo:

- Criando o Documento
- Fazendo o Upload da sua imagem
- Inserindo a Marca D'água ou Plano de fundo
- Imprimindo o Documento
- Modelo de código de Certificado

Criando o Documento

1. Clique em Documentos na lateral esquerda do sistema;
2. Clique em Adicionar;
3. Preencha os campos como título, tipo, etc;
4. Escolha o formato HTML, para que possa carregar a imagem do fundo. 


Fazendo Upload da sua imagem

Você precisará de um site que faça hospedagem de imagem nesse momento. Caso você já tenha ela hospedada em algum site, é só clicar com o botão direito do mouse e selecionar Copiar endereço da imagem

1. Clique aqui para acessar o site de hospedagem de imagem;
2. Selecione a imagem no seu computador;
3. Prossiga até concluir a hospedagem;
4. Clique com o botão direito na imagem;
5. Selecione Copiar endereço da imagem.


Inserindo a Marca D'água ou Plano de Fundo

1. Clique em Código-Fonte
2. Insira o código abaixo e altere as informações apenas nas partes em negrito:

<div style="background-image: url(Cole aqui o link url da sua imagem); 
background-repeat: no-repeat; background-size: 100%; height: Alturapx; width: Largurapx;">
<p style="text-align: center;">
Escreva aqui a mensagem .</p>
</div> 

3. Depois de inserir o código, colocar a URL, altura e largura, você pode clicar em Código-Fonte novamente e digitar as informações do documento normalmente.

Fique atento: Caso precise alterar o tamanho do fundo, basta clicar em Código-Fonte e alterar o valor em Height (Altura) e Width (Largura).


Imprimindo o Documento

1. Clique em Alunos;
2. Selecione o checkbox (mceclip1.png) de um aluno; 
3. Em Ações, escolha o documento desejado;
4. Clique em Aplicar;
5. No documento gerado, clique com o botão direito do mouse e selecione imprimir (ou aperte Ctrl + P);
6. Caso o plano de fundo/marca d'água não apareça para impressão, clique em Mais Definições/Configurações e marque a caixa de seleção de Gráficos de Segundo plano.
7. Clique em Imprimir (para imprimir o documento) ou Salvar (para salvar em PDF).

definicoes.png 

Modelo de código de Certificado

Você pode usar o código abaixo como base se desejar, para isso, copie o código e siga os passos indicados na seção Inserindo a Marca D'água ou Plano de Fundo:

<div style="background-image: url(https://i.postimg.cc/tTs9XbTp/modelo-de-certificado-em-branco-5.png);
background-repeat: no-repeat; background-size: 100%; height: 720px; width: 1100px;">
<p style="text-align: center;">
&nbsp;</p>
<p style="text-align: center;">
&nbsp;</p>
<p style="text-align: center;">
&nbsp;</p>
<p style="text-align: center;">
&nbsp;</p>
<p style="text-align: center;">
&nbsp;</p>
<p style="text-align: center;">
&nbsp;</p>
<p style="text-align: center;">
&nbsp;</p>
<p style="text-align: center;">
<span style="font-size:26px;"><span style="font-family:georgia,serif;">Certificamos que</span></span></p>
<p style="text-align: center;">
&nbsp;</p>
<p style="text-align: center;">
<span style="font-size:36px;"><span style="font-family:georgia,serif;">%ALUNO_NOME%</span></span></p>
<p style="text-align: center;">
&nbsp;</p>
<p style="text-align: center;">
<span style="font-size:26px;"><span style="font-family:georgia,serif;">concluiu com sucesso o curso&nbsp;%TURMA_SERIE%,&nbsp;</span><span style="font-family: georgia, serif;">em&nbsp;%TURMA_DATA_FINAL%.</span></span></p>
<p style="text-align: center;">
&nbsp;</p>
<p style="text-align: center;">
&nbsp;</p>
<p style="text-align: center;">
<span style="font-size:28px;"><span style="font-family:georgia,serif;">______________________</span></span></p>
<p style="text-align: center;">
<span style="font-size:28px;"><span style="font-family:georgia,serif;">Diretor</span></span></p>
<p style="text-align: center;">
&nbsp;</p>
<p style="text-align: center;">
&nbsp;</p>
<p style="text-align: center;">
<img alt="" src="/files/ckfinder/0base/images/130313_wpensar_skype-02.jpg" style="font-family: georgia, serif; font-size: 28px; width: 100px; height: 100px;" /></p>
</div>

Como ficará:

mceclip0.png

Tem mais dúvidas? Envie uma solicitação

Comentários

Desenvolvido por Zendesk