A picture is worth a thousand words. In "Web 2.0", pictures and videos are the most important medium for presenting information in an interesting way. In this article, we'll show you what Sitejet can do for you.
Table of contents
Add individual images
Individual images can be embedded in various ways on Sitejet websites. Each of the elements and presets listed here has a specific purpose which we will explain in the following subsections.
- The image element
- The logo element
- The SVG element
- The icon element
- Presets, such as the Background preset or the About with image preset
To add presets or elements, simply click "+ Content", then on the menu which appears on the left, you can browse all of the available options in the "Presets" and "Elements" tabs.
In the image below, you will find the menu locations of the elements we will mention next.
The image element
The image element contains exactly one image to be displayed in a certain position. This element can be included in other elements, such as containers or presets, to achieve a specific design. Wherever an image is displayed in Sitejet, you can also edit and format it.
This element can be used for any type of image unless it is a vector graphic. Sitejet supports all common image formats. However, for use on websites, we recommend using .jpg, .png, or .gif files. Each of these formats has different advantages and disadvantages, which have to be considered depending on the application.
JPG files are usually the largest files, but also offer the highest quality in terms of the available color spectrum. If the image is compressed, however, there can be unattractive effects in how it is displayed, as the compression is not lossless.
PNG files support transparent backgrounds. The compression of PNG files is possible with less loss of quality. This is why it is the preferred image format on the internet.
GIF files have the advantage over the two formats mentioned above in that these files can be animated like a stop motion film. The trade-off of the small file size is the small 256 color spectrum. This makes GIF images often look unnatural, but they can be used for caricatures, comic-like presentations or infographics. .gif files also allow transparent backgrounds.
In Sitejet, images are automatically scaled and compressed to the required resolution by our own CDN service. Images are served in the required resolution based on display size. Responsive and lazy load are optional features.
The image element, like other elements, can be added to the website as follows:
- Move your mouse over "+ Content"
- Click "Element"
- Hold down the mouse button and drag the image element to the position where you want to display the image, then let go
To pick an image for this element:
- Click the dummy image which appears in the menu on the left under the word "Image" and a dialog box will open which allows you to choose an image to upload
You can also click the image in the editor, then the pencil icon to swap the image or choose an image already uploaded by either you or the customer. For more information on how to collaborate with your customers, please see our article on the topic here.
The logo element
The logo element is a specialized variant of the image element. It's best to only use this for a single company or product logo, because if you change the image in a logo element, you will automatically be asked if you want to change the image across the whole website and on all subpages. This will save you time if the CI (corporate identity) of the company or product changes.
You can find further information on the topic of adding a logo in our article on adding your website logo.
The SVG element
The SVG element can be used to display vector graphics in SVG format. Vector graphics can be zoomed in and out without loss of quality and are also small files, making them ideal for use on responsive websites.
The icon element
The icon element is a special form of the SVG element with which you can display icons from the most popular icon libraries included in Sitejet. The keyword search allows you to select the desired icon from the list without having to upload any files yourself.
With this element, icons from the following libraries are available to you:
- FontAwesome Brands
- FontAwesome Regular
- FontAwesome Solid
- FontAwesome Light
If there's a library you would like which isn't listed above, you can also add it yourself and insert the corresponding icon using custom code.
Presets always represent a combination of different elements with their own design specifications. They do the work for you and speed up the design process. Sitejet offers you a wide range of presets for displaying images. Presets play an important role in displaying multiple images at once, as in a gallery, but they also offer some advantages for individual images.
The About with image preset, available in the "Structure" submenu, offers the possibility to display text next to an image. This effect is often used with long texts to loosen them up or to introduce a new theme.
The Background preset, available in the "Photos" submenu, allows you to display images in the background. You also have the option to use other effects such as the Parallax effect to create a varied design. The Parallax effect scrolls the background at a different speed than the foreground.
Add image gallery
If several images are to be displayed at the same time or in a certain order, the image gallery presets are ideal.
How to use presets is explained in our article on the use of presets.
In Sitejet, the following presets are available as galleries in the presets list under the "Images" submenu:
- Gallery (grid, circle, captions)
- Filter Gallery
A gallery displays multiple images simultaneously. There are different variants with different display characteristics. For example, images can be displayed in circles of the same size, as squares, or as squares of different sizes creating an effect similar to a photo collage.
The Filter Gallery is a special form that displays images of certain categories at once. If a category is selected on the website with a click, only the images assigned to this category are displayed. Images can be assigned to one or more categories. In order to adapt the Filter Gallery to your wishes, it's necessary to make changes to the buttons and images. Let us assume that a category for "Fish" should be set up. Write "#fish" in the "Link" tab of the button in the "URL" field (without the quotation marks). Basically, what you write here doesn't matter as long as you use the same word again later.
Now switch to the "Style" tab for the images that are to be displayed under the "Fish" category and open the "ID & classes" section. Here you enter "filter-fish" as an additional class. It is important that the class begins with the keyword "filter-" (without quotation marks) and the following term corresponds to the term from the step above.
If you want to add an additional category to the Filter Gallery, please follow these steps for an exemplary category "three":
- Click on the last button once and duplicate that button by using the context menu (right-click the element and click "Duplicate element") or by using [Ctrl] + [D]
- Change the button text if you like and change the link in the button's "Link" tab to '#three'
- Add the class "filter-three" to the images you want to show in the new category; it is important that you prefix the category's name with "filter-"
- If you wanted a category called "Products" you could use the link "#products" and the class "filter-products"
Sliders display images individually and offer the possibility to switch to the next or previous image via arrow keys, by click, and/or by timer. This is especially popular in headers, i.e. the upper part of a website. The moving images attract the attention of the website visitor.
Add banner image
Banner images, sometimes also called "Heros", are part of the "header", i.e. the upper part of the website. This part is often referred to as "above the fold" and is the area that is visible without scrolling. It also contains a clear menu structure.
In order to relieve you of as much work as possible, Sitejet provides you with several header presets. These can be adapted to your individual preferences.
To add a header preset to your website, proceed as for any preset:
- Move your mouse over "+ Content" at the top of the Website Builder
- Click "Preset"
- Select "Header" in the menu panel that opens on the left side
Here, you have the choice between different designs. With a bit of programming skill, you can also create your own headers.
Within the headers you can, depending on the preset, replace the background image with a slider, or vice versa, and further customize your website.
It's not only the elements and presets that are decisive for the design, but also the classes assigned to them. If you're exchanging individual elements or presets within the header, make sure you adopt or customize the classes to ensure a beautiful design.
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. Here you can go directly to our community. If you need help with your Slack account, please e-mail us to firstname.lastname@example.org .