Use custom HTML, CSS, and JavaScript code

With Sitejet templates and presets, you can master most design challenges in Sitejet without any knowledge of programming or design. It is also possible to insert custom code. In this article, we explain what types of code you can insert and how to do it.

Table of contents

Watch the video

Code editor

Basic configuration

Boilerplate (read-only)

(S)CSS

HTML

JavaScript

Pixels, tracking codes, etc.

Keep the code clean

Emmet


Watch the video

 

Code editor

CSS, JavaScript and HTML code can be edited from within the code editor. This can be reached by clicking on "<> Code" in the upper right corner of the Website Builder (CMS). You can also open the code editor with the key combination [Ctrl] + [Alt] + [C].

From here, you also have access to the other tabs "CSS", "JavaScript", "HTML", "Config", and "Boilerplate".

Error-free custom code will help your website to function flawlessly. Make sure that the code works as expected by using external tools like debuggers or testing.

Basic configuration

"Config" is a tab in the code editor. Here, you can configure your website by defining variables for colors, font sizes, features etc.. All presets used on your website are provided as so-called "mixins". The Website Builder (CMS) automatically inserts these mixins into the "Config" tab. This allows you to adjust CSS properties accordingly once you have inserted the first preset. Note that deleting a preset in Website Builder (CMS) does not automatically remove the embedded CSS or JavaScript code. 

Tip: If you are not familiar with CSS - don't worry! Almost all values contained in CSS can be adjusted via the theme and preset settings. For this, you have 3 options:

  • Preset settings: these can be reached by clicking on the puzzle icon on the element or by right-clicking on the element and then clicking on "Preset settings"
  • Via the Website Builder (CMS) menu item "Design" by clicking on "Theme"
  • By pressing the key combination [CTRL] + [ALT] + [Y]

Boilerplate (read-only)

All standard code is stored in a "boilerplate", which is automatically integrated into the website and can also be used in other places. Would you like to see what is under the hood of your website? Then the "Boilerplate" is the right place for it. You can also view the code in the Code Editor under the "Boilerplate" tab. Here, you can see all preset variables, both the default values of certain elements as well as certain design properties and effects. You can also use these variables for your design with other elements in order to create a design that is as uniform, professional, and as easy to maintain as possible. 


(S)CSS

The Sitejet Website Builder (CMS) offers a powerful (S)CSS editor that lets you customize your website in any way you want.

If the "CSS" tab is not preselected, you can now click on it to view and edit all the CSS code.

Here is where you can assign the appropriate design properties to your own and already existing standard classes (e.g. ".ed-button"). By default, the code for each class is "collapsed", i.e. not visible, to save space and provide a better overview. By clicking on the small arrow next to the line number on the left side of the editor field you can "unfold" the class and make all properties visible.

Here you can add your own CSS styles, which can then be applied to the website. If you use presets, they will be recorded here and you can add your overrides to the respective sections. You can use all variables defined in the "Boilerplate" or "Config" tabs.

The Website Builder also understands your CSS code. You can find the CSS rules that apply to an element on your site by selecting an element and pressing [Ctrl] + [Alt] + [C] simultaneously. This opens the CSS Editor and highlights the lines that apply to the selected elements. 

You can also use the "Optimize" button to find unused rules and clean up your code.

You can also use CSS/JS files from the file manager via "Paste file".

By clicking on "Color picker" you can select your desired color via the color selection window of your system. This makes it easier for you to find the right values for the desired color or, for example, on Mac and Linux systems to pick a color anywhere on your screen.

Using IDs and classes

Within Sitejet, elements can be addressed in various ways. 

Each element in Sitejet has its own unique ID. The ID is always in #ed-xxxxxx format. You can find it in the element properties, which can be accessed via the following methods:

  • Click on the element and then double-click the breadcrumbs at the bottom of the screen
  • Double-click on the element 
  • Select the element and press [ENTER]

In the element properties on the left side of the screen, the ID is displayed under the "Options" tab in the "ID & Class" section. 

IDs of <div> elements cannot be changed in Sitejet. However, you can assign an ID to sub-elements.

Classes

Classes are the most convenient way to customize and design elements. They also provide a way for other developers and designers to create code that is understandable or reusable in other projects.

To assign classes to an element, proceed as follows:

  • Open the element properties in one of the ways described above.
  • Under "ID & Class" in the "Options" tab, the individual classes assigned to this element are displayed. The preselected element is the container element - here in the picture a <div> element. However, you can also customize the child elements of this element by clicking on the respective tab - here, for example, "Button (a)" to customize the link element of the button.
  • Each element can be assigned several classes to achieve a higher specification in your CSS code. More details can be found in this article about CSS classes.

Under "CSS classes" you can add as many classes as you want by separating them with a space.

Tip: You can select multiple elements by holding down the [Shift] key while clicking. You can also use the key combination [Ctrl] + [A] to select all elements at once. This way you can assign specific classes to several elements at once.

IDs

Using IDs to design specific elements allows you to make more specific design choices than classes allow you to make. Classes provide design properties for multiple elements, while an ID only applies to that one specific element. Therefore, the special defaults of the ID override the general defaults of the class.

An example: A button element includes a <div> element and a <a> element. The <div> element is the parent element because it encloses the <a> element. In this example, the <div> element is assigned the ID #ed-1234567 and the default class .ed-button. If you now add different design defaults for the class .ed-button and the ID #ed-1234567, the CSS properties of the ID will always overwrite those of the class.

Especially for animations IDs are helpful, because animations usually refer to certain elements.

IDs are automatically assigned to a specific project. If you copy existing CSS code into another project, this has no effect because the IDs used do not apply to this project. Instead, work with classes in this case. 

To copy IDs, right-click on the element and select "Copy element ID". You can also do the same by pressing [Ctrl] + [I].


HTML

To insert HTML code directly, you have two options: 

  • Using an HTML element
  • Using the editor

HTML element

The HTML element is suitable, among other things, for integrating certain modules and tools from third-party providers. You can embed this into your page by dragging and dropping as follows:

  1. Click on "Add content" at the top of the Website Builder
  2. Now click on "Element"
  3. In the window that opens on the left, select "HTML" and drag it to the place where you want to include additional HTML elements

HTML in the editor

You can access the code editor by clicking on: 

  1. "<> Code" in the top right of the Website Builder (CMS)
  2. Then click on the "HTML" tab

Normally you will only see the placeholder {{content}} here - unless you have inserted additional code here yourself. Everything stored here will be displayed on the website. The placeholder {{content}} represents the entire content that you can manage using the Website Builder (CMS) - i.e. all elements that you edit, move, add or remove in the main view of the Website Builder (CMS). If necessary, you can add your own HTML or third party excerpts around this placeholder.


JavaScript

You can also use the HTML element to include JavaScript in <script> tags. However, these elements are not executed in the Website Builder (CMS). To see the effect, you need to switch to the live view. This view shows the website as it would currently look without using the Sitejet Website Builder (CMS). You can do this by clicking on the preview image to the left of the website name in the website overview page (outside the Website Builder (CMS)). The website will then open in a new tab.

The Code Editor is another available option. You can access it as described under the section called " HTML in the editor", in the "JavaScript" tab. jQuery, a widely used JavaScript library, is automatically integrated on every Sitejet website so that you can use it in your JavaScript. The code used in the Code Editor is global, so it will be executed on all pages.


Pixels, tracking codes, etc.

Pixels are used to collect data for advertising purposes. Pixels are JavaScript code. The best-known pixels come from Google and Facebook. As a rule, they are used for search engine and marketing optimization and inserted in the <head> area of the website.

To insert code into the <head> area of your website, go to "Website" in the top menu, then "Website settings", and then the "SEO/Meta" tab. You can reach the website settings window with the keyboard shortcut [Ctrl] + [Alt] + [E] or by following these steps:

  1. Hover over "Website" in the top menu
  2. Then click on "Website settings"
  3. Then click on the "SEO / Meta" tab

Here you can enter all relevant meta-information about your website. This could be titles, keywords or a short description. More information about SEO is covered in our SEO article

For tracking code to be inserted in the <head> area of the website, the field titled "Meta tags" can be used. 

In order to use Google Analytics, it is even sufficient to insert the tracking ID in the "Google Analytics Tracking ID" field. This article from Google explains how to find yours. 

Make sure you take the TRACKING_ID (or Pixel ID for Facebook) from your respective dashboard and complete your privacy policy accordingly.

If additional code is needed for other tools, you can also insert it under "Meta tags". Normally <meta>-tags are to be inserted here, but <script>-tags are also possible. If the code is to be placed just before the closing </body> tag, it is recommended to insert it as described under "{{content}}" in the section on " HTML in the editor".


Keeping the code clean

Adding code quickly in the code editor can sometimes be confusing. Simply press [Ctrl] + [I] to automatically format all the code in the active window. This works for CSS, JS, as well as for HTML. This allows you to keep track of the individual areas in your code, your variables, and their definitions. 


Emmet

Emmet is a plugin for many different text and code editors that can be used to improve your HTML & CSS workflow. You can create great websites in no time with Sitejet, even without Emmet knowledge. However, Emmet has some advantages that we don't want to leave unmentioned.

For example, abbreviations can save a lot of time - but this only makes sense if you write a lot of code yourself and already know how to write HTML and CSS code. 

All Sitejet editors are 'Emmet-ready', so you can take full advantage of Emmet. This is done by pressing the [Tab] key in the respective editor window. 

If you don't know Emmet, but you write a lot of custom code, you should definitely check it out. Here are a few examples:

In CSS:

m0 -> [TAB] -> margin: 0;
p1 -> [TAB] -> padding: 1px;
h80px -> [TAB] -> height: 80px;
c#333 -> [TAB] -> color: #333;
fs -> [TAB] -> font-size: ;
! -> !important;

In HTML:

ul>li.test*3 -> [TAB] ->
<ul>
<li class="test"></li>
<li class="test"></li>
<li class="test"></li>
</ul><br>

You can find the full documentation here: http://emmet.io/

Back to the top

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us