Building your first Sitejet website
New to Sitejet? In this article, we'll walk you through how to build your first website with the Website Builder (CMS). Just follow our step-by-step instructions below.
Table of contents
Add a new project by clicking on "+ Website". Next, select a template. Then click on "Edit Website" in your website overview to open the Website Builder (CMS).
For more information about the Website Builder (CMS), have a look at our help article on the topic.
For this example, we want to customize the website's colors, logo, content, and images to make it our own. In addition to editing the website, you can also completely change templates from within the Website Project Manager.
Tip: Change the template only at the beginning of your work on a project, otherwise you will overwrite all changes with the new template. Sitejet also has a built-in snapshot manager, which allows you to reset the project to an older state if, for example, a mishap has occurred. This also acts as a "backup" (also called a "snapshot"). If there are unsaved changes while you're working on a website, the disk symbol will be orange.
In most templates and websites, images are used for logos. If you select a new image, you can use our color recognition tool to automatically determine the new primary and secondary colors for the website. You can read more about this in the " Color scheme" section. To use an image as a logo, just double-click the existing logo and change the image.
After uploading a new image, Sitejet will ask if you want to customize the logo on the whole website or just on this page. If you decide to exchange the logo globally across the site, you can use the color recognition tool as mentioned above.
Alternatively, it is also possible to use a simple headline if, for example, a wordmark in a certain font is to be used as a logo. In that case, you can follow these steps:
- Move your mouse over "+ Content"
- Click on "Elements"
- Drag the "Headline" element to the desired location on the website
To edit the logo text, double click on the new heading or select the element and press [Enter].
The now editable text is highlighted by a colored background. Type in the desired name (in this example, we call our bar "Ye Olde Pug Club Pub") and confirm with [Enter] or by clicking on the checkmark symbol. In the toolbar, you can also format the text (bold, italic, underlined or crossed out) after you have selected the corresponding text. With the flag symbol, you can add icons, and with the drop symbol, you can change the text color. Even more precise changes are possible in the internal HTML editor. This can be reached by clicking on the "</>" button.
Now we link our logo to the start page. Navigate to the "Link" tab under "Edit logo" and select "Menu item" as the destination. Further fields will open which will help you to set the link correctly. Select "Start" from the "Menu item" list and then save the project.
For more on adding a logo, see our help article on the topic.
Font and color scheme
You can change fonts using the Fonts Manager as follows:
- Click on "Design" in the upper menu bar
- Click on "Fonts"
In our example, we choose the font "Lobster" and import it into the project as a special font (see the article on adding fonts for more information on how to do this). We also change the default "uppercase" from "uppercase" to "none" so that the uppercase is displayed as we entered it in the element. To do this, follow these steps:
- Move your mouse over "Design" in the menu bar.
- Click on "Theme"
- Make sure you are in the "Text" tab and click on it if it is not so
- Select "H2 - Heading".
- Select the entry "none" in the field "Upper case".
In this view you can also set text preferences for other elements, so take a look around.
You can find your color scheme in the "Theme" settings. Use the key combination [Ctrl] + [Alt] + [Y] or the following step sequence to open it:
- Move your mouse over "Design" in the menu bar.
- Click on "Theme"
- In the window opening on the right click on "Colours".
Here you can set the primary color, secondary color, text color, background color and custom colors. The colors are automatically entered and updated in the CSS code for the basic configuration. All presets are accessing this default color palette. Usually the primary color is the prominent brand color, e.g. in the logo. In this example, we want to specify a dark olive green color as the primary color and a brownish gray as the secondary color. The text color is used for continuous text, so we use a color with as much contrast as possible in relation to the background color.
Themes let you easily control site-wide, or global, options such as font size and color, layout settings, buttons and more. Ouor help article provides more information about theme settings.
Navigation (add and remove menu items)
The sample website will show some details about the bar, the drinks, a small gallery and contact information. We'll adjust the navigation a bit. Double-click the main menu of your website to edit it. You can also click to highlight it and then press [Enter]. A settings window will open on the left side of the screen. Here you can edit all menu items, animations and some other settings. At first it is enough to adjust the menu items.
- Here you can define all the default settings for the links
- "Menu item" links e.g. to a subpage
- "Element" triggers animated elements such as accordions.
- "External" specifies links to external pages, to files in the media management or "anchor links" or item IDs on the page.
- Remove or add new menu items by moving your mouse over an existing item and clicking the plus or garbage can icon on the left.
- If you check "Generate from pages", the menu structure is automatically generated from the page hierarchy. Your subpages thus serve as menu items and can be created, edited and removed in the page management ([Ctrl] + [Alt] + [S]).
Further information on navigation can be found in our article about Navigation.
Edit header (change background and text icons)
Next we adjust the header background. On most templates, the background image is located on the parent container element of the header preset. Double-click somewhere inside the header to open its settings window on the left side.
- Make sure you have selected the correct container element with the background by looking at the element labels or in the breadcrumb navigation at the bottom of the editor margin: Select the container with the image icon in front of it
- Once the element has been selected, you can select "Background" in the upper left corner of the settings window.
- You can simply place any image in the area with the dotted border or click on it and select it from the hard disk or the media manager.
- Here you can find the settings for the Parallax effect of the background image. 0% gives a static image, 50% gives a regularly strong Parallax effect and 100% fixes the position of the background while the rest of the page scrolls over it. You can also set a background color and transparency. You can change the color of the background, lighten or darken it to make it more prominent, for example. With the color picker you have access to all colors already defined in the basic configuration.
Working with sections (unpack container vs. delete)
Some templates come with an accordion-preset in it (if not, just add one through "+ Content" -> "Preset" -> "Accordion"). Since a simple text is enough to introduce our bar, you can remove the superfluous elements. But first, let's explain how nesting presets and elements works with the following example:
- The parent "About-with-image" preset: The puzzle piece icon takes you to the preset settings
- The additional "Accordion" preset: This preset is located within the "About-with-image" preset, which is why the "Accordion" preset is displayed to the right of the "About-with-image" preset.
- This container element contains the elements inserted in "Content 2"; the star icon takes you to the animation settings for this container.
- The currently selected text element is the last element to be displayed in the breadcrumbs, it is part of the "Content 2" container element.
Click on any text element within this section and view the breadcrumbs. You always specify the hierarchy of the nested elements. Note the containers with the puzzle piece icon in front of them. These are the container elements for the respective preset. In this example we can remove the right preset with the puzzle piece icon. This leaves the about-with-image preset. When deleting, a window appears where you can choose between "Unpack" and "Delete":
- "Unpack" deletes the container element and then lists the contents/elements one below the other.
- "Delete" removes the entire container with all contents.
Since we want to remove the Accordion preset including the content, we select "Delete". Now you can click on the headline and type in the desired text. Under each marked element you can add a new one by right-clicking and then clicking on "Add element". In this case we insert a text element. You can also do this with the key combination [Ctrl] + . Now insert your "About us" text. Between heading and text element you can also insert a "spacer" or "spacer" with [Ctrl] +  or the context menu. If no element is selected, the new element will be inserted at the end of the page.
To swap the image on the right side, double-click it and swap the image exactly as you did with the background image in the header. You can also edit the image directly in Sitejet, apply a blur effect to the image, or display it in grayscale. Click the Crop icon in the toolbar above the image to crop it. There you can also adjust the aspect ratio, rotate the image or zoom in and out. In this case, choose a 1:1 ratio to get a square image. The already set frame radius in the element settings in the "Options" tab makes it a circular section. Now set the size of the image to 100% in the "Size" section of the settings window on the left side.
Add a gallery
For galleries, there are several presets available that allow different designs and arrangements. To add a gallery, do the following:
- Move your mouse over "+ content" in the top bar of the CMS
- Click "Presets" to get to the preset list
- Under "Pictures" you find a selection of gallery presets
Now select "Gallery" and drag it to the desired location on the website, directly below the performance section. The preset will fit neatly between parent containers if you drag it in normally. You can also place it anywhere within the containers by holding down [Ctrl] while dragging the preset. Note the orange line that indicates where the preset will be inserted.
Changing or adding images works the same way as in the header. First double-click one of the images to select the corresponding gallery element. This element is a standalone, independent element and subordinate to the gallery preset. The gallery element manages the content, i.e. the images to be displayed. The gallery preset determines the appearance.
Now you can add, change or delete images in the settings on the left. You can also delete all images at the same time below the selection. You remove single images with the "X"-icon in the upper right corner of the respective thumbnail. You can exchange the image on the image icon below. You add new images in the upper area with the dashed border.
- To change the appearance we open the preset settings. You can reach them by clicking on the container with the puzzle icon in the breadcrumbs below.
- Here you can select different variants, if you like another gallery style better.
- Set here for example the hover style, rounded images or the gallery order and other setting options
- In the "Columns" section you can determine how many images should be displayed in a row and per viewport (desktop, tablet and mobile).
Also here we enter the ID of the section in "ID & Classes" again, so that our menu item lets the website scroll there as well.
Edit contact section
Usually the footer is also based on a preset and can be adjusted according to your wishes. Make sure your footer contains a Google Map and double-click it for editing:
In the settings of the Google Maps element you will find several design options. You can set the type of map, the style (with some predefined styles and your own color selection), the height, the zoom level and whether control elements should be active or inactive. You can also upload one or more of your own map markers as an image and specify their size. You can also use the "Info" checkbox to display additional information directly on the map marker.
Further information about the Google Maps element can be found in our article about adding and editing Google Maps maps in Sitejet.
Imprint (create subpages and reference elements)
As soon as we are finished with the main page, it is time to finish the project. Usually there is always an imprint (or impressum) with contact details and important information that is required depending on the country. Sitejet has already created these important pages when creating the page. Open the page management by clicking on "Pages" in the menu bar at the top of the Website Builder (CMS) or click [Ctrl] + [Alt] + [S] to see the page hierarchy with sub-pages.
So far we have been on the "Home" page. In the page administration you can enter additional information in the respective section "SEO & Details". To rename a page, click in the "Name" field and type in the desired name. The URL will then change automatically. To open a subpage, you can click on the icon to the right of the page name. Now search for the "Legal Notice" subpage and open it.
In a new tab at the top left, the subpage above the menu bar will be opened in a tab. These tabs allow you to easily switch between open pages and even transfer content from one page to another. Since there is no footer stored in the template used on the "Legal Notice" page, we "copy" it by inserting a reference for the footer from the "Home" page on the "Legal Notice" page.
First switch to the "Home" page in the top tab and scroll down to the footer. Mark the entire footer by clicking on the parent container with the puzzle piece icon in the breadcrumbs and then right-click on "Create reference" in the context menu. This will create a reference element that looks identical and will always match the original if it is changed. This saves time when changing details and also works across all subpages.
Cut the reference element with a right click and then click on "Cut element" (or [Ctrl] + [X]) and switch back to the "Legal Notice" subpage. Insert the footer reference there by right clicking and then clicking on "Insert element" or [Ctrl] + [V].
Tip: An even faster method is to select an element and then press [Ctrl] + [C] to copy and [Ctrl] + [Shift] + [V] to paste. This will insert a reference element instead of a copy.
Congratulations! It's done! With a template, some presets and only a few lines of CSS code you have already created your first website. All this serves as a little introduction. Further articles will cover the different elements, presets and their application as well as other interesting topics in detail.