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 get started without 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, proceed as follows:
- Move your mouse over "+ Add Content"
- Click on "Element"
- Drag the "Logo" element to the desired position on the website
Sitejet will now ask you if you want to customize the logo on the whole site 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 "+ Add Content"
- Click on "Element"
- Drag the "Heading" 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.
Since the Website Builder (CMS) uses the "Flexbox" model, all elements have a "Flex Basis" of 100% by default, i.e. they always occupy the full width of the parent element. If there is no parent element, elements occupy the entire width of the display. Exceptions are sometimes found in presets, such as left and right margins, for example. Manual adjustments can be made in the element settings under the tab "Layout (Flexbox Item)" by switching the "Base" from 100% to "Auto" or by specifying a certain value. The container will then only assume the width of its content or the default value.
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 access these default color variables. Usually the primary color is the prominent brand color, e.g. in the logo. For the 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 the appearance of the menu as well as 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)
Our template selected for this example already contains a header preset. From this we remove everything we no longer need. However, the "Book Now" link is no longer needed. We delete it by selecting it and pressing [Del]. But we want to show a fax number next to the phone number. We can duplicate elements by selecting them and right-clicking to open the context menu. Here we select "Duplicate item". The key combination [Ctrl] + [D] duplicates elements even faster.
Now let's duplicate the text element for the fax number. To edit the clone, double-click it and replace the phone number with the fax number. Remove the phone number completely and insert the "Fax" number by clicking on the "Male" icon. To change the icon, we mark it like normal text. As these are icon fonts, they work similar to normal text. When editing text elements, a toolbar appears below it. Here you can set formats, fonts and font sizes, text styles such as bold, italic,
strikethrough and underline, color, icons, orientations, links, ordered and unordered lists and tables. By clicking on "</>" 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 bottom of the list to find specific icons.
The orange line around the text indicates a data binding. These automatically insert the contact data stored in the project (e.g. phone number, name, e-mail address, etc.) into the text, so that you don't have to update it every time you make a change on the entire page. Remove data bindings by deleting the orange bordered content. You can add data bindings via the toolbar with the male icon (see screenshot above).
So if you want to change the displayed value of a data binding permanently, 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 a picture slider in our example. For this example project we would like 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 window on the left side.
- Make sure you have selected the correct container element with the background by looking at the breadcrumbs 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.
- Switch now from "Slider" to "Picture". 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.
"About us" section (unpack container vs. delete)
Under the header there is a combination of two presets in our template, consisting of an "about-with-image"-preset and an " accordion"-preset in it. 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.
- 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 offer of the bar. We want to show a selection of drinks to inform the potential guest about our prices.
First you can change the heading, for example "Refreshing Beverages". It is also important to enter the section ID in the main menu settings so that the navigation knows where to go when you click on "Drinks".
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 tab "Options" to find the section "ID & Classes" below.
- Change there to the tab "Container (div)" to enter the ID which is specified as destination in the menu (e.g. "drinks"), we have introduced more details in the section "Navigation".
Icons loosen up the design. Inserting icons is very easy thanks to the icon element in Sitejet. This gives you even more choice than text elements. The icon element uses vector graphics instead of fonticons, so the styling works a bit 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 place on the website
Alternatively, you can add the element by right-clicking on it in the context menu by clicking on "Add elements" and then on "Icon". The same effect can also be achieved with the key combination [Ctrl] + .
In the field "Search Icon" you can now search for an English keyword to find your desired icon. You will get a selection of possible icons. Choose one that you like and change it in the section "Appearance" by specifying the width and color of the icon or a frame. In the section "Alignment" you can center it. If not already done, place the icon element under the heading in the performance section. To move elements, you can either drag and drop the element with the mouse or simply move the selected element by holding down the [Ctrl] key and using the up/down arrows.
Now create a new text element and use the toolbar in it to create a table. By clicking the table icon you can choose how many rows and columns you want to use. For now 1x2 is enough. However, you can extend them at any time afterwards. Click in the element settings of the text element on the section "ID & Class" in the tab "Options". Insert the word "drinks" here. We will define "drinks" as a class in the CSS code to make the table more appealing. At first we will extend the table by corresponding drinks and 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 once. Scroll to the end of the view and create the ".drinks" class as shown in the photo.
Tip: You can use the [Tab] key to quickly jump to the next cell in the table. If you are currently in the last cell, pressing the [Tab] key will add a new row to the table.
Add a gallery
In the Leistungsbereich/performance section there are further presets which are not needed for this example project. Remove the remaining presets up to the footer and create some space for the next section: the picture 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 "Preset" to get to the preset list
- Under "Pictures" you find a selection of gallery presets
Now select "Gallery" (4th preset) 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
The footer is also a preset and can be adjusted according to your wishes. 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 just add some information and want to 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)
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.