Wireframe Elements

Multiselecting Elements:

Master quick Multi-Selecting of many Elements to speed up creation process.

Practice two options below – they can be helful in different situations:

Multiselecting with Shift:

Hold Shift and select precisely what you need.

AND

Multiselecting with Mouse hold:

Drag Selection Box while holding Left Mouse Button:

Below is the list of all availabe Wireframe elements at the moment and description of their use (there will be more 🔥).

Header

Use header for accentuation.

Settings to customise:

• Set Color. Select between Black or Gray text colors.
• Font Size.
• Font Style. Bold, Italic, Underline.
• Insert link. Paste links to other Sitemap pages and make created links clickable in Preview Mode.
• Allignment. Select a better placement for your text withing the set Header’s frame.
• Bring to Front / Back. Set layers for created Wireframe elements.
• Duplicate Element.
• Allignment Element. Select a position for the element within a Wireframe Block.

Text

Enter text at any place on a Wireframe scheme and customise it.

Settings to customise – same as for the above.

Buttons

Place buttons for navigation and call to action.

Settings to customise:

• State. Disabled or Normal state of the button.
• Border. Select between Rounded or Squared.
• Color Filled or Bordered button.
• Insert link. Paste links to other Sitemap pages and make created links clickable in Preview Mode.
• Bring to Front / Back. Set layers for created Wireframe elements.
• Duplicate Element.
• Allignment Element. Select a position for the element within a Wireframe Block.

Image

Upload content from your device with an Image element.

Settings to customise:

• Upload Image. Locate a file on your device and upload it.
• Opacity.
• Insert link. Paste links to other Sitemap pages and make created Images clickable in Preview Mode.
• Bring to Front / Back. Set layers for created Wireframe elements.
• Duplicate Element.
• Allignment Element. Select a position for the element within a Wireframe Block.

Icon

Use icons for a quicker navigation and set emojis as decoration.

Settings to customise:

• Chose Icon. Select from many-many emojis.
• Insert link. Paste links to other Sitemap pages and make created Emojis clickable in Preview Mode.
• Bring to Front / Back. Set layers for created Wireframe elements.
• Duplicate Element.
• Allignment Element. Select a position for the element within a Wireframe Block.

Rectangle, Circle

Both elements will help with for accentuation and navigation.

• Bring to Front / Back. Set layers for created Wireframe elements.
• Duplicate Element.
• Allignment Element. Select a position for the element within a Wireframe Block.

Input

Use Input element to create input fields.

Settings to customise:

• State. Disabled or Normal state of the input field.
• Bring to Front / Back. Set layers for created Wireframe elements.
• Duplicate Element.
• Allignment Element. Select a position for the element within a Wireframe Block.

Dividers

Dividerы will help you with content differentiation.

Settings to customise:

• Set Color. Select between Black or Gray colors.
• Thickness. Select how thick you’d like your divider to be.
• Bring to Front / Back. Set layers for created Wireframe elements.
• Duplicate Element.
• Allignment Element. Select a position for the element within a Wireframe Block.