Elements - Using Presets
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 presets can be used and customized.
Table of contents
Presets are comprised of a container which holds a set of elements. These pre-built website modules provide customizable styling options. Most presets provide variants and settings to customize your website across several dimensions.
Watch a video
How to use presets
Using presets makes website building a breeze. For example, the Gallery preset lets you choose between several pre-built variants to give your gallery a stunning look that fits to your style. Variants are just sets of options. You can narrow your preset to your needs by using the settings below.
Chosen settings are always written to your CSS. So you can always keep track of what's happening to the code and add your own like in the following example:
Each preset does have a unique class (e.g. .preset-gallery-default). Upon importing a preset a new block of CSS will automatically be added at the end of the Custom CSS window. These include a couple variables that are the same as the ones inside the preset setting panel. Which means changing variables in each one will affect the other.
In case you build two sections with the same preset, but want one to be different (e.g. a different amount of columns for desktop view) you can change the preset class and it will add a new CSS block under a new class name, so the settings of the former preset will not be altered.
As in the element settings, you can also change the design settings in the preset settings so that it changes according to the device being displayed on and its display size. For example, margins or the font size can be adjusted specifically for desktop, tablet and/or smartphones, so that you have full control over the design of your website on the respective devices at all times.
In order to make it easier to identify which settings apply to specific viewports, the color of the setting labels is adjusted depending on the device. To adjust the settings, switch to the "Preset" area of the "Style" tab and proceed in the same way as described in the Elements article.