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 , or go with the "Blank" template to start from scratch. 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 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 backup 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.
Most of the time logos are image files. If you add an image file as a logo, you can use our integrated color recognition tool to automatically determine the new primary and secondary colors for the website. You can read more about this in the " Font and color scheme" section. To use an image as a logo, just double-click the existing logo and change the image or add the logo element as described here:
- Click on "Elements" in the sidebar
- Drag and drop the "Logo" element to the desired location on the website
- Upload or drag and drop your logo in the left sidebar - or choose a file from the File Manager
After selecting an image file as the logo, Sitejet will ask if you want to exchange the logo on the whole website or just on this page. If you decide to change the logo globally across the site, you can use the color recognition tool as mentioned above.
Alternatively, if you don't have an image as a logo it is also possible to use a simple headline e.g. a wordmark in a certain font. In that case, you can follow these steps:
- Click on "Elements" in the sidebar
- Drag and drop 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 "Company Name") and confirm with [Enter] or by clicking on the checkmark symbol. In the toolbar above the headline, 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 brush icon, 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 select and change fonts for your website using the Fonts Manager as follows:
- Click on "More" in the menu bar
- Select "Fonts"
In our example, we choose the fonts "DM Serif Display" and "Josefin Sans" as text and headline fonts. Those fonts are already available in Sitejet. If you, however, would like to add custom fonts, you can do so under "Upload fonts" (see the article on adding fonts for more information on how to do this).
If you like, you can define the global settings for texts and headlines fonts like the font size, line height, or font-weight. For example, if we would like to define H2 as lowercase:
- Click on "Design" in the menu bar
- Make sure you are in the "Text" tab
- Select "Headlines" > "H2"
- Select "lowercase" under "Text transform"
If you want to adjust the global color scheme use the key combination [Ctrl] + [Alt] + [Y] or the following steps to open it:
- Move your mouse over "Design" in the menu bar
- Make sure you are in the "Colors" tab
Here you can set the primary color, secondary color, font color, background color, and custom colors. The colors are automatically entered and updated in the CSS code for the Config. All presets will make use of this default color palette. Usually, the primary color is the prominent brand color, e.g. the one in the logo. In this example, we want to specify a light green color as the primary color and dark green as the secondary color. The font color is used for blocks of text, so we use a color with as much contrast as possible in relation to the background color.
Under "Design" you can easily control site-wide, or global, options such as font size and color, layout settings, buttons, and more. Our help article on the topic provides more information about design settings.
Navigation (add and remove menu items)
In our example, the navigation will lead website visitors to "Newest", "About", "Blog", and "Contact". If we want to adjust the navigation, we can double-click on the menu and a panel on the left side will appear. Here you can edit all menu items and their links, animations, and other related settings.
- Here you can decide if you would like to create a custom navigation (red) or if you would like to automatically create the navigation from your subpages (orange). When you select "Auto" the menu structure is automatically generated from the page hierarchy. Your subpages serve as menu items and can be created, edited, and removed in the page manager ([Ctrl] + [Alt] + [S]). In our example, we will have a closer look at the custom option.
- There are different options on how to link a menu item
- None: No link
- Page: You can select one of the subpages you have created
- External: You can link to external pages or files uploaded to the Media Manager
- Element: You can link to an element on the page
- Phone: You can add a phone number
- Email: You can add an email address
- If you would like to add or delete a menu item you can simply hover over an item
Further information on navigation can be found in our article about navigation.
Edit the header
In our example, our header is built with the following presets
- Menu Bar
- Info Bar
Let's start with adjusting the header background. For that, we click on the container (1.) in the banner and adjust the background (2.) by clicking on Element (3.) > Image (4.). We also added a color overlay (5.) to make the image a bit darker so that the light font in the middle is still visible.
Since now the menu bar doesn't match with the new background, we will also adjust it to our needs. Double-click on the menu bar or use the breadcrumbs (1.). Now we change the background color (2.) of the menu bar to match the white border and then we adjust the menu item color (3.) so that we can read the different menu items again.
Next up, we will have a look at our info bar. We currently see the address and the email address, but we also want to add the phone number to show all contact options to website visitors. We can simply duplicate one of the existing elements by right-clicking the element to open the context menu - make sure to select e.g. outer container that contains the icon and the data. Here we select "Duplicate element". Or, you can use the key combination [Ctrl] + [D] to duplicate elements even faster.
After we have duplicated the email address, we can edit the duplicate by changing the icon to a phone icon. Simply double-click on the icon and use the search field to see all phone-related icons and select your preference. Then we will change the email address to the phone number. To ensure that contact data like address, phone number, email address, etc. are the same everywhere on the page make use of data bindings. Data bindings connect variables with data. In this case, the data bindings automatically insert the contact information (stored in the project (e.g. phone number, name, email address, etc.) into the text so that you don't have to update it everywhere on the website every time you make a change. So, now for the phone number, we click on the user icon in the toolbar that appears above the text element and select the variable phone. On the right side, you will see the "Data" panel, where all the contact details are stored. You can spot data bindings easily since they have an orange outline.
To change the displayed value of a data binding, simply adjust the value in the contact data. Move your mouse over "More" and click on "Data". This will ensure that the contact details will be updated globally across all (sub)pages of this site.
As you can see, the text toolbar offers you other settings options like set formats, fonts and font sizes, text styles such as bold, italics, underline and strikethrough, color, icons, alignments, links, ordered and unordered lists, and tables. By clicking "</>", you also have access to an HTML editor to get even more control over the structure of your text.
"About us" section (unpack container vs. delete)
Under the header, there is a combination of two presets in the template used in this example, consisting of an "about with image" preset and an "accordion" preset. 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 work with the following example:
- The parent "Image with text" preset
- The additional "Accordion" preset: This preset is located within the "Image with text" 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 color palette 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 color palette icon. This leaves the "image with text" 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 we have a free space where we add a text element for our "About us" text. For that, we click on "Elements" in the left sidebar and drag and drop the text element in the right position.
Last but not least, we can also change the image to show our team.
We 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, click on the "Images" category in the left sidebar.
Now select "Gallery" and drag it to the desired location on the website. 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 can remove single images using 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.
- You can reach them by hovering over the preset label and clicking on the palette icon or by clicking on the container with the color palette icon in the breadcrumbs below.
- Here you can select different variants if you prefer another gallery style.
- Here you manage the layout of the gallery e.g. by selecting the number of columns, the gap between the images, or by selecting your preferred alignment.
- You will find other settings like the hover style or how to display the images in the gallery.
Edit contact section
Usually, the footer is also based on a preset and can be adjusted according to your wishes. To do so, call up the settings of the footer in the parent container by clicking on the color palette icon. Here we can leave the footer as it is, we will just add some information and edit the Google Map a bit.
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)
So far we have been on the "Home" page. In the page administration, you can enter additional information like the page-specific meta title and description. 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 simply click on 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 color palette 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 some customization 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.
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.