Site Studio
Using the layout canvas preview
The Layout canvas includes a preview feature. You can use this to see what a layout will look like on the website. The Layout canvas preview allows you to see the layout at different responsive breakpoints, at different widths, against different background colors and with responsive grid guides overlaid.
To access the Layout canvas preview:
A component or template maybe designed to display at a width less than the full width of the website. In this case, you can set the width of the preview so that it is more representative of the intended output width.
To set the width of the preview:
You can set the preview to show the layout at 'Actual size' or Auto fit in the available space. This is useful if you are using the preview on a device with a screen that is smaller than the actual size of the component or template.
To set the scale of the preview:
You can preview your layout at each of the responsive breakpoints set in the Responsive grid.
To view the layout at different breakpoints:
You can turn on guides to display how the layout aligns with the responsive grid columns.
To turn on the guides:
A component or template maybe design to display on a background color that is different from white.
To set the preview background color:
The preview will use the content added to the elements within the layout.
When a Component field token or Drupal token is added to an Element field, the preview will use the content added to the field while it is not in variable mode. The token will be displayed below the field as a yellow highlight. The field will turn pale yellow to indicate that the content is for preview purposes only.
When creating components, if no content has been added to the element fields, the preview will use the content set as Default content within the component form fields. This is useful for managing both default content and preview content from the same place.
You can set an element to be hidden if a specific token has no data within it. For more information, see Hide element if no data. When using 'Hide if no data' the preview will not show the element as it is unaware that there is any data available.
To ensure elements are displayed within the preview when 'Hide if no data' is applied:
When creating Master templates and Content templates and using Drupal fields or Regions within them, the preview has no element or data to show. For this reason, a placeholder is added to the preview to show where the field will render. This is represented by a light blue box.
The field within your template may render a small element or a large element. For this reason, you can set the size of the placeholder to be more representative of the rendered output of the field. To set the placeholder size, click and drag the handle at the base of the placeholder.
If this content did not answer your questions, try searching or contacting our support team for further assistance.
A component or template maybe designed to display at a width less than the full width of the website. In this case, you can set the width of the preview so that it is more representative of the intended output width.
To set the width of the preview:
You can set the preview to show the layout at 'Actual size' or Auto fit in the available space. This is useful if you are using the preview on a device with a screen that is smaller than the actual size of the component or template.
To set the scale of the preview:
You can preview your layout at each of the responsive breakpoints set in the Responsive grid.
To view the layout at different breakpoints:
You can turn on guides to display how the layout aligns with the responsive grid columns.
To turn on the guides:
A component or template maybe design to display on a background color that is different from white.
To set the preview background color:
The preview will use the content added to the elements within the layout.
When a Component field token or Drupal token is added to an Element field, the preview will use the content added to the field while it is not in variable mode. The token will be displayed below the field as a yellow highlight. The field will turn pale yellow to indicate that the content is for preview purposes only.
When creating components, if no content has been added to the element fields, the preview will use the content set as Default content within the component form fields. This is useful for managing both default content and preview content from the same place.
You can set an element to be hidden if a specific token has no data within it. For more information, see Hide element if no data. When using 'Hide if no data' the preview will not show the element as it is unaware that there is any data available.
To ensure elements are displayed within the preview when 'Hide if no data' is applied:
When creating Master templates and Content templates and using Drupal fields or Regions within them, the preview has no element or data to show. For this reason, a placeholder is added to the preview to show where the field will render. This is represented by a light blue box.
The field within your template may render a small element or a large element. For this reason, you can set the size of the placeholder to be more representative of the rendered output of the field. To set the placeholder size, click and drag the handle at the base of the placeholder.
If this content did not answer your questions, try searching or contacting our support team for further assistance.
Site Studio