With the new Adaptive Images feature, images in Letter automatically scale and adapt to any size. No more time wasted cropping and stretching. Just drag from the image resize handles and the image will fill out the available space.
Check out this video of it in action:
Here's what's changed when resizing and working with images:
Adaptive Images: By default, images now adapt and fill the available space when inserted or resized. This works when resizing images, and when new images are inserted or imported.
Preserve Aspect Ratio: Hold shift while dragging to maintain the image aspect ratio whilst resizing.
Double click for Image Editor: Now you can double click images to open the image editor for cropping and filters.
Crop to Aspect Ratio: The default crop shape of the Image Editor is now set to the same aspect ratio as the image you open. This lets you preview exactly how your image will look on the card during the crop, ensuring you get a perfect fit.
Now you can change the alignment of text, images, and elements in Letter components 🎉. It works for individual elements, or larger groups:
Select an element, and use the 'Align' buttons from the sidebar to change its alignment position (left, right or centre).
You can also set the alignment of entire blocks. For example, if you select a row within a component (by clicking towards the edge of a row), you can then align all the elements within the selection at once:
Export Letter templates directly to your SendGrid Design Library! SendGrid is an affordable way to send email newsletters - and now you can use it with Letter 🎉
Just select SendGrid from the export options, and press export:
As shown above, the first time you export to SendGrid, you need to paste in your SendGrid API Key to set up the connection. All future exports don't require this step.
You can connect or disconnect from SendGrid from your account settings too:
A SendGrid API key can be created in a couple of steps. It's important that you create a restricted API Key – Letter only needs access to your SendGrid Design Library to upload templates. Permissions for sending emails or anything else are not needed.
Log into SendGrid, and go to Settings > API Keys, and click the 'Create API Key' button:
Create a restricted API Key, only giving access to the Design Library:
SendGrid will then show you your API key - just paste that into Letter when prompted.
That's it! If you're looking for other export options, Hubspot is also available, with Mailjet and Mailchimp coming next. You can also always export the code to paste in any other email marketing platform.
Letter to Hubspot is here 🎉, the first of the Letter export plugins. Read about it below, along with a couple more updates (Account settings layout, and first Pro customers 💙)
This will let you export templates from Letter to Hubspot in one click. See the video for an overview:
You can access Hubspot Export from the export button in the top right of the editor. Along with the previous export options, you'll now see a new one called 'Export to Email Platform':
Copy to clipboard
Open in CodePen
Send Test Email
🆕 Export to Email Platform 💥
Upon selecting it, a list of supported email platforms will be presented in a modal. Hubspot is available right now, and you'll now also see that Mailjet and Mailchimp are coming soon. If you have a preference, get in touch!
This release also includes a new Account Settings layout, with a plugins tab to see what's available:
This feature is available for Pro members only. If you have any questions about Pro, or using Letter with your own templates, let me know.
Also, a massive thanks to the first Letter Pro customers! This has been an awesome surprise, as I hadn't promoted the app was for sale yet. In what has been such a tough year for us all, your support means a lot, and it makes building the vision possible.
Pretty boring updates this week. These were mostly to ensure the editor works smoothly in Safari browser:
Padding and margins calculated by getstyle
Allow <div> selection as a container in canvas
Fix Safari white screen bug
Switch editor components from sandbox iFrames to divs - iframes cause bug in Safari
Make inspector relative to the canvas instead of iframes
Deselect editor when window is resized
Remove inspector when component menu is opened
Default to pixels for font unites when there is no unit
Calculate image sizes based on computed styles instead of attributes
The upgraded Inspector lets you change properties such as font styles, margin, padding, and colour for any element you've selected. Select an element from the canvas, and the Inspector panel will change to show editable properties for that element. Check it out in this gif (also on Twitter):
The Inspector builds on the Element Selector from the last release. However, as well as seeing the guides for padding and margins, you can now change all these properties 🎉:
In the future, more properties will be added, such as background colour... or anything that's requested. Here's what else is new this release:
Drag and drop fix: order by free components first, to enable free and demo members to easily access free components
Close the components menu if the canvas area is clicked
Safari freezes when changing tabs sometimes - disable the inspector and editor when the user changes tabs so it no longer can freeze.
Replace the code editor in the code inspector panel with a simple text block. No longer need to load an entire editor until the edit code modal is shown.
Fix the loading spinner size of the content import button
Allow users to select DIV elements in the inspector
Undo/Redo on content import breaks on Safari, so removed it for now
Inspector: Disable margin inspector for table cells (don't need to alter the margin of tables, only the elements within)
Only show the text inspector if the node is a text node
The new element selector gives you more insight and control when editing your newsletter. Hover over and select different elements from the canvas, and see the structure of your newsletter with margin and padding guides:
As well as performance improvements and bug fixes, this update includes a newly improved template system that ensures Letter has much better support for any email template. So if you've got your own template, it will work seamlessly with Letter. Here are all the small updates that make things tick:
New template variables makes sure Letter works with templates of any width
Faster initial loading time through code splitting
Removed unused JS and CSS libraries, reducing overall bundle size from 16mb to 3.6mb
Immediately initialize editors so the canvas loads faster
Width of draggable components from side menu optimised for any template
Smoother toolbar behaviour in the editor for easier writing
Prevent toolbars and content import popup overlapping
Remove unnecessary database polling
Fix for cursor grabbing bug (sometimes the cursor could get stuck as the 'grabbing' pointer)
Email notifications when you sign up or purchase Letter
Newly added sign up/sign in pages (previously these were only modals, with no direct url)
Drag and drop bugs fixed for Safari browser (sometimes, the browser would freeze if you dragged from the wrong part of the drag handle - now resolved)
Placeholders for premium components
Color picker positioning fixed - previously you couldn't select the left side of the colour picker properly
Placeholder text on input fields added in account settings
Removed the invite system
Recaptcha on registration page
Pricing pages are viewable for all including logged out members
Webhooks for payments
List user invoices in profile
Cancel subscription button in billing section
A raft of new upgrades to the editor, with a focus on making long-form content easier to create.
Now you can insert images, headers, or list elements into the body of any content block using the new 'quick insert' button.
How it works: When you hit the return key to start a new line, the 'quick insert' button appears, from which you can easily insert different types of content:
Change the format of any text in the editor. For example, you can change paragraphs to headers, (including h1, h2, h3, and h4), or headers to paragraphs.
This gives much more flexibility when writing long form content:
A fun update! Here's an easier way to insert emojis from the toolbar: