Editor is where you design your projects, adding and customizing widgets on each page as necessary. Your workspace also includes Project Menu (M), in which you can access general settings, overview and rearrange all pages, and work with templates.
To correctly appear on all screens, the content on your page should fit within 1024 px wide area, marked with a dotted frame. A widget outside the dotted frame may not appear on small screens.
By default, content on the desktop is centred and never scaled. The mobile layout of your page is always scaled and centred to fit the screen width.
Scalable desktop layout#
Note! This feature is still in development.
Click Scale Layout control on the Viewer tab in Project Settings to automatically scale the content within the dotted frame to the width of a desktop browser window.
To create a mobile layout for the page, toggle the switch in Layouts panel on your widget bar. By default, the scaled desktop layout is displayed for all pages on screens less than 1024 px in width.
We recommend creating the mobile layout only after the desktop layout of the page is completely finished — it will save a lot of time.
- Use the keyboard to switch between desktop (1) and mobile (2) layouts both in Edit and Preview modes.
- Mobile layout is always 320 px in width. You can change the height of the page in Layouts panel.
- Only two types of animation are available: On Load and On Click.
Desktop vs. mobile layout on different screens#
If you create both the desktop (1024 px) and mobile (325 px) layouts of the page, the one closest to the actual screen width of the particular device will be displayed. Layouts also change when the mobile device is rotated from portrait to landscape view.
Widgets in desktop and mobile layout#
Mobile layouts are created for each page of the project individually — you rearrange and reconfigure the same widgets within 320 px dotted frame to show your visitors with smartphones an adapted version of the page instead of the automatically scaled desktop layout.
The content of all your widgets is synchronized between desktop and mobile layouts, so any changes to the text, pictures, links or videos appear in both versions. However, you position your widgets within the dotted frame and change their attributes, such as size, colour, rotation, opacity, font styles and animations, independently in the desktop (1024 px) and mobile (320 px) layout.
Any widget exists in both layouts. When you add a new widget to the mobile layout, it is created as hidden on the desktop. To alter the content between two layouts, e.g. to create different texts for desktop and smartphone visitors, you can copy the widget, edit it separately, and then hide the duplicate both on the desktop and mobile layout. If you turn the mobile layout off in Layouts panel, position and attributes of your widgets will remain separated from the desktop version.
Note! When you create the mobile layout, all animated widgets will appear static. Use Shift+Cmd+C/V to copy animation attributes from On Click and On Load desktop widgets, and paste them to your mobile widget.
Mobile layout and responsiveness#
Some web publishing tools, such as Squarespace or Wix, support responsive design — the page is rendered as a whole, different for each particular screen size. All objects are described as fragments of code in the template, following the single ‘flow’ and appearing on the screen one after another.
Readymag operates under the more intuitive WYSIWYG model. The content on your page is organized in separate widgets, and you can move them freely around the workspace, similar to layers in Adobe Photoshop or Sketch. A position of your widgets is described in absolute values, and they have constant attributes regardless of the screen size.
Our Editor gives you full control over the mobile layout that will appear on your visitor’s screen, rather than relying on the rendering mechanism of their browser to re-create your page differently in response to the detected screen size.
Some widgets can be positioned relative to a screen size. Read more about sticky and fixed widgets in Positioning.
To increase the page height click on the computer icon in the lower left corner and pull the numbers.
Another way to change the page height is drag “blue diamond” up or down or set the exact pixel value in the dimensions popup.
Click Add Widget (W) on the widget bar to create new widgets.
The widget bar is located in the bottom left corner of the workspace and contains Layouts selector, which also allows you to change a height of the page, Undo/Redo button, and Widgets (Q) panel, that contains all your widgets.
Hint: custom code works in Preview on all plans.
When you add a new widget, it appears in Widgets (Q) panel on the widget bar. Think of widgets as layers in any graphics editor — you can freely move and resize them, change their opacity, align and group several widgets together, and arrange them by placing above or underneath each other. To move your widget around the page, simply click and drag it to a new position.
If you hover over a widget in the panel, two icons appear: eye and lock. The Eye makes your widget invisible, while Lock (L) allows you to pin it down on the page.
This widget allows you to change the background of your page. The background is one of the default widgets, added automatically for every page. If you create a mobile layout of the page, a new Background widget will be added to it. Open Widgets (Q) panel on your widget bar to access it.
You can choose a solid Color, Picture or Video for your page background. Background video automatically starts playing when your page finishes loading. Use the Opacity slider for Picture and Video backgrounds to make them semi-transparent, or to combine with any solid Color.
Note! Background widget works independently for desktop and mobile layout.
Grid & Guides. #
This widget helps you to create a column layout for the page, and to position all widgets precisely. Open Widgets (Q) panel on your widget bar to access it. Grid & Guides is one of the global widgets — added to your panel by default, it doesn’t belong to any specific page, and works both for desktop and mobile layouts of your entire project.
You can switch between existing Sets and change any individual margins within each of them. Use keyboard shortcuts to show Grid (G), Guides (H), and activate Snap (S) and Sizes (X) functions. When you activate Snap, any widget you drag is always aligned with grid lines.
Sizes (X) allows you to see the dimensions of any selected widget, and change them in the Editor by specifying width/height in pixels instead of dragging the widget’s boundaries.
Use this widget to create and edit texts on your page. To add a new text, click Add Widget (W) on the widget bar and select Text.
Editing and Styles#
Click Text widget once to see general settings in the widget controls on the right side: Animation, Rotation, Position, and Arrange. Click Edit, or double-click Text widget, to access text properties, such as Styles and Font Style, Typography, and Align. You can also add Links, change Color, and split the text into Сolumns.
To add a text style, e.g. Header or Caption, highlight any fragment and use Styles in the widget controls. Click beside a style’s title, and use Edit Style to change a Font Size, Color, Line Height, and Tracking for your style, as well as set indents using Margins control. Click Save to apply any changes.
To add fonts from Adobe Typekit, Webtype, Google Fonts, and type.today collections to your project click Typography in the widget controls, select Custom tab in Fonts drop-down, and click Library.
On paid plans, you can upload custom fonts in WOFF format to your Library. Click Upload on the Custom tab in Fonts dropdown, type in a name for your font, pick the weight, and upload a file. Please note, you must have a proper license to use any copyright protected fonts.
Additionally, you can use Google Tag Manager to add tracking code from your font provider. This feature is available only for projects with a custom domain name.
Note! All Adobe Typekit fonts are replaced by default system fonts when you export the project to PDF or HTML (due to the license restrictions).
Hint: double-click Text widget to directly access text properties.
To create a new image on the page, click Add Widget (W) on the widget bar and select Picture. You can upload an image file, paste a direct URL, or add images from Flickr, Unsplash, and built-in Bing search. You can also drag and drop any image file on the workspace to create Picture widget.
Note! For a file upload, images in JPG, GIF, PNG, SVG and BMP formats are supported. Each file can be up to 6 MB in size.
Click on the Picture to access widget controls on the right side. You can add Border, Radius, and change the Opacity under Settings, and use Crop and Actual size / Half size controls, as well as the standard Rotation, for simple editing tasks.
To stretch your picture along the screen, select Full-Width position under Position in your widget controls. The height of the full-width picture always remains constant.
There are three ways to replace an added picture:
- Click on the Picture icon in the Picture widget control and choose a file.
- Drag and drop a new image directly to the Picture icon in the Picture widget control.
- Drag and drop a new image over the old one.
When you upload an image, Editor automatically compresses it to the actual size of the widget and preserves a higher resolution version for Retina-like displays. This way, a published project with optimized image files loads faster for most of your visitors, while anyone with a Retina Display or similar screen with high PPI density sees a larger image within the same Picture widget.
We always recommend uploading high-resolution versions of all your images — at least twice the intended size of the widget. You can quickly scale it down by hovering over 1:1 icon and selecting 1:2 in the Actual size/Half size control. Click 1:1 to return to the original size.
To create a picture gallery in your project, click Add Widget (W) on the widget bar and select Slideshow.
Adding and reordering pictures#
Upload or drop images one by one, or select multiple files. To change the order of your slides, add, replace, or delete pictures, click Images in widgets controls of your Slideshow.
Our Slideshow widget flips the pictures back and forth and has a Fullscreen mode that you can turn off in Settings in your widget controls. Additionally, you can activate Thumbnails, Autoplay, use Fill to stretch images to the full size of the widget, and change the colour of controls and background.
To embed an online video on your page, click Add Widget (W) on the widget bar and select Video. You can add videos from YouTube and Vimeo. Direct upload is not supported for video files.
You can activate Autoplay, Loop, and Show Info settings, as well as mute your Video under Settings in the widget controls. For clips from Vimeo, you can additionally change the colour of the title and video player controls.
Note! You cannot hide or further customize a play button, timeline bar, and other interface elements of the video player. Use Embed & Code widget for further customization.
To embed an audio file on your page, click Add Widget (W) on your widget bar and select Music. You can add a single track or an artist profile from SoundCloud service. Direct upload is not supported for audio files. You can create a free SoundCloud account, upload your audio file, and then embed it through the Music widget.
You can switch between Original Player, Visual Player, and Minimal layouts for your embedded SoundCloud player, hide Comments, Artwork, and standard Buy/Share buttons (Social), activate Autoplay and change Color of the interface elements.
Shapes & Icons#
This widget allows you to create various Icons and four basic Shapes: Rectangle, Polygon, Ellipse, and Line. Click Add Widget (W) on the widget bar and select Shape.
You can change various attributes of your Shape in the widget controls on the right side: add Borders, change Radius, add up to 30 sides for the Polygon, and change Weight and Stroke for Line.
In addition to four basic Shapes, you can add Icons on your page. Select ‘Duck’ icon in the Settings, pick one of the icons from the list or search for more symbols.
You can also add icons to the Button widget.
Settings, Edit Text and Icon#
Click Settings in the widget controls to customize your button. You can pick rectangular, ellipse, or square shape, change the Radius, add Border, pick text style and colours. If you want your Button to change an appearance when the visitor hovers over it, switch to Hover and change default colours and Border attributes.
Use Edit Text control to type in text on your button. Click Icon in the widget controls to add a graphic symbol. You can change the icon size and place it on the Left or Right from the text on the button.
You can place interactive notes anywhere on the page by adding Hotspot widgets, so your visitors will see a pop-up when they hover over the widget or click on it. To create a new note, click Add Widget (W) on the widget bar and select Hotspot.
Pin and Tip settings#
Each Hotspot widget consists of two elements: Pin and Tip. Click Pin Settings and Tip Settings in your widget control to change their separate attributes.
Pin indicates a ‘hotspot’ that your visitors interact with in order to see a pop-up Tip window. You can pick any symbol for your Pin (similar to the Icons widget), change the colour, add Border, and switch between Show on Click or Hover.
You can change the position and colour of the Tip, add radius and turn off shadow for your pop-up window. Use Text, Image, or both in your Tip. Use Add Pin in your widgets control to create identical Hotspots without returning to the widget bar. Animation, Position, Arrange, and other general attributes applied to the Hotspot widget change the appearance of both Pin and Tip.
To add Twitter to your project, click Add Widget (W) on the widget bar and select Twitter.
Five types of Twitter widget are available: User Timeline, Embed Tweet, Tweet Button, Follow Button, and Hashtag Button. You can use standard Position and Lock controls for all of them.
Embed Timeline or Tweet#
Use Embed Tweet and User Timeline widgets to embed an existing Twitter profile or quote a particular tweet on your page. Click Settings in the widget controls, and paste HTML code. Follow How to embed to read about code formatting in Twitter Developer Documentation.
If you want to let your visitors like and comment your project or page on Facebook, click Add Widget (W) on the widget bar and select Facebook. You can also use this widget to embed an existing Facebook page.
On Facebook, any Like button or Comments box exists only for a particular direct URL, not a website or page in general. Please make sure that you specify a correct link for all Facebook widgets, otherwise, you will have a button that appears functional, but does not trigger any Facebook social action.
Three types of Facebook widget are available: Like Button, Page, and Comments.
Type in or paste a direct URL of the Facebook Page to embed in your widget, e.g. https://facebook.com/pagename. Personal accounts and Facebook groups are not supported.
A few additional settings are available for the Page widget:
- Show Stream to display timeline, events and messages in your widget;
- Small Header to switch to the compact layout for your Page’s header;
- Show Faces to display faces of those who liked this Facebook Page.
To add interactive Google Maps widget to your page, click Add Widget (W) on the widget bar and select Google Maps.
Choose the Standard Map, Directions, or the Custom Map for your widget. In the Directions mode, you can specify a route for driving, bicycling, or walking. Custom Map allows you to paste JSON code, which you can easily generate with Google Maps API built-in tool — click Launch Maps Wizard link to open it.
Turn off Controls switch to hide map controls available for your visitors inside the widget.
You can create forms on the page to get feedback from your visitors. Click Add Widget (W) on the widget bar and select Form. This widget allows you to collect emails, manage event registrations, and create surveys.
You can add six different types of fields to your Form. By default, all fields must be completed by the visitor — use the Optional Field switch to make any of them non-mandatory.
- Text. Accepts any text.
- Number. Accepts only digits and decimal points: dot [.] and comma [,].
- Name. Use this field to save your visitor’s name to Mailchimp. Accepts any text.
- Email. Accepts email addresses in firstname.lastname@example.org format. This field is required to send data to Mailchimp.
Please, note that email field doesn’t have validity check, so wrong addresses, typos, and non-existent domains will be accepted and saved.
- Phone number. Accepts phone numbers in the following format: +[country code][area code][subscriber number] (plus is optional). Spaces and hyphens may be typed in as separators. For instance, +12221234567, or 7 415 123-45-67.
- Dropdown. Creates a dropdown list of multiple choices. This is a two-level control — click Dropdown in the Fields control to pull out the enclosed panel where you can add, delete, and rearrange each field.
The ‘optional’ text, displayed with Optional Field switch on, is only visible to you in the Editor. Your visitors are not going to see it in the published project.
You can add additional lines for text fields.
Click Styles in the widget controls to switch between vertical and horizontal layout for your Form, choose a Colored, Outlined, or Underlined scheme, and change Fields and Button attributes: spacing, colour, radius, border, text style, and so on.
Click Send Data to choose one of the four options for storing submitted data.
- Email. Sends all submitted data to the Current Email in your Readymag account. Other addresses are not supported. This is a default option for newly created Forms.
- Google. Saves each submitted form as a new row in Google Sheets document. Type in a name for the new spreadsheet, and it will be automatically created in the root folder of your connected Google Drive account. To disconnect Google account press here.
- Mailchimp. Adds a subscriber to one of your MailChimp lists. Email field in the Form is required to save submitted data. You can unmap the account in the Mailchimp authorisation settings: there you can revoke the access rights for third-party applications. Then you need to map another account and set up data collection for all forms in your account.
- URL. Sends all submitted forms to a custom URL. The data is transferred via POST request in application/x-www-form-urlencoded format. To rearrange fields in your Form, click and drag one of them vertically in the Fields control. If you want to receive submitted data to a different email or multiple addresses, use your email provider’s automatic forwarding to filter and redirect New form submission letters from Readymag.
Embed & Code#
Any third-party script will likely require additional coding to make it work since Readymag has some very sophisticated mechanisms under the hood. We recommend inviting a professional web developer to work with Code Embedding. Use any custom code, especially Use iFrame switch, at your own risk, and proceed with extreme caution — Readymag support won’t be able to assist you with Embed & Code issues.
You can also change standard Animation, Position, and Arrange attributes for your Embed & Code widget.
Custom code on Free plan#
Custom code fully works on the Professional and Enterprise plans, as well as in Preview (P) mode on all plans — this way you can test the functionality before upgrading.
On the Creator and Free plans, only <iframe>…</ iframe> tag and HTML codes for embedded Facebook videos and live videos, Instagram posts, and Pinterest boards are supported.
Note! If you paste an existing <iframe>…</ iframe> code that has any other tags, such as <div> or <script>, they will be ignored on Free and Creator plans, only visible in Preview (P) mode.
Double-click Embed & Code widget to open a code editor, where you can type in or paste the plain HTML code. Use Widget Code to run your custom code locally on the page, or switch to Project Code to create an injection for the entire project.
This code is executed within Embed & Code widget only.
Clear widget contents#
If you want a custom code to be removed when your visitors switch to another page or window, toggle Clear widget contents control. This option allows you, for instance, to mute an auto-playing video while your project’s browser tab is inactive.
Custom code may not be displayed correctly in the Editor. Switch to Preview (P) mode on any plan to see if your embedded code works. If your custom code doesn’t appear even in preview, toggle Use iFrame switch to enclose your injection in <iframe>…</iframe> tag.
Switch to CSS if you want to use a specific style.css file for your project. The CSS code is applied to all pages.
Operations with widgets#
To change a widget’s properties, click on the widget and the controls appear on the right side of the page.
- Copy and paste are available across all your projects: copy any widget, open a different project, and paste it there.
- Alt + drag allows you to instantly create a copy of the widget and place it on the page beside the original.
- Shift + drag moves the widget only along horizontal and vertical axes. See also Snap function.
- Bundle drag: use a triangle under the widget’s frame to simultaneously move the widget and everything below it. Works in two modes:
F + drag moves all widgets below the top edge of the selected widget;
V + drag moves all widgets below the bottom edge of the selected widget.
- Activate Sizes (X) function to see the exact dimensions of any selected widget in pixels. Type in a specific width or height to resize it.
We recommend placing all the widgets within the dotted frame so they fit common screen sizes. A widget outside the dotted frame may not appear on small screens.
But, you change positioning attributes of any widget.
These widgets are always ‘fixed’ to one of the edges, a corner, or a centre of the screen, regardless a browser’s window size. If the page is scrolled down, a fixed widget will remain on your visitor’s screen and follow the scroll throughout a current page.
Fixed widgets only appear if they are arranged above or below all other widgets on the page. Use Widgets (Q) panel to arrange a fixed widget in front or in the back, if necessary.
These widgets remain pinned to the Top and Bottom edge of the page or to the Left/Right edge of the screen. Select one of the options in Position panel. If the page is scrolled down, a pinned widget will remain with the rest of the content above your visitor’s current screen. On every page of your project, a pinned widget is placed at the same distance from the edge.
Note! When you create a mobile layout for the page, Fix and Position attributes are not transferred from the desktop layout.
These widgets appear stretched across the entire screen by default, or within a specific Margin you set. Click Full Width oval selector in the centre of Position panel to stretch your widget.
Note! Widgets are only stretchable in width, but not in height.
Global widgets appear on all pages of your project. Edit it on any page and the changes will take place on all other pages instantly.
Hint: with global widgets, you can create anchor links between different pages.
Widgets on all pages#
Click On All Pages switch to automatically place your widget on every page of the project. Any changes to this widget will appear identically on different pages.
If you want the widget to appear on several but not all pages, use in Widgets (Q) panel to hide it on any particular page. After you turn off On All Pages switch, your widget will remain only on the current page you are editing, not the original page where it was created. If the widget contains a Jump to Page Link, you can specify a special Current style for it, in addition to standard Link and Hover styles.
Widgets above all pages#
Toggle Above Pages to make the global widget floating over the pages when scrolling and navigating between pages.
You can hide Above Pages widget on any particular page using the eye icon in Widgets (Q) panel. It will fade out while your visitor is on the selected page, and reappear at the same position on the next.
Note! Toggling this switcher automatically toggles On All Pages switcher, too.
Types of animation#
Click Animation in your widget controls and choose one of the four types of animation in the desktop layout of your page, triggered by different actions:
- On Load starts once the page is loaded in a browser;
- On Click requires your visitor to click or tap on the widget;
- On Hover starts when your visitor moves their mouse over the widget;
- On Scroll starts in a specified position on the page and follows the scrolling.
In the mobile layout, only On Click and On Load animations are available.
Note! When you create the mobile layout, animation attributes are not transferred from the desktop layout, even for supported On Click and On Load types.
Four basic effects are available for your animation — Move, Opacity, Rotate and Scale. Use one of the existing Presets as is, customize them by changing parameters and adding more effects, or build your own sequence of basic effects from the scratch.
You can add multiple steps to the animation by clicking Add Step below the widget. Step 1 is created automatically, once you choose the initial Effect or Preset in the Animation control.
For each step of On Load, On Click and On Hover animations you can set the delay, duration and acceleration.
On Load animation — Start When in View#
By default, On Load animation starts as soon as the page finishes loading, while some widgets might not yet be visible. Use Start When in View control to delay animation until the widget actually appears on your visitor’s screen.
On Scroll animation — Start Point#
You can choose Start Point for your On Scroll animation, and it will start once the top edge of the widget is aligned with Top, Center, or Bottom (by default) of the screen. Offset allows you to set the Start Point at the exact height in pixels.
On Scroll animation — Speed#
This attribute allows you to specify acceleration. By changing Speed, you can define how long each step of your On Scroll animation is displayed while the visitor is scrolling the page. If you set the Speed to 1x, the animation step will be displayed for the duration of scrolling the page by one pixel. With the Speed of 0.5x — by two pixels. The faster the speed of your animation, the less your visitor has to scroll to play it.
On Click / On Hover animation — Add Trigger#
By default, On Click and On Hover animation starts when your visitor interacts with the animated widget itself. You can also set any other widget on the page as a trigger. Click Add Trigger in Animation control, and select any widget. Once your visitor’s cursor touches the trigger, the animation starts for the initial widget.
You can put the animation on repeat. Two options are available for Loop: Reverse and Cycle.
Animating multiple widgets#
You can simultaneously animate more than one widget. Select all necessary widgets with Shift + click, and then proceed with Animation control as usual. All changes will be identically applied to each individual widget in the selection.
If you select a mix of animated and regular widgets, you will be prompted to merge different animations, so that each selected widget has identical attributes.
Note! Full-width, fixed and sticky widgets (see Positioning) cannot be animated together or with regular widgets.
Use Shift + Cmd + C/V to copy animation effects from one widget and apply them to others.
To see how your project will appear published, click Preview (P) in the top right corner at any time. The same button will return you to Edit (P) mode.
If you delete a page from your project, you can find it in Trash. Hover over the page and click on it to restore.