Being sure that your page elements are positioned accurately and precisely on your page is important when creating your website, especially if you’re using separate pages for your design.  Websites that don’t have a uniform layout may appear as though they have objects ‘jumping around’ on the screen as the user navigates – and giving your visitors a headache probably isn’t the effect you’re after!

Please note that this article was written for Cubender V3

Cubender has a variety of tools available that will help you to easily position elements on your pages.  Use one or a combination of these during the design process, and you’ll be on your way to a stunning and professional website with ease and efficiency.

General Settings

When you double-click a page to edit it, you’ll notice several Menu Options in the top left corner of the screen, next to the Cubender Logo.

 

  • Assuring that the options for Show Borders and Show Grid are ON is a good place to start.  You’ll be able to see your defined page layout when these two elements are selected.  Adjust your page dimensions by adjusting the pixel width and height in the Webpage > Layout menu.

 

  • You can adjust the Grid’s Scale by sliding the scrollbar just to the right of ‘Show Grid’.  If you then click ‘Snap’, any objects that you place on your page will ‘snap’ to the closest square on your grid.  If you turn OFF the feature, you’ll be able to position objects by dragging and dropping them into position instead.

 

  • Next up, you’ll see the option for displaying More Settings.  If you select Show Rulers and Guides and/or Snap To Rulers Guides, you’ll notice two grey rulers appear – one on the left side of the Editor Screen, and the second just underneath the Widget Gallery.  Clicking one of these and dragging it onto your design will create little pink Guidelines that allow you to set up your own positioning.

 

If you place your Logo on the page, and then drag a top and right Guideline onto the page to intersect at an exact corner of the logo, for example…

…you’ll know exactly where to place that logo when you switch to edit a new page:
Widget Positioning & Size
  • Every Widget that you can place on the page will have it’s very own Action Icon – the gateway to programming a variety of things specific to that Widget.  By selecting the Widget’s Action Icon > Position & Size, we can adjust a variety of features in terms of positioning of that object.
  • Here, you have options on locking an object into place relative to your defined Page Layout.  We call this Fluid Positioning.  For example, under the section Fluid Positioning, we can turn ON Horizontal Center.  This will lock the object onto the exact Center of your page.
  • If an objected is locked into position when it’s placed inside of a Stack, it will be locked into that position in the stack (i.e. horizontal center of the STACK), and not onto the page itself.  You can then lock the stack onto the page, creating a multitude of different possibilities for your website layout.
  • For example, here we have locked the green menu that you see in the background so that it’s locked in position on both the left and right side of the page (Menu Action Icon > Position & Size > Fluid Positioning > Left ON, Right ON).  Because my defined page layout is smaller than my screen (Webpage > Layout > Width = 930 pixels) and my monitor is larger than this, here is what the menu and page will look like (note how the Menu fills the 930-pixel width only).
  • Because we have locked the Menu into place on the page, if we go a step further and change the Page Layout to also use fluid positioning (Webpage > Layout > Width 100% instead of Width = 960 pixels), things get interesting.  In the next example, I have change the Page Layout to Fluid Positioning > 100% width, and locked everything else on the page relative to Horizontal Center ON, offset by the pixels +/- left/right of center.  Because the Menu is still using Fluid Positioning Left ON and Right ON, take a look at the different effect in a larger browser:

 

Tips to Consider when using Fluid Positioning

  • When designing the page in the Editor and using Fluid Positioning on the page layout (Webpage > Layout > Width / Height 100%), it’s very easy to add things to your page that are just way too big for most screens.  It might look great in your Editor because your screen is a specific size, but if the object is too large, it won’t have enough room to display on a smaller screen, and things will start overlapping.

 

  • For example, say you place a logo on your screen and the dimensions of the logo are 400 pixels wide x 400 pixels high, locked to Fluid Positioning > Left ON.  Then, on the other side of your screen you place another logo of the same dimensions, locked to Fluid Positioning > Right ON.  If this is previewed using a monitor that’s any less than 800 pixels wide, the two logos will overlap and/or get cut off even though it looks alright in your screen when you’re designing.

 


  • To avoid this, I like to keep a defined Webpage > Layout of about 900 pixels wide, and 1200 pixels in height.  This will allow me to create my page so that the relative sizing will look good in most broswers, and I can change the Webpage Layout to use Fluid Positioning once I’ve sized all the Widgets and positioning them relative to Horizontal Center and/or the sides and top/bottom of the screen.

 

Additional Resources: