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.

Basic knowledge

Presets are comprised of a container that holds a set of elements. 

For example, the "Cards" preset combines an image element (orange), a headline element (blue), and a text element (purple) which are placed into a container (red). You can quickly tell if you are working in a preset by the orange border that appears when hovering or clicking. There you can also see the name of the preset. 

These pre-built "website sections" 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 your style. Variants are sets of options for a preset. You can customize the preset to your needs by using the settings below. 

Each preset does have a unique class (e.g. .preset-gallery-v3-default). When you add a preset to your website a new block of CSS will automatically be added at the end of the Custom CSS window. The CSS code includes all settings that you have chosen in the preset setting panel on the left side. This means changing variables in either one will affect the other. 

If you want to build two sections with the same preset, but want one to be different (e.g. a different amount of columns) you can simply 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.

Responsive settings

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. Detailed instructions on how to adjust settings based on the device can be found here. 

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.

Back to the top