Organizing the Widget editor workspace

There are various ways of organizing the Widget editor workspace to suit your needs:

  • Adjust the size of HTML and CSS editor panels. You can adjust the relative heights of the editor panels by dragging the boundary between the two panels. You can also drag the right-hand boundary to increase the width of the panels , which is useful if the HTML or CSS consists of long lines. This reduces the width of the preview panel. You can, of course, increase the width of the preview panel by dragging the boundary left. You might want to decrease the width of the editor panels and maintain the width of the Preview panel if you are looking at the available components to add
  • Toggle parts of the Widget editor on and off. The bottom bar contains a number of switches that turn various elements of the workspace on and off. For example, if you are not working with CSS in the widget you are editing, you might want to toggle the CSS editor off temporarily.
  • Resize the widget preview. There is a resize drag handle at the bottom-right corner of the preview panel. It changes the width and height of the widget rather than the preview panel. This is useful for testing the responsiveness of your widget, for example.