© 2018 Readz All Rights Reserved
Get Demo
Readz Studio
How It Works
Flipbook Publisher
Contact Us
All Features

About Us
Terms & Conditions
Privacy Policy

Overview of the Design Studio

You can access the Readz Design Studio in 2 ways:
  • From the dashboard - by double-clicking on the project thumbnail.
  • From the Project menu: Click Edit. The Design Studio appears
Opening the Design Studio
Readz offers you an online design studio. Use it to create, build, edit, and update your interactive publications. Create pages, add text, media, animations, forms, and so on to create engaging interactive long-form content.  Here is where you will work the layout of your pages, create the design and make the publication become interactive by adding animations and feedback forms. Once you’re done, click publish and your publication is available, optimized, on a global content delivery network (CDN).
Understanding the Design Studio
The designer consists of the main canvas plus a set of toolbars and panels, split into four tabs.  In the middle of the design studio is its main component, the Canvas. This is the space where you will build layouts, add and style content elements and add animations. In this overview, we will give you a quick overview of the following toolbars:
The left toolbar has links and tools to add content and elements. Click a button in the left toolbar to display a new panel with a panoply of tools and options.
1. Add content elements
You’ll quickly become familiar with this tool. It contains the content elements, the building blocks of page construction, like text boxes, images, and forms.

Use these drag and drop components to add content and structure to a page.
11. Settings
For some content elements such as forms, an additional 'Settings' option will appear. This will allow you to define element-specific properties.
Working with the top toolbar: Project management & meta-data
The top toolbar contains project management and meta-data  tools, such as SEO settings, media bank and more.
1. Save / Publish
To save your work, click the Save button. Once the project is saved, the button will change into a Publish button.
Working with the left toolbar: Content and element tools
The right toolbar contains page view tools.
Working with the bottom toolbar: element information and controls
The bottom toolbar contains element information and tools. This toolbar displays only when an element on the canvas is selected. The range of tools can vary depending on the element, but most toolbars have these tools.
  • Left: content and element tools
  • Top: project management and meta-data
  • Right: page overview tools
  • Bottom: element information (visible when an element is selected).
Working with the right toolbar: Page overview tools
The left toolbar is contextual and will offer more options once you select a content element:
2. Add pre-made blocks
Cut design time with customizable, pre-formatted layouts for headers, footers and full-page spreads.
3. Manage page background
Add a splash of pizzazz. Customize the page color or place an image in the background.
4. Element and action index
This nifty tool helps you locate every element (e.g. a text box) or action (e.g. trigger) on a page. It’s a great time saver when you want to update content or add customizations.
5. Actions and animations
Deliver an interactive experience without coding. Add triggers, actions, and animation to page elements with visual controls.
Left toolbar: More styling tools
Readz is designed to work code-free. But if you must add CSS code, here is where you would do it.
6. Positioning tools
7. Text styling options
8. Element styling options
9. Advanced layout controls
10. Custom code window
These tools will help you control layering, distribute elements evenly, and other time-saving manipulations.
Fonts, font sizing, alignments, colors, and so on. Here you will find all the tools needed to style your fonts.
Here you will find controls to set the background of elements, to define borders, padding, shadows, and more.
This is where you define if elements should be on multiple pages, you can add parallax scrolling, and other more advanced settings.
2. Start animations from beginning
3. Pause / play actions
4. Display desktop layout
5. Display tablet layout
6. Display phone layout
7. Open media library
8. Open SEO settings
9. Message center
10. Go back to the dashboard
Animations will run in the editor like they would in a real browser. If you want to see all the animations and effects start as if the page were newly loaded, click this button.
This button will allow you to pause or play actions and animations on your page.

Why would you need this? Well, imagine you would want to change the styling on a cross-out box of a pop-up. Every time you select the box, the action going along with this box will be performed, meaning that your pop-up will close. And so will the element you were trying to style. So, to be able to edit and style these elements that have animations on them, you can pause the animations. Allowing you to style and edit them!
Click this button to view your project as it might display on a desktop computer monitor.
Click this button to view your project as it might display on a tablet screen.
Yup, this button simulates a phone screen display.
All the media (e.g. images, PDFs, video) you upload for a project can be accessed here. This nifty tool saves time when you want to reuse digital assets. 
Improve search results by optimizing your content. Click the button and a panel opens. Improve the default project title and then add a keyword-rich description.
Here you can communicate with other team members and with Readz support!
Click this button to go back to the Project page. 
1. Hide editor controls
Need a clean view of the canvas? Click the eye to remove all designer tabs. Press any key to return to edit mode. 
2. Preview your page
3. Properties
11. Rename page
10. Hide panel
4. Activity log
5. Add page
6. Section edit
7. Page editor
8. Hide page
9. Lock page
Click here to open the Properties panel. Change the project name and then check the box to place a hamburger, the small square with three lines that holds a table of contents, on each web page.
The Preview button gives you several options.
  1. Click the URL to preview the flipbook on your current device.
  2. Scan the QR code to preview the document on a mobile device.
  3. Email the link and let another person preview the document. Be sure to check the security box to allow a preview without a login.
Note: the preview button disappears if you have unsaved content on the canvas. To activate Preview, click Save.
Click the pencil to rename a page.
Click here to see when your project was edited or published and by whom.
Click the button to open the Create Page panel. Select a page template from a wide array of options.
The default name is Section. Customize the default by clicking the pencil and entering a new name.
Lots of tools here to help you manage your page. Copy, rename or move pages. And more.
Use the toggle to change the state of a page from approved to not approved (and vice versa). This is a useful tool when a team manager has to find and approve content before publishing.
When the lock is engaged, content on the page cannot be modified. Unlock to edit the page again.
Click the tab to hide the panel and create more visible space on the canvas. Click the tab again to restore the panel.
1. Name
Various tools to customise an element’s position (e.g. alignment / center, bring to front, pin in location, etc).
2. Element position on the X-axis
3. Element position on the Y-axis
4. Element width
5. Element heigth
6. Position tools
Hover the mouse on the name and a pencil displays. Click the pencil to change the object’s name.
Click the minus (-) or plus (+) buttons to move the element on a left-right axis.
Click the minus (-) or plus (+) buttons to move the element on a up-down axis.
Click the minus (-) or plus (+) buttons to change the width of the element.
Click the minus (-) or plus (+) buttons to change the heigth of the element.