Coding Tricks


This section will cover some coding tricks which can be used on your emails, email templates, and landing pages. View a walkthrough of some of these tips here.

 

 

Center all Images on Mobile

In Template Builder change the mobile code to include the line: margin: 0 auto;

 

 

Display Images Inline on Mobile

In Template Builder, add the following code:

 

{width:auto !important; float: none !important; margin: 0 auto !important; }
.inline-img { display: inline !important; }

 

 

Remove the Underline on Links

 

When adding a link in the Text editor, you can click on the Advanced tab and add some CSS styling to remove the default underline that appears on URLs. In the Style box, under the Advanced tab, add the text:  text-decoration: none; NOTE: You can also add this line of CSS to your template to make it the default link behavior. You can further edit the styling by giving the links a different color by also including  color: #FFFF00; (using the hex code of the color you wish). To use both, removing the underline and changing the color, add: color: #FFFF00; text-decoration: none;

 

 

Remove Scrollbars from an iframe

If you are embedding content and want to remove scrollbars you can add the code scrolling="no" into the iframe.

 

 

Set a Default Font on the Template

By default, the font choice on a text element or placeholder text in your template is set to default (unless otherwise specified). The way the default setting works is it will allow the inbox to select its default when rendering your email. If you want all your text to be a specific font, Arial for example, you can add a line of CSS so you aren't having to highlight and set your font in each text area. Doing this will also set the default to Arial (or whatever font you choose) on new text elements, meaning when you drag them out they will have that font applied.
 
 
To set a default font, add the line font-family: Arial, Helvetica, sans-serif; in the body area of your CSS. This will set the default font as Arial and a fallback font of Helvetica for any inbox that doesn't have Arial available. It is always suggested you include a back-up font. Note: If any section of your template has specific fonts applied to a table or span, you will want to remove those font-family styles as well before saving. You can try to add other defaults here such as font color, line-height, letter-spacing, font-size, etc. which will apply where no other formatting is overwriting the defaults (i.e. no section in the template or email has conflicting formatting on it which will overwrite the template default). However, not all inboxes will support these.
 
If you are attempting to use a Google Font, you would also need to add the Google code for that font into the head section as well. This should be placed inside the head tags near the top of your template code. NOTE: If you have separately applied a different font to any area of the template (or do so inside any editable areas within an email using this template) that will overwrite this default.




You can find more about this here.
 
 

Template Default Trick for Outlook

If you are attempting to use a non-standard font as your default font in a template you will likely have an issue in Outlook. In addition to not supporting Google Fonts, several versions of Outlook (in true Outlook fashion), will ignore your entire font stack and use a serif font when you use something like a Google Font. In order to make sure you don’t end up with a terrible looking email, you can include the below Outlook-specific code in your <head> section:

 

        <!--[if mso]>
        <style type="text/css">
        body, table, td, span {font-family: Helvetica, Arial, sans-serif !important;}
        </style>
        <![endif]-->

 

 

Prevent Images from Wrapping (Stacking) on Mobile

The default setting of a responsive template is for images to wrap (i.e. stack) on mobile. However, you may have spots where you don't want this to occur (such as your social media icons at the bottom of your template). You can prevent this by adding som CSS to the head of your email template creating a new class that will not wrap and then applying that code to the table containing the images you don't wish to wrap. NOTE: For the code to be effective, each image needs to be in its own <td> within the same table.You can find more information here.

 

First, make sure you have this CSS to the head section of your template (it is in emfluence example templates by default):
 

     table.no-wrap td { /**add class no-wrap to table to keep it from wrapping**/
        display: table-cell !important;
    }
 

Second, on the table containing the images you don't wish to wrap, add class="no-wrap"

 


 

 

NOTE: On any current drafts, you will likely need to resave/reload your email to see the changes apply (leave and return to the Compose step which will force the latest version of your template to load) and only changes made outside editable areas will overwrite pre-existing content.

 

 

 

Applying Google Fonts on Forms

NOTE: Now with Drag & Drop Landing Pages fonts can be set at the Page level which (as long as you don't add separate formatting to your form will apply down to your form by default. If, for some reason, you want a separate Google Font on you form or you are using a page template rather than the Drag & Drop, you can follow these steps. First, you will need to edit the CSS of the form itself to use the font family you want. Second, you will need to add the snippet of Google code into the landing page where you plan to drop the form (we suggest adding it at the top of the page above your form code).
 

 

When you save and preview your page (remember, not all CSS gets applied on the compose window of a landing page) you should see the added font apply:

 

 

 

Using an Accordion Menu on Landing Pages

W3 Schools has a good example of using an accordion menu here, with an example that can be pasted in to the "Paste as Code" Landing Page option. Because the emfluence Drag & Drop editor separates the Page's head and body section, and doesn't allow script tags to be inserted into the body, you will need to make slight changes for this to work on a Drag & Drop landing page.

 

Into the Head section of you landing page, you will paste both the CSS styles and the script tag with a slight alteration to the code to allow it to work in the head section rather than following the HTML content in the body.

 

<style>
  .accordion {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: 0.4s;
  }
  .active, .accordion:hover {
    background-color: #ccc;
  }
  .accordion:after {
    content: '02B';
    color: #777;
    font-weight: bold;
    float: right;
    margin-left: 5px;
  }
  .active:after {
    content: "2212";
  }
  .panel {
    padding: 0 18px;
    background-color: white;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
  }
</style>
<script>
  $(function() {
    var acc = document.getElementsByClassName("accordion");
    for (var i = 0; i < acc.length; i++) {
      acc[i].addEventListener("click", function() {
        this.classList.toggle("active");
        var panel = this.nextElementSibling;
        if (panel.style.maxHeight) {
          panel.style.maxHeight = null;
        }
        else {
          panel.style.maxHeight = panel.scrollHeight + "px";
        }
      }
                             );
    }
  }
   );
</script>

 

Then, you will then insert your content for the dropdown into an HTML block inside the body of your landing page as in the W3 example, minus the script tag (which you already inserted into your Head section):

<h2>Accordion with symbols
</h2>
<p>In this example we have added a "plus" sign to each button. When the user clicks on the button, the "plus" sign is replaced with a "minus" sign.
</p>
<button class="accordion">Section 1</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </p>
</div>
<button class="accordion">Section 2</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </p>
</div>
<button class="accordion">Section 3</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </p>
</div>

<h2>Accordion with symbols
</h2>
<p>In this example we have added a "plus" sign to each button. When the user clicks on the button, the "plus" sign is replaced with a "minus" sign.
</p>
<button class="accordion">Section 1</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </p>
</div>
<button class="accordion">Section 2</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </p>
</div>
<button class="accordion">Section 3</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </p>
</div>

 

Center Buttons on Mobile

Would you prefer to have your buttons center on mobile devices? You can edit the CSS style in the head section of your template by changing a single line of code under the mobile media section. Find the mobile media query and to change thistable { width: auto !important; } to table {width: 100% !important; }

 

Change the Color in a Numbered List

By default, when using a numbered list those numbers will be displayed in black text. However, if your text is a different color and you want the numbers to match that color, you can add a line of code. NOTE: This workaround may not work in all inboxes. To do so, edit the code of the list and find the opening tag which is <ol> where we will add a CSS style with the color code for the color you wish to use (ex; <ol style="color:#ffbb21;"> ).

 

Apply Gradient Background on an Email Template


By adding some CSS to the body tag of your template you can apply a gradient background color to your email. NOTE #1: If your template has a background color already in place, it will need to be removed. NOTE #2: This applies only to some Apple devices and will not work on most PC and Android devices.

The code you would add would be (with your choice of colors):

      width: 100%;
      -webkit-font-smoothing: antialiased;
      background: rgb(2,0,36);
      background: linear-gradient(90deg, rgba(192,192,192,1) 0%, rgba(255,255,255,1) 35%, rgba(0,0,0,1) 100%);

 

Create a Foreign Language version of your email

You can make use of Google's translation tools, which allow you to create a foreign language version of any webpage, to create a foreign language version of your email.


To do this you will make use of Google Translate's website conversion tool to get the necessary code for the language you wish to use. Any website can be used here. Set the language settings that you wish to create and let Google translate the page. The code we want is at the end of the URL. For example, for this page https://emfluence-com.translate.goog/?_x_tr_sl=auto&_x_tr_tl=es&_x_tr_hl=en&_x_tr_pto=wapp rendered in Spanish the code we specifically want is
?_x_tr_sl=auto&_x_tr_tl=es&_x_tr_hl=en&_x_tr_pto=wapp
NOTE: The code will be slightly different depending on the language settings you chose.

 

That code can be added to the end of a specific link in emfluence. To allow a full foreign language version of an email to be rendered on VAWP link, you would use this link https://emailer-emfluence-com.translate.goog/viewaswebpage/$$message[messageID] with the code for the language you want appended at the end. In the example of a Spanish version, the link would look like this: https://emailer-emfluence-com.translate.goog/viewaswebpage/$$message[messageID]?_x_tr_sl=en&_x_tr_tl=es&_x_tr_hl=en&_x_tr_pto=wapp. For traditional Chinese you would use https://emailer-emfluence-com.translate.goog/viewaswebpage/$$message[messageID]?_x_tr_sl=auto&_x_tr_tl=zh-TW&_x_tr_hl=en&_x_tr_pto=wapp. NOTE: Make sure you are using a variable in the email in order for everyone's email to render based on their own content.

 
 
 

 

Create your own Knowledge Base