Top Toolbar

_images/iu_manual_top_toolbar.png

Top Toolbar contains Command / Tab Menu / Stage area.

_images/iu_manual_top_toolbar_command.png

Command

Command Area consists of project-level features.

  • Build Button : Generates HTML & CSS & JS files based on IU Project.

  • Server Stop Button : Stops the local host server.

  • Select Build-Type Button : Select Build-Type to Build. (HTML or Django)

  • Scenario / Edit Mode Toggle Button : Switches Edit Mode to Scenario Mode and vice versa.

Tab Menu

Tab Menu area consists of 6 tabs - Style/ Property/ Text/ Transform/ Mouse-Over/ and Link.

_images/iu_manual_top_toolbar_tab03_style.png

  • Style Tab : In Style Tab, you can modify Radius / Border / Background-Image / Box-Shadow / Opacity.

_images/iu_manual_top_toolbar_tab02_property.png

  • Property Tab : In Property Tab, you can set & change properties of each widget. Each widget has individual property options.

_images/iu_manual_top_toolbar_tab01_text.png

  • Text Tab : In Text Tab, you can modify Font-family / Font-size / Font-weight (thinkness) / Font-color / Line-height / Heading / Font-alignment.

_images/iu_manual_top_toolbar_tab04_transform.png

  • Transform Tab : In Transform Tab, you can modify Rotation property.

_images/iu_manual_top_toolbar_tab05_mouse_over.png

  • Mouse-Over Tab : In Mouse-Over Tab, you can add Mouse-Over actions to each widget. (e.g. BG-color, Text-color, X-position, Y-position, width, height, BG-image position, …)

_images/iu_manual_top_toolbar_tab06_backend.png

  • Link Tab : In Link Tab, you can add Hyperlink to a certain widget.

_images/iu_manual_top_toolbar_TQZ.png

Stage

  • Fixed Widget Show / Hide Button : Switches show to hide Fixed Widgets.

  • Tracing : Adds virtual background image into your canvas, so that you can create design quickly.

  • Page Setting : Modifies current page’s Page Width and Media Query.

  • Zoom : Applies Zoom-In / Out to IUEditor’s canvas.