Built with Readz
LEARN MORE

Overview of 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).
Opening 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
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:
  • Left: content and element tools
  • Top: project management and meta-data
  • Right: page overview tools
Working with the left toolbar: Content and element tools
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.
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. Actions and animations - page level
Deliver an interactive experience without coding. Add triggers, actions, and animation to page elements with visual controls.
Left toolbar: Element positioning styling tools
Once you select a content element, the Layout toolbar will automatically open up. On this toolbar, you will find tools to help you manage the layout of your content element: sizing, alignment, grouping and so on.
Additionally, when an element is selected, the left bar offers you additional options:
5. Layout options
This opens up the panel above with the layout options.
6. Styling options
Fonts, font sizing, alignments, colors, and so on. Here you will find all the tools needed to style your fonts.
Here you will also find controls to set the background of elements, to define borders, padding, shadows, and more.
7. Code option (not visible by default)
This option allows you to over-ride the CSS code on the element. Handle with care. This option is OFF by default and needs to be turned on in your user profile settings.
8. Actions and animations - element level (and page level)
Make your content interactive. With an element selected, this toolbar allows you to add a wide variety of actions and animations to your elements.
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.
2. Preview your page
The Preview button gives you several options:

Toggle Preview:
Need a clean view of the canvas? Click the eye to remove all designer tabs. Press any key to return to edit mode. 
Get a Preview Link:
  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.
3. Start animations from beginning
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.
4. Pause / play actions
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!
5. Switch between desktop and mobile layout
Click this button to view your project as it might display on a desktop computer monitor or on a mobile phone.

For more information on this feature, read:
"Using Viewports"
6. Open media library
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. 
7. Open SEO settings
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.
8. Properties
Here you can communicate with other team members and with Readz support!
9. Message center
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.
10. Go back to the dashboard
Click this button to go back to the Project page. 
Working with the right toolbar: Page overview tools
The right toolbar contains page view tools and the Index.
1. 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.
2. Page View
1. Add page
Click the button to open the Create Page panel. Select a page template from a wide array of options.
2. Page editor
Lots of tools here to help you manage your page. Copy, rename or move pages. And more.
3. Hide page
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.
4. Lock page
When the lock is engaged, content on the page cannot be modified. Unlock to edit the page again.
5. Rename page
Click the pencil to rename a page.
Contact Support
Need more help? Get in touch!
Contact support
We're available 6 a.m. to 6 p.m. PST
© 2022 Readz All Rights Reserved