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

Video

Menu bar items

WYSIWYG editor


Video

 

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.

At the top right, you'll find access to the website's code, including CSS, JavaScript, and HTML. Here you can view or edit the project code, including code for presets, or write your own code.

If you want to see a quick preview of the site, click "Preview" once to go into Preview mode, and click again to exit Preview mode. Since Javascript is disabled by default in the CMS, use "Open Preview Website" to see a "live" demo view. JavaScript is also enabled here, so you can see what your website will look like after it is published. Below is the presentation mode, which is great for showing your site's responsive behavior to your customers on desktop, tablet, and mobile devices. In the same menu, you'll also find links to Sitejet's feedback tool, which your customer can use to give you feedback directly on the page. 

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. 


WYSIWYG Editor

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. 

Back to the top

Still need help? Contact Us Contact Us