Customize Mobile Layout in Email Templates | Mobile Optimization with AiTrillion

Make mobile-specific layout adjustments in an email template

Introduction

In this article, you will learn the default mobile optimization configurations offered by AiTrillion for emails, along with the ability to customize how your message appears on different devices.


Common options for optimizing mobile experiences




Numerous settings in each element allow you to make it better for mobile viewing, including:

  1. Responsive images

  2. Mobile alignment settings

  3. Responsive padding configurations


Disable the section on mobile or desktop - You have the flexibility to choose where a block will be displayed—whether on mobile, desktop, or both. This customization can be done for any block by accessing the Hide element buttons.



Automatically adjust to fit the width of the device - In an image block, you have the option to expand the image to the full width of the frame when it's viewed on a mobile device. This setting can be found in the content tab within the Block settings for any image block. Simply toggle the "Adjust to width" option on or off as needed.

Block displayed on mobile devices - In the button block, you have the option to adjust the alignment specifically for mobile devices. Additionally, you can customize the external padding and row padding for mobile to ensure the best mobile viewing experience.



Important Notes

  • Mobile-specific settings apply only to mobile devices and do not affect the desktop layout.

  • AiTrillion email templates are responsive by default, but additional adjustments help improve mobile readability.

  • Always enable Responsive Images to ensure images scale correctly on smaller screens.

  • Use mobile alignment and padding options carefully to avoid content overlapping or excessive spacing.

  • Hiding a section on mobile or desktop does not delete the content, it only controls visibility.

  • Button alignment and padding can be customized separately for mobile to improve tap accuracy and usability.

  • Always preview the email in mobile view before sending to ensure the layout looks as intended.

  • Changes take effect only after saving the template.

  • It is recommended to send a test email to real mobile devices for final verification.


    • Related Articles

    • Save the section in Email template

      Introduction Saving a section in an email template allows you to reuse frequently used layouts, content blocks, and designs without rebuilding them each time. By saving sections in the AiTrillion Email Editor, you can maintain design consistency, ...

    • Customize the layout of product's block

      Introduction: Customizing the layout of the Product block allows you to control how your products are displayed in your emails, helping you create visually appealing and well-structured campaigns. By adjusting the layout settings in AiTrillion, you ...

    • How to reduce the image for mobile devices?

      Introduction On the majority of websites, images are commonplace. They are employed either for informational or aesthetic objectives. Images must be adjusted when they are shown on a smartphone's small screen because they have a set width and height. ...

    • Add Specific Products in Email Template

      Introduction: Customize your email templates by adding specific products with AiTrillion. Engage customers with targeted promotions and highlight key offerings to drive sales and conversions effectively. Now add the products you want to showcase in ...

    • Create Email template Using the Email Editor

      Introduction The Email Editor allows you to easily design, customize, and launch email campaigns without any coding. Using a simple drag-and-drop interface, you can create professional emails, add dynamic content, and personalize messages to engage ...