Email Layout

[Mimi Edet]

Please, how do I achieve this email layout?

[Siddhesh Jadhav · Accepted solution]

Hello @Mimi Edet,

Try this:

<table style="width: 100%; background-color: #ffffff;">
  <tbody>
    <tr>
      <td>
        <table style="width: 100%; max-width: 800px; margin: auto; background-color: #ffffff;">
          <tbody>
            <!-- Email Body Section -->
            <tr>
              <td style="padding: 20px; font-size: 16px; color: #333;">
                <p>${notification:body}</p>
              </td>
            </tr>

            <!-- Footer Section with Logo and Contact Info -->
            <tr>
              <td style="padding: 20px;">
                <table>
                  <tr>
                    <!-- Logo Section -->
                    <td style="vertical-align: top; padding-right: 10px;">
                      <img src="logo_url_here" alt="Logo" style="width: 100px; height: auto;">
                    </td>

                    <!-- Contact Information Section -->
                    <td style="font-size: 12px; color: #333;">
                      <p>Company Name<br>Address Line 1<br>Address Line 2<br>Phone: (123) 456-7890<br>Email: info@company.com</p>
                    </td>
                  </tr>
                </table>
              </td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
  </tbody>
</table>

Explanation:
1. Body Section: The ${notification:body} placeholder is used to dynamically insert the content of the email.
2. Logo Section: Place your logo image in the <img> tag under the "Logo" section.
3. Contact Info Section: Update the text under the contact info section with the appropriate company details.

This layout should match the style you are aiming for with the email body at the top and the logo and contact info at the bottom, similar to the image.

Thanks & Regards,

Siddhesh Jadhav

If this solution helps, please mark it as helpful and accepted.

[Aditya02]

Hi @Mimi Edet ,

To get this email layout, at first you have to create an email template with the proper HTML and CSS codes to get this layout. With the Bootstrap you can create containers according to your need. 

After creating template, You can use this template anywhere while writing an email.

===================================***************=========================================

"If you found my answer helpful, please give it a like and mark it as the accepted solution. It helps others find the solution more easily and supports the community!"

Thanks & Regards,

Aditya

=====================================***********==========================================

[Community Alums]

Hi @Mimi Edet ,

I tried your problem in my PDI and it works for me please refer to below solution 

1. Create a Email-> Notification and in What it will Contain section create one Email Template and add one email template by creating new 

2. In your Email Template add this below script by clicking script icon 

<style> body { font-family: Arial, sans-serif; margin: 0; padding: 20px; min-height: 100vh; position: relative; } .bottom-right { position: absolute; bottom: 20px; right: 20px; text-align: right; } .logo { max-width: 100px; /* Adjust size as needed */ height: auto; } </style>
<h1>Welcome to Our Website</h1>
<p>This is a simple layout with a logo and contact info at the bottom right.</p>
<div class="bottom-right">
<div>
<p>Contact us:</p>
<p>Email: info@example.com</p>
<p>Phone: (123) 456-7890</p>
</div>
</div>

It is a sample code you can modify it by your needs 

Result 

By clicking on Preview Notification Button it will show you like below image 

Please mark my answer correct and helpful if this works for you

Thanks and Regards 

Sarthak