Using elements and section templates, the Editor lets you create beautiful websites quickly and easily without the need of additional code. Elements provide individual objects with which you can build websites, such as icons, buttons, headlines, images, or the like. Section templates combine elements and extend them with additional design options.
Table of contents
Basic knowledge
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 section templates first, since they are pre-built website sections that consist of different elements with pre-defined style options.
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 editor. 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.
Add elements
To add an element, simply click on the category Elements in the left content sidebar:
Next to the content sidebar, the Add content panel will appear and there you can select your desired element and place it in the preferred position on the website by using drag & drop. A green horizontal 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. If you want to add multiple elements at once, press the [Ctrl] key while selecting all elements. If you drag & 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] on MacOS) you can add a text element. For an overview of all shortcuts press [Ctrl] + [K] (or [Cmd] + [K] on MacOS).
Move elements
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 shortcut [Ctrl] + [up arrow], you can move the element upwards. With [Ctrl] + [down arrow], you can move the element downwards.
Using hierarchy handling, you can move elements by clicking on the label with a left-click and holding it down, then dragging the element to the desired position. Again, you'll want to pay attention to the green horizontal line as an indicator of where the element will land when it is dropped. If you want to place an element between two containers hold [Ctrl].
Style tab
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 settings of the section template if the element is located in a section container.
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 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.
Visibility
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.
Spacing
Under Spacing, you can define the padding (inner spacing) and margin (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.
Borders
Borders offer an interesting way to highlight certain elements or separate them from the rest of the content.
Under Style, you can specify whether the border should be solid, dashed, dotted, or double-lined. Furthermore, you can set different values for the border width 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.
Shadow
Shading creates an impression of depth. Elements can be "raised" or "lowered" to bring them more into focus. You can choose between:
- Default
- None
- 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.
Text Shadow
You can also manage your preferences for text shadow.
Positioning
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
Transform
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.
Animation
You can easily assign different animations to each element. You have a wide range of animations to choose from.
Other
Under Miscellaneous, you specify the minimum and the maximum number of elements.
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.
Section template settings
As mentioned earlier, section templates consist of different elements. So if you click on an element that is part of a section template you will find two categories under Style. The element category and the category for the section template settings.
Hierarchy handling
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 section templates and elements you can have a look at the color of the label and border:
- Light blue: Element
- Dark blue: Container
- Orange: Section templates
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 for that element. For a full overview of all sections and elements on the website, you can also check the Navigator.
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
- Duplicate
- Delete
- Move up
- Move down
- Star icon to indicate that the element is animated
Responsive settings
"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 section templates 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 Editor 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 Editor
- 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.
Comments
0 comments
Article is closed for comments.