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 the website editor. They are like building blocks and are used to provide basic functions like texts, headlines, buttons, etc. We recommend looking for a preset first since presets are pre-built website sections that consist of different elements with pre-defined style options. We will show you how to work with presets in our help article on presets.
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.
When you double-click on an element, you cannot only edit the element's content but can also adjust the settings that will open in the panel on the left side of the CMS. Each element has its own tab - indicated by its name, in our example, that's "Headline" - where you can make element-specific adjustments. All elements also have a "Style" tab where you will find universal settings for all elements.
To add an element, simply click on the category "Elements" in the content sidebar on the left:
Next to the content sidebar, the "Add content" panel will appear. Here you can select your desired element and place it to the preferred position on the website by using drag and drop. A green line will indicate where the element will be added.
If you already selected an element in the website you can also add an element from the panel with one simple left-click on your mouse. If you want to add multiple elements at once press the Ctrl key while selecting all elements. If you drag and drop them into the website they will be added in the same order as you click on them. You can also add elements by using our integrated shortcuts. E.g. with Ctrl + 2 (or Cmd + 2) you can add a text element. For an overview of all shortcuts press Ctrl + K (or Cmd + K).
You have different options to move elements on the website. You can use shortcuts or make use of the 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 green line as an indicator of where the element will land when it is dropped. If you want to place an element between two containers press Ctrl.
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.
Layout (Flexbox Item)
The website editor 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
- If you have multiple elements next to each other and switch to e.g. the mobile view those elements will be displayed below each other. With "Order" you can decide in which position an element should be displayed without changing the original structure of the elements.
In the Visible section, you can decide if an element should be displayed or not. You can adjust this setting depending on the device by selecting desktop, tablet, and mobile in the top navigation and adjusting the settings accordingly.
Additionally, you can reduce the opacity and work with transparency. Furthermore, you can specify with "overflow" whether the 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.
Under Spacing, you can define the padding (aka. inner spacing) and margin (aka. outer spacing) for an element. Here you have the option of specifying the values for the top, bottom, left, and right sides. Or you can enter the same value for all sides by using the input field next to the label.
Frames offer an interesting way to highlight certain elements or separate them from the rest of the content.
Under Style, you can specify whether the frame should be a "solid", "dashed", "dotted" or "double" line. Furthermore, you can set different values for the width of the border for all four sides of the element, similar to the spacing, or use the input field next to the label to set the same value for all of them. You can also specify a color for the border.
If you want to have rounded corners, enter your preferred values - either for each corner or for all corners by using the input field next to the label.
Shading creates an impression of depth. Elements can be "raised" or "lowered" to bring them more into focus. You can choose between:
- "Outside" - this is the typical use case for shading, where a shadow is cast around the element on the elements "behind" it
- "Inside" - this 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.
You can also manage your preferences for a text shadow.
Under Positioning, you can 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 four 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.
Under Schedule, you can specify a start and/or end date for each item, after which the item should either be displayed or disappear.
Under "Miscellaneous", you specify the minimum and the maximum number of elements. This is interesting when working if you allow your customer to edit certain sections or elements. The minimum and the maximum number of elements define how often an element may be duplicated or removed by your customers, e.g. to ensure that the design still looks appealing.
When duplicating an element the field for the origin element is automatically filled with the ID of the original element so you know from which element the current element was duplicated.
As mentioned earlier, presets consist of different elements. So if you click on an element that is part of a preset you will find two categories under "Style". The element category and the respective preset category which has the same name as the preset. In our example, we used the Cards preset.
Hierarchy handling offers you additional functions besides the "Move" feature described above. Most importantly, it provides an intuitive overview of all nested elements when hovering over a label. To distinguish between presets and elements you can have a look at the color of the label and border:
- Orange: preset
- Light blue: element
If you click on an element you can also check the breadcrumb in the footer of the website editor for another quick overview of the hierarchy.
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 is currently positioned also has the name of the element in the label. Depending on the element, you might also see additional options next to the label:
- Ellipsis icon to open the context menu
- Move up
- Move down
- Star icon to indicate that the element is animated
"Responsive" means that the design adapts depending on the device and resolution to ensure that the website is displayed in the best way possible. You have several options to make use of responsive settings: First of all, we always recommend using presets as often as possible as they are already built for that. Secondly, you can adjust settings on colors, heights, widths, positioning, etc. for the respective view on desktop, tablet, and 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, we want to adjust the padding left and right. To do this, proceed as follows:
- Switch to the tablet view by clicking the tablet icon at the top of the CMS
- Make sure that you are in the Style tab under Elements
- Under Spacing, click "Custom" next to "Padding", and type in 3 in the right and left input field after selecting rem
Now make the adjustments for the mobile view by selecting the respective icon in the top navigation. In this example, we changed the padding left and right to 1rem.
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. 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 padding, as in the above example, the color of the settings label has changed from white to purple for tablet and yellow for mobile, according to the color of the icons in the top navigation.
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.