E - Building a website
In this article you will find the following topics:
- Main editor overview
- Logo and fonts (Using Google Fonts)
- Color scheme (Color Variables)
- Navigation (Adding & Removing menu items)
- Finishing header area (Changing background & text icons)
- About section (Unpacking vs Deleting Container)
- Service section (setting anchor ID, using icon element, styling tables)
- Gallery section (using gallery preset)
- Contact section (customizing google maps)
- Legal notice (sub pages and reference elements)
- Wrapping up
Main editor overview
Now it's time to work on our project. Simply hit Edit in your project in the main area of the dashboard. This will open the Sitejet CMS.
This is the basic view of your main editor. We want to provide you with a quick overview of its functions. Other articles will cover each topic in more detail.
- On top of the editor there will be several tabs. Starting off you always find yourself in the Home tab, which indicates us being at the index page. Subpages will each get their own tab. You can close tabs by clicking the x icon (there always has to be one tab open though). Note, that these tabs might not be visible when no subpages are opened besides the Home tab.
- All the project's settings can be managed here. The General tab will allow us to Undo, Redo, Save and adjust several settings. It also provides a cheatsheet with important keyboard shortcuts and an option to open the Dashboard from here (Leave CMS). Under Website you can manage key parts of your website: Manage fonts, theme settings, access SEO settings, manage your pages, find To-Dos and Snapshots for returning to a former state of the project. Also open your file manager and manage URL redirects from here. Finally you can add new contents, like presets, elements and forms.
- Use these icons to quickly change the editor viewport to Desktop, Tablets and Phones and also set the display mode from portrait to landscape. Choose different devices for common viewports.
- This is the breadcrumb area. Breadcrumbs can be switched on and off in the general settings (Settings > Editor View > Show breadcrumbs). This will give you an insight into the hierarchy of any element and its classes in the main editor. For an in-depth explaination please refer to the article about breadcrumbs.
- Here is the main editor. This WYSIWYG editor is the main canvas for all our elements and presets. Elements are HTML-structures mostly consisting of a parent <div> and children elements, like headlines, texts, images etc.
You can select any element by clicking with the mouse. Right-clicking opens a context menu for a variety of actions, including adding, editing, deleting, duplicating, copying and merging elements as well as creating references, jumping to the element's CSS or copying its ID as well as enabling the element to be edited by your client.
By dragging and dropping you can move any element to any other position or inside other elements. Cutting ( [CTRL] + [X] ) or copying ( [CTRL] + [C] ) and pasting ( [CTRL] + [V] ) does the same, but also allows transfering elements into subpages or other projects.
- The puzzle icons indicate that there's a preset container. By clicking it you can access the preset settings and modify it according to your needs.
Customizing the template
Now you can edit, add or remove anything you like. In our example, we will adjust the colors, the logo, some contents and images to create our custom website.
In this template the logo is an image. Since our logo will be simple text we need to replace the element. Right click the image and choose Add Element > Headline. This will create a new headline element next to the image. Now select the image, right-click and choose Delete element (you can also hit the [Del] key on your keyboard). To edit the logo text simply double-click the headline element or select it and hit [Enter]. The editable text will get a blue background to indicate that it is active. This works the same as in any other text editing program. Simply type in your logo text (in our case Ye Olde Pug Club Pub). You can also adjust boldness, italics and underscores or strikethroughts, add Icons to the text or change the color, even access the HTML panel for even more complex structure or to analyze the existing structure.
The new headline element automatically takes 100% of the entire parent width since we are using the flex box model in Sitejet. We can change this in the settings panel under Layout (flexbox-item) by setting the basis from 100% to auto. This will make the container width identical to its contents.
Since it's a logo we want to link it to the index page. Go into the Link tab above and select Menu item, then choose the Home in the dropdown.
Change the font
We also like to change the font family to a more playful one. Using the fonts manager ( Website > Fonts) we choose Lobster type and include it into our project (more details can be found in this article about adding custom web fonts). We also remove the uppercase attribute for our logo by overwriting the basic styling in our Custom CSS.
Overwriting the text-transform: uppercase of our preset logo CSS inside the Config CSS with text-transform: none in the Custom CSS.
Tipp: The custom CSS will overwrite the Config CSS in most cases since it will be loaded and executed after the Config CSS. This requires the same specifity though. Keeping the preset CSS inside the Config CSS unaltered and clean will make maintenance much easier later on.
Change the color scheme
To change colors we can go to our Website Theme Settings under Website > Theme Settings or [Ctrl + Alt + Y] and find the Primary Color, Secondary color and Default color to replace colors. Custom colors can be set up as well. All the settings are automatically placed and updated in the Config CSS early in the CSS. Keep in mind that all presets use these standard color variables. The primary color is usually the main brand color, as used in logos. We want it to be a soothing dark olive green for our primary color and a brownish grey for our secondary color. The default color is used mainly for body texts, so we keep it rather dark.
Adjusting the navigation
Our example business focuses on some details about the restaurant, the drinks, a small gallery and contact information. Thus we only need these in our navigation. To edit our main menu you can double-click it or select it and hit [ENTER]. A settings panel will appear on the left side of the screen. Here we can adjust the appearance of the menu as well as its items, the flex-settings, animations, markup & style and some more settings. For now it suffices to edit our menu items.
- Here you can edit everything you need to create your link. You can choose whether to link to a Menu Item (e.g. to a subpage), Externally (those can be outgoing URLs or links to anchor tags on the page or even Files) and Elements (you can trigger animations of elements from here). Enter your target, link text (which will appear in the menu) and title (optional), set relationships optional) and whether to open in the same window or a new tab.
- You can add or remove items by hovering over any of them and clicking the plus or trashcan symbols that appear to the left, Let's remove what we don't need and rename other items according to our desired structure.
- Selecting Automatically will create your menu depending on your pages set-up. Subpages will be your menu items and can be created, edited and removed in your Page Manager [CTRL + ALT + S]
Try setting up the menu items for this project by editing and removing items. This is what we will end up with: Home, About, Drinks, Gallery and Contact. Make sure to link to the respective IDs.
Don't forget to save regulary by hitting the disk icon (indicated orange when there are unsaved changes) or pressing [CTRL] + [S].
In the Custom CSS we also search ( [CTRL + F] ) for .ed-menu and adjust the text transformation to none for our <a> elements inside the menu structure. This will override the preset defaults in the Config CSS.
Finishing the header
Now we remove what we don't need. The phone number is useful, but booking is not required. Let's delete it by selecting it and hitting [DEL] on your keyboard. But we do want a fax number displayed alongside the phone number. We can duplicate an element by selecting it and right-click > Duplicate Element ([CTRL] + [D]). Let's select the "phone number" text element and duplicate it. To edit the clone we can double-click and type in the new fax number. To change the icon you need to mark it just as you would mark any other letter. Since these are icon-fonts they work similar to regular type. When working with text elements a new toolbar will appear right beneath it. Here you can adjust paragraph formats, font family and size, boldness, italics, strikethroughts and underlines, color, icons, alignments, create URLs, ordered and unordered lists as well as tables. Also you can open an HTML panel to get even more control over your text's structure.
Select the flag icon to access all available icons. The icons used are provided by FontAwesome. You can search for icons at the bottom of the list.
The orange border around a text indicates that this is a data bind. Data binds will include the contact data (like phone numbers, names, emails, etc.) attached to the project automatically, so you don't need to update them on the entire page each time there is a change. You can remove data binds by deleting any words with orange border. To include a data bind select it from the toolbar like in the image above.
Keep in mind, that changing any text inside the orange borders manually will reset them to their original state.
We also wish to change the header background image accordingly. Right now it is an image slider, but a static image will serve our purpose. The background image is set on the outer container of the header preset. So double-click anywhere inside the header, which will open a settings panel for the active element on the left side.
- Make sure you select the container element containing the background by using the breadcrumbs at the bottom of the main editor and selecting the Container with the image icon in front of it.
- Once it's active you can navigate the Background tab inside the settings panel.
- Now change it from Slider to Image. You can drag and drop any image inside the dashed bordered area or click inside to retrieve it from your harddrive or the media manager.
- Here you can also set the parallax percentage for the background image. 0% will keep a static image, 50% gives a balanced parallax effect and 100% will fix the position in the background and sets the background size to cover. It is also possible to set a color and opacity for the background. This way you can discolor, darken or lighten the background to make any written content more visible. A color picker grabs all the colors that are defined inside the Config CSS automatically.
This concludes the header for our website. One small detail we want to address is the button text which is still uppercase. This works for most fonts, but not the one we chose for this website. A single change in CSS will deal with that.
In the Custom CSS simply change text-transform to none on line 44.
Changing the About Section
Beneath our header we find a preset-combination constisting of an about with image preset and an accordion preset within. A simple text and image is sufficient to describe our restaurant, so let's get rid of what we don't need in a second. First you get to understand how nesting of presets and elements work.
Click any text-element in this section and watch the breadcrumbs give you the hierarchy of all the nested elements. Notice the Containers with the puzzle icon in front of it. These are the parent containers for each preset. Select the right most container with puzzle icon and delete it. A prompt will appear that lets you choose between Unpacking and Deleting.
- Unpacking will remove the parent container but unpack all the contents,
- Deleting will remove the entire container and its contents. We want to delete it here. This leaves us with a headline and the image.
Click the headline element to select it and type whichever text you like. Keep it selected and right-click to open the context menu. Choose Add Element and Text or press [CTRL + 2] to create a new text element. Here you can put in your about text. Above we can create a spacer element by hitting [CTRL + 5] or adding it via context menu. Keep in mind new elements will be added after a selected element or at the end of the page is none is selected.
To change the image simply double-click it and replace the image exactly as we did with the header background image. You can change the dimensions and crop the image by clicking the crop-icon in the small toolbar which is located on top of the selected image element. There you can choose a ratio, rotate the image or zoom in and out. Let's choose 1:1 to turn it to a square format. The applied border radius will make it a perfect circle. Let's also change the size to 100% back in the left settings panel of the image element, under the tab Size.
Changing the service section
This section can be used to show what the business has to offer. We want to list a selection of beverages here to inform customers about our price range.
First let's change the headline to Refreshing Beverages. We also need to change this section's ID for our navigation to work.
- Select the parent container of this section to open its settings panel to the left.
- Open the tab Markup & Style at the bottom to access the classes and ID inputs.
- Switch the tab to Container (div) to find the input for our ID. Now type in whichever ID our menu targets (e.g. drinks)
While we are at it we might as well change the background image, give it a nice parallax and some dark colored overlay.
We can remove the existing preset by clicking anywhere inside and use the breadcrumbs to target the container with the class .preset-boxes-default . Hit [DEL] and confirm Delete to remove it.
Consider adding some cool icon. Luckily we've got you covered with our icon element. These offer a wider choice of icons than the FontAwesome font icons inside our text elements. Since they are based on SVG the styling works a little different. But there are some customizable settings you can choose to achieve quick results. Use Add Content > Elements > Icon or the context menu by right-clicking into the main editor and choosing Add Element > Icon or press [CTRL] +  to add it after the selected element or at the bottom of the page, when nothing is selected.
Search for a keyword that fits best for your desired icon and you will be presented with a choice of possible candidates. Simply click one of them to select it and adjust it further in the Appearance tab. We change the width and color of the icon and also set it to center in the Alignment tab below. Afterwards we move it on top of the headline of our service section by selecting the icon element and pressing [CTRL + UP], or by dragging it there.
Now we create a new text element and use its toolbar to create a table inside. Upon clicking the table icon we can choose columns and rows. Let's stick with 1x2 for now. While we have the text element active we want to give it a class. Go to the settings panel on the left side and open the Markup & Style tab at the bottom. There we find the classes input with fr-box custom-theme fr-basic inside already. Leave them be, but add the class drinks at the end. We will use it later to style the table in our Custom CSS. Now we will fill the table we created one by one with each beverage and its respective price. Afterwards we go to our Custom CSS and add our styles for our new .drinks class. It is best practice to include new custom styles prior to all the preset includes.
Tipp: You can easily switch through table cells and create new rows in the table by pressing [TAB] a couple of times.
Including a gallery section
There may still be other presets below which we do not need. Let's remove them (leave the footer only) and make some space for our next section: the gallery!
We can make use of one of many presets that provide us with awesome galleries. Click Add Content in the toolbar on the top of the main editor and browse to Presets. Under Photos you will find a nice selection of galleries to choose from.
Let's choose Gallery (4th item) and drag it into the main editor, right beneath the service section. When dragging you can easily place the preset between sections. Should you wish to include the gallery into another preset drag it while holding [CTRL]. Watch the orange line to place it correctly. Changing, adding and removing images is as easy as changing the background image of our header. Beneath the image collection you will find a button that lets you delete all the images inside the gallery. To delete a single one simply click the x-icon in the top right corner of each thumbnail.
- To finetune our gallery we need to access the preset settings of this preset. You can access each preset by clicking on the puzzle icon in the breadcrumbs. A panel will open up to the left.
- Here you can choose variants, when available, and change the preset if you decide you like another variant better.
- Here you can adjust a couple things to your gallery, e.g. change the hover style, make images round or reverse the gallery order, among others.
- This will determine how many images will be displayed in a row, when applicable (except for grid and collage styled galleries) and also how many there will be for each major viewport.
Don't forget to set the ID to gallery in Markup & Style for our navigation to work.
Altering the contact section
The footer is also a preset and can be customized as desired when accessing the settings panel of the preset parent container. We leave it at that for the most part, supplement some info and decide to alter the Google Map a little.
In the settings panel for Google Maps you find some interesting settings. You can choose the type of the map (terrain or simplified), choose a style (there are several preset styles or the ability to choose an own color to stain the map in) and the color. Adjust the height and zoom level, whether there are zoom controls, scale measurements and mousewheel support or not. You can choose your own map marker icon as well (click the icon to select an image from your harddrive or the media library and at which address it's going to be placed and its width. Tick Info to add some more text when needed. It is also possible to add more than one map marker.
Legal notice and reference objects
Once we are done with our main page it's time to wrap up the project. Usually there is a legal notice for further contact detail or crucial legal information. When creating the website from a template Sitejet already created some subpages dedicated for this purpose. In the toolbar on the top of the main editor click the Pages ( or [CTRL+ ALT + S] ) to open the Page Manager and see the hierarchy of your webpages.
We have been located at the Home page so far. Here you can access some SEO & details if necessary. Renaming each page is easy as well - simply type in the new name. The URL changes automatically. To open another page hit the link icon to the right. We are looking for the Legal Notice page, so open that now. Another tab is now added in the top left of the CMS, so you can easily switch between pages and even transfer contents from one to another! Let's do just that right now, by copying our footer area into this page as well.
Go back to the Home page and move down to our footer. Select the entire(!) footer by selecting the preset parent (Container with puzzle icon - use breadcrumbs) and right-click > Create reference. This will create a new element that is a perfect clone of our footer element (with all its contents) and changes in any way the original does. Very cool! This works across subpages as well, so cut the new reference footer (right-click > Cut Element) and paste it after the contents on our Legal Notice & Privacy page by right-click > Paste Element ( [CTRL + V] ).
Tipp: A faster way is selecting any element and pressing [CTRL + X] to cut and [CTRL + SHIFT + V] to paste it as a reference object immediately.
And there you go. Using a template, some presets and a couple lines CSS we created our very own website. This served as a short example and only scratches the surface of what Sitejet is able to do. More articles will feature all the elements, presets and other interesting topics in more detail.