Email Signature Generator

HTML Template

Detected fields (10)

Websitewebsite

Full Namefull_name

Job Titlejob_title

Addressaddress

Phone Primaryphone_primary

Phone Secondaryphone_secondary

Emailemail

Linkedin Urllinkedin_url

Instagram Urlinstagram_url

Facebook Urlfacebook_url

Preview

Full Name

Job Title

Address

Phone Primary | Phone Secondary

Email | Website

Fill in the fields to replace the placeholders. All links are clickable and the banner scales to fit any width.

Generated HTML

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
  href="https://fonts.googleapis.com/css2?family=Sora:wght@400;600&display=swap"
  rel="stylesheet"
/>
<div
  class="oj-signature-wrap"
  style="
    width: 100%;
    max-width: 1024px;
    position: relative;
    overflow: hidden;
    border-radius: 8px;
  "
>
  <div
    class="oj-signature-inner"
    style="
      width: 4096px;
      height: 1024px;
      transform-origin: top left;
      background: #075e77;
      position: relative;
    "
  >
    <div
      style="
        width: 1814px;
        height: 1024px;
        left: 0px;
        top: 0px;
        position: absolute;
        background: #f0f7ff;
        overflow: hidden;
      "
    >
      <a href="https://Website" style="text-decoration: none; border: 0;">
        <img
          src="https://res.cloudinary.com/xhyz4vxm/image/upload/v1783447883/LG_1A_qhioof.png"
          alt="OJ Solutions"
          style="
            max-width: 1400px;
            max-height: 500px;
            left: 50%;
            top: 50%;
            position: absolute;
            transform: translate(-50%, -50%);
            object-fit: contain;
            border: 0;
          "
        />
      </a>
    </div>
    <div
      style="
        width: 2241px;
        height: 1024px;
        left: 1855px;
        top: 0px;
        position: absolute;
        background: #002337;
        overflow: hidden;
      "
    >
      <div
        style="
          width: 1142px;
          left: 192px;
          top: 89px;
          position: absolute;
          flex-direction: column;
          justify-content: flex-start;
          align-items: flex-start;
          display: inline-flex;
        "
      >
        <div
          style="
            align-self: stretch;
            color: white;
            font-size: 134.67px;
            font-family: Sora;
            font-weight: 600;
            white-space: nowrap;
          "
        >
          Full Name
        </div>
        <div
          style="
            align-self: stretch;
            color: white;
            font-size: 102px;
            font-family: Sora;
            font-weight: 400;
            white-space: nowrap;
          "
        >
          Job Title
        </div>
      </div>
      <div
        style="
          left: 192px;
          top: 700px;
          position: absolute;
          color: white;
          font-size: 60px;
          font-family: Sora;
          font-weight: 400;
          white-space: nowrap;
        "
      >
        Address
      </div>
      <div
        style="
          left: 192px;
          top: 473px;
          position: absolute;
          color: white;
          font-size: 82.67px;
          font-family: Sora;
          font-weight: 600;
          white-space: nowrap;
        "
      >
        <a
          href="tel:Phone Primary"
          style="color: white; text-decoration: none;"
          >Phone Primary</a
        >
        |
        <a
          href="tel:Phone Secondary"
          style="color: white; text-decoration: none;"
          >Phone Secondary</a
        >
      </div>
      <div
        style="
          left: 192px;
          top: 589px;
          position: absolute;
          color: white;
          font-size: 70px;
          font-family: Sora;
          font-weight: 400;
          white-space: nowrap;
        "
      >
        <a
          href="mailto:Email"
          style="color: white; text-decoration: none;"
          >Email</a
        >
        &nbsp;|&nbsp;
        <a
          href="https://Website"
          style="color: white; text-decoration: none;"
          >Website</a
        >
      </div>
      <div
        style="
          left: 192px;
          top: 820px;
          position: absolute;
        "
      >
        <a
          href="Linkedin Url"
          style="display: inline-block; margin-right: 64px; text-decoration: none;"
          title="LinkedIn"
        >
          <img
            src="https://cdn.jsdelivr.net/gh/simple-icons/simple-icons/icons/linkedin.svg"
            alt="LinkedIn"
            width="128"
            height="128"
            style="display: inline-block; border: 0; filter: invert(1);"
          />
        </a>
        <a
          href="Instagram Url"
          style="display: inline-block; margin-right: 64px; text-decoration: none;"
          title="Instagram"
        >
          <img
            src="https://cdn.jsdelivr.net/gh/simple-icons/simple-icons/icons/instagram.svg"
            alt="Instagram"
            width="128"
            height="128"
            style="display: inline-block; border: 0; filter: invert(1);"
          />
        </a>
        <a
          href="Facebook Url"
          style="display: inline-block; text-decoration: none;"
          title="Facebook"
        >
          <img
            src="https://cdn.jsdelivr.net/gh/simple-icons/simple-icons/icons/facebook.svg"
            alt="Facebook"
            width="128"
            height="128"
            style="display: inline-block; border: 0; filter: invert(1);"
          />
        </a>
      </div>
    </div>
  </div>
</div>
<script>
(function(){
  function scaleAll(){
    document.querySelectorAll('.oj-signature-wrap').forEach(function(wrap){
      var inner = wrap.querySelector('.oj-signature-inner');
      if(!inner) return;
      var s = wrap.clientWidth / 4096;
      inner.style.transform = 'scale(' + s + ')';
      wrap.style.height = (1024 * s) + 'px';
    });
  }
  scaleAll();
  window.addEventListener('resize', scaleAll);
})();
</script>

Outlook Signature

Table-based, web-safe fonts, PNG icons, hyperlinks preserved — compatible with Outlook desktop, OWA, and Gmail.

Full Name

Job Title

How to install in Outlook

Click Copy for Outlook above.
Outlook desktop: File → Options → Mail → Signatures → New, then paste (Ctrl+V) into the editor and save.
Outlook on the web / new Outlook: Settings → Mail → Compose and reply → paste into the signature editor and save.
Or download the .htm file and drop it into your Outlook Signatures folder.

<table cellpadding="0" cellspacing="0" border="0" role="presentation" style="border-collapse:collapse;font-family:'Segoe UI', Arial, Helvetica, sans-serif;color:#ffffff;">
  <tr>
    <td width="220" height="205" valign="middle" align="center" style="background:#f0f7ff;width:220px;height:205px;padding:12px;">
      <a href="#" style="text-decoration:none;border:0;" target="_blank" rel="noopener">
        <img src="https://res.cloudinary.com/xhyz4vxm/image/upload/v1783447883/LG_1A_qhioof.png" alt="OJ Solutions" width="190" style="display:block;border:0;outline:none;max-width:190px;height:auto;" />
      </a>
    </td>
    <td width="480" valign="top" style="background:#002337;padding:20px 24px;width:480px;">
      <div style="font-family:'Segoe UI', Arial, Helvetica, sans-serif;color:#ffffff;font-size:22px;font-weight:600;line-height:1.15;white-space:nowrap;">Full Name</div>
      <div style="font-family:'Segoe UI', Arial, Helvetica, sans-serif;color:#ffffff;font-size:15px;font-weight:400;line-height:1.2;white-space:nowrap;margin-top:2px;">Job Title</div>
      
      
      
      
    </td>
  </tr>
</table>