zesty.io

Product

Use Cases

Integrations

Learn

Canvas Configuration Settings

This guide helps users to effectively preview and test various design elements, including CSS and JavaScript, within the Canvas of Freestyle.

Accessing Canvas Configuration Settings

#

Find the configuration settings by clicking on 'File' and then selecting 'Global Settings'. This area is dedicated to the design canvas in Freestyle.

Primary Purposes of Canvas Configuration

#

1. Include Site.css

When you choose to include Site.css, this action integrates the Site.css file into the iframe of the visual layout. This integration means that the CSS rules defined in Site.css will be applied across all HTML elements within the canvas.

2. Add Stylesheets

This setting allows you to add custom CSS stylesheets to your project. When you apply these styles, they will be reflected on the canvas, enabling you to preview how your CSS changes will appear in the final design. It's important to understand that these changes are primarily for visualization purposes within the canvas. They help you anticipate how styles will look on the actual webpage, but this setting does not directly alter the CSS of the actual webpage itself. Also, when you use classes from these stylesheets, these class names will be included in the JSON output.

3. Include Site.js

Including Site.js means embedding the JavaScript file within the iframe of the visual layout. This embedding allows the JavaScript code within Site.js to interact with and modify the behavior and interactive elements within the canvas.

4. Add Scripts

When you add JavaScript files using this setting, it allows you to incorporate custom scripts into the canvas. This is particularly useful for testing and visualizing how interactive elements or scripts will affect the layout or behavior within the canvas. However, this integration is limited to the canvas and does not directly influence the behavior of the actual webpage.

Example

Canvas Settings

Connect with Content Experts

Book a free 15-minute consultation with a content expert. Discuss your application, pain points and requirements. Understand how Zesty's lower total cost of ownership, features, functionality can elevate your business by creating extraordinary digital experiences.

Trusted By

zesty customer logo Sonyzesty customer logo Rocket Leaguezesty customer logo Singlifezesty customer logo Acornszesty customer logo Phoenix Sunszesty customer logo Wattpadzesty customer logo Corner Shopzesty customer logo Bjs

Enter your details to connect with a Content Expert

First Name

Last Name

Email

Phone (optional)

Company

Please tell us about your project (optional)

G2 MOMENTUM LEADER

zesty customer logo zesty customer logo zesty customer logo zesty customer logo