Add individual images

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 will show you how you can add all sorts of images to your website. 

Table of Contents

• How to add individual images
• The image element
• The logo element
• The icon element
• Section Templates

How to add individual images

Individual images can be embedded in various ways. Each of the elements and section templates 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

To add a section template or elements, simply click on a category in the left sidebar. You can browse all the available options by scrolling through the content panel that opens. 

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 nested in other elements, such as containers or section templates, to achieve a specific design. Wherever an image is displayed in the Website Editor, you can also edit and change the format.

This element can be used for any type of image, unless it is a vector graphic. The Website Editor 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 the Website Editor, images are automatically scaled and compressed to the required resolution by our own CDN (Content Delivery Network) 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:

1. Click on the Elements category in the left sidebar
2. Look for Image and while pressing the left mouse key, drag the image element to your preferred location on the website

To pick an image for this element:

• Click on 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.

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 the Website Editor. 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:

• IconFont
• Ionicons
• 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.

Section Templates

Section Templates always represent a combination of different elements with their own design specifications. They do the work for you and speed up the design process. The Website Editor offers you a wide range of Section Templates for displaying images. Section Templates play an important role in displaying multiple images at once, as in a gallery, but they also offer some advantages for individual images. How to use Section Templates is explained in our article on the use of section templates.

The Image with text box Section Templates is available in the Content category in the left sidebar. As with an element, you can simply drag and drop the Section Templates to the preferred position on the website.