Kentico CMS 7.0 Context Help

Wireframe

Wireframe

Previous topic Next topic Mail us feedback on this topic!  

Wireframe

Previous topic Next topic JavaScript is required for the print function Mail us feedback on this topic!  

This tab allows you to define a wireframe schematic representing the document's structure and design. It is available either for dedicated wireframe documents or other document types that contain a wireframe definition. Wireframes do not affect the live site appearance of the page in any way, they are only for internal purposes.

 

Adding components

 

You can add components (a special type of web parts) onto the wireframe by dragging items from the web part toolbar. To choose which components are offered in the toolbar, select a sub‑category in the drop-down list. You can also filter the items by entering their name (or its part) into the search textbox (Search). Alternatively, click the AddWireframe button in the corner of the wireframe zone and choose a specific component through the Select web part dialog.

 

 

InfoBox_Note

 

Web part toolbar settings

 

Every user may configure the toolbar according to their preferences. There are four available positions and the toolbar can also be completely disabled.

 

To configure the toolbar settings, click the Settings (Configure) icon next to the category selector. The same options are also in CMS Desk -> My Desk -> My profile -> Details, so even users who have disabled their toolbar can change them.

 

Editing content

 

Double-click components to quickly modify their primary content. Depending on the type of the component, you can edit text, select an image, or specify a color. Some components have multiple editable sections.

 

When editing text values, you can use the following formatting syntax:

 

[a]Text[/a] - displays the text as a standard hyperlink

[i]Text[/i] - displays the text in italics

[b]Text[/b] - makes the text bold

[u]Text[/u] - underlines the text

[d]Text[/d] - displays the text as a disabled element (grayed out)

{color:Red}Text{color} - displays the text in red. You can apply any other CSS styles in format: {cssProperty:Value}Text{cssProperty}

\n - inserts a line break (for values that have a single-line editing field)

 

Multiple formatting tags may be applied to the same text.

 

You can also insert various types of elements into the text by adding transformation expressions:

 

Element

Text expression

Output

Checkbox (checked)

[x]

WF_Transform_CheckboxChecked

Checkbox (unchecked)

[ ]

WF_Transform_Checkbox

Radio button (selected)

(o)

WF_Transform_RadioButtonChecked

Radio button (unselected)

( )

WF_Transform_RadioButton

Minus icon

[-]

WF_Transform_Minus

Plus icon

[+]

WF_Transform_Plus

Up arrow

[^]

WF_Transform_ArrowUp

Down arrow

[v]

WF_Transform_ArrowDown

Up/down icon (spinner)

[^v]

WF_Transform_ArrowUpDown

Left arrow

[<]

WF_Transform_ArrowLeft

Right arrow

[>]

WF_Transform_ArrowRight

Directory icon

[dir]

WF_Transform_Directory

File icon

[file]

WF_Transform_File

Document icon

[doc]

WF_Transform_Document

Indentation space

[_]

 

The number of underscore characters determines the indentation size.

For example: [____]

 

Moving components

 

You can relocate components by dragging them to any position in the grid. Some components with advanced functionality must be moved using a special drag icon (WidgetDrag). If a component extends beyond the borders of the grid after being relocated, the wireframe increases the grid dimensions to fit the component. You can disable automatic zone resizing by holding down the CTRL key while dragging, which crops the component if necessary (i.e. hides the sections that do not fit into the zone).

 

 

InfoBox_Tip

 

Grouping wireframe components

 

To create a group of multiple components that you can move as a single unit:

 

1. Add the Wireframe area component from the Layouts sub-category.

2. Place the required components into the new sub-section of the grid.

3. Drag the Wireframe area to relocate the entire section.

 

Resizing items

 

You can dynamically change the dimensions of many types of wireframe components by dragging the arrow icon in their bottom right corner.

 

Advanced actions

 

Right-click components to access their context menu:

 

Configure Configure - allows you to set the component's web part properties. The available properties depend on the particular component. All wireframe web parts have the Comments property, which allows you to enter annotations or any other notes. The component displays the comment in the grid as the tooltip of an additional help icon (Help_settings).

BringForward Bring forward - moves the component to the foreground of the wireframe, in front of all other components that occupy the same space.

SendBackward Send backward - moves the component to the background, behind other components that share the same space.

CloneReport Duplicate web part - creates an exact copy of the component in the wireframe.

 

Removing components

 

There are two ways to delete components from the wireframe:

 

Right-click the component and select Delete Remove in the context menu.

Drag the component into the "trash bin" area (TrashBinToolbar) on the web part toolbar.

 

Additional resources:

 

Developer's Guide -> Development -> Wireframing

Developer's Guide -> Development -> Wireframing -> Managing wireframes

Developer's Guide -> Development -> Wireframing -> Configuring content inheritance

Developer's Guide -> Development -> Wireframing -> Developing wireframe components