The H Box can be found within the containers menu:

The H Box arranges objects in a single horizontal row. If the H Box has a frame and/or padding, then the contents are arranged within these inserts.

Since the H Box is a container, you can drag and drop all the controls into it. The individual elements are automatically placed in the horizontal direction.

This can be used, for example, to create a navigation bar for a website.

In the Anchor Pane Contraints menu at the bottom right of your screen, you will find options for positioning. Using that feature, you can locate the exact position of an object on the website you are creating.

Enter a 0 for Top, Left and Right. By doing so, the H Box gets attached to the top of the page, completely filling the space up to the left and right side margins.

The object will remain there permanently, even if you change the size of the page. Thus, the navigation bar has a fixed position.

In the H Box menu, you can set the distance that all objects in the H Box have in relation to each other. The distance here, for example, is 5 pixels.

If you want the elements in the H box to all be centered, you can go to the Display Settings menu and change the desired position by choosing the desired Content Alignment.

The V Box can be found within the containers menu:

The V Box arranges its objects in a single horizontal row. If the H Box has a frame and/or padding, then the contents are arranged within these inserts.

Since the V Box is a container, you can drag and drop all the controls into it. The individual elements are automatically placed in a horizontal direction.

For example, with the V Box you can design a text section for a landing area.

In the Anchor Pane Contraints Menu at the bottom right you will find options for positioning. Using that function you can affix the exact position of an object on the website.

In the V Box menu, you can set the distance that all objects in the H Box have in relation to each other. The distance here, for example, is 5 pixels.

If you want the elements in the V Box to be arranged in the center, for example. you go to the Display Setting menu and change the desired position in Content Alignment.

The grid pane can be found with the containers

GridPane places its elements (controls/layouts) within a flexible grid of rows and columns. When a border and/or padding is set, the content is placed within these insets.

An element can be placed anywhere within the grid and can span multiple rows/columns.

With the grid pane, it is possible, for example, to create scroll bare image galleries or to place images in a landing area in different arrangements, sizes, and angles. But also, when you create a login screen, you can also use a Grid Pane to specify exactly in which column/row and in which distance the elements should be.

Example projects

Mobile Image gallery

Formula example in a grid pane

Gridpane menu

H Gap: Specifies the horizontal distance between the elements

V Gap: Specifies the vertical distance between elements

Grid pane Constrainst menu

- Row Index: column where the child's layout part starts.

- Column Index: row where the child's layout part begins.

- Row Span: the number of columns over which the child's layout area spans horizontally.

- Column Span: the number of rows over which the child's layout area extends vertically.

- Halignment: the horizontal alignment of the elements within its layout area.

- Valignment: the vertical alignment of the elements within its layout area.

- Hgrow: The horizontal growth has priority for the element.

- Vgrow: The vertical growth has priority for the element.

- Margin: Margin area around the outside of the elements.

The scroll pane can be found in the container menu

A scroll pane that provides a scrolled, clipped viewport of its contents. It allows the user to scroll the content around either directly (panning) or by using scroll bars. The ScrollPane allows specification of the scroll bar policy, which determines when scroll bars are displayed: always, never, or only when they are needed. The scroll bar policy can be specified independently for the horizontal and vertical scroll bars.

Fit to Width

If enabled and if the contained node is Resizable, then the node will be kept resized to match the width of the ScrollPane's viewport.

Fit to Height

If enabled and if the contained node is a Resizable, then the node will be kept resized to match the height of the ScrollPane's viewport.

Pannable

Specifies whether the user should be able to pan the viewport by using the mouse.

HBar Policy

Specifies the policy for showing the horizontal scroll bar.

VBar Policy

Specifies the policy for showing the vertical scroll bar.

Hmin

The minimum allowable hvalue for this ScrollPane.

Vmin

The minimum allowable vvalue for this ScrollPane.

Hvalue

The current horizontal scroll position of the ScrollPane.

Vvalue

The current vertical scroll position of the ScrollPane.

Hmax

The maximum allowable hvalue for this ScrollPane.

Vmax

The maximum allowable vvalue for this ScrollPane.

Min Viewport Width

Specify the minimum width of the ScrollPane Viewport.

Min Viewport Height

Specify the minimum height of the ScrollPane Viewport.

Pref Viewport Width

Specify the preferred width of the ScrollPane Viewport

Pref Viewport Height

Specify the preferred height of the ScrollPane Viewport.

You can find the button in the Layout menu.

First, we drag and drop a Button onto the page.

In the properties panel, you will find menus that are only available for the button. This is the link menu and the add icon menu.

In the link menu, it is possible to link other pages that have been created in PixelFree Studio. So it is now possible that the user can create 20 pages in PFS and link them directly.

In the add icon menu it is possible to assign icons to a button.

- File Path: Location of the icon on the computer.

Grapic Text Gap: Specifies how big the gap between graphic and text is. Here it is 10 pixels.

- Content Display: Specifies where the graphic should be located.

- Icon Width: Width of the icon

- Icon Height: height of the icon.

Background menu.

With Button it is possible to set a background image in the same way as with all other contols and layouts.

This can be used for example if you want to have an image as a link or if you want to have a logo in the navigation bar and link it to the home page so that the user always comes back.

Border menu

It is also possible to add a border to the button. For this you have to go to the Border menu.

You can create a basic border or create your own. You can read about how to do this in the Border documentation.

In the display settings it is also possible to change the cursor when hovering over it. This way you have the possibility to show the user that he is currently performing a click event on a button, for example.

Display Setting menu

With the Password Field element, you can easily create password fields that can be manually filled in. You can use this feature to create login forms. A backend developer can then intercept the values in the fields.

The Password field can be found in the Control menu.

The Password Field behaves like a text input field. The only difference is that you can't see the text, which is hidden with dots.

Text input field

The Properties Panel is located on the right side of the screen. The Properties Panel is one of the core elements of PixelFree Studio. It is used to design all controls and layouts.

The Properties Panel constantly adapts automatically to the corresponding control/layout element because each element has unique design flexibility.

Text Settings

You can use this feature to adjust the text of all elements by making adjustments in the text properties within the text settings (as noted below).

Display Text: Sets the text that will be displayed

Font Family: Sets the font family. PixelFree Studio recognizes which fonts are installed on your computer and displays them in the selection folder. So, if you want a specific font that is not one of the suggested ones, you can install the corresponding font from your computer.

Text Color: Sets the text color

Font Weight: Sets the font weight to Bold, Extra Bold, Extra Light, Light, Medium, Normal, Semi-Bold, and Thin

Font Size: Sets the font size

Text Alignment: Defines the orientation of the text. If you want a single word to be aligned to the left, for example, you must go to the Display Settings and select "Center-Left" for Content Alignment. But for a Label, for example, Wrap Text must be enabled to generate multiple lines.

Styling: Offers the possibility of defining if the text should be italic or underlined.

Overflow

The text-overflow CSS property sets how hidden overflow content is signaled to users. It can be clipped, display an ellipsis ('…'), or display as a custom string.

Clip:

The default for this property. This keyword value will truncate the text at the limit of the content area. Therefore, truncation can happen in the middle of a character. To clip at the transition between characters, you can specify text-overflow as an empty string if that is supported in your target browsers: text-overflow.

Ellipse:

This keyword value will display an ellipsis ('…', U+2026 HORIZONTAL ELLIPSIS) to represent clipped text. The ellipsis is displayed inside the content area, decreasing the amount of text displayed. It gets cut if there is not enough space to display the ellipsis.

Ellipsis String: Specifies how the overflow should appear. The default value is always `...` but can also be changed to `***.`

Wrap Text:

This property breaks the long words and wraps them onto the following line. This property prevents overflow when an unbreakable string is too long to fit in the containing box. This property defines the breaks in the word to avoid overflow when a term is too long to do display in the container.

Size Settings:

Using the Size Settings menu, you both set the size of each element and its constraints.

Min Width/Min Height: Sets an element’s minimum width and height. An element can never be smaller than the entered values.

Pref Width/Pref Height: Sets an element’s preferred height and width.

Max Width/Max Height: Sets the main element’s maximum height and width. An element can never be larger than the entered values.

Constraints

Padding:

The default setting fort he Padding feature sets the padding area on all four sides of an element at once. This ensures that all four sides (top, bottom, left, and right) always change in sync. You can also manually apply different padding on each side. For this, you have to click on the padlock, to begin. When this is deactivated the value changes on one side at a time.

Margin:

The Margin default setting sets the margin area on all four sides of an element at once. This ensures that all four sides (top, bottom, left, and right) are changed proportionately.

The Margin con only be activated in the HBox and VBox containers.

You can manually set different margins for each side. For this, you have to click on the padlock. Once this is deactivated the value changes on one side at a time.

Transform Settings:

In the Transform menu, you have the option of activating additional sizing options.

Scale:

The default value is always 1. If you set the value to 2, then the size of the element at the x and y coordinates is doubled. With the value 3, the initial size is tripled, and so on.

Translate:

With Translate option, you can move the element very precisely at the x and y coordinates.

Rotate:

The Rotate option allows you to rotate your element with specificty..

Rotation Axis:

With the Rotation Axis, you define the axis at which the element should be rotated. The default value is always set to 1 on the Z axis. You have the ability to rotate all three axes at the same time.

Display Settings:

SVG String:

PixelFree enables you to create an element in the form of an SVG. For this, you only have to select the corresponding SVG and add it tot he stage.

Content Alignment:

With the Content Alignment options, you can define how elements are displayed in an HBox and VBox. Or, you can locate where the text should be placed within a button. The PixelFree design tool offers the following options:

- Baseline Center

- Baseline Left

- Baseline Right

- Bottom Center

- Bottom Left

- Bottom Right

- Center

- Center Left

- Center Right

- Top Center

- Top Left

- Top Right

Visible:

Allows you to make an element visible or invisible

Disabled:

Allows you to disable a button if it is not needed yet

Managed:

This function defines whether or not this element layout will be managed by its parent.

Pick On Bounds:

This feature defines how the picking computation is done for this element when triggered by a MouseEvent.

Focus Traversal:

Specifies whether this node should be a part of the focus traversal cycle.

Mouse Transparent:

When enabled, this element (with all its children) is entirely transparent to mouse events.

Opacity:

This feature provides the flexiblity to enable every level of opacity from full color to complete clarity.

Blend Modes:

This function enables blending of your content.

Cursor:

Allows you to select the shape of the mouse icon from a varied array of when hovering over the element.

Border Menu:

Using the Border Menu, you can create an individual border for each element. You can choose between a Base Border, a Custom Border, and an Image Border.

The rectangle above demonstrates which border the Broder options you can choose from. By default, the padlock is always activated, ensuring that all four borders are processed simultaneously. If you deactivate this feature, you can process each border individually

Base Borderstyle:

Border style:

This provides the option to choose which border you want to use. You can choose between Hidden, Solid, Dotted, and Dashed.

Yhe icon pictured above sets the border color.

In the images above, you can see an example of how a border might look.

Utlizing Width, you set the width of the border. The higher you set the Width, the larger the Border will be.

Utilizing Radius, you define how strong the curves of a border will be.

Utilizing Insets, you define how far the border should be from the edge of the element.

With the Custom Border option, you can create your own individualized borders.

Stroke Type:

The Stroke Type defines where the border is located. You have the following options: Centered, Inside, and Outside. The position of the border changes based on the values you use..

Line Join:

Line Join determines how the corners will appear, e.g., rounded or squared.

Dash Offset:

If the stroke used is a dashing pattern. The Stroke Dash Offset property specifies the offset into a dashing pattern. i.e., the dash phase defines the point in the dashing pattern that will correspond to the beginning of the stroke.

Line Cape:

Defines the shape of the border elements, whether they should abut, be rounded or squared.

Dash Array:

Sets the distance between each border element.

Image Border:

You can also add images as borders to the individual elements.

Image Path:

Select the image you want to have as a border

Image Repeat:

Specifies whether the image should be repeated and, if so, whether it should be repeated on the x or y-axis.

Filled:

Fills the entire element with the image.

Image Border Width:

This value sets the size of the border.

Image Insets:

This value specifies the distance between the image and the element’s border.

Background Settings:

PixelFree enables you to define a background for each element.

Background Color:

Sets the background color of the element.

Image Path:

Allows you to set an image as the background to an element.

Image Repeat:

Determines if the background image should be repeated. If yes, you can repeat the image on the x and y axis.

Image Fit:

You can define how the image will behave in the element utilizing Image Fit, using the image to fill the entire container.

Image Size:

Here, you can set the size of the background image. You can choose between pixel and resolution options for setting percentage values.

Radius:

This feature eanbles you to specify whether the background of an element should have rounded corners.

Insets:

Sets the distance of the background from the border of the element.

You can use the Radio Button and the Checkbox for various features on yoru website, such as creating an option for your user to accept Terms of Service.

Both the Radio Button and Checkbox can be found in the control menu.

Both elements behave in the exact same way. The only difference is the design.

PixelFree Studio allows you to design Radio Buttons and Checkboxes for individual use.

PixelFree Studio also supports the importing of SVGs into your project. When exporting your project, the SVGs get converted into the respective programming language you choose, provding both the image and native code fort he SVG in that particular computer language (i.e. HTML, CSS, Java, etc.)

PixelFree Studio allows you to design Radio Buttons and Checkboxes for individual use.

Preserve Ratio:

Allows you to preserve the media’s aspect ratio (width/height) when scaling it to fit the element.

Path:	Here you select the image you want to have in your project.
Viewport X/Y:	Specifies a rectangular viewport into the media frame.
Fit Width/Hight:	Sets the size of the video with the width and hight values.

Using Text Input feature, you can create text fields that can be filled in. This feature is highly useful for creating forms. A backend developer can then intercept the values input into the text field.

The Text Input option can be found in the Control menu.

The Text Input field can be edited just like all other elements with the basic settings from the properties panel. The Text Input field also has its own panel on the right hand side oft he screen.

Prompt Text:

Sets the prompt text.

Font Style:

Sets the font you desire

Editable:

When this field is checked, the user can enter textdirectly into your form

You will find the paragraph in the control menu.

Paragraphs are for projects requiring adding much text to a website section.

It is possible to change the paragraph's background in the properties panel's background menu.

When the paragraph has been selected with a double click, you can see in the top bar that the text editor options are activated. With these options, you can edit the paragraph as you like.

In PixelFree Studio it is also possible to add images as a control element.

The image component can be found in the control menu. By default, images are always loaded with their full size.

Preserve Ratio:

Whether to preserve the media’s aspect ratio (width/height) when scaling it to fit the Element.

Path:	Here you select the image you want to have in your project.
Viewport X/Y:	Specifies a rectangular viewport into the media frame.
Fit Width/Hight:	Sets the size of the video with the width and hight values.

PixelFree allows you to simply add videos directly into your project.

The Video component can be found in the Control Menu.

Preserve Ratio:

Allows you to preserve the media’s aspect ratio (width/height) when scaling it to fit the Element.

Smooth:

	When set to activated, a better quality filtering algorithm will within the bounding box provided by fit width and fit heigh
Path:	Here you select the image you want to have in your project.
Viewport X/Y:	Specifies a rectangular viewport into the media frame.
Fit Width/Hight:	Sets the size of the video with the width and hight values.

Prompt Text:

PixelFree Studio also supports the use of SVG. When exporting, these are generated in the respective programming language.

Preserve Ratio:

Whether to preserve the media’s aspect ratio (width/height) when scaling it to fit the Element.

Path:	Here you select the image you want to have in your project.
Viewport X/Y:	Specifies a rectangular viewport into the media frame.
Fit Width/Hight:	Sets the size of the video with the width and hight values.

We will convert this landing page using smart divisons for mobile applications.

Basic structure

There is a combo box hidden in the navigation bar.

To make them visible, we need to select them and in the display settings put the hook in visible.

So we can see the combo box. We need the combo box so that we later have a menu guide on a mobile screen.

When the dropdown is selected we can add more list elements in the properties panel and also link them to other pages. These pages can be created in our software or be links to other websites.

But on the regular screen, we don't need a dropdown as a menu guide so that we can hide the dropdown again in the Display Setting Menu.

This is the basic structure we have.

Enable Smart Divisons

The Smart divisions can be found at the top of the Properties panel.

With add we add another smart division.

You can change the name of the Smart division as you wish. Here we keep the default name.

In the field next to the W we can specify from which width the smart division should take effect. Here in our example it is from the width of 350px.

In the design protoyper, we now see a dashed line indicating where the Smart Division is located.

Now we select the created Smart Division in the Smart Division menu. We now also see that the line is no longer dashed but drawn through. This indicates which Smart Division you are currently in.

After that we go to the property panel and change the visibility of the buttons in the display menu.

In the Smart Division menu, the Auto Snap checkbox is now set. This ensures that you also see how the selected Smart Division looks on smart phones.

It is now possible to build your components of individual websites in our Design Prototyper and then use them at any time in the current project or another.

To add a group to the library, select the group. In our example, it is the navbar.

There are two ways to add a new group to the library.

- With control + g on windows or command + g on mac

- right-click in the group and use the context menu.

In both cases, the following window opens:

Here it is possible to select what should be in the group and change the name.

The group appears in the Library menu if you press the Save button.

Now it is possible to drag and drop the navbar onto the canvas on another page with the same settings.

All groups in the library are stored in the Library folder above the actual project.

You can now use them for other projects or send them to someone else to use.

The only thing he has to do is put the library folder over the project folder.