Window

How to add and style window mockups.

What is A Window part?

A Window part shows a box that looks like an operating system window.

Within the window is a container that will house the content you want to display in the window.

Location in the Parts Library: Base Parts > Mockups > Window

Example Window Mockups

Editing the Window Part

Adding Content to the Window

Select the container within the window.

The container is a versatile part. You can add most other parts here to create what you want to display in the container. For example, you can add rows, columns, images, cards, text, chats - anything that you'd like to display in your browser mockup, including any of the pre-built sections in the parts library.

Adding parts will adjust the container size accordingly.

Changing Colors of the Window Parts

To change the color of the top navigation in the window, select the window part. Go to Colors, then change the background color to your preferred color. This will change the color of both the top navigation and the container underneath.

To change the color of the container underneath, select the container part, and then change the background and foreground colors as needed.

To change the color of the three dots next to the URL, select the browser toolbar. Go to Colors, then change the foreground color to your preferred color. The resulting color will be a paler version of what you selected.

Borders Around the Browser Parts

Borders can be set around the window part, and around the container by selecting the relevant part and editing the border property in the right menu.

Related Information

Text

Customizing and formatting