How does the logic work?

By default the order of the elements is mirrored on all three devices.

From left to right, top to bottom, the arrangement of elements is kept consistent on desktop, tablet, and phone.

In this 'connected' layout mode, you might start to add elements to the desktop page. As you add these elements, they are automatically being added and appropriately sized on the tablet and the phone. Any re-arranging of these elements on one device does in fact re-arrange them on the other devices. Like stacking boxes on a shelf in a warehouse, layouts will order elements next to each other unless there is not enough room, then they’ll drop down to the next line. Behavior you can expect:
  • Many elements can fit in side-by-side on desktop, while on phone and tablet, a stacking strategy is used.
  • Rearranging of elements on one device will have an effect on all devices.
  • You can modify the width and height of individual elements without affecting the same element on the other devices.
Here’s an example of how you expect elements to behave.
On desktop, you see 6 white boxes arranged next to each other.
There’s plenty of horizontal space on the desktop, however this isn’t true when talking about phone and tablet. Depending on the area of each on tablet and phone these 6 white boxes might not fit in one row. If they do not fit in one row, then they’ll drop down to a new row automatically.
The biggest benefit is that Readz is applying not only best practices with sizing and spacing between elements, but as you rearrange these elements (on any device) they’ll automatically be rearranged in the same order on all devices.
Scenario… On an existing Readz page, we had made some layout choices that resulted in the desktop, tablet, and phone to appear a bit different. In the header here, on desktop our text “Share this page” is positioned next to the 4 social media icons. While on phone, the layout was created so that the text “Share this page” is positioned above the 4 social media icons. Desktop:
Here is an instance where you will need to give a hint to the automatic placement. The platform saw some free space next to the text “Share this page” so it placed the twitter icon in that space. Ideally we want the 4 social media icons together. So we’ll put these 4 social media icons in a box element so they are grouped together. This is very easily done by the following:
  1. CONTROL+Left-click on each icon
  2. In the arrange elements option, choose the star from the dropdown at the top
  3. Select the “wrap elements” icon
Here’s the end result that we are happy with.
Placing a box around the 4 social icons lets the platform know that these should be seen as group. And that's all there is to it!
Mobile layouts
The Readz platform is making a lot of layout choices for you to create a tablet and mobile layout. Here is how the logic works.
Thank you & welcome!
Thank you & welcome!
Drag-and-drop content creation, integrated marketing tools and performance analytics, all in one platform.