What are elements?
Using elements and presets, Sitejet lets you create beautiful websites quickly and easily without the need for additional code. Elements provide individual objects with which you can build websites, such as icons, sliders, or the like. Presets combine elements and extend them with additional design options. In this article, we will explain how elements are used.
Table of contents
Elements are the "smallest unit" in Sitejet. They are like building blocks and used to provide basic functions. Presets make things even more convenient. We recommend always looking for a preset first when building a site design. We will show you how to work with presets in our help article on presets.
Sitejet also provides a wide range of website templates. Create a new project and choose a template that you like. Then edit that project, move elements, change colors, and familiarize yourself with the Sitejet interface and how elements and presets work.
To edit an element, double-click on it with the left mouse button or press [Enter] if it is already selected. You can use the arrow keys to jump between elements.
If you double-click an element, not only can you edit the content, but the settings will also open in the panel on the left side of the CMS. Each element has its own tab where you can adjust the settings for that element and the "Style" tab.
To add an element, follow the steps below:
- Move your mouse over the "+ Add content" menu item
- Click "Element" in the drop-down menu
On the left side, the content panel will open to the "Elements" tab. Here is where you can select the desired element and insert it below the currently selected element by pressing the [Enter] key. You can also drag the element to the desired position by holding down the left mouse button. Pay attention to the orange line that shows where the element will be inserted when you release the mouse button.
Sitejet offers several ways to move elements using shortcuts and hierarchy handling. For example, if you use the key combination [Ctrl] + [up arrow], you can move the element upwards. With [Ctrl] + [down arrow] you can move the element downwards accordingly.
Using hierarchy handling, you can move elements by clicking on the label with the left mouse button, holding down the mouse button and then dragging the element to the desired position by moving the mouse. Again, you'll want to pay attention to the orange line as an indicator of where the element will land when it is dropped.
In the Style tab, you can set basic design preferences. These settings are the same for all elements. In addition, the Style tab allows you to switch to the preset settings if the element is located in a preset container. For more information, please refer to the help article on presets.
In the visibility section, you can specify on which devices ("Mobile", "Tablet" and "Desktop") the currently selected element should be displayed.
Additionally, you can reduce the opacity and work with transparency. Furthermore, you can specify with "overflow" whether content that exceeds the element's boundaries should still be displayed. The arrows next to the overflow settings determine whether scroll bars should be displayed at the bottom, to the right, or automatically depending on the window size.
Layout (Flexbox Item)
Sitejet organizes elements according to the "Flexbox" principle. The main axis ("next to each other" or "below each other") is defined for the parent container and further arrangement specifications are made. This always defines how elements are to be arranged and there are no "nasty surprises" that could occur when "moving by hand": The design is always predictable and fixed on all devices, all display resolutions, and all circumstances.
For this purpose, the "Flexbox-Item" settings specify how the element should behave within the parent container:
- The "Basis" specifies how large the element should be on the main axis in relation to the parent container
- With "Grow" you can specify whether the element may also grow if more space is available
- "Shrink" defines up to how much the element may shrink to free up more space
Without gaps, websites quickly appear very "stuffed". In the "Spacing" section, you can define inner spacing (also called "padding") and outer spacing (also called "margin"). Here you have the option of specifying the value for the top, bottom, left, and right.
Frames offer an interesting way to highlight certain elements or simply separate them from the rest of the content. In Sitejet, you can set different values for all four sides of the element, similar to the spacing, or use the middle field to set the same value for all of them.
You can also specify a color for the border.
In the "Style" field you can specify whether the frame should be a "solid", "dashed", "dotted" or "double" line.
If you want to give the element rounded corners, enter the radius of the rounded corners in the "Radius" field. By clicking on "Custom" you can enter your own values for all corners. For example, you can specify that only the upper left and lower right corners are rounded—there are no limits to your imagination.
Shading creates an impression of depth. Elements can be "raised" or "lowered" to bring them more into focus:
- "Outside" is the typical use case for shading, where a shadow is cast around the element on the elements "behind" it
- "Inside" means that the other elements around the currently selected element cast a shadow on the selected element
After selecting an option at the top, you can then use the corresponding fields to adjust the color of the shadow, its orientation, and the blur of the shadow and spread.
In the "Positioning" section, you specify the positioning of the element on the website:
- With "Static" positioning, the element is always displayed exactly where it was placed in the editor
- "Relative" elements serve as "anchor points" for other subordinate elements, which are thus "in" the relative element; this positioning is important for container elements; the "Z-Index" is also specified here, which defines the position on the Z-axis (from the screen)
- Elements with "Absolute" positioning are positioned relative to the next higher-level element, which has a "relative" positioning; a Z-index can also be specified here
- "Fixed" elements are relative to the browser window: This way you can ensure that the element is always displayed at the same position in the browser window - no matter whether the website visitor scrolls up or down
- "Sticky" ensures that an element is "fixed" at a position relative to the top of the screen after the website visitor scrolls past
With Transform, the appearance of the element can be further changed. There are 4 options available:
- With "Translate", you move the element on the website without moving or otherwise affecting the remaining elements
- "Scale" changes the size of the element by a percentage factor
- "Rotate" rotates the element by the angle you specify
- "Skew" distorts the element on the X- and Y-axis, making the element itself skewed
ID & class
In the "ID & class" section, you assign IDs that may be necessary when dealing with links and CSS. You also assign classes to an element here. You can find out more about IDs as well as classes in our article on custom code.
With Sitejet, you can easily assign different animations to each element. You have a wide range of animations to choose from. We explain more about these animations and their setting options in our help article on animations.
In the "Scheduling" section, you can specify a start and/or end date for each item, after which the item should either be displayed or no longer displayed respectively.
In the "Other" section, you specify the minimum and the maximum number of elements. This is interesting when working with your customers if you release certain sections or elements for them to be able to edit. The minimum and the maximum number of elements define how often an element may be duplicated or removed by your customers, e.g. in order not to disrupt a design.
The original element is interesting when an element is duplicated. It is automatically filled with the ID of the original element when duplicating so that it can be traced from which element the current element originally came.
As mentioned earlier, you access the preset settings from any element within a preset. To do this, click on "Preset" in the "Style" tab.
In the example above, clicking on "Preset" will display the preset settings of the "About with Image" preset, since the currently selected text element is part of the "About with Image" preset:
Hierarchy handling offers you additional functions besides the "Move" feature described above. Most importantly, it provides an intuitive overview of all nested elements, so that you can quickly and easily see which containers and presets a respective element is in and get an impression of the structure of the website.
Each label consists of a matching, unique icon for the respective element, so you can see at a glance which element it is. The element over which your mouse pointer is currently positioned also has the name of the element in the label. You will also find icons for the context menu (gear icon), which you can also open by right-clicking on the element, for duplicating the element (copy icon), for moving the element up and down or left and right (just drag and drop the label itself), for opening the preset settings (puzzle piece icon) and for opening the animation settings (star icon). The star icon also helps you quickly see if an animation has been set for an element.
"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.
Become a part of our Community!
Exchange ideas with other web designers about current developments, tips, and tricks and show your favorite sites. Get advice and talk to us about possible features you would like to see on Sitejet. You can join the Sitejetters community here.