The box element is a versatile element. In this how-to, we'll focus on using box elements as containers to achieve a variety of effects. In a previous how-to, we explained how box elements can be used to create the overlay effect. The box element was used to create a background layer. Inside of the box element is our content elements (textbox elements, image elements, etc.).
Live examples of where box elements are being used as containers The Readz website was built using Readz, so if you go to the homepage, you can see some live examples. In the body, we have images and text grouped in box elements with grey backgrounds. This is a design strategy to visually group elements together, but also helps keep things nicely packaged when working in the editor.
Screenshot of Readz home page.
Screenshot of the same page from within the Readz editor. The gray box contains 8 elements: 4 text boxes and 4 images.
Box elements for use as headers and footers The Readz website also uses box elements to achieve a static header navigation that always remains on-screen. This is done through the same strategy just mentioned. This header has a slightly transparent, white background. The box element has a property called FIXED POSITION, so that it always remains on-screen. All elements contained inside the box automatically inherit that FIXED POSITION property.
Below is an example of one of our partner's designs. They created a footer navigation using the box element as a container. In doing so, they were able to create a group of elements. Because the footer contains many elements, this method was very convenient. Otherwise, they would have to select all elements together and move them. Instead, they could move the box container as one piece at once.
Another benefit of grouping elements into boxes is when dealing with Smart Layout. Every element should have a smart-layout anchor, including box elements. However, every element contained inside of a box element must have a smart-layout anchor that connects to another element in that same box. Think of boxes as their own little world. Elements inside of a box element are only concerned with how they are in relation to other elements in the same box. More about smart layout in Readz.
Use box elements as containers when grouping elements
Back to Menu
DELIVER BETTER CONTENT EXPERIENCES
DELIVER BETTER EXPERIENCES
DESIGN THE WAY YOUR BUSINESS GROWS
Powerful, intuitive content creation software for marketers and designers.
TRUSTED BY SOME OF THE WORLD’S SMARTEST COMPANIES