Widgets have an Origin selector, an advanced but important feature for creating pixel perfect designs.
Changing the origin of an element can be useful when:
- Adding content to a section with percentage height
- When pinning elements to your screen
- For quick alignment of content for different device modes
- To make sure content is positioned correctly on a background image
This is demonstrated through the examples below.
When adding content to the container area of a section with pixel height, there is usually no need to change an elements origin settings, stick to the default setting (origin in top left corner).
Example 1: Adding content to a section with percentage height
A section with 100% height will always adjust to fill the entire browser window and therefore has a variable height.
When adding content to percentage height sections, the content will still have a constant position. In this example the header textbox has default origin settings, and is positioned 704px from the top on a 100% long section:
If the viewer opens this site with a browser window shorter than 704px, the header will end up in the next section, as it is still positioned 704px from the origin:
To avoid this, use the origin editor to connect the header text box to the bottom of the section.
- Select the text box
- click on the bottom middle square in the origin selector
The header will now be positioned correctly on smaller browsers, as its position follows the bottom of the section:
Example 2: Changing origin on pinned elements
In this example, I want my company logo in the top right corner of my site, and I want it to follow along as I scroll down my page.
- Add icon or image to your top section
- Select the Logo and click the "Pin Position" button
- Position the logo in the top right corner
If I preview my site now in the full-screen mode (Shortcut: "P" for preview, "4" for full-screen preview), the logo is not positioned as I like.
This is because the logos positon is 1011px from the top left corner because of the default origin setting (top left corner), and section width is always variable to screen sizes.
To fix this, simply switch the origin to the corner closest to where you want to position your content. In this case in the top right corner:
This logo has built-in margins so I can position it right in the corner, where it now will stay on all screen sizes.
Example 3: Changing origin for quick alignment of content for different device modes
When positioning content such as the header and logo in the example above, the position is automatically more precise on tablet and mobile. This saves you time when adapting your site to tablet and mobile.