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
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.
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 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
Last updated
Was this helpful?