Page tree

 

Contents

Item templates are used to define a layout for promoted content in your Evergage campaigns and simplify the way you promote Recipes on your website. Evergage Item Templates currently are not responsive by default; when you build one you must give it a definitive height and width. However, if your site is responsive, you can use custom CSS to make an item template behave responsibly when it is implemented in a campaign. This article details the process for making your item templates responsive and discusses one method you can utilize.

NOTE

You must have a good working knowledge of CSS and an understanding of your site styles and responsive behavior.

Build a Responsive Item Template

Building a responsive item template makes it possible to adjust the sizing and styling of specific parts of the item template used in a campaign.

  1. Create a new item template
  2. Add classes to the elements in the template

    NOTE

    Add classes to any container element that wraps around content in your item template, or to any elements you know in advance you will need to re-size for responsiveness.

 

Example

In the example above, each DIV in the item template has been assigned a class. For example, “eg-item-name” was assigned to the DIV that wraps around the product name

Add a Responsive Item Template to an Item Block

  1. Create or edit a campaign

  2. Add an item block to a message in the campaign using one of the responsive item templates you have built

  3. Add a class to the item block within the HTML source code editor of the message

     

 

Adjust Sizing and Styling 

In the CSS source code editor you can now target the item block as a whole, or target specific parts of the item block, to adjust the sizing and styling to match the responsiveness of your site. Consider the following examples, each of which includes sample code for your reference:

 

Example 1: Set Item Block Width to 100%

By setting the width of the item block to 100%, as the visitor resizes the window the item block will adjust to fit the entire width of its container instead of retaining its initial pixel width.

 

Example 2: Use Media Queries

You can also use media queries to adjust the width of the individual items within the item block to accommodate smaller screen sizes. Once you add a class to the item block, you can target all of the items within it using CSS.

This CSS will override the width that was set when the item template was initially created and allows us to adjust the size of the items within the item block so that they behave responsively.

 

Example 3: Hide the Message Entirely

Instead of adjusting the size of the message to fit smaller screen sizes, you can hide the message entirely. In this case, you can target the whole message and prevent it from displaying using a media query.

 

You can use a similar method to hide items within the item block at various screen sizes. For example, if you are using a 1x4 layout, you can hide the 4th item at smaller screen sizes and only display 3 items by implementing CSS.

This page has no comments.