Mac SEO Blog

If you’re designing your responsive website in EverWeb, its new object pinning feature, which debuted in EverWeb 4.5, is a must have feature addition! What object pinning allows you to do is to attach objects that are inside a Container to its edge, or to the edge of the page. Pinning objects to a Container, or page edge, allows you to design with more freedom when using a responsive page whilst still conforming to responsive web design principles. In essence, you can now design your responsive page in a way that is more akin to fixed width page design principles than ever before.

Allow Free Dragging

To be able to use object pinning, first select the object you want to pin, then go to the Metrics Inspector. In the Position section, check the box to set ‘Allow Free Dragging’ on. Doing this in itself will allow the object to be moved around the Editor Window freely as if it were an object on a fixed width page. You can even drag the selected object across boundaries such as between the Content and Footer sections. Checking the ‘Allow Free Dragging’ checkbox is a requirement for activatint the Pin Settings button which you will see is now visible.

Pinning Objects with Pin Settings

The Pin Settings button allows you to control how the selected object is pinned on the page or container. Click on the Pin Settings button to view and modify the selected object’s Pin Settings. In the window that pops up, you can set object pinning to the horizontal edge of the container, the vertical edge of the container, or both. For vertical pinning, you can choose to either pin the object to the Top, Middle or Bottom of the Container by clicking on the appropriate button. For horizontal pinning, click on either the Left, Center or Right buttons.

If you prefer, you can pin the object to the horizontal and/or vertical edge(s) of the page by checking the horizontal and/or vertical ‘Constrain to edge’ checkbox(es). In addition, you can also use either a pixel value or a percentage value for the pinning. If you use pixel value, the pinning will be fixed, i.e. always at the same pixel value, as you increase or decrease the width of the browser. So if you place the object your are pinning 50 pixels away from the edge of the Container or page, it will always be 50 pixels away from the pinned edge no matter what the browser width is. If you use Percentage on the other hand, this becomes relative so if the object you are pinning is 10% away from the browser edge, it will always be at 10% as you adjust the browser width.

The great thing about object pinning is that you can mix and match the pinning to suit your requirements. Sometimes you may just need horizontal pinning and not vertical pinning for example. You can test out your pinning just by changing the width of the EverWeb app. You will see what happens to the pinned object immediately so can adjust your pinning until you are happy with the results.

Object Pinning Visual Feedback

When you use Pin Settings on an object, you will see the settings translated visually in the Editor Window. Pinning guides will display on the edges that you have selected to pin. You will also see Pixel or Percentage values as well alongside the pinning guide lines. This information will help you to pin objects with accuracy.

Freeing Objects in Container Row and Container Column

As well as Object Pinning in general, EverWeb 4.5 goes one step further in that you can use pinning in Container Rows and Container Columns. This is a boon when you want to keep the structure of the Container but need to position e.g. a single object inside the Container, in a ‘Container Free Flow way’. You could use a Container Free Flow Container perhaps, but free-flow is just that so it will be more difficult to keep objects aligned in the way that a Column or Row Container can. So, the solution is easy. Create your Container Row or Column, then populate it. Click on the object you want to “free” from the Container structure, then hit Allow Free Dragging. Move the freed object to where you want within the Container (or page) and use the Pin Settings as you want. Easy. Either change the width of the EverWeb app, or use Preview to see how the pinning works in practice.

EverWeb’s Object Pinning feature is a great addition to its feature set, freeing your design whilst still following responsive web design rules!

Check out our video at the top of the page for a run through of Pin Settings!