First of all, you should log in or sign up for Stripo to get started. If you want to use a template, hover over the “Template” menu to see categories or click the demo editor to design from scratch.

After logging in, you will see the main page. On the left, you can see the “My Templates” option. Click on it to see the templates you have built previously. Then you can see the Basic and Prebuilt options. Click the prebuilt option to see the 1,500+ already built templates. Also, in the option, there are All, Premium, and Free template options. I recommend clicking the free option to see all free templates that you can use.

Every template has three types of containers. The first is the Header container, the second is the Content container, and the last is the Footer container. The Header most probably contains the menu/title/logo. The Content container holds the main content, and the Footer container is mainly used for social media links.

• The first icon is the back icon of the page.
• The second is the template name, which you can edit.
• The Save button saves your work. If you face any save-related issues, you should click here. However, every time you edit the template, it saves automatically. The arrow next to it also relates to the save function; click the arrow to check the options.
• Undo, redo, and no-change options.
• If you click the code icon, you can see the HTML code and find the Export and CSS options. Click the CSS button to see all CSS code, but most of the time, you don’t need to use or edit the code.
• The preview button allows you to check how your template looks on smartphones and computers.
• The Export and Share buttons are for premium users.
• Then you can see the Appearance and Content options. Let’s see the Appearance option.

If you want to add a new section or content or create a template from scratch, the Content section is for you.

• Structure: Drag and drop containers from here.
• Blocks: Image, text, button, spacer, video, social media, banner, timer, menu, form, carousel image, and accordion options are available here. Click and use the drag-and-drop function.

Appearance Settings for Email Templates

Creating a visually appealing and functional email template involves careful consideration of various appearance settings. Below are the key settings to ensure your email looks professional and is easily readable on different devices.

General Settings 

• Message Width: 600 pixels (Recommended to avoid using widths greater than this for better compatibility).
• Message Alignment: Align your content properly to maintain consistency.
• Default Padding.
• General Background Color: #f6f6f6
• Font and Line Spacing: Ensure readability by choosing appropriate fonts and line spacing.
• Paragraph Bottom Space: Maintain enough space between paragraphs for better readability.
• Underline Links: Make links easily identifiable.
• Responsive Design: Ensure your email template is mobile-friendly.
• RTL Text Direction: Support for Right-to-Left languages.
• Background Image: Use a suitable background image that complements your email’s content.

Stripes

Stripes divide your email into different sections for better organization:

• Sections: Header, Content, Footer, Info Area
• Content Settings for Each Section:
  • Text Size
  • Content Background Color: #ffffff
  • Font Color: #666666
  • Link Color

Headings

Properly formatted headings help in organizing content:

• Font and Line Spacing: Ensure consistency across headings.
• Heading Colors:

Buttons

Make your call-to-action buttons stand out:

• Outlook Support: Use VML code for accurate display in MS Outlook.
• Button Color: #333333
• Highlight Hovered Buttons: Improve user interaction.
• Font Color: #ffffff
• Text Style: Ensure readability and emphasis.
• Border Radius: 0
• Common Border: 0, #ffffff
• Internal Padding

Mobile Version Settings

Ensure your email is readable on mobile devices with media queries:

• Header Text Size
• Content Text Size
• Footer Text Size
• Info Area Text Size
• Menu Items Font Size
• Heading Sizes:
• Button Text Size
• Full-Width Buttons
• Content Margin:

By adhering to these appearance settings, you can create email templates that are not only visually appealing but also functional and compatible across various email clients.