How can we help?

What are presets?

Anton Maslov
Anton Maslov
  • Updated

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. 

file-roV6v2FFIo.png

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. 

file-mX4YppjNzW.png

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. 

file-nVCAwx62TI.png

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.

file-NREEXEIiJG.png


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.

Was this article helpful?

0 out of 0 found this helpful

Have more questions? Submit a request

Comments

0 comments

Please sign in to leave a comment.