liquid-layout
Anchor Points
The image above is a screenshot from building this very page in the tablet version. Here we have an image element selected (note: the element with dotted lines surrounding it). On the top-right of the image element, there is a blue plus sign (follow the blue arrow). That blue plus sign indicates an anchor point on the element. (These arrows have been added to point out where the anchor points are in the screenshot. They are not present in the design studio.) The anchor point lets you know the position of the box that will stack. You can set this anchor to 3 positions: top, middle, and bottom. Click and drag the mouse cursor on the anchor point, and it will allow you to set the anchor point to the position you'd like. Below, you can see an example of how easy it is to change liquid layout anchor points. The video shows a selected textbox. At first it's set to anchor with box '1'. See how to change it to anchor with box '2'. Essentially, you can set the blue anchor point and the orange anchor to a position on each separate element, and our liquid layout will ensure that the distance/spacing between both ‘hooks’ stays the same, no matter the window size.
Absolute Control

If you want advanced precision past our automatic liquid layout tools, you can manually adjust the anchor points of each element, as well as ignore any binding whatsoever. Because our anchoring feature is only automatically enabled on two elements directly above/below one another, there are times when you may want to manually anchor elements. For instance, if you are trying to align two images next to each other - you may want to anchor them to each other, instead of using our liquid layout which will automatically anchor the images to the element above them. And you can easily do this in Readz, without any coding, as always. This article goes over how to do these manual adjustment in Readz.
Keep Manual Binding
There are some additional options within the liquid layout feature. Sometimes, you will be reusing a layout for multiple publications. If you've used our anchoring tools and have all the elements set anchored to their corresponding element, you probably want to keep that. In this case, you may want to use our feature of keeping manual binding.

Our liquid layout will automatically adjust anchors every time you drag and drop an element - something you might not want! To keep each setting on each element, follow the below instructions: In the Layout tab, you can adjust the liquid layout settings. In that tab, if you scroll to the bottom, you’ll see a ‘Keep Manual Binding’ checkbox that you can check in order to overwrite our liquid layout. Having this checked will keep the elements current properties, regardless of whether you move it to a new position on the page.

Extra options with the smart-layout feature. In the Layout tab, you can also adjust the smart-layout settings. In that tab, you'll see "AUTO CONNECT" and "KEEP MANUAL BINDING."
 
AUTO CONNECT
The element will interact with the bottom of the element directly above it. 
 
KEEP MANUAL BINDING
Normally when you set a smart layout on an element, but then move that element to a new location in the page, the smart layout settings will change to connected to the nearest element (usually the one right above it). But, by checking "Keep Manual Binding", the element's smart-layout properties will not change, regardless if you move the element to a new position in the page.
anchor-point-1
no-liquid-layout
Removing a liquid layout
And lastly, If you don’t want an element to be anchored to anything, simply drag the orange anchor to itself. And your element will be free with zero binding to anything else!
Have Absolute Control Over Your Layout With Advanced Liquid Layout
This article is a follow-up to the basics of Liquid Layout article, for advanced users who want more control over the automatic features
web element- menu web element- blue menu
Back to Menu
LEARN MORE
DELIVER BETTER CONTENT EXPERIENCES
web element- close
readz logo- mobile
twitter logo
facebook logo
linkedin logo
web element- close
DELIVER BETTER EXPERIENCES
LEARN MORE
SUBSCRIBE
label 1
Email:
readz logo
SUBSCRIBE
readz logo- bold
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- hospitality readz client- telecommunications readz client- outdoor advertising nurse.com_whitelogoAshley-Stewart-Logo_white
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