By Containers were a new feature introduced with EverWeb version 4.4, Using Containers can greatly expand and extend your site’s design potential due to their incredible versatility. Containers can be used in either a horizontal, vertical or free flow format allowing you more design freedom especially when used in responsive pages.This design freedom was almost enough to displace EverWeb’s stalwart Responsive Row widget. But not quite… Containers missed some features that would that were needed to let you completely swap out the Responsive Row widget for its new competitor!
The new EverWeb 4.5 release, for macOS and Windows, rectifies these shortcomings. New Container features now make it completely possible to replace the Responsive Row widget in your site’s design. We recommend that you do so as Containers are the way forward. The flexibility and versatility they offer means that you can design your responsive site in a more free form way than ever before. Here’s a look at the new features that have come to Containers…
Containers Now Wrap…
One of the main advantages of using a Responsive Row over a Container in EverWeb 4,4 was that Responsive Rows were able to wrap, or reverse wrap, their content, something Containers couldn’t do. That’s all in the past now as Containers now include the same feature.
Object Pinning in Containers
The second big new feature that comes to Containers is that you can now pin objects them. You can even ‘free’ objects that are inside the Container Rows and Columns to make them free flow within the Container. Being able to pin objects to Containers again gives you more design flexibility. Take a case where you’re selling a product. You have an outer Container Column that acts as a background. In side this Container is another Container Column which holds a TextBox with the product name followed by an image of the product, followed by another TextBox with a description, then another TextBox with its price. When it comes to Sales time, I want to place a ‘-10%’ off sticker in the outer Container’s top right hand corner. If I add an oval shape to my outer Container, style it and add my ‘-10%’ label inside it. The shape object will, however, act according to the rules of the Container, i.e. become a Column Container object.
EverWeb’s new Pin Settings allow me to ‘free’ this shape, so that it can be attached where I want it without disrupting the Container Column structure. To do this, select the shape, then go to the Metrics Inspector. Check the Allow Free Dragging box. This will free the shape object so that you can move it around the Containers. Next, click on the Pin Settings button which should now be available. If it’s not active, make sure that you’ve checked ‘Allow Free Dragging’. Now you can pin the object to the top and right hand edge of the Container using the ‘Top’ Pin Vertical button and ‘Right’ Pin Horizontal button. As we want the shape to be pinned relative to its outer container, don’t check the Constrain to Edge boxes. In addition, you can also pin the shape by pixels or percentage, relative to the Container. In this example we’ll stick with Pixels. So, now we have a ‘-10%’ sticker attached to the Container!
New Container Height and Width Options
The third set of features relate to Container Height and Width. EverWeb 4.5 introduces a new Height feature. By default, this is set to Auto, so that when you add objects in to the Container, the height of the Container automatically adjusts to accommodate it. You’ll notice that the outer Container doesn’t have any grab handles at the top and bottom because of this. Usually, you’ll probably want this feature set to Auto. You can use the new ‘Min Height’ and ‘Max Height’ options to set minimum and maximum height for the Container whilst it’s in Auto mode of you want. Remember that you can also use Margins and Padding to pad out objects within the Container.
If you need to set the Container height specifically for your page design, you might want to set Height to ‘Fixed’ instead. You’ll then get grab handles at the top and bottom of the Container which you can adjust to the height that you want to set.
The last new option for Containers is the new Content Maximum Width option. This sets the maximum width which the Container’s content can be inside the Container itself. You can set your own value here, or leave it at zero which makes use of the full width of the Container.
If you haven’t tried EverWeb’s Containers, now’s the time! Now that they have superseded feature parity with the Responsive Row widget, it’s our recommendation to use them as much as you can. And don’t forget, they also have scope now to replace other widgets such as the Text Section and FlexBox widgets. If you find that these widgets don’t do exactly what you want, using Containers may be the solution you’re looking for!
Let us know what you think in the Comments section!
Loading ...
Comments