Create Drag & Drop element / Create navigation element

Create navigation element

Navigation elements allow the user to add a navigation block in his email message. A module appear when the user clicks this element. The user can:

format the text;
add background and text color;
set the link and google analytics parameters.

   1 <table class="table_container pointer" cellpadding="0" cellspacing="0" width="700" data-module="M12">
   2     <tbody>
   3         <tr>
   4             <td class="main_nav" width="700">
   5                 <table cellpadding="0" cellspacing="0" width="100%">
   6                     <tbody>
   7                         <tr>
   8                             <td class="editable-nav" align="center" style="padding: 15px 40px 15px 0; font-family: arial,sans-serif; font-size: 14px; ">
   9                                 <a class="editable-nav-link" href="#" style="text-decoration: none; font-size: 14px; color: rgb(51, 51, 51); font-family: Helvetica, Arial, sans-serif;">Nav 1</a>
  10                             </td>
  11                             <td class="editable-nav active_element" align="center" style="padding: 15px 40px 15px 0; font-family: arial,sans-serif; font-size: 14px; ">
  12                                 <a class="editable-nav-link" href="#" style="text-decoration: none; font-size: 14px; color: rgb(51, 51, 51); font-family: Helvetica, Arial, sans-serif;">Nav 2</a>
  13                             </td>
  14                             <td class="editable-nav" align="center" style="padding: 15px 40px 15px 0; font-family: arial,sans-serif; font-size: 14px; ">
  15                                 <a class="editable-nav-link" href="#" style="text-decoration: none; font-size: 14px; color: rgb(51, 51, 51); font-family: Helvetica, Arial, sans-serif;">Nav 3</a>
  16                             </td>
  17                             <td class="editable-nav" align="center" style="padding: 15px 40px 15px 0; font-family: arial,sans-serif; font-size: 14px; ">
  18                                 <a class="editable-nav-link" href="#" style="text-decoration: none; font-size: 14px; color: rgb(51, 51, 51); font-family: Helvetica, Arial, sans-serif;">Nav 4</a>
  19                             </td>
  20                             <td class="editable-nav" align="center" style="padding: 15px 40px 15px 0; font-family: arial,sans-serif; font-size: 14px; ">
  21                                 <a class="editable-nav-link" href="#" style="text-decoration: none; font-size: 14px; color: rgb(51, 51, 51); font-family: Helvetica, Arial, sans-serif;">Nav 5</a>
  22                             </td>
  23                             <td class="editable-nav" align="center" style="padding: 15px 40px 15px 0; font-family: arial,sans-serif; font-size: 14px; ">
  24                                 <a class="editable-nav-link" href="#" style="text-decoration: none; font-size: 14px; color: rgb(51, 51, 51); font-family: Helvetica, Arial, sans-serif;">Nav 6</a>
  25                             </td>
  26                             <td class="editable-nav" align="center" style="padding: 15px 40px 15px 0; font-family: arial,sans-serif; font-size: 14px; ">
  27                                 <a class="editable-nav-link" href="#" style="text-decoration: none; font-size: 14px; color: rgb(51, 51, 51); font-family: Helvetica, Arial, sans-serif;">Nav 7</a>
  28                             </td>
  29                             <td class="editable-nav" align="center" style="padding: 15px 0 15px 0; font-family: arial,sans-serif; font-size: 14px; ">
  30                                 <a class="editable-nav-link" href="#" style="text-decoration: none; font-size: 14px; color: rgb(51, 51, 51); font-family: Helvetica, Arial, sans-serif;">Nav 8</a>
  31                             </td>
  32                         </tr>
  33                     </tbody>
  34                 </table>
  35             </td>
  36         </tr>
  37     </tbody>
  38 </table>

In this example we used the following classes:

Class	Description
table_container	presents the table container of all the element's code (recommended).
editable-nav	presents the navigation element. This class should be used with a navigation element and should not be combined with any other master classes (see the list of master classes).
editable-nav-link	presents the navigation link (should be used).

We offer you some templates that you can download. Edit the template's content using your favorite IDE then upload the file in the "Document Library" section of your eFlyerMaker account.

The following images are the small devices preview of the navigation bar.

Download

See also: