Browser

How to add and style browser mockups.

What is A Browser part?

A Browser part shows a box that looks like a browser window.

The Browser (parent) part contains two child parts. The top part is the browser toolbar, and the bottom part is a container that will house the content you want to show in the browser window.

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

Example Browser Mockups

Editing the Browser Part

Adding Content to the Browser Container

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.

Adding Content to the Browser Container

Changing the URL

To change the browser URL placeholder, go to the browser toolbar and select the text input, shown below. This will open the text input editor in the right menu. Go to Placeholder > Value Set, and edit the value to reflect a new URL.

Changing the Placeholder URL in the Browser

Changing Colors of the Browser Parts

To change the color of the browser toolbar, select the browser part. Go to Colors, then change the background color to your preferred color. This will change the color of both the toolbar 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 browser 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