Element positioning is the where the element is placed within the page. A page is laid out as a sequence or graph of coordinates plotting the space in incremental values from the top to the bottom of the page. The beginning of this sequence by default is located in the upper left corner of the page and has a value of 0 along the X (horizontal) and Y (vertical) axes.
Element positioning is also graphed from the upper left corner of an element. This is the starting point of 0 for the element as you move across the X axis and down the Y axis and the numbers incrementally increase until the bottom right corner of the element is reached.
Moving an element across the page will thus change the values along the X and Y axes. We can also change the position for the element by chaning its numbered position on the X and Y axes.
In the toolbar you can set the element's position by numbers or using predefined positions as shown by the icons at the bottom of the toolbar. Two menus allow you to independently move the element along both the X axis and the Y axis:
Horizontal (Y axis):
- Bottom alignment - Moves element along Y axis to the last position (bottom of page)
- Horizontal center – Puts the element in the center of the Y axis (horizontally centered on the page)
- Top alignment – Places the element at the top of the Y axis (top of page)
Vertical (X axis):
- Left Alignment – Places the element at 0 of the Y axis (far left of the page).
- Vertical center - Moves the element to the center Y axis (vertically centered on the page).
- Right Align – Places the element at the last point of the Y axis (far right of page).
Using the positioning toolbar allows you to change the position of elements on the page, overlay one element over another, determine the position of an element relative to another, adjust the size of an element or fix it at a certain point.
The positioning of an item on a page depends on the size of the visitor’s screen. In order for the elements to be displayed in the layout you desire, even when the size of the screen changes, you will need to use different element positions along the X and Y axes. For example: elements located on the left side of the site have a position along the X axis - on the left. And the elements located on the right side of the site have a position along the X axis - on the right. This arrangement of elements fixes their position relative to the boundaries of the site. In this way the elements will be displayed on different user screens in the same proportion.
You can adjust the page width:
- Auto is the visible portion of the site for all screen sizes.
- Full width is the maximum possible site width.
If you set the page width to Auto then all the elements on the page will be located in the visible area of the screen, regardless of how wide the screen is on the visitor. In this case, the arrangement of elements will be smaller than then boundaries of the site.
If you set the screen to Full Width then the elements that are located at the edges of the site will move beyond the visible area for those visitors who have a small screen size.
We recommend that you always use auto width so that all the elements on the page are visible to your visitors.
Pixels and percentages
You can manually enter the position of an element along the X and Y axes. There are two possible values: pixels and percentages. You can use whatever option that suits you best.
Pixels – You can set the number of pixels along the X and Y axes in order to more accurately position elements on your page relative to borders or other elements.
For example: for an icon you set the value of the X axis to 100 pixels, and you want the text next to the icon to be 100 pixels away from the icon, so you manually set the position of the two elements which allows them to remain accurately positioned relative to each other.
You can also change the position of an element by dragging it with the mouse on the page. But with the help of pixels you can set it more accurately. You can use the arrows on the keyboard to incrementally move the elment a certain number of pixels.
Clicking on the arrow moves the element by 1 pixel. If you hold down the Shift key while pressing one of the directional arrows (up, down, left, right) the element will be moved 10 pixels in the direction you select.
Percentage – You can also set the position as a percentage. In the X or Y field, enter the number and percent sign "%". 100% represents the full width or the full height of the page. If you set an element to 50%, then the element is located exactly in the middle of the width or height of the page.
An element is positioned on a page in relation to the borders of the parent element — the element that encompasses or surrounds another element. When you add elements of text, icon, title, image, etc. then the parent elelment is the section of the page. If you are grouping elements or adding a form, then the parent element will not be a section, but a group and a form. There will be several elements inside the group and several elements inside the form (title, text fields, button).
You can select the individual elements in a group by pressing the left mouse button to change the elements inside the parent element. You can move them, move them from the parent to another place, copy and delete them. If the parent element is not selected, then the entire group of elements (e.g. entire form) will be moved.