Advanced Text editing with Fluid UI

The text editing menu allows you to control all aspects of the text style.

text editing menu

The standard features can be found in this menu:

  • Text colour
  • Font
  • Text type (Bold, Italics, Underlined)
  • Opacity
  • Allignment of text (right, left, centred, justified)

There are also advanced text editing features which allow you to enhance your design.

  • Text case settings (Uppercase, lowercase, capital case, none)
  • Text shadows
  • Customisable line height
  • Customisable letter spacing

To add shadow to your text you need to click the box beside Shadow and then chose the colour that you would like to use.

You can also move the shadow along the x/y axis simply by adjusting those specific settings.

You can then also add more or less blur by placing a value for blur.

Using invisible hotspots in Fluid UI

Uploading your own images and using invisible links

  • Hotspots are widgets that are visible on your page when creating your prototype, but don't show in preview mode (unless you choose to show them in preview settings).

  • They let you link a particular part of an image to another page without having to chop up the uploaded image.

  • To use a hotspot, add one from the library and select the link button to add a link from that widget.

  • Hotspots are useful if you want to link from more than one area on an image. If you want to link from the whole image you can do this too with a normal link.

Fluid UI Guide and Tutorials (Page 1)

My uploads and introducing invisible links

  • You can either drag and drop the images into the editor window, or use the plus button in the uploads section to search your computer's hard drive for an image.

  • You should always make sure your images are 'saved for web' using a program like Photoshop or one of the free online image editors.

  • When you keep your image files as small as possible the editor will load quicker and previewing will be much quicker also.

Auto-scaling images

There are two ‘Autoscaling’ of images options, this will help you fit images to your screens quickly and easily. These options will appear in the widget menu as soon as you click on an image that you have uploaded.

  • ‘Expand to Fit’ allows you to expand a small uploaded image to the width/height of the page you're working on.

  • ‘Display 100%’ will resize an image widget to the original size of the uploaded image file.

You need to have a paid (solo) account in order to upload your own images.

Fluid UI Guide and Tutorials (Page 1)

Click on any text to edit it. If you want to increase the size of the box that the text is contained in, drag from any of the box's corners.

The text edit submenu will appear as soon as you click on a piece of text. The menu lets you change the:

  • Font type
  • Size of the text
  • Color of the text
  • Opacity of the text
  • Font Style (Bold, Italic, Underline)
  • Text Alignment (Left, Center, Right)
  • Vertical Alignment (Top, Middle, Bottom)

Tip: Remember to drag the text box as you make the text bigger so it is aligned as you want it to be. If you don't make the box bigger some of text may be hidden.

Fluid UI Guide and Tutorials (Page 1)

  • Widgets can be resized by dragging from one of the 4 corners or the sides of the widgets.

  • All resizable widgets have a clear box/outline indicator.

  • Holding down shift will maintain the aspect ratio of a widget while resizing it.

  • To get the size of your widget pixel perfect you can use the resizing tool. simply chose the height and width that you desire.

Tip: Some larger widgets cannot be resized as they are fitted to the size of your page and the device type you are designing for.