It offers a fast way of selecting and reordering elements and, for example, toggling the visibility of hidden elements. The top part gives a tree like overview of all elements on the page. Enter a page title, description, keywords, or insert content into the head and footer sections. Here you can set meta data for search engine optimization. The second part contains all the inputs, tools and controls to control the design of the element, subdivided into sections such as Typography, Dimensions and so on. For example, Foundation or Bootstrap classes can be ‘filtered up’ from a predefined list, custom classes can be added or URLs specified.
The top part is used to configure the HTML / content part of the element. Out of the five panes, the Design pane is probably the most frequented one. Symbols are elements such as a buy button, or components such as a footer, that are being kept in sync across all places and pages of the project. Symbols are accessible through the Content pane. This subpane gives access to all prebuilt components like navigations, cards, and modals that are included in the project. Elements like headings, paragraphs, buttons, images and videos (and a whole bunch more) can be inserted into any column on the canvas.Īlso on the Content pane are the project Components. Here you can add rows, columns (which hold the actual content elements) and specify, for example, the width of a column and adjust it for different display widths. This pane includes the controls for working with the grid. The pane on the most left is the Layout pane. Here’s an overview of each of the panes, details on each pane are provided in the next sections. The icon is replaced by the pane name upon hover.
On the right side of the UI, there are 5 panes each with a specific role in creating the responsive design.
0 kommentar(er)
