Email and Texts
      Back to home
      1. Ripple Knowledge Base
      2. Study Settings
      3. Email and Texts

      Blocks Overview

      Blocks in email templates allow you to create sections with multiple columns for organizing content such as text, images, and buttons in horizontal layouts.

      Features of Blocks

      1. Column Formation:

        • Add blocks to divide a row into multiple columns.
        • Choose from a variety of columns (red).
        • Duplicate a block directly underneath existing one (green).
        • Delete the block (purple).
        • Customize column sizes to fit your layout needs.

      2. Customizable Properties:

        • Background: Apply a background color or image to each column.
        • Padding: Add spacing between column borders and content for better separation.
        • Borders: Define edges with solid or dashed lines, adjusting thickness and color.

      3. Row Properties:

        • Set a background color, content background color, or an image for the entire row.
        • Add row-level padding to separate it from surrounding elements.

      Column Properties

      Column Properties allow customization of individual columns within a row. Key points include:

      • Individual Customization: Changes made in the column properties section apply to one column at a time, based on the column you are clicked into (red).
      • Manual Application Across Columns: To apply the same settings to all columns, you must manually adjust the properties for each column individually.

      Customizing Column Background Color

      You can modify the background color for each column individually:

      • How to Change: Click on the background color (red) to select a pre-set color or define a custom color.
      • Effect: The chosen background color will apply to the column and any elements added to it, such as text or buttons.

      This feature helps enhance the visual design and distinguish content within each column.

       

      Customizing Column Padding

      Padding allows you to control the spacing between the column's border and its content for better organization and clarity:

      • Default Setting: By default, columns have no padding.
      • Custom Padding:
        • Toggle the “More Options”(green) button to individually adjust padding for the top, right, left, and bottom of the column.
      • Purpose: Padding ensures proper spacing, making the layout visually appealing and easier to read.

      Customizing Column Borders

      Borders let you add visual dividers around the edges of a column for better definition:

      • Default Setting: No borders are applied by default.
      • Customization Options:
        • Use the “More Options” (purple) button to choose which sides (top, bottom, left, right) will have a border.
        • Select border style: solid or dashed.
        • Adjust thickness and color to match your design.

      Borders enhance the visual structure and can help separate content within your email layout.

      Customizing Row Properties

      Row Properties enable you to format the overall row that contains the columns, providing additional customization options:

      • Background Customization:
        • Set a background color for the entire row.
        • Define a content background color to create contrast between the row and its content.
        • Add a background image to enhance the design, with options to resize and reposition the image as needed.

      This feature ensures that the row's appearance complements the overall design and helps organize content effectively.

      Adding Padding to Rows

      Row Padding allows you to control the spacing around the content within a row for a clean and organized layout:

      • Default Setting: No padding is applied to rows by default.
      • Custom Padding:
        • Toggle the “More Options” (red)button to individually adjust padding for the top, right, left, and bottom of the row.
      • Purpose: Padding helps separate the row’s content from surrounding elements, improving readability and design aesthetics.

      Responsive Design for Blocks

      Responsive Design ensures your emails display effectively across devices like desktops, tablets, and mobile phones. Key features include:

      • Device-Specific Customization:

        • Use the Desktop or Mobile tabs or icons to switch views.
        • Edit block properties and elements specifically for each device type.

      • Hiding Blocks:

        • Toggle "Hide on Desktop" or "Hide on Mobile" to make blocks invisible on a specific device.
        • When hidden, the block appears faded in the editor but will not be visible to recipients on the selected device.

      This flexibility helps you design professional, device-optimized emails that enhance user experience and readability.

      Mobile Device Considerations

      Mobile devices often have different width restrictions compared to desktops or tablets. To ensure your email template displays correctly:

      • Preview Your Template:

        • Test how the blocks appear on mobile, tablet, and desktop devices.
        • Verify that the layout adjusts as expected across various screen sizes.

      • Responsive Adjustments:

        • Make necessary edits to block dimensions, padding, and alignment for better mobile compatibility.

      Regular previews help ensure your email remains visually appealing and functional on all devices.