Vizlib Tiles has a Tile Editor to make layout changes to your tiles and apply them quickly (Figure 1).
TABLE OF CONTENTS
Figure 1: Tile Editor Example
To start using the tile editor, put your sheet into Edit mode, then click the tile editor button in the bottom right of the screen (Figure 2).
Figure 2: Tile Editor Button
- When the tile editor opens, you should see a block layout appear, with 3 tabs - Header, Body and Footer (Figure 3). In each tab, a block represents a measure from the property panel Data section, e.g. Title, Description, Image.
- Use the Zoom controls to make the layout in the tab larger or smaller.
Note: You can only edit a tab if you have added an element (e.g. if no elements are added to the footer, the footer tab will be greyed out).
Figure 3: Tile Editor
Changing the Tile Layout
- To change the tile layout, you can either use the cursor to drag and drop the element to the location you want (Figure 4), or use the button to open the Position settings and enter the changes manually (see the Data article for more details). In this example, we're moving Product to the top left corner of the Body.
- You can also right click on the element to open a menu of available options:
- Bring to front moves the element to the top layer, while Bring forward moves the element forward by one layer.
- Send to back moves the element to the bottom layer, while Send backwards moves the element back by one layer.
- You can also choose Toggle to display out of bounds which allows the element to be displayed outside the tile border, and also Duplicate the element.
Figure 4: Moving a Tile Layer
Note on Displaying Outside Tile Borders: You can also enable Display out of bounds in the editor in the menu opened with the button, or in the property panel (Figure 5). You'll find it in Measure settings under the Position section, so for this example you'd find it in Product.
Figure 5: Display Out of Bounds
Applying Layout Changes
- Click Apply to save your changes to the sheet. You can see Product has moved from the top right to top left corner of the tile (Figure 6).
Figure 6: Tile Edits Applied