Grid-based structure | Viseven Help Center

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.