Add an 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 a 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.
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.