Watch a Video
Use the Add content button (or press [Ctrl]+[Enter] / [Cmd]+[Enter]) in your menu bar to open the content panel:
From here you can add three types of elements by dragging them onto your website (or double-clicking to add them after the currently selected element):
- Presets are pre-built website modules providing a container with elements and customizable styling like a complete website header or detail sections. We recommend to work as much as possible with presets as it saves you a lot of time building your website.
- Elements are basic parts of your website, like headlines, images and texts, but also galleries, contact forms and many more.
Form-elements can only be placed inside a form container (which can be found in Elements) and lets you build custom contact forms
To move elements or containers, just drag&drop them to a different position on your website.
Advanced users will use the keyboard to move elements around by using the arrow keys to navigate through elements. By holding the [Ctrl] or [Cmd] key you can use the arrow keys to move elements around. By holding [Ctrl]+[Shift] you move elements on the same hierarchy level.
Use doubleclick, the contextmenu or press [Enter] on a selected element to open an element in its edit mode.
Selected elements can be removed by pressing the [Del] key or using the context menu.
"Responsive" means that the design adapts depending on the device it is viewed on and the size of its display, so that the website displays the content in the best way possible. Sitejet offers you several options: First, we always recommend using presets for as many things as possible. On the other hand, you can adjust information on colors, heights, widths, positioning, etc. for the respective view (desktop, tablet, mobile).
To do this, use the three device icons (representing the desktop, tablet, and smartphone viewports) at the top of the CMS to switch to the desired view and change the corresponding value for that view specifically. In the following example, the upper margin of a preset container is adjusted for tablets and smartphones so that it is a little further away from the header area. To do this, proceed as follows:
- Switch to the tablet view by clicking the tablet icon at the top of the CMS
- Switch to the "Style" tab, and then from there to the "Element" tab
- In the "Spacing" section, click "Custom" next to "Margin", and type "2" for "rem" in the upper field, for example
Changes in other device views always apply automatically to all smaller devices: All settings that you make in the desktop view apply to all device types unless they are overwritten by preset settings. If you change settings for the tablet view, the settings are also applied to mobile devices, but not to desktop devices.
You will notice that after adjusting the top margin, as in the above example, the color of the settings label has changed from white to "blue" - according to the color of the tablet icon. So, you can see at any time which device types a specification applies to.