Guidelines for AEM Components

Explore a library of components designed to create impactful marketing pages.

Splitblock Module

The Splitblock Module is a versatile component designed to enhance content presentation by displaying information in a clean, dual-column format. This module supports both text and image combinations as well as text-only configurations, providing flexibility to suit various content needs. The uniformed columns ensure a balanced and aesthetically pleasing layout, making it easy for users to create visually engaging webpages. With the Splitblock Module, content creators can effectively organize and highlight important information, improving readability and user engagement.

 

 

Our Designed Approach

Pitney Bowes Designed Delivery solution was specifically tailored to address Uncommon Goods’ unique needs using three main steps:

  • Scalable Capacity: Demonstrating its proven ability to scale according to seasonal demand while always ensuring capacity, reliability during peak seasons, and timely pickups. Highly automated Pitney Bowes facilities ensure a consistent delivery experience across Uncommon Goods' unique parcel mix.
Our Designed Approach image

Why Designed Works

The scalability, consistency and collaborative partnership of Pitney Bowes Designed Delivery solution instills confidence in a saturated market, allowing Uncommon Goods to move volume away from national carriers and reduce transportation costs without sacrificing service quality.

Why Designed works image

Settings

Configuration

Primary Block

  • Headline
    • Enter text for the primary headline.
  • Headline Level
    • Select the element level for the primary headline.
      • None
      • H1
      • H2
      • H3
      • H4
      • H5
      • H6
  • Block Text
    • Enter text for the primary headline.

Secondary Block

  • Headline
    • Enter text for the secondary headline.
  • Headline Level
    • Select the element level for the secondary headline.
      • None
      • H1
      • H2
      • H3
      • H4
      • H5
      • H6

Secondary Block Features

  • Feature Text
    • Enter each bullet point for the secondary block.
    • There is no limits for bullet points. Recommened is four bullet points.

Meta

  • Element ID
    • Add an ID to the component to allow #hash linking.
    • It is optional field.

Image & CTA

Image

  • We can add an image for the secondary block.
  • Image Alt Text
    • Alternate text for the image.
  • Dimension of the image should be 1024px x 752px .

Note:-

  • We must select image style as background and enable the overlay option to show both bullet points and image on the secondary block.
  • We must select the image style as foreground or background to visible the image on page. if we select image style as None image is not visible on page.

 

Call To Action

  • CTA Link
    • CTA link for button.
  • Link Text
    • Text that shows on the button.
  • Link Title
    • Title attribute for button description.
  • Style
    • Color choices for the button are: Default, Pink, Blue and White.
  • Only one CTA Button can be added.

Note:- 

  • CTA Button will be visible on page if the secondary headline and bullet points are added to the splitblock module please refer Example 8.

UI & Styles

Image Style

  • Here we can choose the image should be background or foreground.
  • There are three options in the dropdown
    • None
    • Foreground
    • Background

Yes or No styles

  • New Tab ?
    • CTA link will open in new tab if it is checked.
  • Disable Lazy Loading of Image ?
    • Used to suppress lazy load of the images.
  • No Gap ?
    • Removes the bottom margin separating modules.
  • Top Gap ?
    • Adds a gap to the top of the component separating it from the top of the page or a prior component.
  • Gray Background ?
    • Light gray background across both parts of the module.
  • Blue Gradient ?
    • Secondary block gets a full­bleed blue gradient background instead of an image.
  • Light Text ?
    • Renders all secondary module text as white for legibility when displayed over dark backgrounds.
  • Reverse ?
    • Swaps the rendering order of the primary and secondary boxes for desktop view.
  • Overlay ?
    • Text is overlaid on top of the image or gradient.
    • Image style must be selected as Background.

Examples

Example 1 - Image Style Selected as Foreground

More About the Challenge

When Function of Beauty, an innovative, digitally native beauty brand, started experiencing exponential growth, the demand for its made-to-order beauty products created a backlog that slowed delivery. Initially, an expedited-only delivery solution helped clear the backlog and drove customer satisfaction—resulting in a 92% volume increase—but it also created a cost burden for the growing brand. Function of Beauty’s personalized beauty products are primarily available through a custom subscription catered to each of their customers.

Splitblock Module

Example 2 - Image Style Selected as Background

More About the Challenge

When Function of Beauty, an innovative, digitally native beauty brand, started experiencing exponential growth, the demand for its made-to-order beauty products created a backlog that slowed delivery. Initially, an expedited-only delivery solution helped clear the backlog and drove customer satisfaction—resulting in a 92% volume increase—but it also created a cost burden for the growing brand. Function of Beauty’s personalized beauty products are primarily available through a custom subscription catered to each of their customers.

Splitblock Module

Example 3 - Blue Gradient Option Enabled

Our Designed Solution

Rather than using a one-size-fits-all solution, Pitney Bowes designed a blended, customer-driven delivery solution for Function of Beauty’s unique challenge. Their designed solution balances speed and cost by triggering expedited delivery for new customers and standard delivery for repeat customers.

Splitblock Module

Example 4 - Gray Background Option Enabled

More About the Challenge

When Function of Beauty, an innovative, digitally native beauty brand, started experiencing exponential growth, the demand for its made-to-order beauty products created a backlog that slowed delivery. Initially, an expedited-only delivery solution helped clear the backlog and drove customer satisfaction—resulting in a 92% volume increase—but it also created a cost burden for the growing brand.

Splitblock Module

Example 5 - Both Gray Background and Blue Gradient Option Enabled

Our Designed Solution

Pitney Bowes leveraged its decades of international ecommerce logistics expertise to create a customized cross-border delivery solution that simplified the complexities of US-outbound shipping for Japan Crate. Our team removed uncertainty around duty and tax by providing comprehensive landed cost quotes using product classification for shipping across the world.

Splitblock Module

Example 6 - Primary and Secondary Block

Primary Block

The top three features online shoppers most want to see from a tracking experience are visibility, simplicity, and interactivity. Put simply, shoppers want to know when to expect their package, where their package is (without having to enter any log-in information), and the option to get order updates.

Secondary Block

  • Precise Estimated Delivery Date (EDD) information​.
  • Detailed tracking updates that don’t require a log-in.
  • Branded SMS/text and email notification options that automatically update the customer if an order’s EDD changes.
  • Post-purchase engagement using promotional modules.

Example 7 - Light text enabled for secondary module on blue gradient

Handling Fulfillment and Shipping Logistics

Quip’s focus on customers’ oral health means that the bar is high when it comes to fulfillment and shipping.

Secondary Block

  • The inside of the box is also covered in designs, like unicorns and dinosaurs, that kids can use for coloring.
  • There are no plastic bags or clothes tags for the highly tactile junior consumer who hates all that grown-up filler.
  • Clothes are wrapped in big piece of silver mylar (also great as a cape) with a sticker in the child’s favorite color.

Example 8 - CTA Enabled

Business Challenge

Tobi’s limited order tracking abilities prompted frequent customer inquiries, many of them about returns. This lack of clarity around the returns process left customers wondering when they would receive a refund or replacement item, creating a negative customer experience. The Tobi team also struggled with the lack of visibility when expediting customer queries.

Business Goals

  • Minimize time and risk associated with integrating new technology.
  • Lower transaction times and achieve higher overall processing speeds
  • Improve system capacity and capability to handle more complex projects
Split Block