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
- Basic knowledge
- Edit website
- Change logo
- Font and color scheme
- Navigation (add and remove menu items)
- Edit header (change background and text icons)
- "About section" (unpack container vs. delete)
- "Services" section (set anchor ID, use icon element, design tables)
- Add a gallery
- Edit contact section
- Imprint (create subpages and reference elements)
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 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 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.
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 " Font and color scheme" section. To use an image as a logo, just double-click the existing logo and change the image.
- Move your mouse over "+ Add content".
- Click on "Elements"
- Drag and drop the "Logo" element to the desired location on the website
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, rather than an image. In that case, you can follow these steps:
- Move your mouse over "+ Add content"
- Click on "Elements"
- 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, 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 steps to open it:
- Move your mouse over "Design" in the menu bar
- Click on "Theme"
- In the window that opens on the right, click "Colors"
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 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 dark olive green color as the primary color and a brownish gray as the secondary color. The text color is used for blocks of 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. Our help article on the topic provides more information about theme settings.
Navigation (add and remove menu items)
The example 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, 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 sign or trash 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)
Our template selected for this example already contains a header preset. From this, we will remove everything we no longer need. The "Book Now" link is no longer needed. We delete it by selecting it and pressing the [Delete] key. But for this, we want to display a fax number next to the phone number. We can duplicate elements by selecting them and right-clicking on them to open the context menu. Here we select "Duplicate element". Or, you can use the key combination [Ctrl] + [D] to duplicate elements even faster.
Now, let's duplicate the text element for the fax number. To edit the duplicate, double-click on it and replace the phone number with the fax number. Remove the phone number completely and insert the fax number by clicking on the "man" icon. To change the icon, we select it like normal text. Since these are icon fonts, they work similar to normal text. When editing text elements, a toolbar appears below them. Here you can 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.
Click on the flag icon to display all available icons. The available icons are provided by FontAwesome. Use the search function at the end of the list to find specific icons.
The orange line around the text indicates a data binding. These will 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. Remove data bindings by deleting the orange bordered content. You can add data bindings via the toolbar with the "man" icon (see screenshot above).
So, if you want to change the displayed value of a data binding permanently, simply adjust the value in the contact data. Move your mouse over "Website" and click on "Data".
Next, we adjust the header background. Currently, this is an image slider in our example. For this example project, we want to use a static image. The background image is located on the parent container element of the header preset. Double-click somewhere inside the header to open its settings panel 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
- Now change from "Image slider" to "Image". 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 normal parallax effect, and 100% fixes the position of the background while the rest of the page scrolls over it. You can also set the background color and transparency. You can change the color of the background, or 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 Config
"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 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.
"Services" section (set anchor ID, use icon element, design tables)
In this section of the website, we present the offerings of the pub. We want to show a selection of drinks to inform the potential guest about our prices.
First, you can change the headline to, for example, "Refreshing Beverages". It is also important to enter the ID of the section in the main menu settings so that the navigation knows where to go when you click on "Beverages".
By default, the IDs for sections of a website are already assigned in templates. To set a new ID or change an existing one, proceed as follows:
- Select the parent container of the section to open the settings window on the left
- Open the "Options" tab to find the "ID & Classes" section below
- Change to the tab "Container (div)" to enter the ID that is specified as the destination in the menu (e.g. "drinks"), for more details see the "Navigation" section
Icons loosen up the design. Inserting icons is very easy thanks to the icon element in Sitejet. This gives you even more choice than with text elements. The Icon element uses vector graphics instead of font icons, so the styling works slightly differently. Add the element under the heading as follows:
- Move your mouse over "+ Add content"
- Click on "Elements"
- Select "Icon" and drag it to the desired location on the website
Alternatively, you can also add the element by right-clicking on it via the context menu by clicking on "Add elements" and then on "Icon". You can also achieve the same effect with the key combination [Ctrl] + .
In the icon search field, you can now search for a keyword to find your desired icon. You will receive a selection of possible icons. Choose one you like and change it in the "Appearance" section by specifying the width and color of the icon or a frame. In the "Alignment" section, you can center it for example. If not already done, place the icon element under the headline in the Services section. To move elements, you can either drag and drop the element with the mouse or simply move the selected element with the [Ctrl] key held down using the up/down arrow keys.
Now, create a new text element and use the toolbar to create a table. When clicking on the table icon you can choose how many rows and columns you want to use. For now, 1x2 is enough. But, you can extend it afterward at any time. In the element settings of the text element, click on the "ID & Class" section in the "Options" tab. Insert the word "drinks" here. We will define "drinks" as a class in the CSS code to make the table a bit more attractive. But, first, we will extend the table with the corresponding drinks and the respective prices.
Now, open the code editor by clicking on "</>" in the upper right corner of the Website Builder. If you are not already in the "(S)CSS" tab, click on it. Scroll to the end of the view and create the class ".drinks" as shown in the screenshot below.
Tip: You can quickly jump to the next cell in the table with the [Tab] key. If you are currently in the last cell, a new row is added to the table when you press the [Tab] key again.
Add a gallery
In the Services section, there are further presets which are not needed for this example project. Remove the remaining presets, except for the footer, to create some space for the next section: the image 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 "+ Add content" in the top bar of the CMS
- Click "Presets" to get to the preset list
- Under "Images" you find a selection of gallery presets
Now select "Gallery" and drag it to the desired location on the website, directly below the Services 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 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.
- 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. To do so, call up the settings of the footer in the parent container by clicking on the puzzle piece 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 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 preset, 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.
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 .