Рубрики

Шаблон электронной почты с использованием HTML и CSS

Задумывались ли вы, как можно отправлять креативные красочные шаблоны электронной почты? В этой статье мы создадим базовый шаблон электронной почты с использованием HTML и CSS. Эти шаблоны электронной почты, как правило, предназначены для маркетинговых целей и рассылаются по электронной почте.
Основной целью отправки шаблона электронной почты является получение номера Call to Action (CTA). Креативный дизайн шаблона электронной почты привлекает клиента и может получить больше CTA на требуемой странице назначения.

Создание образца шаблона
Отправка писем в соответствии с желаемой схемой может быть очень сложной. Это связано с тем, что разные браузеры имеют разные конфигурации и, следовательно, разные родительские свойства CSS. Например, свойство display: absolute не работает при отправке электронной почты через Gmail.
Точно так же, есть несколько других мер предосторожности, которые необходимо принять при кодировании шаблона электронной почты. Первый и самый важный шаг, который нужно начать с шаблонов электронной почты: «Нужно использовать таблицы HTML для построения базовой структуры шаблона электронной почты.
Создание таблицы гарантирует, что отправляемый контент не будет искажен при пересылке или рассылке с использованием различных почтовых приложений.

Пример: для начала

<! - Создать основной план, в который будет вложено письмо ->

  

<body style="background-color:grey">

    <table align="center" border="0" cellpadding="0" cellspacing="0" 

           width="550" bgcolor="white" style="border:2px solid black">

        <tbody>

            <tr>

                <td align="center">

                    <br />

                    <table align="center" border="0" cellpadding="0"

                           cellspacing="0" class="col-550" width="550">

                        <tbody>

                            <! - контент идет сюда ->

                        </tbody>

                    </table>

                </td>

            </tr>

        </tbody>

    </table>

</body>

Помните, что почтовые приложения будут поддерживать только встроенный стиль. Если вы укажете свойства в теге style, приложение электронной почты не будет учитывать их, и указанные свойства не будут применены.
Пример:

<body style="background-color:grey">

    <table align="center" border="0" cellpadding="0" cellspacing="0" 

           width="550" bgcolor="white" style="border:2px solid black">

        <tbody>

            <tr>

                <td align="center">

                    <table align="center" border="0" cellpadding="0" 

                           cellspacing="0" class="col-550" width="550">

                        <tbody>

                            <tr>

                                <td align="center" 

                                    style="background-color: #4cb96b;

                                           height: 50px;">

                                    

                                    <a href="#" style="text-decoration: none;">

                                        <p style="color:white;font-weight:bold;">

                                            GeeksforGeeks

                                        </p>

                                    </a>

                                </td>

                            </tr>

                        </tbody>

                    </table>

                </td>

            </tr>

        </tbody>

    </table>

</body>

Дальнейшие разделы могут быть сделаны с использованием тегов < tr > и < td >. Теперь давайте введем дополнительную информацию.
Пример:

<! - Полный шаблон электронной почты ->

  

<body style="background-color:grey">

    <table align="center" border="0" cellpadding="0" cellspacing="0"

           width="550" bgcolor="white" style="border:2px solid black">

        <tbody>

            <tr>

                <td align="center">

                    <table align="center" border="0" cellpadding="0" 

                           cellspacing="0" class="col-550" width="550">

                        <tbody>

                            <tr>

                                <td align="center" style="background-color: #4cb96b;

                                           height: 50px;">

  

                                    <a href="#" style="text-decoration: none;">

                                        <p style="color:white;

                                                  font-weight:bold;">

                                            GeeksforGeeks

                                        </p>

                                    </a>

                                </td>

                            </tr>

                        </tbody>

                    </table>

                </td>

            </tr>

            <tr style="height: 300px;">

                <td align="center" style="border: none;

                           border-bottom: 2px solid #4cb96b; 

                           padding-right: 20px;padding-left:20px">

  

                    <p style="font-weight: bolder;font-size: 42px;

                              letter-spacing: 0.025em;

                              color:black;">

                        Hello Geeks!

                        <br> Check out our latest Blogs

                    </p>

                </td>

            </tr>

  

            <tr style="display: inline-block;">

                <td style="height: 150px;

                           padding: 20px;

                           border: none; 

                           border-bottom: 2px solid #361B0E;

                           background-color: white;">

                    

                    <h2 style="text-align: left;

                               align-items: center;">

                        Design Patterns : A Must Skill to 

                      have for Software Developers in 2019

                   </h2>

                    <p class="data" 

                       style="text-align: justify-all;

                              align-items: center; 

                              font-size: 15px;

                              padding-bottom: 12px;">

                        Design Patterns….??? I think you have heard this name 

                      before in programming… Yes, you might have heard 

                      this name before in programming if you are…

                    </p>

                    <p>

                        <a href=

"https://www.geeksforgeeks.org/design-patterns-a-must-skill-to-have-for-software-developers-in-2019/amp/"

                           style="text-decoration: none; 

                                  color:black; 

                                  border: 2px solid #4cb96b; 

                                  padding: 10px 30px;

                                  font-weight: bold;"> 

                           Read More 

                      </a>

                    </p>

                </td>

            </tr>

        </tbody>

    </table>

</body>

Наконец, вы можете добавить нижний колонтитул, содержащий ссылки на социальные сети, название компании, контактную информацию и т. Д.
Пример:

<! - Полный шаблон электронной почты ->

   

<body style="background-color:grey">

    <table align="center" border="0" cellpadding="0" cellspacing="0"

           width="550" bgcolor="white" style="border:2px solid black">

        <tbody>

            <tr>

                <td align="center">

                    <table align="center" border="0" cellpadding="0"

                           cellspacing="0" class="col-550" width="550">

                        <tbody>

                            <tr>

                                <td align="center" style="background-color: #4cb96b;

                                           height: 50px;">

   

                                    <a href="#" style="text-decoration: none;">

                                        <p style="color:white;

                                                  font-weight:bold;">

                                            GeeksforGeeks

                                        </p>

                                    </a>

                                </td>

                            </tr>

                        </tbody>

                    </table>

                </td>

            </tr>

            <tr style="height: 300px;">

                <td align="center" style="border: none;

                           border-bottom: 2px solid #4cb96b; 

                           padding-right: 20px;padding-left:20px">

   

                    <p style="font-weight: bolder;font-size: 42px;

                              letter-spacing: 0.025em;

                              color:black;">

                        Hello Geeks!

                        <br> Check out our latest Blogs

                    </p>

                </td>

            </tr>

   

            <tr style="display: inline-block;">

                <td style="height: 150px;

                           padding: 20px;

                           border: none; 

                           border-bottom: 2px solid #361B0E;

                           background-color: white;">

                     

                    <h2 style="text-align: left;

                               align-items: center;">

                        Design Patterns : A Must Skill to 

                      have for Software Developers in 2019

                   </h2>

                    <p class="data"

                       style="text-align: justify-all;

                              align-items: center; 

                              font-size: 15px;

                              padding-bottom: 12px;">

                        Design Patterns….??? I think you have heard this name 

                      before in programming… Yes, you might have heard 

                      this name before in programming if you are…

                    </p>

                    <p>

                        <a href=

"https://www.geeksforgeeks.org/design-patterns-a-must-skill-to-have-for-software-developers-in-2019/amp/"

                           style="text-decoration: none; 

                                  color:black; 

                                  border: 2px solid #4cb96b; 

                                  padding: 10px 30px;

                                  font-weight: bold;"> 

                           Read More 

                      </a>

                    </p>

                </td>

            </tr>

            <tr style="border: none; 

            background-color: #4cb96b; 

            height: 40px; 

            color:white; 

            padding-bottom: 20px; 

            text-align: center;">

                  

<td height="40px" align="center">

    <p style="color:white; 

    line-height: 1.5em;">

    GeeksforGeeks

    </p>

    <a href="#" 

    style="border:none;

           text-decoration: none; 

           padding: 5px;"> 

             

    <img height="30" 

    src=

"https://extraaedgeresources.blob.core.windows.net/demo/salesdemo/EmailAttachments/icon-twitter_20190610074030.png" 

    width="30" /> 

    </a

      

    <a href="#"

    style="border:none;

    text-decoration: none; 

    padding: 5px;"> 

      

    <img height="30" 

    src=

"https://extraaedgeresources.blob.core.windows.net/demo/salesdemo/EmailAttachments/icon-linkedin_20190610074015.png" 

width="30" /> 

    </a>

      

    <a href="#" 

    style="border:none;

    text-decoration: none;

    padding: 5px;"> 

      

    <img height="20"

    src=

"https://extraaedgeresources.blob.core.windows.net/demo/salesdemo/EmailAttachments/facebook-letter-logo_20190610100050.png" 

        width="24" 

        style="position: relative; 

               padding-bottom: 5px;" />

    </a>

</td>

</tr>

<tr>

<td style="font-family:'Open Sans', Arial, sans-serif;

           font-size:11px; line-height:18px; 

           color:#999999;" 

    valign="top"

    align="center">

<a href="#"

   target="_blank" 

   style="color:#999999; 

          text-decoration:underline;">PRIVACY STATEMENT</a

          | <a href="#" target="_blank" 

          style="color:#999999; text-decoration:underline;">TERMS OF SERVICE</a

          | <a href="#"

          target="_blank" 

          style="color:#999999; text-decoration:underline;">RETURNS</a><br>

                  © 2012 GeeksforGeeks. All Rights Reserved.<br>

                  If you do not wish to receive any further 

                  emails from us, please

                  <a href="#"

                  target="_blank"

                  style="text-decoration:none; 

                         color:#999999;">unsubscribe</a>

            </td>

              </tr>

            </tbody></table></td>

        </tr>

        <tr>

          <td class="em_hide"

          style="line-height:1px;

                 min-width:700px;

                 background-color:#ffffff;">

              <img alt="" 

              src="images/spacer.gif" 

              style="max-height:1px; 

              min-height:1px; 

              display:block; 

              width:700px; 

              min-width:700px;" 

              width="700"

              border="0" 

              height="1">

              </td>

        </tr>

        </tbody>

    </table>

</body>

Выход:

Таким образом, вы можете создать много красивых шаблонов. В то время как кодирование электронной почты с помощью divs делает это намного проще и быстрее, есть много проблем, если вы пишете с использованием divs. Кроме того, кодирование структуры с использованием таблиц и строк таблицы легко и увлекательно.

Рекомендуемые посты:

Шаблон электронной почты с использованием HTML и CSS

0.00 (0%) 0 votes