---
title: "Crear una plantilla"
url: https://docs.catalyst.zoho.com/es/tutorials/payslip-generator-app/nodejs/create-template/
description: "Construya una aplicación web que utiliza Catalyst para generar un PDF a partir de una plantilla de nómina dinámica, y enviarlo por correo al usuario final."
last_updated: 2026-11-04T10:10:44Z
service: All Services
type: tutorial
related_links:
  - name: "Catalyst SmartBrowz"
    url: /es/smartbrowz/getting-started/introduction/
  - name: "Templates"
    url: /es/smartbrowz/help/templates/create-templates/
---

# Crear una plantilla

Necesita crear una plantilla personalizada usando el componente [Catalyst SmartBrowz](https://docs.catalyst.zoho.com/es/smartbrowz/getting-started/introduction/), [Templates](https://docs.catalyst.zoho.com/es/smartbrowz/help/templates/create-templates/). Esta plantilla contendrá el diseño y el estilo de la nómina. Esta es la plantilla que se generará como PDF y se enviará por correo electrónico a los usuarios finales.

Para crear una plantilla:

1. Haga clic en el icono del servicio *Catalyst SmartBrowz* en la consola, y haga clic en **Start Exploring**.
![catalyst_payslip_smartbrowz_homescreen](https://catalyst-docs-development.zohostratus.in/images/tutorials/payslip-generator/payslip-generator-smartbrowz.webp)

2. Haga clic en **Templates** bajo Convert para acceder al componente *Templates*, y haga clic en **Create Template**.
![catalyst_payslip_create_template](https://catalyst-docs-development.zohostratus.in/images/tutorials/payslip-generator/payslip-generator-smart-browz-tempaltes.webp)

3. Seleccione *Custom*, ingrese "**Payslip**" como el nombre de la plantilla, y haga clic en **Create**.
![catalyst_payslip_name_template](https://catalyst-docs-development.zohostratus.in/images/tutorials/payslip-generator/catalyst_payslip_name_template.webp)

Podrá ver el editor de plantillas y la ventana de vista previa de la plantilla.
![catalyst_payslip_blank_template](https://catalyst-docs-development.zohostratus.in/images/tutorials/payslip-generator/catalyst_payslip_blank_template.webp)

4. Copie el código proporcionado y péguelo en los editores apropiados como se explica a continuación:
  * Pegue el siguiente código HTML en el editor HTML

**HTML**

```xml
<!DOCTYPE html>
<html>
  <head>
    <title>Payslip</title>
    <link
      rel="stylesheet"
      type="text/css"
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css"
    />
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  </head>
  <body>
    <div class="container mt-5 mb-5">
      <div class="row">
        <div class="col-md-12">
          <div class="text-center lh-1 mb-2">
            <h6 class="fw-bold color_primary">{{company}} Payslip</h6>
            <span class="fw-normal color_sec"
              >Payment slip for the month of {{month}} {{year}}</span
            >
          </div>
          <div class="d-flex justify-content-end">
            <span>Working Branch: NewYork</span>
          </div>
          <br>
          <div class="row">
            <div class="col-md-10">
              <div class="row">
                <div class="col-sm-6">
                  <div>
                    <span class="fw-bolder color_primary">EMP Code</span>
                    <small class="ms-3 color_sec">{{employeeId}}</small>
                  </div>
                </div>
                <div class="col-sm-6">
                  <div>
                    <span class="fw-bolder color_primary">EMP Name</span>
                    <small class="ms-3 color_sec">{{employeeName}}</small>
                  </div>
                </div>
              </div>
              <div class="row">
                <div class="col-sm-6">
                  <div>
                    <span class="fw-bolder color_primary">Mode of Pay</span>
                    <small class="ms-3 color_sec">{{paymentMethod}}</small>
                  </div>
                </div>
                <div class="col-sm-6">
                  <div>
                    <span class="fw-bolder color_primary">Ac No.</span>
                    <small class="ms-3 color_sec">*******</small>
                  </div>
                </div>
              </div>
              <div class="row">
                <div class="col-sm-6">
                  <div>
                    <span class="fw-bolder color_primary">Designation</span>
                    <small class="ms-3 color_sec">{{designation}}</small>
                  </div>
                </div>
              </div>
            </div>
            <table class="mt-4 table table-bordered">
              <thead class="bg-dark text-white">
                <tr>
                  <th scope="col">Earnings</th>
                  <th scope="col">Amount</th>
                  <th scope="col">Deductions</th>
                  <th scope="col">Amount</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <th scope="row">Basic</th>
                  <td>{{basicSalary}}</td>
                  <td>Tax</td>
                  <td>{{deductions}}</td>
                </tr>
                <tr>
                  <th scope="row">Allowances</th>
                  <td>{{allowances}}</td>
                  <td colspan="2"></td>
                </tr>
                <tr class="border-top">
                  <th scope="row">Total Earning</th>
                  <td>{{totalEarnings}}</td>
                  <td>Total Deductions</td>
                  <td>{{deductions}}</td>
                </tr>
              </tbody>
            </table>
          </div>
          <div class="row">
            <div class="col-md-4">
              <br />
              <span class="fw-bold">Net Pay : {{netSalary}}</span>
            </div>
          </div>
        </div>
      </div>
      <div>
        <br />
        <p>**** This is a system generated payslip ****</p>
      </div>
    </div>
  </body>
</html>

```

* Haga clic en la pestaña CSS y pegue el siguiente código

**CSS**

```css
body {
        font-family: "Times New Roman", Times, serif;
      }
      table {
        width: 100%;
        border-radius: 5px solid;
        border-spacing: 0;
        margin-bottom: 20px;
      }
      tr {
        border: solid 1px #524f4f;
        border-top-color: #524f4f;
      }
      th,
      td {
        padding: 8px;
        text-align: left;  
        color: #101f3e;
        background-color: #fff;
      }
      th {
        background-color: #f8f9fb !important;
        color: #7888a8;
      }
      p {
        text-align: center;
        color: black;
      }
      .color_primary {
        color: black;
      }
      .color_sec {
        color: #4d618a;
      }

```

> **Nota:** Puede crear su propio diseño de plantilla personalizada usando el editor. También puede crear plantillas complejas usando el *editor de JavaScript*, y usar el *editor de datos JSON* para proporcionar valores de marcador de posición.

5. Haga clic en **Save**. Puede ver la plantilla que se renderizará al usuario desde la sección de vista previa a la derecha.
![catalyst_payslip_html_css_template](https://catalyst-docs-development.zohostratus.in/images/tutorials/payslip-generator/catalyst_payslip_html_css_template.webp)

6. Haga clic en **Settings** para estilizar y formatear la plantilla adicionalmente.
![catalyst_payslip_template_setting_highlight](https://catalyst-docs-development.zohostratus.in/images/tutorials/payslip-generator/template-settings-smart-browz-payslip-generator.webp)

7. Le animamos a explorar las diversas opciones y estilizar los elementos de formato visual de la plantilla como prefiera. La sección *Live Preview* renderizará todos sus cambios en tiempo real y mostrará la plantilla que aparecerá al usuario.
![catalyst_payslip_template_settings_style](https://catalyst-docs-development.zohostratus.in/images/tutorials/payslip-generator/catalyst_payslip_template_settings_style.webp)

> **Nota:** Para los propósitos de este tutorial, recomendamos que configure el **Output Format** como PDF.

8. Haga clic en **Save Settings** para guardar sus preferencias. Haga clic en el **icono de flecha hacia atrás** cerca del nombre de la plantilla después de haber completado la personalización de su plantilla.
![catalyst_payslip_template_back_highlight](https://catalyst-docs-development.zohostratus.in/images/tutorials/payslip-generator/catalyst_payslip_template_back_highlight.webp)

Su plantilla personalizada se ha guardado, y podrá ver el **Template ID** único generado por Catalyst. Para obtener más información sobre el componente Templates, visite este [documento de ayuda](https://docs.catalyst.zoho.com/es/smartbrowz/help/templates/create-templates/).
![catalyst_payslip_template_saved_ID_highlight](https://catalyst-docs-development.zohostratus.in/images/tutorials/payslip-generator/catalyst_payslip_template_saved_ID_highlight.webp)