Do you want to create beautiful HTML emails but don’t know where to start? In this MailerLite tutorial, we’ll show you how to create custom HTML newsletters in minutes using our easy-to-use HTML email editor. You’ll learn how to import HTML code, add HTML snippets, variables, and custom fields and then send your email campaign live. Watch now and see how easy it is!
Sign up with MailerLite to test the HTML editor and all our features for free:
This video is included in our email marketing academy. Acquire a full range of email marketing skills that can improve your campaigns and get an email marketing expert certification at the end. Enroll for free:
Or subscribe to our channel and never miss new tutorials:
This tutorial is for the new MailerLite. Watch the tutorial for MailerLite Classic here:
—-
Time stamps:
0:00 – What is the HTML editor?
0:34 – Create a campaign with the Custom HTML editor
0:48 – Import your HTML code
1:12 – Use the code editor
1:25 – Code editor: Content tab
1:36 – Code editor: Snippets tab
1:43 – Variables and custom fields
3:01 – HTML snippets
3:13 – HTML snippet: Base
3:30 – HTML snippet: Conditional tags
3:48 – HTML snippet: Two columns
4:04 – HTML snippet: Button
4:13 – HTML snippet: Social forward
4:21 – HTML snippet: Spacer
4:25 – HTML snippet: Image tag
4:38 – HTML snippet: Logo and text
4:48 – HTML snippet: Footer
5:02 – Automatically generate a footer
5:11 – Automatically add a preheader
5:34 – Automatic CSS inline
5:44 – Beautify your code
[Music] The melolite html editor can serve both Season designers and html beginners we Are giving you the opportunity to get Really nerdy with it and edit your Newsletters with some markup languages Quick note This editor is only available under the Advanced plan you can only edit Newsletters using this tool and in this Lesson i am not going to teach you how To write html or css but i will show you All of the basics starting with how to Import your code so let's dive in Just like the drag and drop and the rich Text editors you'll need to create a Newsletter give it a name And this time i'm going to choose the Html editor There are three ways to get your code Into the editor you can either paste Your code or import from a url or file If you're highly skilled you can write Your code directly in the editor right Here for this tutorial i'm going to Start with a blank document to show you How everything looks without any content But later i'm going to paste code from An existing newsletter that i've Previously created so now looking at the Code editor You can drag each side of the editor's Container to customize the size of the Workspace
We also have three tabs content snippets And settings The content tab hosts the code every Time you click here on a line of text it Will highlight the section in the visual Side of the editor to help you know what Section you're working on the snippets Tab is very similar to the blocks that You add in the drag and drop or rich Text editors but here we have Variables custom fields and snippets and You can copy each one of these and paste Them into your content section Generally speaking custom variables are Used to better target and personalize Your newsletters to improve engagement If you want to include data that doesn't Have a field you're welcome to create Your own custom field and we have a Lesson on how to do that so once your Custom field is created it will appear In the custom fields drop down menu Right here the link variables generate a Clickable link unique to each individual Campaign Here you'll find three link variables The unsubscribe link where subscribers Are redirected to your unsubscribe page And as i mentioned before and will Mention over and over again the Unsubscribe link is mandatory according To gdpr rules and metalight terms of use So you must include it in every campaign You send
The web version link is where subscriber Can click to view the campaign in their Web browser it's very useful for longer Campaigns that may be clipped in an Email inbox and the forward link is a Great marketing feature to spread the Word and send the campaign to friends Colleagues family members you get the Idea the html snippets tab presents Pre-written html snippets of code that Are designed to simplify the campaign Building process for beginners or speed It up for the advanced email designers Base a great starting point for your Custom html email as it has all the Required elements and structure to help You create a fully functional email If you already know some html code you Can simply start creating your email From the base snippet and continue Building from there conditional tags Allow you to add conditions in which Your code would be modified for example If a large portion of your subscribers Read their newsletters in outlook you May want to modify parts of your code to Optimize readability for that email Client Two columns this is the most valuable Snippet when creating content it allows You to easily create structure within Your newsletter you can place images in Text side by side or display two images In a row or add navigation with multiple
Columns and more Button You gotta include a button in your Newsletter design because buttons are One of the most important elements of Any newsletter social forward lets your Subscribers share your newsletter with Their social media followers at a click Of a button spacer Break up the content in your newsletter By inserting space between elements Image tag add images to your newsletter Design you can use it to add a big hero Image to the top of your newsletter or Include it within your columns to Complement your campaign copy logo and Text Add consistent branding to your Campaigns by adding your company's logo And we recommend using this snippet at The top of your newsletter design footer It's mandatory to include a footer with Your company's information in the Unsubscribe link in your newsletters This snippet allows you to design a Custom footer to place at the bottom of Your campaign Now you could also automatically Generate a default footer in the Settings tab by checking the box labeled Automatically add footer And here you can also automatically add A preheader that gives the subscriber a Quick look into what this newsletter is
All about Once you check the box you can scroll up To the top of the document and add the Preheader text by clicking on the edit Icon and adding the text right here Lastly the css inline box will make sure That the styling of this document will Show in your subscribers inboxes Now i'll show you how to give your code A mini cure using the beautify feature Right here on the right side basically Beautifying your code is used after Pasting multiple elements into the Newsletter and you'll need to tidy up The code by clicking the beautify button This will indent your code properly let You know if there's any mistakes or Repetitions etc Okay so now let me clean up the content And paste an html file and once this File is up you'll see the visual Elements and be able to add edit and Modify using the html code editor Thanks for watching make sure to click The bell button below so you don't miss Any new tutorials you can also find us On facebook instagram twitter and Subscribe to our newsletter the link is In the description section below have an Awesome day or night and i'll see you in The next video
