Working with widgets

Readymag projects are built with widgets. This article will explain what you can do with single and grouped widgets, to make the editing process easier and faster.

To add a new widget, click + in the bottom left corner of the Editor window and select the widget you want to add.

Editing widgets

To change properties, click the desired widget and controls will appear on the right side of the page.

When hovering over a widget, its frame will appear. You can drag the frame to change the widget size.

When widgets are grouped, you can activate their frames by clicking on the group and holding the Cmd or Ctrl button.

The frame is hidden from view when you move your widgets with keyboard arrows or resize using the shortcut Cmd / Ctrl + keyboard arrows.

You can also edit several widgets of the same type at once. Learn more about that in this article: Group editing of widgets.

Rotating widgets

In the attributes of certain widgets, you can find the 'Rotate' setting, which allows you to adjust the angle of rotation for your widget. Additionally, you can rotate a widget directly from the canvas by hovering over any corner, at which point the 'Rotate' cursor will appear. This functionality applies to both individual widgets and group editing.

Groups

To create a group, open the widget bar, select several widgets, and click Group in their attributes. You can edit all widgets in a group simultaneously: animate, align, fix, arrange, lock, or add a shadow with a single click.

Hold the Cmd button when hovering over a group to highlight all of the included widget frames. To switch between different widgets in a group, click on the desired widget while holding the Cmd key. You can also select a widget by double-clicking on it.

Widget sizes

Click X on your keyboard to display the sizes of all your widgets. There are three ways to resize:

Shift + drag will resize a widget proportionally.

Distance between widgets

Open Grid & Guides and enable Snap and Sizes, or simply use the shortcuts: S (for Snap) and X (for Sizes). The distance between the two aligned widgets will now be shown. 

This feature is extremely helpful if you need to use multiple widgets with a consistent distance between each widget (say, to create an image gallery). Let’s try it with a Shape widget: 

1. Open your Grid & Guides settings and enable Snap and Sizes.
2. Create a new Shape widget, then click on it to select. 
3. Next, drag the widget while holding the Option (Alt) button and release it in the desired position. The first widget will remain in its original place, and a copy will be created. The distance between the original widget and the copy will be shown because you’ve enabled the Sizes feature. 
4. Click on the copy and drag the widget again while holding the Option (Alt) button. A new copy will appear: as soon as it reaches the distance from step 2, it will snap automatically.

Moving widgets

To relocate a widget, simply drag and drop it. Some helpful related hints:

• Option + Arrow button (Alt + Arrow button on PC) allows you to instantly create a copy of the widget next to the original.
• Shift + drag moves the widget only along horizontal and vertical axes.

If you need to move not just one widget, but the whole composition underneath it, the Bundle Drag feature will be extremely useful. Click on the widget and drag it with the F or V button pressed. This feature 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.

Snapping

Activate Snap in your Grid & Guides settings (or use the shortcut S), and a widget will snap to the grip and guides, as well as nearby widgets when you move it around. 

Copying widgets

Copy and paste are available across all projects: copy any widget using the Cmd + C shortcut on Mac or Ctrl + C for PC, open a different project or page, and paste with Cmd + V on Mac or Ctrl + V for PC.

The shortcut Cmd + Option + C allows you to create copies that are automatically aligned with the initial widget.

Find more useful shortcuts here.