- The PixelDraft Editor is split up into two main areas:
- Main Editor Panel – the left panel that contains all the options and settings for a page
- Canvas or Preview Area – the large area that shows a preview of the website you are building
- Element – A single simple element on your canvas.
- Element Settings – Visible in the main panel once you click on an element that has been added to your preview area. The editor uses 2 setting types:
- Style Settings: They change the look of your element. You can set style variations for different screen sizes (by default Desktop, Tablet, Mobile) and element mouse states (“Default”, mouse hover, mouse click) eg: Background Color, Color, Box Shadow, etc
- Content Settings: They change the HTML structure of an Element. Those settings do not have variations for different screen sizes or mouse states. To prevent confusion they are locked when you any other than the default screen size or mouse state. eg: Button Text, Headline, Textblock content, etc
- Templates: A reusable group of elements (usually a whole section like header or footer). Changing a template modifies all instances on all pages. We therefore sometimes refer to them as global templates as well.
- Element Group: A reusable group of elements that can be changed once it has been dragged onto the canvas. Changing a Element Group does not affect other instances of an element group.
- Font Stack: A group of settings that define 5 different font styles that can be used across your website. A Font Stack consists of 5 different font styles: 2 for headings, 2 for content text and one for meta information.
- Color Scheme: A color scheme for your site that by default has 8 different colors
- Element Style Pack: Predefined settings for all of the elements the editor supports.