Overview: Website Builder (CMS)
In this article, we will introduce the layout of the Website Builder (CMS) and provide details on several of the key menus and features, including links to further information.
Table of contents
Menu bar items
Let's start with the menu bar at the top of the screen. On the far left is a timer that shows how long you have been in the CMS during this session. With status management and time tracking, you always have an overview of the time that has already been spent working on a project. In addition, there are buttons for undoing, redoing, saving and reloading the project.
Under "General", you will find general options. For instance, you can "Export your website" and access "Settings" for the CMS. There is also a link to the "Keyboard cheatsheet" where all Sitejet keyboard shortcuts are listed. Click "Leave CMS" to exit the Website Builder.
The "Website" menu contains the "Media" library, "Collections", "Website settings", the "Snapshot" manager and the "To-dos" of a project. You can also set up "Redirections" with 301 and 302 status codes. For example, in the "Website settings", you can add a new customer logo, contact information, and SEO-related meta tags that can even be customized for each page in the "Pages" panel.
The "Design" menu provides links to other settings related to the "Theme" and the "Fonts" used. These provide extremely helpful control over the elements and their design, drastically reducing the time required to complete a website project. Spacing and media breakpoints can also be easily adjusted in the "Layout" tab when editing the "Theme" settings.
The "Pages" link in the top menu bar leads to a panel which lists all pages. Here you can edit URLs and pages with just one click or, as mentioned earlier, assign page-specific meta tags. Each open page is listed as a tab at the top of the toolbar. If your site is already published, "Save" or [Ctrl] + [S] will apply any changes you've made to the live site.
The "+ Add content" menu contains four important content types, "Preset", "Element", "Form entries", and "Extensions", plus the possibility to load some content from another website into the project via "Import from website". Presets are completely independent parts of a website such as headers, price tables and accordions. Elements include text and images that can be used individually or in combination with other elements. The powerful contact form builder provides elements for creating forms and fields for file uploads in those forms. In the e-commerce panel, you'll find shop elements that you can drag and drop after connecting the project to an Ecwid account. All you need to connect is your email address or the email address of your customer.
In the center of the menu bar, you can test the responsive display of the website on desktop, tablet, and mobile devices, making website testing and auditing easier than ever. You can even set the display properties of specific devices.
If you have any questions, you'll find a link to our help articles and options for emailing or chatting with Sitejet's support team at the top right of the screen.
The middle section is Sitejet's WYSIWYG editor. WYSIWYG stands for "what you see is what you get". Double-click on any element while in the editor and its settings will be displayed in a panel on the left side of the screen. The preferences can be accessed through a puzzle piece icon that appears to the left of an element when you hover over it. If you click on it, the window with the default settings will open.
Right-click an element to open the context menu. There are options for editing the item, cropping, copying, pasting, adding and deleting items, and more. The context menu provides links for editing and the option to make it "Editable for Customers". With this feature, you can make it so that certain parts of the page can be edited by your customers from their customer portal. Here you have the possibility to share only this element, all elements of this kind on the page, or all elements on the page.
Last but not least, at the bottom of the CMS, you will find the " Breadcrumbs". These show the hierarchy of the containers. In other words: within the breadcrumbs, each element and its parent containers are listed together with all CSS classes used. Preset containers show the puzzle piece icon, containers with a background show a picture icon, and animations are indicated by a star icon. Just double click on these symbols or the container name and the corresponding settings will be opened.