There are two states for pages, connected layouts and disconnected layouts. Any pages already built out on Readz is set to disconnected layouts. New blank pages and new blank projects will be set to connected layouts. Any pages or projects copied from an existing page or existing project will remain as disconnected layouts.

What is a connected layout? A connected layout is a page setting where 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, connected 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 in when using a connected layout page:
  • 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.
  • You can always toggle this connected layout setting off and on via the page menu options.
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.
image8image9image1
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. I already have a project or a page built in Readz. Can I use connected layouts on those existing pages?
You can! Following the steps above, you can take an existing page and choose to connect layouts. By default, any existing pages on Readz prior to May 2017 have remained as “disconnected layouts”. Disconnected layouts give you the flexibility to place elements in a different order on the different devices for a single page. When you connect layouts on a page that existed before the feature, you may find that some elements shifted around. There are some rules applied when pages are set to connected layouts. The arrangement of elements, left to right, and top to bottom becomes more important in determining what the desktop, the tablet, and the phone layouts will look like.

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:
c3
Phone:
c7
Looks great, but we heard some good things about the Readz feature to connect layouts, so let’s apply this setting to our page.
c4
Because of the automatic ordering behavior of the connected layout feature, our header on phone needs a bit of attention. 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. Here’s what we can do in this type of situation. We’ll first position the twitter icon back to where we’d like it. Most importantly, we’ll need to 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
c5
This “wrap elements” action automatically places a box element on the page and simultaneously puts the selected elements in that box element. More on boxes as containers here. Here’s the end result that we are happy with.
c6
The text “Share this page” no longer has space to share a single row with the new box we created, so the next box (with the 4 social media icons inside of it) can shift down to a new row. You can increase or decrease the vertical space between the text “Share this page” and the box element by clicking and dragging the box down, or selecting the box element and pressing down on the keyboard arrow key.
Connected layout
Connected layouts are great for beginners as the Readz platform is making a lot of important layout choices for you, so you can focus on the content.
readz logo- mobile
twitter logo
facebook logo
linkedin logo
web element- close
DELIVER BETTER EXPERIENCES
LEARN MORE
LEARN MORE
DELIVER BETTER CONTENT EXPERIENCES
web element- close
Back to Top
readz logo
DESIGN THE WAY YOUR BUSINESS GROWS
Powerful, intuitive content creation software for marketers and designers.
VISIT READZ.COM
TRUSTED BY SOME OF THE WORLD’S SMARTEST COMPANIES
readz client- nonprofit readz client- health care readz client- sporting goods readz client- financial readz client- legalreadz client- technology readz client- mediareadz client- cosmetics readz client- hospitality readz client- telecommunications readz client- outdoor advertising readz client- ecommerce
SUBSCRIBE
label 1
Email:
readz logo
SUBSCRIBE
readz logo- bold
label 1
Email:
SUBSCRIBE
readz logo- mobile twitter logopink twitter logofacebook logopink facebook logolinkedin logopink linkedin logo
Share:
pinterest logopink pinterest logo
USING READZ
BEST OF
LATEST