Skip to content
- PixelDraft is a Front End Website Builder based on WordPress
- It allows you to drag and drop various elements to the Preview Canvas.
- By clicking on a canvas element you open the “Elements Panel” which allows you to edit the element.
- Element Options are grouped in 3 Tabs: General, Style and Behavior. They contain 2 type of settings:
- Settings that change the HTML structure of the element: eg: a button text label, a heading, a category to display
- Settings that change the CSS of the element: eg: colors, font styles, dimensions, positions etc
- When a setting is changed a small dot indicator is shown beside that allows to instantly grasp what edits have been made
- Style Settings can be set for various Screen Sizes (by default: Desktop, Tablet and Mobile) as well as for various Mouse States (Default, Hover and Click).
- Changing the screen size and mouse state can be done by clicking the Screen and Mouse icon at the bottom bar of the Main Panel.
- Style Settings are inherited from large to small screen sizes: eg: if you set a container background color for Tablet it will also be passed down to the Mobile Screen Size, however the Desktop background color will be un affected.
- Style Settings are also inherited for mouse states: The click Mouse state will inherit from Hover which in turn will inherit style settings from the default state.
- Non CSS Settings do not have such variations. A Text Label for example will always contain the same text, no matter the screen size or mouse state.
- To create a proper site layout the most flexible tool is the container element which uses modern CSS Flexbox to align elements within
- The easiest tools for beginners when it comes to layouting is the Column element which is very similar to the container but removes some options and sets other presets in order to speed up the building process.