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.).
 
Adding elements into a box element requires that you drag and drop the element inside of the area of the box element. Below, see how the image and textbox elements are dragged inside the area of the box element (you may have to disable your ad blocker to view the video). When dragging elements into the area of the box element, notice that the border of the box becomes bolder. This signifies that your box element is ready to contain the element once you release the mouse button.
812_boxexample1_EEZmbnRimg_1945_boxexample_site_q8QdvkT
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.
5561_box_footer_u81NCi5
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.
Grouping Elements
Use box elements as containers when grouping elements
web element- menu web element- blue menu
Back to Menu
LEARN MORE
DELIVER BETTER CONTENT EXPERIENCES
web element- close
SUBSCRIBE
label 1
Email:
readz logo
SUBSCRIBE
readz logo- bold
web element- close
DELIVER BETTER EXPERIENCES
LEARN MORE
readz logo- mobile
twitter logo
facebook logo
linkedin logo
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