Various UI Elements Modules
This section provides the detailed description of the following UI Elements modules:
Carousel
The Carousel module enables you to present content to the user in a dynamic way. This module is used to make the user experience visually appealing.
You can use this module to present content like top stories or show highlights in a slideshow format using the various display options and styling elements. The Carousel module presents information, both text and images, in a continuous slideshow format on mobile sites and applications. The module also provides an option to link each item to either an inner page or the URL specified in the feed.
The Carousel module gives the user a novel experience of scanning stories by letting the slide show play itself. The user can click any item to get more information in its inner page. You can also set navigation links and analyze consumption trends.
The module offers the following use cases:
- Display with images, top stories, shows, news highlights, and so on in a slideshow format.
- Play feed items in slideshow format at set intervals.
- Display articles in various display formats like title only, image only, title and short description.
- Provide various auto slide options.
- Enable the user to flip through stories or feed items.
- Take you to a different real estate to view more details of an item you click.
- Create a monetizable page for each article in the form of an inner page.
- Navigation options across pages and articles.
- Various styling options for background, fonts, link colors and others, for both touch and non-touch modes.
- Gather analytical data on the number of more pages accessed, the titles and publishing dates of the stories viewed.
Prerequisites
Before you begin to use the Carousel module, ensure that you have the following:
- A Feed URL
- A Feed Adapter Key provided by Cisco
If you want to create a feed using the Feed Editor, use these details:
- Feed Template Name—Carousel
- Feed Adapter Key—CAROUSEL
- Feed Structure:
< NewsHeadlines>
<NewsHeadline>
<title/>
<shortDescription/>
<pubDate/>
<category/>
<thumbnailImageUrl/>
<fullImageUrl/>
<description/>
<author/>
<link/>
</NewsHeadline>
</NewsHeadlines>
Note Contact Cisco only if the Feed is external.
For information on images, see the Recommended Image Sizes.
For information on tags, see Note.
Configuring the Carousel Module
To configure the Carousel module, perform the following steps:
Step 1 In the Modules panel, enter Carousel. The Carousel module appears in the Modules panel.
Step 2 Drag and drop the Carousel module into the Canvas. The Edit panel of the module opens.
Step 3 In the Edit panel of the module, specify the required values in the respective fields.
Note Ensure to specify the feed URL and feed adapter key.
Step 4 Click Save.
Main Properties
The main properties enable you to set of parameters that are necessary to configure the module. The following is the list of Carousel Main properties.
Main Properties
|
|
Feed URL |
The URL of carousel feed that conforms to the content source format supported by the module. |
Feed Adapter Key |
The feed adapter key provided by Cisco. |
Number of Display items from the Feed |
The number of slides from the feed that needs to appear in the Carousel. |
Display Options |
To configure how the slide show must appear in the page. The options available are:
- Image Only
- Title Only
- Title & Short Description
|
Link Each Item to |
Links each slide to one of the following:
Note It is recommended that you manually browse internal pages and set the link. |
Show Next and Previous Items Links on the inner page |
To display Next and Previous Items links on the inner page. |
Label For Next Item |
The text that represents the Next Item link. |
Label For Previous Item |
The text that represents the Previous Item link. |
Label for Next Page |
The text for the Next Page on the inner pages. |
Label for Previous Page |
The text for Previous Page on the inner pages. |
Show Go back link |
To display the Go back link on the inner pages. |
Label for Go back Link |
The text for the Go back link on the inner pages. |
Style Properties
The Style properties enable you to specify the style and alignment for the carousel. By default, style properties apply to both touch and non-touch modes. The following is the list of Carousel Style properties.
For information on images, see the “Recommended Image Sizes” section.
Style Properties
|
|
Title Color |
The font color for the titles of the carousel items. |
Align Title |
To align the titles of carousel item. You can align title to left, right, or center. |
Short Description Color |
The font color for the short descriptions text. |
Align Short Description |
To align the short description. You can align short description to left, right, or center. |
Short description Padding (Px) |
The space that you want to leave between the content boundary and the module boundary. |
Display Page Number Navigation |
To display the page number of a carousel item out of the total page numbers. |
Navigation Link Color |
The color that you want to use for the navigation links. |
Story Color on Inner Page |
The font color that you want to use for the detailed description of each carousel item. |
Date and Byline Color on Inner Page |
The font color that you want to use for the Date and Byline text. The Date and Byline appears on the inner page of a carousel item. |
Next and Previous Items Link Color |
The font color that you want to use for the text that represents the Next Item and Previous Item links. |
Change Placeholder Thumbnail (45x15 px) |
To replace the default placeholder image for thumbnails. The recommended size of thumbnail placeholder image is 45x15 pixels. The placeholder image is shown in the thumbnail area, in case a thumbnail image of a story item, specified in the feed, does not load on your mobile site or application. |
Placeholder Thumbnail Background Color |
The color that you want to use as the background for the placeholder thumbnail. |
Background Color |
The color for the background area where carousel items appear. |
Add Background Image |
To use an image as the background for the area where carousel items appear. |
Padding |
The space that you want to leave between the content boundary and the module boundary. |
Margin |
The space that you want to leave between the module boundary and the sides of device screen. |
Touch Version Properties
The Touch Version properties enable you to specify the configuration parameters exclusively for touch devices. The following is the list of Carousel Touch Version properties.
Touch Version Properties
|
|
Set Time for Each Slide (in Seconds) |
The duration of slide show for each image in a carousel. The Images repeats in loop. The default time for each image is five seconds. |
Auto Slide Options |
The slide transition for the slides in the carousel. The options available are Row-wise, Semi-circular-wise, and Circular -wise. |
Title Font Family |
The font family that you want to apply to the titles of carousel items. |
Title Font Size |
The font size that you want to apply to the title text. |
Make Title Bold |
To display the titles with bold text formatting. |
Short Description Font Family |
The font family that you want to apply to the short description text. |
Short Description Font Size |
The font size that you want to apply to the short description text. |
Story Font Family |
The font family that you want to apply to the detailed descriptions of carousel items that appear on the inner pages. |
Story Font Size |
The font size that you want to apply to the story text. |
Date and Byline Font Family |
The font family that you want to apply to the date and byline text. |
Date and Byline Font Size |
The font size that you want to apply to the date and byline text. |
Display Page Navigation Icons |
To display the navigation icons to help users navigate between carousel items. The Navigation icons are small images of dots that users click to navigate between pages with carousel items. |
Change Selected Page Navigation Icon (6x6 pixels |
To upload a page navigation icon that indicates the user has selected a carousel item. |
Change Default Page Navigation Icon (6x6 pixels) |
To upload a page navigation icon that indicates the user has not selected any carousel item. |
Align Navigation Icons |
To align the navigation icons. You can align the navigation icons to left, right, or center. |
Display Next and Previous Arrows |
To display Next and Previous arrows that enable users navigate between previous and next carousel items. You can place the links using one of the following options:
- With Title
- With Navigation Icons
|
Change Enabled Next Arrow (20x20 px) |
To replace the default arrow image that indicates the users can click to navigate to next items. |
Change Disabled Next Arrow (20x20 px) |
To replace the default arrow image that indicates there are no more next items to be viewed. |
Change Enabled Previous Arrow (20x20 px) |
To replace the default arrow image that indicates the users can click to navigate to previous items. |
Change Disabled Previous Arrow (20x20 px) |
To replace the default arrow image that indicates there are no more previous items to be viewed. |
Next and Previous Items Links Label Font Family |
The font family that you want to use for text that represents the Next Item and Previous Item links. |
Next and Previous Items Links Label Font Size |
The font size that you want to use for the text of the Next Item and Previous Item links. |
Make Next and Previous Items Links Bold |
To display the Next and Previous Items links in bold. |
Separator Color |
The color for the separator lines that appear between stories in the inner page. |
Stroke Weight |
The thickness of the separator line. |
Add Background Image |
To use an image as the background of the area where stories appear. |
Padding |
The space that you want to leave between the content boundary and the module boundary. |
Margin |
The space that you want to leave between the module boundary and the sides of device screen. |
Pagination Properties
The pagination properties enable you to specify the pagination parameters for non-touch devices The following is the list of Carousel Pagination properties.
Pagination Properties
|
|
Pagination |
As the content of some articles may exceed the default dimensions of the first inner page, the entire content may not appear on one page. So it is recommended that pagination be set for non-touch devices. The Pagination radio button that sets the same pagination for all devices between 500 and 800. |
Advanced Pagination |
The Advanced Pagination radio button for a wider classification of devices. Some recommendations:
- For large devices with screen width of 320 pixels and above: Between 600 and 800.
- For medium devices with screen width of 240 pixels: Between 500 and 600.
- For devices with small screen width of 320 pixels and below: between 400 and 500.
Note Touch devices do not have pagination. The entire content of an article appears on the same inner page as the user scrolls down to read. |
Analytics Properties
The Analytics properties enable you to specify the parameters that help gather analytical data.
The values you specify in the Analytics section can be used in the Omniture Module to generate a report. The following is the list of Carousel Analytics properties.
Analytics Properties
|
|
Story Title |
The value to configure the Carousel Module to gather information on the titles of stories viewed by the end users. |
Timestamp |
The value to configure the Carousel Module to gather information on the publishing dates of stories viewed by the end users. |
Recommended Image Sizes
The OOB modules are feed based or non-feed based. Images of various sizes can be uploaded either while creating the feed for the module or in the Edit panel of Site Builder. The following table includes recommended image sizes to be used while creating sites:.
Recommended Image Sizes
|
|
|
|
Extra Large XL |
1000 - 2000Px |
1MB (1024KB) |
For rich background images. |
Large L |
800 - 1360Px |
560 KB |
Images used for banners, home page cover picture, carousel, picture gallery, and news detail. |
Medium M |
130 - 300Px |
45 KB |
For thumbnails, logos, click to Call, click to SMS etc. |
Small S |
60 - 100Px |
7 KB |
For caret images, icons, and so on. |
Extra Small XS |
2 - 60Px |
3 KB |
For repeat background images. |
Countdown
The Countdown module enables you to present the time or days remaining for an event in a dynamic way to the end user. This module gives the user a visual representation of the time remaining for the event. The Countdown module presents the countdown in both Timer and Days remaining format on mobile sites.
You can use this module to present a countdown of time units (seconds, days, or other time units) remaining before an event occurs. You can use this module for the following cases:
- Display the time remaining in which a holiday offer can be availed. The module counts down to the configured date and time in the edit panel.
- This module can be used to countdown to a movie release, store opening, and end of seasons sale.
The Countdown module helps you display timer or days remaining on your mobile site using two display options. The module provides various configuration options where you can also set time zone, and styling options and redirect to another URL after time span is over.
Note This module can be used only for web sites.
Configuring the Countdown Module
To configure the Countdown module, perform the following steps:
Step 1 In the Modules panel, enter Countdown. The Countdown module appears in the Modules panel.
Step 2 Drag and drop the Countdown module into the Canvas. The Edit panel of the module opens.
Step 3 In the Edit panel of the module, specify the required values in the respective fields.
Step 4 Click Save.
Main Properties
The Main properties enable you to configure the countdown details. The following is the list of Countdown Main properties.
Main Properties
|
|
Select format |
The format in which you need to display the countdown time. The options available are:
- Timer (only for touch)
- Days remaining
|
Time |
The time for the countdown. The default is set to 00:00 hrs. |
Countdown to (MM/DD/YYYY) |
The countdown to date in the specified format. |
Select time zone |
The appropriate time zone. |
After time is up |
The action to be taken once the time is up. Hide—To hide the module after time period expires. Redirect to URL—To lead the user to another URL after the time period expires. |
Enter URL to redirect |
The URL where you want your users to be redirected to, if Redirect to URL is selected in the “After time is up” drop-down box. |
Timer (Touch) Properties
The Timer properties enable you to configure the styling elements that define the look and feel of the digits and labels for the Timer. The following is the list of Countdown Timer properties.
Timer Properties
|
|
Digits |
|
Font color |
The font color that you want to apply to the digits. |
Font Family |
The font family that you want to apply to the digits. |
Font size |
The font size that you want to apply to the digits. |
Make Text bold |
To display digits in bold. |
Shadow color |
The color for shadow. The direction of shadow on X and Y axes and the percentage of blur is fixed. User can only configure the color. |
Display Time labels |
To show time labels. |
Font color |
The font color that you want to apply to the time labels. |
Font Family |
The font family that you want to apply to the time labels. |
Font Size |
The font size that you want to apply to the time labels. |
Make Text bold |
To display the time labels in bold. |
Shadow color |
The color for shadow. The direction of shadow on X and Y axis as well as the percentage of blur is fixed. User can only configure the color. |
Days Remaining Properties
The Days Remaining properties enable you configure the styling elements for the days remaining, for touch and non-touch devices. The following is the list of Countdown Days Remaining properties.
Days Remaining Properties
|
|
Label |
A label for the days remaining. |
Font color |
The font color that you want to apply to the label. |
Font Family (Touch) |
The font family that you want to apply to the label for touch mode. |
Font Family (Non-Touch) |
The font family that you want to apply to the label for non-touch mode. |
Font size (Touch) |
The font size that you want to apply to the label. The font size applies only to touch mode. |
Make Text Bold (Touch)/(Non-Touch) |
To display the text with bold text formatting. |
Shadow color (Touch) |
The font color for shadow. The shadow color applies only to touch mode. |
Background Properties
The Background properties enable you to specify the background color and image parameters for the Countdown module.The following is the list of Countdown Background properties.
Background Properties
|
|
Background Color |
The color that must appear as background to the area where content of the module appears. |
Background Image Options |
|
Upload background image (Touch) |
To use an image as the background of the area. This applies to the touch version. |
Upload background image (Non-touch) |
To use an image as the background of the area. This applies to the non-touch version. |
Repeat horizontally |
To repeat the background image only horizontally. |
Border Properties
The Border properties enable you to configure the border details for the module. The following is the list of Countdown Border properties.
Border Properties
|
|
Border Color |
The color that you want to use for the module border. |
Stroke Weight |
The thickness required for the border. |
Top corner-radius (px) (Touch) |
The value to apply a rounded corner effect to the top corners. This property applies only to touch mode. |
Bottom corner-radius (px) (Touch) |
The value to apply a rounded corner effect to the bottom corners. This property applies only to touch mode. |
Padding and Margin Properties
The Padding and Margin properties enable you to configure the padding and margin values for the module. The following is the list of Countdown Padding and Margin properties.
Padding and Margin Properties
|
|
Padding |
|
Padding (Px) (Touch) |
The space required between the content boundary and the module boundary for touch mode. |
Padding (Px) (Non-Touch) |
The space required between the content boundary and the module boundary for non-touch mode. |
Margin |
|
Margin (Px) (Touch) |
The space required between the outer border and the sides of device screens for touch mode. |
Margin (Px) (Non-Touch) |
The space required between the outer border and the sides of device screens for non-touch mode. |
Date and Time
You can use the Date and Time Module to insert time lines and datelines on your mobile site. The Date and Time module acts as a calendar that displays the current date and the time on the mobile site. The current data and time are shown based on the time zone selected.
You can opt to display only the date or date and time. You can also add style and background image to the module.
Note This module can be used only for web sites.
Configuring the Date and Time Module
To configure the Date and Time module, perform the following steps:
Step 1 In the Modules panel, enter Date and Time. The Date and Time module appears in the Modules panel.
Step 2 Drag and drop the Date and Time module into the Canvas. The Edit panel of the module opens.
Step 3 In the Edit panel of the module, specify the required values in the respective fields.
Step 4 Click Save.
Main Properties
The Main properties enable you to specify the basic properties of this module. The following is the list of Date and Time Main properties.
Main Properties
|
|
Date/Time Format |
The format in which the date or time is to be displayed to the user. |
Time Zone |
The timezone that you need to configure. |
Display Time Zone |
To display the time zone in the site page along with date and time. |
Style Properties
The Style properties enable you to specify the style and alignment details for the Date and Time module. The following is the list of Date and Time Style properties.
Style Properties
|
|
Font Color |
The font color for the date and time text. |
Align |
The alignment for the date and time text. |
Background Color |
The background color for the Date and Time module. |
Add Background Image |
To add the background Image. You can upload the image using the Upload Image button. |
Padding (Px) |
The Padding value. |
Margin (Px) |
The Margin value. |
Touch Version Properties
The Touch Version properties enable you to specify the appropriate font size and the font family that you want to apply to the date and time. This option is for touch devices. The following is the list of Date and Time Touch Version properties.
Touch Version Properties
|
|
Font Family |
The font family for the date and time text. |
Font Size |
The font size for the text. The minimum size is 10 and the maximum size is 30. |
Add Background Image |
To add the background Image. You can upload the image using the Upload Image button. |
Padding (Px) |
The space required between the content boundary and the module boundary. |
Margin (Px) |
The space required between the outer border and the sides of device screens. |
Expand Collapse Container
The Expand Collapse Container module provides you the functionality that enables your users to expand or collapse the content as they browse through the pages on your site. This module enables users to show or hide content using labels or tabs and saving space on your mobile site without cutting down the content.
You can drag and drop other modules, such as Stories, Shows, Videos, and Photo Gallery into the Expand Collapse Container module. In run time, the Expand Collapse Container expands and collapses the content displayed by these modules when the user taps on the Expand Collapse Container Module icon or label.
You can publish content on a wide range of topics on your mobile site. This module helps you to organize the content in an effective way and save space on your site without cutting down the content.
Some use cases of the Expand Collapse Container module are as follows:
- Display 3 to 4 items such as Stories, Photo Gallery, and Videos in a page.
For example, you can drag and drop the Stories Module into the Expand Collapse Container and display story items under a common name, for example, Read the latest news. In run time, the users can expand or collapse the stories by tapping the label, as they browse through the page. Similarly, you can configure another Expand Collapse Container with Videos Module. Therefore, you can display maximum content in minimum space while enhancing the browsing experience.
- Use this module to display extra information in the footer like contact details or specifications, which may, otherwise, take too much space on every page.
- Expand and collapse a list of links on your mobile site.
Note On touch devices, the module expands and collapses the content without refreshing the page. However, on non-touch devices, the page gets refreshed, each time the Expand Collapsed Module is tapped.
Configuring the Expand Collapse Container Module
To configure the Expand Collapse Container module, perform the following steps:
Step 1 In the Modules panel, enter Expand Collapse Container. The Expand Collapse Container module appears in the modules panel.
Step 2 Drag and drop the Expand Collapse Container module into the Canvas. The Edit panel of the module opens.
Step 3 In the Edit panel of the module, specify the required values in the respective fields.
Step 4 Click Save.
Note The styling of the Expand Collapse Container Module will not be visible in the Canvas area. To view the changes, use the Preview button.
Expand Collapse Container Properties
Main Properties
The Main properties enable you to specify the basic details required for this module. The following is the list of Expand Collapse Container Main properties.
Main Properties
|
|
Default State |
To configure the default state of the module in run time.
- Expanded—The content of the module inside the container appear as expanded in run time.
- Collapsed—The content of the module inside the container appear as collapsed in run time.
|
Language Support |
The language you need to support. The default is set to English. |
On non-touch devices the container will always appear in expanded state |
|
Hide container (and modules) on non-touch devices |
The container to display the modules in an expanded state on non-touch devices. The expand collapse feature does not work on non-touch devices. By default, the container display only the group name header and modules below it in the expanded state. The user can choose to hide the container and the modules in it on non-touch devices. |
Layout Properties
The Layout properties enable you specify the layout details. The following is the list of Expand Collapse Container Layout properties..
Layout Properties
|
|
Layout Style |
To align the Expand Collapse buttons to the left side or right side of the Group Name area. By default, the button is aligned to the right. |
Align |
The alignment for group name label. You can align the label to right, left or center. |
Group Name Properties
The Group Name properties enable you to specify the name and font details for group name. The following is the list of Expand Collapse Container Group Name properties.
Group Name Properties
|
|
Group name label |
The label for the group name. The default label is Group name. |
Font Color |
The font color that must be applied to the label. |
Font Family (Touch) |
The font family for the group name label for touch mode. |
Font Family (Non-touch) |
The font family for the group name label for non-touch mode. |
Font Size (Touch) |
The font size for the group name label text. This setting applies only on touch devices. |
Text Style options |
To style the label text:
- Make text bold (Touch)—To make the text bold on touch devices.
- Make text bold (Non-touch)—To make the text bold on non-touch devices.
- Make text italic (Touch)—To make the text italic on touch devices.
- Make text italic (Non-touch)—To make the text italic on non-touch devices.
- Underline text (Non-touch)—To underline the text.
|
Text Shadow |
The shadow color to apply a shadow effect to the label text. |
Group Name Background Properties
The Group Name Background properties enable you to specify the background details for the group name. The following is the list of Expand Collapse Container Group Name Background properties.
Group Name Background Properties
|
|
Background Color |
The color that should appear as background to the area where the group name label and buttons appear. |
Background Image Options |
To display an image as background. Add background image (Touch)—To use an image as the background for the area where the group name appears. This applies to the touch version. Add background image (Non-touch)—To use an image as the background for the area where the group name appears. This applies to the non-touch version. Repeat horizontally only—To repeat the background image only horizontally. |
Container Background Properties
The Container Background properties enable you to specify the background of the expand collapse container. The following is the list of Container Background properties.
Container Background Properties
|
|
Background Color |
The color that must appear as background for the area where content of the module inside the container appears. Note This background is visible only if the margin of the module inside the container is adjusted. |
Background Image Options |
To set an image as background. Add background image (Touch)—To use an image as the background of the area. This applies to the touch version. Add background image (Non-touch)—To use an image as the background of the area. This applies to the non-touch version. Repeat horizontally only—The background image repeats only horizontally. |
Border Properties
The Border properties enable you to configure the border details for the Expand-Collapse Container module. The following is the list of Expand Collapse Container Border properties.
Border Properties
|
|
Border Color |
The color to apply for the order to the entire module. |
Stroke Weight (px) |
The thickness of the border line. |
Top corner-radius (px) (Touch) |
The value to apply a rounded corner effect to the top corners. This property applies only to touch mode. |
Bottom corner-radius (px) (Touch) |
The value to apply a rounded corner effect to the bottom corners. This property applies only to touch mode. |
Padding and Margin Properties
The Padding and Margin properties enable you to specify the padding and margin values for this module. The following is the list of Expand Collapse Container Padding and Margin properties.
Padding and Margin Properties
|
|
Padding (Px) (Touch) |
The space that you want to leave between the group name/expand-collapse buttons and the group name area boundary for touch mode. |
Padding (Px) (Non-touch) |
The space that you want to leave between the group name/expand-collapse buttons and the group name area boundary for non-touch mode. |
Margin (Px) (Touch) |
The space between the module boundary and the sides of mobile screen for touch mode. |
Margin (Px) (Non-touch) |
The space between the module boundary and the sides of mobile screen for non-touch mode. |
Expand-Collapse buttons (Touch) Properties
The Expand-Collapse buttons (Touch) properties enable you to specify the details of the expand-collapse button. The following is the list of Expand-Collapse properties.
Expand-Collapse Properties
|
|
Change expand button (30x30 Px) |
Use this option to change the default expand-collapse button for touch devices with an image. The image when tapped expands the content. The image appears in the Collapsed state of the module. You can upload the image using the Upload Image button. The Change collapse button (30x30 Px) that when tapped collapses the content. This appears in the expanded state of the module. The expand collapse buttons will not appear on non-touch devices. |
Change collapse button (30x30 Px) |
Use this option to change the default expand-collapse button for touch devices with an image. The image when tapped collapses the content. The image appears in the expanded state of the module. You can upload the image using the Upload Image button. |
Icon Properties
The Icon properties enable you to configure the details of icon that appears next to group name label. The following is the list of Expand Collapse Container Icon properties..
Icon Properties
|
|
Display Icon |
To display an icon next to the label. |
Change Icon |
To replace the default icon. The same icon is shown for touch and non-touch devices. |
Place Icon |
Use this option to align the icon.
- Left of the group name—To align the icon to the left of the group name label.
- Right of the group name—To align the icon to the right of the group name label.
|
Image
The Image module enables you to add an image to a page. For example, you can add a logo in the header.
After adding the image, you can position the image, add background color or image, and also link the image to a page.
You can add an image anywhere on your mobile page: header, footer, or the main area. You can upload the image from your local drive or from an external source by providing the appropriate image URL.
The Image module supports the following image formats:
- JPEG—If the image that you use is too large, it is recommended that you use the JPEG image format.
- PNG—If you want to add transparent images on your mobile site, you can use PNG image format.
- GIF— The GIF images that are non-transparent.
Note GIF—The GIF format with transparent images are not supported.
You can also upload the HD images for all of the three options. The module resizes the HD image depending on the width of the device the image is displayed on.
Some of the use cases for this module are:
- Use this module to add a logo.
- Use this module to add an image to display promotional offers.
Configuring the Image Module
To configure the Image module, perform the following steps:
Step 1 In the Modules panel, enter Image. The Image module appears in the Modules panel.
Step 2 Drag and drop the Image module into the Canvas. The Edit panel of the module opens.
Step 3 In the Edit panel of the module, specify the required values in the respective fields.
Step 4 Click Save.
Main Properties
The Main properties enable you to specify the basic image details. The following is the list of Image Main properties.
Main Properties
|
|
Upload image which will be resized if needed to fit across all screen sizes |
As mobile screen vary in sizes and widths, the Image module provides the following three options to fit the image across different screen sizes:
- Auto Resize
- Auto Crop
- Manual
|
Alt Text |
The alternative text for the image. The alternative text lets the content and function of an image to be understood by text-only readers. |
JPEG Image Quality |
The image resolution required. |
Description |
The description of the thumbnail link. |
Style Properties
The Style properties enable you to specify the alignment, border, and background details for the image. The following is the list of Image Style properties.
Style Properties
|
|
Align Image |
The alignment for image. You can align the image to left, right or center. Image alignment is possible only if the image size is smaller than the screen size. |
Border Color |
The border color for the image. |
Stroke Weight (px) |
The thickness of the border for the image. |
Background Color |
The background color for the image. |
Background Image |
To add an image as background. You can upload the image using the Upload Image button. |
Padding (Px) |
The space between the content boundary and the module boundary. |
Margin (Px) |
The space between the module boundary and the sides of the device screen. |
Touch Version Properties
The Touch Version properties enable you to specify the padding and margin values that are applicable only to the touch devices. The following is the list of Image Touch Version properties.
Touch Version Properties
|
|
Add Background Image |
To upload an image as the background for touch devices. You can upload the image using the Upload Image button. |
Padding (Px) |
The space required between the content boundary and the module boundary. |
Margin (Px) |
The space required between the module boundary and the sides of the device screen. |
Jump Menu
The Jump Menu module enables you to provide multiple link options on your mobile site. Use this module to create a drop-down menu that enables the user to go directly to a particular link. You can configure links using this module or can use a feed to populate the Jump Menu.
The features of the Jump Menu module enable you to do the following:
- Create multiple link options.
- Display links on all pages if dropped in the header (recommended).
- Display two or more links alphabetically (if required)
- Display current page the user is on as default text on Jump.
- Feed to populate jump options.
Some of the use cases for this module are:
- To give the users an option to jump to popular pages.
- To display or advertise other shows (links to shows), categories or events on all the pages of the present site.
- To upload multiple links through a feed and provide the Feed URL in the Jump Menu.
Note You cannot configure the module with just one link. At least, two links need to be configured.
Note The default text is not a link, it is only static text. This is not mandatory and can be left blank.
If you want to configure links using a feed, ensure that you have the following:
- The feed URL for Jump Menu
- The feed adapter key
If you want to create a feed using the Cisco Feed Editor, use the following details:
- Feed template name—Jump Menu
- Feed adapter key— JUMP MENU
The Feed Structure for creating a Jump Menu template is as follows:
<links>
<link url="">label1</link>
<link url="">label2</link>
<link url="">label3</link>
<link url="">label4</link>
</links>
Note Contact Cisco if the feed is external.
Configuring the Jump Menu Module
To configure the Jump Menu module, perform the following steps:
Step 1 In the Modules panel, enter Jump Menu. The Jump Menu module appears in the Modules panel.
Step 2 Drag and drop the Jump Menu module into the header area of the page in the Canvas. The Edit panel of the module opens.
Step 3 In the Edit panel of the module, specify the required values in the respective fields.
Step 4 Click Save.
Note We recommend you to add the module in the header area of the canvas, if you want the links to display on all the pages of the site. Else, add the module in the body area of the canvas.
Main Properties
The Main properties enable you to specify the basic details required for this module. The following is the list of Jump Menu Main properties.
Main Properties
|
|
Default Text in the Drop-down |
The default text that appears above the links in the drop-down menu. For Non-Touch devices, the drop-down appears with a Go Button. This Go Button is also rendered according to the mobile’s user interface. |
Add Label |
To add additional links. By default, the module provides option to configure four links. |
Link Label |
The text that represents a link. |
Target Link |
The URL of the inner page that the link will open. We recommend that you manually browse internal pages and set the link. |
Configure links using a feed |
To configure the links through a feed. |
Feed URL |
The feed URL for the feed. |
Feed Adapter Key |
The feed adapter key for the feed provided by Cisco. |
Style Properties
The Style properties enable you to specify the background, padding, and margin details. The following is the list of Jump Menu Style properties.
Style Properties
|
|
Background Color |
The color that you want to use as the background for the Jump Menu. |
Add Background Image |
To upload an image that you want to use as the background of the Jump Menu. |
Padding |
The space between the content boundary and the Module boundary. |
Margin |
The space between the module boundary and the sides of device screen. |
Touch Version Properties
The Touch Version properties enable you to specify the properties that are applicable only to the touch mode. The following is the list of Jump Menu Touch Version properties.
Touch Version Properties
|
|
Add Background Image |
To upload an image that you want to use as the background of the Jump Menu for touch mode. You can upload the image using the Upload Image button. |
Padding |
The amount of space between the content boundary and the Module boundary. |
Margin |
The amount of space between the Module boundary and the sides of device screen. |
Line Separator Module
The Line Separator module enables you to insert lines or space to provide visual clarity to the mobile site content.
While designing and deciding the layout of the mobile site, you need to provide visual clarity to the content so that users can easily read and view the site. You can use the Line Separator module to achieve the design objectives that spacer images and line separators provide to web site designers.
Configuring the Line Separator Module
To configure the Line Separator module, perform the following steps:
Step 1 In the Modules panel, enter Line Separator. The Line Separator module appears in the Modules panel.
Step 2 Drag and drop the Line Separator module into the Canvas. The Edit panel of the module opens.
Step 3 In the Edit panel of the module, specify the required values in the respective fields.
Step 4 Click Save.
Line Separator Properties
Main Properties
The Main properties enable you to specify the type of separators. The following is the list of Line Separator Main properties.
Main Properties
|
|
Line/No line radio buttons |
The type of separator that you want to use.
- Line—To use a line separator.
- No Line—To insert blank space to separate different elements in a page.
|
Style Properties
The Style properties enable you to specify the height, color, stroke weight, and so on for the line. The following is the list of Line Separator Style properties.
Style Properties
|
|
Height |
The height of the area in which the separator line appears. The default height is set at 6 pixels. If you change the value to less than 6 pixels, the canvas will still show a minimum height of 6 pixels. |
Line Color |
The color that you want to use for the line used as the separator. |
Stroke Weight (px) |
The thickness of the line used as the separator. |
Line Style |
The style for the line. The following options are available:
|
Vertical Align Line |
To align the line vertically. You can align to left, right, or center. |
Background Color |
The background color that you want to use for the separator line. Note This is applicable only if you have selected the Line radio button. |
Add Background Image |
To use an image as the background for the area where the separator line appears. |
Padding |
The space that you want to leave between the content boundary and the Module boundary. |
Margin |
The space you want to leave between the Module boundary and the sides of device screen. |
Touch Version Properties
The Touch Version properties enable you to specify the properties that are applicable only to touch mode. The following is the list of Line Separator Touch Version properties.
Touch Version Properties
|
|
Add Background Image |
To use an image as the background for the area where the separator line appears. |
Padding |
The space that you want to leave between the content boundary and the module boundary. |
Margin |
The space that you want to leave between the module boundary and the sides of device screen. |
Link Button Module
The Link Button module enables you to display a text link to a page or an external site. In addition, this link can be formated to look like a button. With this module, you can create links to pages such as home page, download page, or to the previous page viewed.
Using this module, you can insert a button that can be linked to a page on your mobile site or an external site.
Configuring the Link Button Module
To configure the Link Button module, perform the following steps:
Step 1 In the Modules panel, enter Link Button. The Link Button module appears in the Modules panel.
Step 2 Drag and drop the Link Button module into the Canvas. The Edit panel of the module opens.
Step 3 In the Edit panel of the module, specify the required values in the respective fields.
Step 4 Click Save.
Main Properties
The Main properties enable you to specify the basic configuration required for this module. The following is the list of Link Button Main properties.
Main Properties
|
|
Link Label |
The text that represents the link. |
Target Link |
The URL to the page or the site that you want to link. You can use the Browse button to search for the target page. Note We recommend that you manually browse internal pages and set the link. |
Layout Properties
The Layout properties enable you to specify the layout style and alignment details. The following is the list of Link Button Layout properties.
Layout Properties
|
|
Layout Style |
To display the link with the style that you want. Text button—Displays a button with text and an icon. Text link—Displays a link with an icon. The Text button layout options can be used with or without an icon. |
Align |
To align the layout that you have selected. You can align right, left, or center. |
Background Properties
The Background properties enable you to specify the background details for the link. The following is the list of Link Button Background properties..
Background Properties
|
|
Background Color |
The color for the background area where the link appears. No default color is provided. |
Add Background Image (Touch) |
To use an image as the background for the area where the link appears for touch mode. |
Add Background Image (Non-touch) |
To use an image as the background for the area where the link appears for non-touch mode. |
Repeat Horizontally only |
To repeat the background image horizontally only. |
Border Properties
The Border properties enable you to specify the border details for the link. The following is the list of Link Button Border properties.
Border Properties
|
|
Border Color |
The border color for the link. This border applies to the entire background of the area where the link options appear. |
Stroke Weight (px) |
The thickness of the border line. |
Top corner-radius (px) (Touch) |
The value to apply a rounded corner effect to the top corners. |
Bottom corner-radius (px) (Touch) |
The value to apply a rounded corner effect to the bottom corners. |
Padding and Margin Properties
The Padding and Margin properties enable you to specify the padding and margin values for the module. The following is the list of Link Button Padding and Margin properties.
Padding and Margin Properties
|
|
Padding (Px) (Touch) |
The space you want to leave between the content and the module boundary for touch mode. |
Padding (Px) (Non-touch) |
The space you want to leave between the content and the module boundary for non-touch mode. |
Margin (Px) (Touch) |
The space between the module boundary and the sides of device screen for touch mode. |
Margin (Px) (Non-touch) |
The amount of space between the module boundary and the sides of device screen for non-touch mode. |
Text Properties
The Text properties enable you to specify the font details for the link text. The following is the list of Link Button Text properties..
Text Properties
|
|
Font Color |
The font color that you want to apply to the link text. |
Link Font Family (Touch) |
The font family that you want to apply to the link text for touch mode. |
Link Font Family (Non-touch) |
The font family that you want to apply to the link text for non-touch mode. |
Link Font Size (Touch) |
The font size that you want to apply to the link text. This property applies to both touch and non-touch modes. |
Make Text Bold (Touch) |
To display link text with bold text formatting on touch mode. By default, this checkbox is selected. |
Make Text Bold (Non-touch) |
To display link text with bold text formatting on non-touch mode. By default, this checkbox is selected. |
Make Text Italic (Touch) |
To display the link text in italics on touch mode |
Make Text Italic (Non-touch) |
To display the link text in italics on non-touch mode. |
Underline Text (Non-touch) |
To display link text with underline on non-touch mode. |
Text Shadow Color (Touch) |
The shadow color to display the link text with a shadow effect. |
Button Style Properties
The Button Style properties enable you to specify the width and color for button. The following is the list of Button Style properties.
Button Style Properties
|
|
Button Width |
The width required for the button. |
Button Color |
The color that you want to apply to the button. |
Icon Properties
The Icon properties enable you to specify the details of icon added to the link. The following is the list of Link Button Icon properties.
Icon Properties
|
|
Display icon |
To display the default Link Button icon with the Text button or Text link layout options. |
Change icon |
To change the default Link Button icon. You can upload the icon using the Upload Image button. |
Place icon |
To place the icon to the right or left side of the Text button or Text link. |
Note The Link Button module now supports HD icon images. You can upload larger HD icon images and the module shrinks the images to icon size.
Links
Using the Links Module, you can insert hyperlinks to other sections of your site or other sites. For example, you can add a list of links that takes the user to a different page with more detailed information.
After adding links, you can display the links in a bulleted list, add background color or image, and also change the color of text.
You can insert links anywhere on your mobile page, either in the body area or in the header or footer of the page. You can also insert multiple links at a time.
The following are the sample use cases:
- Use this module to add links to other sections of your site.
- Use this module to add links to external sites.
Configuring the Links Module
To configure the Links module, perform the following steps:
Step 1 In the Modules panel, enter Links. The Links module appears in the Modules panel.
Step 2 Drag and drop the Links module into the Canvas. The Edit panel of the module opens.
Step 3 In the Edit panel of the module, specify the required values in the respective fields.
Step 4 Click Save.
Main Properties
The Main properties enable you to specify the link details. The following is the list of Links Main properties.
Main Properties
|
|
Add Link |
To add a new link. |
Link Label |
The text that needs to be displayed for the hyper links. |
Target Link |
The target URL for the More link. You can search for the target page using the Browse button. |
Style Properties
The Style properties enable you to specify the style and alignment for the link. The following is the list of Links Style properties.
Style Properties
|
|
Text Color |
The color for the text that represents the link. |
Make Text Bold |
To display the link text in bold. This holds good only for the non-touch version. |
Add Bullets |
To add bullets. |
Background Color |
The color for the background area. |
Add Background Image |
To add background Image for the link.You can upload the image using the Upload Image button. |
Padding (Px) |
The Padding value. |
Margin (Px) |
The Margin value. |
Touch Version Properties
The Touch Version properties enable you to specify the properties that are applicable only to the touch version. The following is the list of Links Touch Version properties.
Touch Version Properties
|
|
Font Family |
The font for the text. |
Font Size |
The font size for the text. The minimum size is 10 and the maximum size is 30. |
Make Text Bold |
To make the text bold. |
Line Separator Color |
The color for the separator lines. |
Stroke Weight |
The thickness for the separator lines. |
Change Link Arrows |
To replace the default arrow image used for links. Note This option holds good only for touch version. |
Add background Image |
To add an image as background. You can upload the image using the Upload Image button. |
Padding (Px) |
The padding value. |
Margin (Px) |
The margin value. |
Menu Bar
You can use the Menu Bar module to insert a menu bar that enables users to navigate to the main pages of your mobile site. You can use this module to create a menu bar for a site and provide links to specific inner pages.
Configuring the Menu Bar Module
To configure the Menu Bar module, perform the following steps:
Step 1 In the Modules panel, enter Menu Bar. The Menu Bar module appears in the Modules panel.
Step 2 Drag and drop the Menu Bar module into the Canvas. The Edit panel of the module opens.
Step 3 In the Edit panel of the module, specify the required values in the respective fields.
Step 4 Click Save.
Main Properties
The Main properties enable you to specify the basic parameters for this module. The following is the list of Menu Bar Main properties.
Main Properties
|
|
Add Label |
To add additional links. By default, the module provides option to configure four links. |
Link Label |
The text that represents a link. |
Target Link |
The URL of the inner page that the link opens. We recommend that you manually browse internal pages and set the link using the Browse button. |
Select link when link label matches value of below page metadata name |
To select link when link label matches the value of page meta data name. |
Page meta data name |
The name for the menu bar. |
Instructions to highlight specific menu bar items on different pages |
A set of instructions are included in the Edit panel to highlight specific menu bar items on different pages. |
Style Properties
The Style properties enable you to specify the font, alignment, background, padding, and so on for the menu bar. The following is the list of Menu Bar Style properties.
By default, style properties apply to both touch and non-touch modes.
Style Properties
|
|
Distribute cell-width equally |
To distribute the cell-width equally between all the columns (menu buttons) that contain links to inner pages. If the cell width is distributed equally, the percentage width of each menu button is computed using the formula: 100 ÷ Total Number of Columns. |
Selected Link Font Color |
The font color that you want to use for the text that represents a link that the user has selected. |
Make Link Text Bold |
To display the selected link in bold. |
Selected Link Background Color |
The color that you want to use for the link that the user has selected. |
Add Background Image for Selected Link |
To add background image for the link that user has selected. |
Default Link Font Color |
The color that you want to use as the default font color for the link text before the user selects the link. |
Default Link Background Color |
The color that you want to use as the default background for the link before the user selects the link. |
Add Background Image for Default Link |
To upload a background image for the default link. |
Vertical Separator Color |
The color that you want to use for the vertical lines that separate each column of the Menu Bar. |
Stroke Weight |
The thickness for each separator line. |
Padding for Individual Links |
The unused space that you want to leave between the link text in a menu button and the button boundary. |
Margin |
The space that you want to leave between the module boundary and the sides of device screen. |
Touch Version Properties
The Touch Version properties enable you to specify the parameters that are applicable only to touch mode. The following is the list of Menu Bar Touch Version properties.
Touch Version Properties
|
|
Link Font Family |
The font family for the link text that appears for menu buttons. |
Link Label |
The font size for the link text. |
Make Link Text Bold |
To display the link text with bold text formatting. |
Add Background Image for Selected Link |
To upload an image that you want to use as the background for the link that user has selected. |
Add Background Image for Default Link |
To upload an image that you want to use as the default background for the link before the user selects the link. |
Left Vertical Separator Line |
The color of the vertical lines that appear on the left side. For touch devices, the module lets you to configure two vertical separator lines, left vertical and right vertical separators, to add more effect to the menu buttons. |
Stroke Weight |
The thickness for the left separator lines. |
Right Vertical Separator Color |
The color of vertical lines that appear on the right side. The left and right vertical separator lines will not apply for the extreme left and extreme right side of the entire menu bar. |
Stroke Weight |
The thickness for the right separator lines. |
Padding for Individual Links |
The unused space that you want to leave between the link text in a menu button and the button boundary. |
Margin |
The space that you want to leave between the module boundary and the sides of mobile screens. |
Menu Bar Container
The Menu Bar Container module is a container module that helps you create the menu bar for a site, which provides links to other pages of the site, other sites, or external URLs.
In addition, the Menu Bar Container module enables you to configure the same menu bar to render on touch and non-touch devices with style variations.
When creating a menu bar, you can create menu options with clickable icons, plain text, a list of links as a drop-down, or a combination of these.
After modules are dragged and dropped, they appear one below the other in the Canvas area. However, in run-time view, they appear horizontally aligned.
You must add the following modules to the Menu Bar Container Module to build a menu bar:
Features of Menu Bar Container
The Menu Bar Container features include the following:
- Any number of buttons/tabs—You can create as many menu options as you want for your menu bar. For each menu option, you need to drag and drop either Menu Bar Image or Menu Bar Link Module into the container. The recommended number of menu options for a menu bar is 4 to 5.
- Space or Separator lines—The Menu Bar Container module enables you to format the menu bar with space or vertical line separators between menu options.
- Selected and Default Menu Options/Tabs— You can also configure the modules to display selected state for multiple pages and sites, thus always providing the user with an indication of where they are in the site.
The module does not support the following use cases:
- You cannot display dynamic menu options using a feed.
- You cannot create scrollable/collapsible/expandable menu options.
- You cannot use your own JavaScript to enhance the presentation of menu options.
Configuring the Menu Bar Container Module
To configure the Menu Bar Container module, perform the following steps:
Step 1 In the Modules panel, enter Menu Bar Container. The Menu Bar Container module appears in the Modules panel.
Step 2 Drag and drop the Menu Bar Container module into the Canvas.
Step 3 Drag and drop the Menu Bar Image/Menu Bar Link modules into the Menu Bar Container module as many times as the number of menu options to be created.
Step 4 In the Edit panel of each module in the Menu Bar Container module, specify the required values in the respective fields, and click Save.
Step 5 In the Edit panel of the Menu Bar Container module, specify the required values in the respective fields.
Step 6 Click Save.
Menu Bar Container Properties
Main Properties
The Main properties enable you to specify the basic parameters required for this module. The following is the list of Menu Bar Container Main properties.
Main Properties
|
|
Distribute cell-width equally |
All the Menu Bar modules to take equal cell width based on the screen width of the rendering device. If this option is disabled, columns will wrap based on the content in the cells. This equally divides the total screen width by number of columns (menu options). |
Use page metadata to highlight menu bar links |
To highlight a menu bar link, when the link label matches the value of the page metadata. |
Give this Menu bar container a name |
The text field to change page metadata name. Declare a page metadata variable name. The default value is menu. When the value of this variable name matches the label of a menu option or link, the option remains in selected state. This is useful when you want a menu option to remain selected, if the user navigates to inner pages or micro sites within a particular section. |
Instructions to highlight specific menu bar modules on different pages. |
A set of instructions to highlight specific menu bar modules in different pages. Note Do not edit this instructions. |
Layout Properties
The Layout properties enable you to specify the layout for the menus. The following is the list of Menu Bar Container Layout properties.
By default, the Layout properties apply to both touch and non-touch modes.
Layout Properties
|
|
Layout option |
The container module provides two layout options. Display Separators between tabs—Displays vertical lines between menu options. This option is selected by default. Displays space between tabs—Display empty space between the menu options. |
Background Properties
The Background properties enable you to specify the background details for the Menu Bar Container module. The following is the list of Menu Bar Container Background properties.
Background Properties
|
|
Background Color |
The background color for the entire module. This background color will not be visible.
- If the Menu Bar modules within the container have background colors.
- If the space between modules is not enabled.
- If corner-radius is not enabled.
|
Add Background Image (Touch) |
To use an image as the background of the entire Container. This image will apply on touch devices. |
Add Background Image (Non-touch) |
To use an image as the background of the entire Menu Bar Container. This image will apply non-touch devices. |
Repeat Horizontally only |
To repeat the background image horizontally only. |
Margin Properties
The Margin properties enable you to specify the margin value for the module. The following is the list of Menu Bar Container Margin properties.
Margin Properties
|
|
Margin (Px) (Touch) |
The space between the outer border and the sides of device screens for touch mode. |
Margin (Px) (Non-touch)l |
The space between the outer border and the sides of device screens for non-touch mode. |
Separators Properties
The Separators properties enable you to specify the color for separator lines The following is the list of Menu Bar Container Separators properties.
Separators Properties
|
|
Separator Color |
The color for the vertical lines that separates menu options, if you have chosen the Display Separators between tabs in the Layout option drop-down box. |
Shadow Color |
The color for the shadow lines that appear next to separator lines, if you have chosen the Display Separators between tabs in the Layout option drop-down box. |
Space Properties
The Space properties enable you to specify the space details required between menu options. The following is the list of Menu Bar Container Space properties.
Space Properties
|
|
Space between the tabs (Px) |
The empty space between menu options, if you have chosen the Display Space between tabs in the Layout option drop-down box. |
Menu Bar Dropdown
The Menu Bar Dropdown module enables you to create menu options that display a list of links as a drop-down.
Menu Bar Dropdown Properties
Main Properties
The Main properties enable you to specify the basic Menu Bar Dropdown properties. The following is the list of Menu Bar Dropdown Main properties.
Main Properties
|
|
+ Add Link |
To add additional drop-down links to the menu option. By default, two links are present in the drop-down. |
Link Label |
The text that represents the drop-down link. |
Target Link |
The website for the respective drop-down link. You can select the website using the Browse button. |
Layout Properties
The Layout properties enable you to specify the layout for the menu header. The following is the list of Menu Bar Dropdown Layout properties..
Layout Properties
|
|
Layout style |
The layout that you want to apply to the menu header. |
Header Text Properties
The Header Text properties enable you to specify the font details for the header text. The following is the list of Menu Bar Dropdown Header Text properties.
Header Text Properties
|
|
Dropdown header |
The text that represents the drop-down menu header (name of the menu option). While configuring the selected state of a menu option, you should use label specified here as the value of the page metadata name that is declared in the Edit panel of the Container Module. |
Selected Font Color |
The font color that indicates the selected state of the menu option. |
Default Font Color |
The font color that indicates the non-selected (default) state of the menu option. |
Font Family (Touch) |
The font family for the label text. This applies only to touch devices. |
Font Family (Non-touch) |
The font family for the label text. This applies only to non-touch devices. |
Font Size (Touch) |
The font size for the label text. This font size applies to touch devices. |
Text Style Options |
|
Make Text Bold (Touch) |
The menu option label to appear with bold formatting on touch devices. |
Make Text Bold (Non-touch) |
The menu option label to appear with bold formatting on non-touch devices. |
Make Text Italic (Touch) |
The menu option label to appear italicized on touch devices. |
Make Text Italic (Non-touch) |
The menu option label to appear italicized on non-touch devices. |
Underline Text (Non-touch) |
The menu option label to appear underlined on non-touch devices. |
Selected Text Shadow Color (Touch) |
The color to apply a shadow effect to the menu option label that indicates the selected state. |
Default Text Shadow Color (Touch) |
The color to apply a shadow effect to the menu option label that indicates the non-selected state. |
Align header text |
To align the header text. You can align the header text to right, left, or center. |
Icon
The Icon properties enable you to specify the details of icon that appears for the menu options. The following is the list of Menu Bar Dropdown Icon properties.
Icon Properties
|
|
Display icon |
To display an icon next to the menu option label. |
Change selected icon |
To upload an icon to be displayed when the menu option is in the selected state. This icon appears on both touch and non-touch devices. |
Change default icon |
To upload an icon to be displayed when the menu option is in the non-selected state. This icon appears on both touch and non-touch devices. |
Place icon |
To place the icon to the left or right of the text. |
Header Image (Touch)
The Header Image properties enable you to specify the details of images used for menu options. The following is the list of Menu Bar Dropdown Header Image properties.
Header Image Properties
|
|
Change selected menu bar dropdown image |
To upload an icon to be displayed when the menu option image is in the selected state. This option applies only when the Layout style is selected as Image header. It applies only to touch devices. |
Change default menu bar dropdown image |
To upload an icon to be displayed when the menu option image is in the default/non-selected state. This option applies only when the layout style is selected as Image header. It applies only to touch devices. |
Navigation Properties
The Navigation properties enable you to specify the details of navigation icon. The following is the list of Menu Bar Dropdown Navigation properties.
Navigation Properties
|
|
Display navigation icon |
To display a navigation icon next to the menu option label. This option applies only when the Text header layout is selected in Layout style. |
Change selected icon |
To upload a navigation icon to be displayed when the menu option is in the selected state. This icon appears on both touch and non-touch devices. |
Change default icon |
To upload a navigation icon to be displayed when the menu option is in the non-selected state. This icon appears on both touch and non-touch devices. |
Place navigation icon |
To place navigation button right or left of the text. Right of text is selected by default. |
Background Properties
The Background properties enable you to specify the background for the menu options. The following is the list of Menu Bar Dropdown Background properties.
Background Properties
|
|
Selected header background |
|
Background color |
The color that you want to use as the background of the menu option. This color appears when the user click the menu option in real time. |
Background image options |
|
Add background image (Touch) |
To upload an image (1px) which can be used as the background of the menu option. The recommended width is 1 to 3 px. This image applies only to touch devices. |
Add background image (Non-touch) |
To upload an image (1px) which can be used as the background of the menu option. The recommended width is 1 to 3 px. This image applies only to non-touch devices. |
Repeat horizontally only |
To let the 1 px background images to repeat horizontally only. |
Default header background |
|
Default background color |
The color that you want to use as the background for the menu option. This is the default background color that indicates the non-selected state of the menu option |
Background image options |
|
Add background image (Touch) |
To upload an image (1px) that can be used as the background of the menu option. This background image applies only to touch devices. |
Add background image (Non-touch) |
To upload an image (1px) that can be used as the background of the menu option. This background image applies only to non-touch devices. |
Repeat horizontally only |
To let the 1 px background images to repeat horizontally only. |
Dropdown links background |
|
Link background color |
The color that you want to use as the background of the drop-down links menu. |
Background image options |
|
Add background image (Touch) |
To upload an image (1px) that can be used as the background for the drop-down links menu. This background image indicates the non-selected state of the menu option and applies only to touch devices. |
Add background image (Non-touch) |
To upload an image (1px) that can be used as the background for the drop-down links menu. This background image indicates the non-selected state of the menu option and applies only to non-touch devices. |
Repeat horizontally only |
To let the 1 px background images to repeat horizontally only. |
Border Properties
The Border properties enable you to specify the border details for the menu option The following is the list of Menu Bar Dropdown Border properties.
Border Properties
|
|
Border Color |
The color to apply border for the menu option. |
Stroke Weight (Px) |
The thickness for the border. |
Top left corner-radius (Px) (Touch) |
The value if you want to apply a rounded-corner effect to the top-left corner of the border. |
Top right corner-radius (Px) (Touch) |
The value if you want to apply a rounded-corner effect to the top-right corner of the border. |
Bottom left corner-radius (Px) (Touch) |
The value if you want to apply a rounded-corner effect to the bottom-left corner of the border. |
Bottom right corner-radius (Px) (Touch) |
The value if you want to apply a rounded-corner effect to the bottom-right corner of the border. |
Padding and Margin Properties
The Padding and Margin properties enable you to specify the padding and margin values for the header and drop-down links. The following is the list of Menu Bar Dropdown Padding and Margin properties.
Padding and Margin Properties
|
|
Padding for header |
|
Padding (Px) (Touch) Padding (Px) (Non-touch) |
The space between the header boundary and the module boundary. |
Padding for dropdown links |
|
Padding (Px) (Touch) Padding (Px) (Non-touch) |
The space between the drop-down link boundary and the module boundary. |
Margin for dropdown links |
|
Margin (Px) (Touch) Margin (Px) (Non-touch) |
The space between the outer border and the sides of device screens. |
Separators Properties
The Separators properties enable you to specify the style and color for separator lines. The following is the list of Menu Bar Dropdown Separators properties.
Separators Properties
|
|
Display separator |
To display horizontal lines between the links in the drop-down. |
Separator color |
The color for the horizontal lines that will separate the drop-down links. |
Stroke weight (Px) |
The thickness for the separators. The default value is 1. |
Line style |
The style for the separator lines. The options available are solid, dotted, and dashed style. |
Margin (Px) |
The space between the outer border and the sides of device screens. |
Separator Shadow |
|
Shadow Color |
The color for the shadow lines that appear next to separator lines. |
Menu Bar Image
You can use the Menu Bar Image module to create menu options that display icons or stylish text.
Menu Bar Image Properties
Main Properties
The Main properties enable you to specify the basic parameters required for the menu image module. The following is the list of Menu Bar Image Main properties.
Main Properties
|
|
Padding for header |
|
Enter URL |
The URL of a page (from the same site) or a site (from the portal) that you want to link to the menu option. You can also manually enter the URL of an external site. |
Change Selected Menu Bar Image |
To replace the default image with a new menu option image. This image indicates the selected state of the menu option. This image appears when the user click the menu option in real time. Note We recommend you to create a transparent text image instead of creating the entire menu option as an image. The background can be configured using the Background Image options. |
Change Default Menu Bar Image |
To replace the default image with a new menu option image. This is the default menu option that indicates the non-selected state of the menu option. |
Alt Text |
The alternate text for the menu option image. The Menu Bar Image option does not let you to configure the label of the menu option. Hence, this alternate text must be used as the value of the page metadata variable declared in Edit panel of the Menu Bar Container Module. |
Background Properties
The Background properties enable you to specify the background color for the menu option. The following is the list of Menu Bar Image Background properties.
Background Properties
|
|
Selected Background |
|
Background Color |
The color that you want to use as the background for the menu option. This color appears when the user click the menu option in real time. |
Add Background Image (Touch) |
To upload an image (1px) which can be used as the background of the menu option. The recommended width is 1 to 3 px. This image applies only on touch devices. |
Add Background Image (Non-touch) |
To upload an image (1px) which can be used as the background of the menu option. The recommended width is 1 to 3 px. This image applies only to non-touch devices. |
Repeat horizontally only |
To let the 1 px background images to repeat horizontally only. |
Default Background |
|
Default Background Color |
The color that you want to use as the background of the menu option. This is the default background color that indicates the non-selected state of the menu option. |
Add Background Image (Touch) |
To upload an image (1px) that can be used as the background of the menu option. This background image indicates the non-selected state of the menu option and applies only to touch devices. |
Add Background Image (Non-touch) |
To upload an image (1px) that can be used as the background for the menu option. This background image indicates the non-selected state of the menu option and applies only to non-touch devices. |
Repeat horizontally only |
To let the 1 px background images to repeat horizontally only. |
Border Properties
The Border properties enable you to specify the border color, thickness, and radius for the border. The following is the list of Menu Bar Image Border properties.
Border Properties
|
|
Border Color |
The color to apply border for the menu option. |
Stroke Weight (Px) |
The stroke weight of the border. |
Top left corner-radius (Px) (Touch) |
The value if you want to apply a rounded-corner effect to the top-left corner of the border. |
Top right corner-radius (Px) (Touch) |
The value if you want to apply a rounded-corner effect to the top-right corner of the border. |
Bottom left corner-radius (Px) (Touch) |
The value if you want to apply a rounded-corner effect to the bottom-left corner of the border. |
Bottom right corner-radius (Px) (Non-touch) |
The value if you want to apply a rounded-corner effect to the bottom-right corner of the border. |
Padding Properties
The Padding and Margin properties enable you to specify the padding values for header. The following is the list of Menu Bar Image Padding and Margin properties.
Padding and Margin Properties
|
|
Padding for header |
|
Padding (Px) (Touch) |
The space between the content boundary and the module boundary. |
Padding (Px) (Non-touch) |
The space between the content boundary and the module boundary. |
Menu Bar Link
You can use the Menu Bar link module to create menu options that display plain text.
Main Properties
The Main Properties enable you to specify the basic parameters required for the Menu Bar Link module. The following is the list of Menu Bar Link Main properties.
Main Properties
|
|
Enter URL |
The URL of the page (from the same site) or a site (from the portal) that you want to link to the menu option. You can also manually enter the URL of an external site. |
Background Properties
The Background properties enable you to specify the background details of the menu option. The following is the list of Menu Bar Link Background properties.
Background Properties
|
|
Selected Background |
|
Background Color |
The color that you want to use as the background for the option. This color appears when the user click the menu option in real time. |
Add Background Image (Touch) |
To upload an image (1px) that can be used as the background of the menu option. The recommended width is 1 to 3 px. This image applies only to touch devices. |
Add Background Image (Non-touch) |
To upload an image (1px) that can be used as the background of the menu option. The recommended width is 1 to 3px. This image applies only to non-touch devices. |
Repeat horizontally only |
To let the background images to repeat horizontally only. |
Default Background |
|
Default Background Color |
The color that you want to use as the background of the menu option. This is the default background color which indicates the non-selected state of the menu option. |
Add Background Image (Touch) |
To upload an image (1px) which can be used as the background of the menu option. The recommended width is 1 to 3 px. This background image indicates the non-selected state of the menu option and applies only to touch devices. |
Add Background Image (Non-touch) |
To upload an image (1px width) which can be used as the background of the menu option. The recommended width is 1 to 3 px. This background image indicates the non-selected state of the menu option and applies only to non-touch devices. |
Repeat horizontally only |
To let the background images to repeat horizontally only. |
Border Properties
The Border properties enable you to specify the border details for the menu option. The following is the list of Menu Bar Link Border properties.
Border Properties
|
|
Border Color |
The border color for the menu option. |
Stroke Weight (Px) |
The thickness of the border. |
Top left corner-radius (Px) (Touch) |
The value if you want to apply a rounded-corner effect to the top-left corner of the border. |
Top right corner-radius (Px) (Touch) |
The value if you want to apply a rounded-corner effect to the top-right corner of the border. |
Bottom left corner-radius (Px) (Touch) |
The value if you want to apply a rounded-corner effect to the bottom-left corner of the border. |
Bottom right corner-radius (Px) (Non-touch) |
The value if you want to apply a rounded-corner effect to the bottom-right corner of the border. |
Padding Properties
The Padding and Margin properties enable you to specify the padding and margin values. The following is the list of Menu Bar Link Padding and Margin properties.
Padding and Margin Properties
|
|
Padding (Px) (Touch) |
The space between the content boundary and the module boundary. |
Padding (Px) (Non-touch) |
The space between the content boundary and the module boundary. |
Text Properties
The Text properties enable you to specify the properties of link text. The following is the list of Menu Bar Link Text properties.
Text Properties
|
|
Link Label |
The text to be displayed on the menu option. While configuring the selected state of a menu option, you must use the label specified here as the value of the page metadata name declared in the Edit panel of the Container Module. |
Default Font Color |
The font color that indicates the non-selected (default) state of the menu option. |
Link Font Family (Touch) |
The font family for the label text. This applies to touch devices. |
Link Font Family (Non-touch) |
The font family for the label text. This applies to non-touch devices. |
Link Font Size (Touch) |
The font size for the label text. This font size applies to touch devices. |
Text Style Options |
|
Make Text Bold (Touch) |
To display the menu option label with bold formatting on touch devices. |
Make Text Bold (Non-touch) |
To display the menu option label with bold formatting on non-touch devices. |
Make Text Italic (Touch) |
To display the menu option label italicized on touch devices. |
Make Text Italic (Non-touch) |
To display the menu option label italicized on non-touch devices. |
Underline Text (Non-touch) |
To display the menu option label underlined on non-touch devices. |
Selected Text Shadow Color (Touch) |
The color to apply a shadow effect to the menu option label that indicates the selected state. |
Default Text Shadow Color (Touch) |
The color to apply a shadow effect to the menu option label that indicates the non-selected state. |
Icons Properties
The Icons properties enable you to specify the details of icon for menu options. The following is the list of Menu Bar Link Icons properties.
Icons Properties
|
|
Display Icon |
To display an icon next to the menu option label. |
Change Selected Icon |
To upload an icon to be displayed when the menu option is in selected state. This icon appears on both touch and non-touch devices. |
Change Default Icon |
To upload an icon to be displayed when the menu option is in non-selected state. This icon appears on both touch and non-touch devices |
Place icon |
To place the icon to the right or left of the text. |
Section Header
The Section Header module enables you to insert headings for individual sections of your page.
The headings are key in making mobile sites effective. In addition, to gain the attention of visitors, you can use headings to organize the content into smaller units to avoid clutter in the page. Effective use of headings can improve readability and enables visitors to choose what they want to read.
Configuring the Section Header Module
To configure the Section Header module, perform the following steps:
Step 1 In the Modules panel, enter Section Header. The Section Header module appears in the Modules panel.
Step 2 Drag and drop the Section Header module into the Canvas. The Edit panel of the module opens.
Step 3 In the Edit panel of the module, specify the required values in the respective fields.
Step 4 Click Save.
Section Header Properties
Text Properties
The Main properties enable you to specify the header label details. The following is the list of Section Header Main properties.
Main Properties
|
|
Header Label |
The text that you want to use as the section header. |
Font color |
The font color for the header text. |
Font Family (Touch) |
The font family for the header text for touch mode. |
Font Family (Non-touch) |
The font family for the header text for non-touch mode. |
Font Size |
The font size for the header text. |
Text style options |
Make text bold (touch)—To bold the header text for touch mode. Make text bold (non-touch)—To bold the header text for non-touch mode. Make text italic (touch)—To make italic the header text for touch mode. Make text italic (non-touch)—To make italic the header text for non-touch mode. Underline text (non-touch)—To underline the header text for non-touch mode. |
Text shadow color (touch) |
The shadow color for the header text. |
Layout Properties
The Layout properties enable you to specify the layout for the header. The following is the list of Section Header Layout properties.
Layout Properties
|
|
Layout |
Whether the layout to be text or image. |
Language based layout |
To have layout based on language. |
Align Header |
The alignment required for the header. |
Icon Properties
The Icon properties enable you to specify the icon details for text layout. The following is the list of Section Header Icon properties.
Icon Properties
|
|
Display Icon (Not applicable for Image layout) |
To display the icon for the text layout. |
Change icon |
To change the icon for the text layout. You can upload the icon using the Upload Image button. |
Place icon |
To place the icon right or left of the text. |
Make Section Header Text Bold |
To apply bold text formatting to the section header text. |
Add Shadow to Section Header Text |
To apply shadow effect to the section header text. |
Add Background Image |
To add a background image for the entire section header area. You can upload the image using the Upload Image button. |
Padding and Margin |
The padding and margin values for the entire module. |
Image Properties
The image properties enable you to change the section header image.The following is the list of Section Header Image properties.
Image Properties
|
|
Change section header image (touch) |
To change the section header image for touch devices. |
Change section header image (non-touch) |
To change the section header image for non-touch devices. |
More link Properties
The More Link properties enable you to configure the more link details. The following is the list of Section Header More Link properties.
More Link Properties
|
|
Display More Link |
To display the More link on the section header. This More link enables you to link an inner page or an external site using the Link Label and Target Link fields. Link Label—The text that you want to display for more link. Target link—The URL of the page you want to link. You can select a target page using the Browse button. We recommend that you manually browse internal pages and set the link. |
Font Color |
The font color for the more link text. |
Font Family (Touch) |
The font family for the more link text for touch mode. |
Font Family (Non-touch) |
The font family for the more link text for non-touch mode |
Font Size (Touch) |
The font size for the More link text for touch mode. |
Text style options |
Make text bold (touch)—To bold the More link text for touch mode. Make text bold (non-touch)—To bold the More link text for non-touch mode. Make text italic (touch)—To make italic the More link text for touch mode. Make text italic (non-touch)—To make italic the More link text for touch mode. Underline text (non-touch)—To underline the More link text for non-touch mode. Display more as image (touch)—To display the More link as image for touch mode. Change default more link image (50*28 Px) (Touch)—To change the default More link image. |
More link background |
|
Background Color |
The background color for the more link. |
Add background Image (Touch) |
To add background image for More link for touch mode. You can upload the image using the upload image button. |
Add background Image (Non-Touch) |
To add background image for more link for non-touch mode. You can upload the image using the upload image button. |
Repeat Horizontally Only |
To repeat the background image horizontal only. |
Border Options |
|
Border Color |
The border color for the area on the section header where the More link appears. |
Stroke Weight (Px) |
The thickness for the border line. |
Apply Corner-Radius (Touch) |
The corner radius value for rounded corners for the more link for touch mode. |
Background Properties
The Background properties enable you to specify the background details of the menu option. The following is the list of Section Header Background properties.
Background Properties
|
|
Selected Background |
|
Background Color |
The color that you want to use as the background for the option. This color appears when the user click the menu option in real time. |
Add Background Image (Touch) |
To upload an image (1px) which can be used as the background of the menu option. The recommended width is 1 to 3 px. This image applies only on touch devices. |
Add Background Image (Non-touch) |
To upload an image (1px) which can be used as the background of the menu option. The recommended width is 1 to 3px. This image applies only on non-touch devices. |
Repeat horizontally only |
To let the background images to repeat horizontally only. |
Default Background |
|
Default Background Color |
The color that you want to use as the background of the menu option. This is the default background color which indicates the non-selected state of the menu option. |
Add Background Image (Touch) |
To upload an image (1px) that can be used as the background of the menu option. The recommended width is 1 to 3 px. This background image indicates the non-selected state of the menu option and applies only to touch devices. |
Add Background Image (Non-touch) |
To upload an image (1px width) which can be used as the background of the menu option. The recommended width is 1 to 3 px. This background image indicates the non-selected state of the menu option and applies only to non-touch devices. |
Repeat horizontally only |
To let the background images to repeat horizontally only. |
Border Properties
The Border properties enable you to configure the border details for the Section Header. The following is the list of Section Header Border properties.
Border Properties
|
|
Border Color |
The border color for the section header module. |
Stroke weight |
The thickness for the border. |
Top corner-radius (Px) (Touch) |
The value to apply a rounded corner effect to the top corners. |
Bottom corner-radius (Px) (Touch) |
The value to apply a rounded corner effect to the bottom corners. |
Padding and Margin Properties
The Padding and Margin properties enable you to configure the padding and margin values for the module. The following is the list of Section Header Padding and Margin properties..
Padding and Margin Properties
|
|
Padding (Px) (Touch) |
The space between the content boundary and the module boundary for touch mode. |
Padding (Px) (Non-touch) |
The space between the content boundary and the module boundary for non-touch mode. |
Margin (Px) (Touch) |
The space between the outer border and the sides of device screens for touch mode. |
Margin (Px) (Non-touch)l |
The space between the outer border and the sides of device screens for non-touch mode. |
Tab Container
The Tab Container module is a container module that enables you to create multiple tabs for a site. These tabs can provide links to other pages of the site, other sites, or external URLs. The Tab Container module provides a frame into which you can drag and drop the following modules to build tabs.
- Tab Image— Use this module to create a tab header that displays images or stylish text.
- Tab Link— Use this module to create a tab header that displays plain text.
The Tab Link and the Tab Image modules are configured as the tab header. Any module dragged and dropped after the tab link module falls under that tab. Similarly, any module dragged and dropped after the tab image module falls under that tab. In this manner, you can create numerous independently styled tabs.
These tabs will alternate between the configured content without refreshing the page (Touch devices only). The Tab Container module enables you to format the layout of tabs with space or separators between them.
Note This module can be used only for web sites.
Configuring the Tabs Container Module
To configure the Tab Container module, perform the following steps:
Step 1 In the Modules panel, enter Tab Container. The Tab Container module appears in the Modules panel.
Step 2 Drag and drop the Tab Container module into the header area of the Canvas.
Step 3 Based on the type of tab you require, drag and drop the Tab Image or Tab Link module into the Tab Container module.
Step 4 Add the modules that must come under this tab.
Step 5 In the Edit panel of each module in the Tab Container module, specify the required values in the respective fields, and click Save.
Step 6 In the Edit panel of the Tab Container module, specify the required values in the respective fields.
Step 7 Click Save.
Note You can add as many tabs as you want to the Tab Container. For each tab, you need to drag and drop either the Tab Image or Tab Link Module into the container. The recommended number of tabs for a Tab Container is 2 to 4. As devices with 176px screen width may not accommodate so many tabs, it is recommended that you create a different layout for such phones and use the non-touch configurations optimally to achieve the desired result.
Layout Properties
The Layout properties enable you to specify the layout for tabs. The following is the list of Tab Container Layout properties.
Layout Properties
|
|
Layout options |
To display separators or space between tabs. |
Background Properties
The Background properties enable you to specify the background details of the menu option. The following is the list of Tab Container Background properties.
Background Properties
|
|
Selected Background |
|
Background Color |
The color that you want to use as the background of the module. |
Add Background Image (Touch) |
To use an image as background of the module. You can upload the image using the Upload Image button. This image applies only to touch devices. |
Add Background Image (Non-touch) |
To use an image as background of the module.You can upload the image using the Upload Image button. This image applies only to non-touch devices. |
Repeat horizontally only |
To let the background images to repeat horizontally only. |
Margin Properties
The Margin properties enable you to configure the margin values for the module. The following is the list of Tab Container Margin properties.
Margin Properties
|
|
Margin (Px) (Touch) |
The space between the outer border and the sides of device screens for touch mode. |
Margin (Px) (Non-touch)l |
The space between the outer border and the sides of device screens for non-touch mode. |
Separators Properties
The Separators properties enable you to specify the details of the tab separators. The following is the list of Tab Container Separators properties.
Separators Properties
|
|
Separator Color |
The color for the vertical lines that separates tabs, if you have chosen the Display Separators between tabs layout option. |
Shadow Color |
The color for the shadow lines that appear next to separator lines, if you have chosen the Display Separators between tabs layout option. |
Space Properties
The Space properties enable you to specify the space required between the tabs. The following is the list of Tab Container Space properties.
Space Properties
|
|
Space between tabs (Px) |
The space required between tabs if you have chosen the Displays space between tabs layout option. |
Tab Link
The Tab Link module enables you to create a tab header that displays images or stylish text in the Tab Container module.
Note This module can be used only for web sites.
Background Properties
The Background properties enable you to specify the background details. The following is the list of Tab Link Background properties.
Background Properties
|
|
Selected background |
|
Background color |
The background color for the tab when it is selected. |
Add Background Image (Touch) |
To use an image as background of the selected tab. You can upload the image using the Upload Image button. This image applies only on touch devices. |
Add Background Image (Non-touch) |
To use an image as background of the selected tab. You can upload the image using the Upload Image button. This image applies only on non-touch devices. |
Repeat horizontally only |
To let the background images to repeat horizontally only for the selected tab. |
Default Background |
|
Background color |
The background color for the tab when it is not selected. |
Add Background Image (Touch) |
To use an image as background of the tab when not selected by the user. You can upload the image using the Upload Image button. This image applies only to touch devices. |
Add Background Image (Non-touch) |
To use an image as background of the tab when not selected by the user. You can upload the image using the Upload Image button. This image applies only to non-touch devices. |
Repeat horizontally only |
To let the background images to repeat horizontally only for the tab when not selected by the user. |
Border Properties
The Border properties enable you to configure the border details for the Tab Link. The following is the list of Tab Link Border properties.
Border Properties
|
|
Border Color |
The border color for the tab link. |
Stroke weight |
The thickness for the border. |
Top left corner-radius (Px) (Touch) |
The value to apply a rounded-corner effect to the top-left corner of the border. |
Top right corner-radius (Px) (Touch) |
The value to apply a rounded-corner effect to the top-right corner of the border. |
Bottom left corner-radius (Px) (Touch) |
The value to apply a rounded-corner effect to the bottom-left corner of the border. |
Bottom right corner-radius (Px) (Non-touch) |
The value to apply a rounded-corner effect to the bottom-right corner of the border. |
Padding Properties
The Padding properties enable you to configure the padding values for the module. The following is the list of Tab Link Padding properties.
Padding Properties
|
|
Padding (Px) (Touch) |
The space between the content boundary and the module boundary for touch mode. |
Padding (Px) (Non-touch) |
The space between the content boundary and the module boundary for non-touch mode. |
Text Properties
The Text properties enable you to specify the details of the tab link text. The following is the list of Tab Link Text properties.
Text Properties
|
|
Link Label |
The text to be displayed on the tab link. |
Selected Font Color |
The font color that indicates the selected state of the tab. |
Default Font Color |
The font color that indicates the non-selected (default) state of the tab. |
Link Font Family (Touch) |
The font family for the label text. This applies to touch devices. |
Link Font Family (Non-touch) |
The font family for the label text. This applies to non-touch devices. |
Link Font Size (Touch) |
The font size for the label text. The font size reflects only on touch devices. |
Text Style Options |
Make Text Bold (Touch)—The tab label to appear with bold formatting on touch devices. Make Text Bold (Non-touch)—The tab label to appear with bold formatting on non-touch devices. Make Text Italic (Touch)—The tab label to appear italicized on touch devices. Make Text Italic (Non-touch)—The tab label to appear italicized on non-touch devices. Underline Text (Non-touch)—This option is selected by default and makes the tab label to appear underlined on non-touch devices. |
Selected Text Shadow Color (Touch) |
The color to apply a shadow effect to the tab label that indicates the selected state. |
Default Text Shadow Color (Non-touch) |
The color to apply a shadow effect to the tab label that indicates the non-selected state. |
Icon Properties
The Icon properties enable you to specify the details of icon that appears along with the text. The following is the list of Tab Link Icon properties.
Icon Properties
|
|
Display Icon |
To display an icon next to the tab label. |
Change Selected Icon |
To upload an icon to be displayed when the tab is in selected state. This icon appears on both touch and non-touch devices. |
Change Default Icon |
To upload an icon to be displayed when the tab is in non-selected state. This icon appears on both touch and non-touch devices. |
Place icons |
To place the icons right or left of the text.
- Left of the text—To display to the left of the tab label during run time.
- Right of the text—To display to the right of the tab label during run time.
|
Tab Image
The Tab Image module enables you to create a tab header that displays plain text. You can add this module to the Tab Container to create plain text tabs.
Note This module can be used only for web sites.
Main Properties
The Main properties enable you to specify the basic tab image details. The following is the list of Tab Image Main properties.
Main Properties
|
|
Change Selected Tab Image |
To replace the default image with a new tab image. This image indicates the selected state of the tab. This image appears when the users click the tab in real time. You can create a transparent text or object image. The background can be configured using Background Image options in the Edit panel. |
Change Default Tab Image |
To replace the default image with a new tab image. This is the default tab that indicates the non-selected state of the tab. |
Background Properties
The Background properties enable you to specify the background for the tab image. The following is the list of Tab Image Background properties.
Background Properties
|
|
Selected Background |
|
Background Color |
The color that you want to use as the background for the tab image module. This color appears when the users click the tab in real time. |
Add Background Image (Touch) |
To upload an image (1px) that can be used as the background of the tab image module. The recommended width is 1 to 3 px. This image applies to touch devices only. |
Add Background Image (Non-touch) |
To upload an image (1px) that can be used as the background of the tab. The recommended width is 1 to 3 px. This image applies to non-touch devices only. |
Repeat horizontally only |
To let the 1 px background images to repeat horizontally only. |
Default Background |
|
Default Background Color |
The color that you want to use as the background for the Tab Image module. This is the default background color that indicates the non-selected state of the tab. |
Add Background Image (Touch) |
To upload an image (1px) which can be used as the background of the tab image module. This background image indicates the non-selected state of the tab and applies only to touch devices. |
Add Background Image (Non-touch) |
To upload an image (1px) that can be used as the background of the tab image module. This background image indicates the non-selected state of the tab and applies only to non-touch devices. |
Repeat horizontally only |
To let the 1 px background images to repeat horizontally only. |
Border Properties
The Border properties enable you to specify the border details for the tab image. The following is the list of Tab Image Border properties.
Border Properties
|
|
Border Color |
The border color for the tab. |
Stroke Weight (Px) |
The thickness of the border. |
Top left corner-radius (Px) (Touch) |
The value to apply a rounded-corner effect to the top-left corner of the border. |
Top right corner-radius (Px) (Touch) |
The value to apply a rounded-corner effect to the top-right corner of the border. |
Bottom left corner-radius (Px) (Touch) |
The value to apply a rounded-corner effect to the bottom-left corner of the border. |
Bottom right corner-radius (Px) (Touch) |
The value to apply a rounded-corner effect to the bottom-right corner of the border. |
Padding Properties
The padding properties enable you to specify the padding details. The following is the list of Tab Image Padding properties.
Padding Properties
|
|
Padding (Px) (Touch) |
The space between the content boundary and the module boundary for touch mode. |
Padding (Px) (Non-touch) |
The space between the content boundary and the module boundary for non-touch mode. |
Tabs
The Tabs module enables you to insert a group of tabs on your mobile site. The tabs are useful for organizing and grouping related topics or content. You can group the content of your mobile site within two tabs using the Tabs Module.
Configuring the Tabs Module
To configure the Tabs module, perform the following steps:
Step 1 In the Modules panel, enter Tabs. The Tabs module appears in the Modules panel.
Step 2 Drag and drop the Tabs module into the Canvas. The Edit panel of the module opens.
Step 3 In the Edit panel of the module, specify the required values in the respective fields.
Step 4 Click Save.
Main Properties
The Main properties enable you to specify the tab details. The following is the list of Tabs Main properties..
Main Properties
|
|
Tab 1 Label |
The name of the first tab in this box. |
Tab 1 Content |
The content that will appear under Tab 1. You can use the Text Editor to format the text. |
Tab 2 Label |
The name of the second tab in this box. |
Tab 2 Content |
The content that will appear under Tab 2. You can use the Text Editor to format the text. |
Style Properties
By default, style properties apply to both touch and non-touch modes. The following is the list of Tabs Style properties.
Style Properties
|
|
Selected Tab Background Color |
The color that you want to use as the background for the tab that user has selected. |
Add Background Image for Selected Tab |
To add a background image for the tab that the user has selected. You can upload the image using the Upload Image button. This helps differentiate between the tab that the user has selected and the default tab. |
Selected Tab Font Color |
The font color for the tab that the user has selected. |
Tab Content Background Color |
The background color for the content that appears under the tab. |
Default Tab Background Color |
To change the default tab background color. The default tab is a tab that the user has not selected. |
Default Tab Font Color |
To change the default tab font color. |
Add a Background Image for Default Tab |
To add a background image when the tab is not in selected state to differentiate it from the tab user has selected. |
Default Tab Font Color |
The font color that you want to use for the text in default tab. |
Content Padding |
The space that you want to leave between the tab content and the inner boundary of the Module. |
Content Margin |
The space that you want to leave between the inner and the outer boundaries of the Module. |
Margin |
The space that you want to leave between the Module boundary and the sides of device screen. |
Touch Version Properties
The Touch Version properties enable you to specify the properties that are applicable only to the touch mode. The following is the list of Tabs Touch Version properties.
Touch Version Properties
|
|
Font Family |
The font family that you want to apply to the tab name text. |
Tab Font Size |
The font size that you want to apply to the tab name text. |
Content Font Size |
The font size that you want to apply to the content under each tab. |
Add Background Image for Selected Tab |
To add a background image for the tab that the user has selected. You can upload an image using the Upload Image option. This helps differentiate between the tab the user has selected and the default tab. |
Add a Background Image for Default Tab |
To add a background image for the default tab. You can upload the image using the Upload Image option. Th default tab is a tab that user has not selected. |
Content Padding |
The space that you want to leave between the tab content and the inner boundary of the module. |
Content Margin |
The space that you want to leave between the inner and the outer boundaries of the module. |
Margin |
The space that you want to leave between the module boundary and the sides of device screen. |
Text
The Text module enables you to insert text, configure the formatting and alignment, and link it to other topics or sites.
You can insert text in the header, body, and footer areas of the page. A typical page includes body text, links to other sections, pages, or sites, copyright messages, and disclaimers.
Configuring the Text Module
To configure the Text module, perform the following steps:
Step 1 In the Modules panel, enter Text. The Text module appears in the Modules panel.
Step 2 Drag and drop the Text module into the Canvas. The Edit panel of the module opens.
Step 3 In the Edit panel of the module, specify the required values in the respective fields.
Step 4 Click Save.
Main Properties
The Main properties enable you to specify the content details. The following is the list of Text Main properties.
Main Properties
|
|
Content |
The text that you want to display. You can format the text using the Text Editor. The editor includes Text area and Formatting toolbar. |
Style Properties
By default, style properties apply to both touch and non-touch modes. The following is the list of Text Style properties.
Style Properties
|
|
Border Color |
The color that you want to apply for the border text area. |
Stroke Weight (px) |
The thickness for the border. |
Background Color |
The color for the background area where the text appears. |
Add Background Image |
To use an image as the background for the area where the text appears. You can upload the image using the Upload Image button. |
Padding |
The space between the content boundary and the module boundary. |
Margin |
The space between the module boundary and the sides of the device screens. |
Touch Version Properties
The Touch Version properties enable you to specify the touch mode exclusive properties The following is the list of Text Touch Version properties.
Touch Version Properties
|
|
Add Background Image |
To use an image as the background for the area where the text appears for touch mode. You can upload the image using the Upload Image button. |
Padding |
The space between the content boundary and the module boundary for touch mode. |
Margin |
The space between the module boundary and the sides of device screens for touch mode. |
Thumbnail Link
The Thumbnail Link module enables you to use the thumbnail images that can be linked to inner pages. As the module supports thumbnail images, you can enhance the look and feel of a page that contains links to other pages such as a download page.
Configuring the Thumbnail Link Module
To configure the Thumbnail Link module, perform the following steps:
Step 1 In the Modules panel, enter Thumbnail Link. The Thumbnail Link module appears in the Modules panel.
Step 2 Drag and drop the Thumbnail Link. module into the Canvas. The Edit panel of the module opens.
Step 3 In the Edit panel of the module, specify the required values in the respective fields.
Step 4 Click Save.
Thumbnail Link Properties
Main Properties
The main properties enable you to specify the link details. The following is the list of Thumbnail Link Main properties.
Main Properties
|
|
Link Label |
The text to be hyper-linked. |
Target Link |
The target URL for the hyper link. We recommend that you manually browse internal pages and set the link. |
Thumbnail Image |
The image for the thumbnail link. You can resize the image using the Auto Resize, Auto Crop, or Manual options. Use the Manual button to upload images that you have already cropped and resized to fit the following screen dimensions:
- XXL Screen Size (310 pixels width and above)
- XL Screen Size (220 pixels width and above)
- Large Screen Size (176 pixels width and above)
- Medium Screen Size (104 pixels width and above)
We recommend that you use the Manual option to upload thumbnail images. |
Alt Text |
The alternative text for the image. Alternative text lets the content and function of an image to be understood by text-only readers. |
JPEG Image Quality |
The image resolution required. |
Description |
The description of the thumbnail link. |
Style Properties
By default, style properties apply to both touch and non-touch modes. The following is the list of Thumbnail Link Style properties.
Style Properties
|
|
Link Label Font Color |
The font color for the text that represents the link. |
Description Font Color |
The font color for the link description text. |
Vertical Align Thumbnail |
The alignment options to position the thumbnail image vertically on the device screen. |
Vertical Align Link |
The alignment options to position the thumbnail link vertically on the device screen. |
Padding |
The space between the content boundary and the module boundary. |
Thumbnail Image Border Color |
The color for the border that appears around the thumbnail image. |
Stroke Weight |
The stroke weight for the thumbnail link border. |
Background Color |
The color for the background area where the thumbnail link and image appear. |
Add Background Image |
To use an image as the background for the area where the thumbnail link and image appear. You can upload the image using the Upload Image button. |
Padding |
The space between the content boundary and the module boundary. |
Margin |
The space between the module boundary and the sides of device screens. |
Touch Version Properties
The touch version properties enable you to specify the properties that apply only to the touch mode. The following is the list of Thumbnail Link Touch Version properties.
Touch Version Properties
|
|
Link Label Font Family |
The font family that you want to apply to the link text. |
Link Label Font Size |
The font size that you want to apply to the link text. |
Make Link Label Bold |
To display the link text with bold text formatting. |
Description Font Family |
The font family that you want to apply to the link description text. |
Description Font Size |
The font size that you want to apply to the link description text. |
Change Link Arrows |
To change the default arrow image that appears on the thumbnail area. |
Add Background Image |
To use an image as the background for the area where the link text appears for touch mode. You can upload the image using the Upload Image button. |
Padding |
The space between the content boundary and the module boundary for touch mode. |
Margin |
The space between the module boundary and the sides of device screens for touch mode. |
View 360 Degree
The View 360 Degree module enables the user to have a complete 360 degree view of the product displayed in the page.
While buying products online, the end user would like to view the product at different angles. A visual representation of the product at different angles adds to a better shopping experience. The site producer can use the View 360 Degree module to display images of a product shot at various angles. This module can be used also to display a short animation of the product. The module draws the images from a feed and displays them.
Before you begin to use the View 360 Degree module, ensure that you have the following:
- A View 360 Degree Feed URL.
- For non-touch devices, the redirect URL that contains images of the product shot at various angles.
Note We recommend Cisco Feed Editor for creating the feeds for this module.
Use the following details while creating the feeds:
- Feed template name-Rotate 360 Degree
- Feed adapter key-ROTATE360DEGREE
Feed Structure:
<item>
<ImageURL>image1</ImageURL>
<ImageURL>image2</ImageURL>
<ImageURL>image3</ImageURL>
<ImageURL>image4</ImageURL>
<ImageURL>image5</ImageURL>
<ImageURL>image6</ImageURL>
<ImageURL>image7</ImageURL>
<ImageURL>image8</ImageURL>
<ImageURL>image9</ImageURL>
<ImageURL>image10</ImageURL>
<ImageURL>image11</ImageURL>
<ImageURL>image12</ImageURL>
</item>
Note The recommended number of images in the feed is 8 to16 for a proper 360 degree rotation to occur.
Configuring the 360 Degree View Module
To configure the 360 Degree View module, perform the following steps:
Step 1 In the Modules panel, enter 360 Degree View. The 360 Degree View module appears in the Modules panel.
Step 2 Drag and drop the 360 Degree View module into the Canvas. The Edit panel of the module opens.
Step 3 In the Edit panel of the module, specify the required values in the respective fields.
Step 4 Click Save.
View 360 Degree Properties
Main Properties
The Main properties enable you to specify the feed details. The following is the list of 360 Degree View Main properties.
Main Properties
|
|
Feed URL |
The URL of view 360 degree feed that conforms to the content source format supported by the module. |
Feed Adapter Key |
The feed adapter key provided by Cisco. |
Auto rotate (Touch) |
This enables automatic rotation of images. This setting applies to touch devices only. |
Rotation Speed (Number of images per second) |
This sets the speed at which the product images rotate. The default value set is 4 images per second. |
Link this module to page (Non-touch) |
The URL that leads to a page where more product images or information is present. This setting is for non-touch devices only. |
Layout Properties
The Layout properties is used to configure the layout for touch and non-touch mode. The following is the list of 360 Degree View Layout properties.
Layout Properties
|
|
Layout Touch |
|
Display Rotator icon |
Displays a rotator icon in touch devices. |
Layout Non-touch |
|
Display Non-touch view |
To display the non-touch view of the module. |
Images Properties
The Images properties enable you to specify the properties of image. The following is the list of 360 Degree View Images properties.
Images Properties
|
|
Border Color |
The border color for the image. |
Stroke Weight |
The thickness for the border |
Corner-radius (Px) (Touch) |
The corner radios value for touch devices. |
Shadow options (Touch) |
|
Shadow Color |
The shadow color for the image. |
Background Options |
|
Background color |
The background color for the image. |
Add Background Image |
To use an image as the background. You can upload the image using the Upload Image button. |
Repeat Image Horizontally Only |
To repeat the background image horizontally only. |
Navigation Properties
The navigation properties enable you to specify the properties of the rotator icon. The following is the list of 360 Degree View Navigation properties.
Navigation Properties
|
|
Change default Rotator icon (30x30 Px) |
To use a different image for the rotator icon. You can upload the image using the Upload Image button. |
Align the rotator icon |
The alignment required for the icon. |
Background Properties
The Background properties enable you to specify the background properties. The following is the list of 360 Degree View Background properties.
Background Properties
|
|
Background color |
The color that must appear as background in the area where the module appears. |
Add Background Image (Touch) |
To use an image as background. You can upload the image using the Upload Image button. This image applies only to touch devices. |
Add Background Image (Non-touch) |
To use an image as background. You can upload the image using the Upload Image button. This image applies only to non-touch devices. |
Repeat horizontally only |
To let the background image to repeat horizontally only. |
Border Properties
The Border properties enable you to configure the border details for the module The following is the list of 360 Degree View Border properties.
Border Properties
|
|
Border Color |
The border color for the module. |
Stroke weight |
The thickness for the border. |
Top corner-radius (Px) (Touch) |
The value to apply a rounded-corner effect to the top-left corner of the border for touch devices. |
Bottom left corner-radius (Px) (Touch) |
The value to apply a rounded-corner effect to the bottom-left corner of the border for touch devices. |
Padding and Margin Properties
The Padding and Margin properties enable you to configure the padding and margin values for the module. The following is the list of 360 Degree View Padding and Margin properties.
Padding and Margin Properties
|
|
Padding (Px) (Touch) |
The space between the content boundary and the module boundary for touch mode. |
Padding (Px) (Non-touch) |
The space between the content boundary and the module boundary for non-touch mode. |
Margin (Px) (Touch) |
The space between the module boundary and the sides of device screens for touch mode. |
Margin (Px) (Non-Touch) |
The space between the module boundary and the sides of device screens for non-touch mode. |