Skip to main content

Grid-based structure

Get insights on the grid-based structure in ModCon 2.0

Anna Voloshchuk avatar
Written by Anna Voloshchuk
Updated over a month ago

Available for e-Detailers, e-Detailer briefs, emails, email briefs, and modules

Contact the administrator to configure and update your templates to ModCon 2.0.

The ModCon 2.0 approach to modular content creation introduces a grid-based structure for e-Detailers, emails, and modules, providing a consistent and flexible way to arrange content elements—text, images, and other assets—into grids and grid areas.

  • Grid is a structured layout formed by rows and columns, designed to organize content in a visually consistent and flexible manner.

  • Grid area defines sections where components are placed, ensuring alignment and consistency.

The grid-based structure ensures that components remain aligned and properly formatted in different content item types.

Text

When pulling content modules from Veeva Vault PromoMats to your modules, eWizard Editor supports rich text formatting. This applies to text both as individual assets and as parts of content modules. As a result, the uploaded text preserves the following formatting:

  • Font style: bold, italic, underline

  • Font effects: superscript, subscript

  • Lists: bulleted, numbered

  • Paragraphs

  • Hyperlinks

The content item template predefines the font family, size, and color of the text assets.

e-Detailers and their briefs

The grid-based structure is applied at the slide level. You can still create the e-Detailer slides with absolute positioning of components. For this, add a blank slide to your e-Detailer and drag the required components onto the layout.

In eWizard Editor, you can add grid-based blocks from the elements panel and arrange components within them using relative positioning, ensuring that components adjust within their assigned grid areas while maintaining a consistent layout.

e-Detailers and their briefs

When the number or size of components exceeds the available grid area, some components may extend beyond the visible slide area. These components remain accessible on the Tree tab, where you can review their position and adjust their placement as needed.

To add assets to the selected components on the layout, use the BROWSE button on the Properties tab. To streamline the content creation, you can also pull the content module from Veeva Vault PromoMats into the grid-based block.

You can select any component on the content item layout or on the Tree tab and apply available styling options and manage its properties.

Modules

The Tree tab isn't yet available in modules.

Grid controls

Available in templates with a grid-based structure

The grid controls in eWizard Editor allow you to modify the structure of the grid-based layout to ensure its design responds to the guidelines and requirements.

On the layout, when hovering over the grid-based area, you can see the following controls displayed:

Control

Action

Grid

Highlight the grid. The selected grid is also highlighted on the Tree tab.

Area

Highlight the grid area and all components inside. The selected grid area is also highlighted on the Tree tab.

Add to...

Unfold the following placement options:
Top/Bottom—to add a new grid area above/below the selected one. The new grid area has a default height of 120 pixels. It fills an entire new layout-wide row above/below the existing grid area.
Right/Left—to add a new grid area to the right/left of the selected one. The width of existing grid areas is adjusted proportionally. If an existing area contains text, it stretches down and rearranges the text.

Delete area

Remove the selected grid area and all content inside. If there are any adjacent grid areas, they automatically resize to fill the space left. The last remaining grid area in the grid can't be deleted, and the delete option is hidden.
You can also use a context menu on the layout to delete the required grid area except for the last one.

Cross-channel components

Universal components are available in ModCon 2.0 templates. Contact the administrator to update your templates.

Cross-channel compatibility for components is available in eWizard grid-based templates. This functionality streamlines the creation of rich, modular content that conforms to the specific interaction model of the destination content item.

Button

The button component integrated into templates with a grid-based structure seamlessly adapts to different content items while preserving its key properties.

You can add the button component to the content item layout from the Components tab on the elements panel.

To customize the button component, select it on the layout and go to the Properties tab.

Here, you can manage the button component in the following ways:

  • Assign the element type to classify the component in Veeva Vault PromoMats.

  • Change the component name.

  • Add or upload some text to the button. Click the button text area to activate the WYSIWYG editor.

Improve the visibility of light text in the text input area with the Dark background toggle.

  • Set the component line height in pixels.

  • Select the button text alignment: Left, Center, Right, or Justify.

  • Choose the component alignment.

  • Set the component width in pixels.

  • Set the minimal height of the button component to maintain its consistent size across different layouts. Available for e-Detailers and their briefs.

  • Select the Full width checkbox to align the button with the content item layout width.

  • Add the required link type to the button component depending on the content item type. For this:

    • In emails, their briefs, and modules, go to the Properties tab and click the button.

    • In e-Detailers and their briefs, you can either add a link on the Actions tab with the Open link action or click the link button on the Properties tab.

If an action is assigned to the button, the LINK section on the Properties tab is hidden automatically.

Video

The cross-channel video component automatically adapts to different content item types, maintaining consistent behavior whether used as a source file or as a poster with a link. This flexibility streamlines content creation, empowers wider multimedia reuse, and opens up new creative possibilities for engaging cross-channel experiences.

You can integrate the video component both into the content item layout with relative and absolute positioning.

After dragging the video component from the Components tab onto your content item layout, you can customize its properties in the following way:

Property

Action

Available for

ELEMENT TYPE

Assign an element type to the video component.

All content items

COMPONENT NAME

Rename the component if needed. Your changes appear on the Tree tab on the fly.

All content items

VIDEO

Upload a video file in the VIDEO section. For this, click BROWSE to open the Assets popup and select your video file.
In e-Detailers and their briefs, when both a video file and a video link are provided, the uploaded file takes priority over the link.
In emails and modules, playback is supported only for videos added through the LINK option.

All content items

LINK

Set and configure the video URL link type. For this, click

and insert or enter the link to the video in the Edit link popup that appears.
In emails and modules, clicking the video on the layout opens it in a new browser tab by default.

All content items

Show controls

Activate the video controls when playing it. The play icon is removed from the component display when this option is selected.

e-Detailers and their briefs

Start playing on slide open

Start the video on the e-Detailer slide opening.

e-Detailers and their briefs

Fullscreen

Open the video in fullscreen. Applies to uploaded video files only.

e-Detailers and their briefs

Loop

Set the loop playback for your video.

e-Detailers and their briefs

Mute

Turn off the video sound.

e-Detailers and their briefs

Play video inline on mobile

Select the checkbox to prevent the video from playing in fullscreen on mobile devices. You can't check the changes made by the Play video inline on mobile option in the PREVIEW mode.

e-Detailers and their briefs

SHAPE

Change the video container shape to a Rectangle, Square, or Circle.

All content items

ALTERNATIVE TEXT

Add the video description to the ALTERNATIVE TEXT field.

All content items

PLAYING DURATION

Define the duration value in seconds for your video.

e-Detailers and their briefs

POSTER

Add the preview image for the uploaded video. For this, click BROWSE in the POSTER section and select the required image in the Assets popup.
To show the video preview image in e-Detailers, select the Show poster for video checkbox.

All content items

PLAY ICON

Change the play icon for your video.
In emails and modules, select the Show play icon checkbox to display the play icon on the video.

All content items

ALIGNMENT

Select the following video component alignment from the dropdown list: Left, Center, or Right. By default, the component is aligned to the left.
In e-Detailers and their briefs, the ALIGNMENT property appears under the PLAY ICON section when you add a video component to a grid-based layout.

All content items

The fields marked with asterisks (*) on the Properties tab are mandatory.

If you leave mandatory fields empty on the Properties tab, a message appears on the layout showing which components are affected. The message disappears automatically once you fill in all the required fields. It doesn't affect the content item editing or saving process.

The cross-channel video component validation is implemented for both bulk and interactive publications. The system automatically checks that all required fields—VIDEO, LINK, ALTERNATIVE TEXT, and POSTER—are complete. If any metadata is missing, the following behavior on the publication steps is expected:

  • Bulk publication

    • On the BLOCKS step, the ERROR label appears under the block thumbnail, and the Publish as module checkbox is cleared and locked. You can proceed to the next step.

    • On the MODULES step, the WARNING label appears under the content module thumbnail, all publishing options are locked by default. The system automatically preselects the Link existing option, so the content module is published without the latest changes made in the Editor.

  • Interactive publication

    • On the PREPARATION step, the NEXT button remains locked until all required video metadata is completed.

    If you're using an outdated content item template, the system blocks publication after the cross-channel component validation. The NEXT button is locked until you update the template to the latest version.

To proceed with the publication, go back to Editor and fill in the video component mandatory fields.

Component sizing

Available in templates with a grid-based structure

For greater flexibility in designing grid-based content, you can adjust the size of components with the SIZE section on the Styling tab. This enhancement provides more control over how components are displayed and how the overall grid composition is structured.

To proceed to the component size modification:

  1. Add the component to the grid area or select the already added one on the content item layout.

  2. Go to the Styling tab → SIZE section.

    Here, you can manage the component size with the following options:

Option

Action

Notes

W Width

Enter the component width in pixels. You can set the value manually, adjust it with the field arrows, or use your keyboard arrow keys.

You can select the following component width modes ():
Fill—the component stretches to fill 100% of the grid area. This is the default mode. If you manually adjust the component width, the mode automatically switches to Adapt. When the grid area width changes, the component width also changes proportionally.
Adapt—the component adjusts to the value set in the W field. The size of the component in the Adapt mode can't become bigger than the width of the grid area.

H Height

Enter the component height in pixels. You can set the value manually, adjust the height with the field arrows, or use your keyboard arrow keys.

There're three possible height modes ():
Auto—the component height is determined automatically based on the grid area and width–height ratio. The height adjusts dynamically without manual input, and you can't change it.
Fixed—the component height is set to a specific value you defined in pixels. This ensures the height remains constant regardless of the content inside.
Hug—the component height automatically adjusts—expanding or shrinking as needed—to fit the content. In this mode, the height is controlled by Editor and can't be changed manually.

When a component is moved to a different grid area, it retains its alignment and size settings. If the width mode is set to Adapt, the width automatically adjusts in the new grid area to maintain the same proportion.

You can set the component size separately for the content item desktop, tablet, and mobile versions.

Mobile view

In Mobile view, components within grid areas automatically stretch to the full width of the grid area.

Did this answer your question?