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


Basic knowledge

Sitejet allows you not only to write and use your own code in Sitejet, but also to integrate third-party tools with the help of code snippets in HTML, CSS and/or Javascript. Please note that some tools may not function or displayed correctly if you use the Cookie Consent Bar Preset. For the sake of security, Sitejet would rather block too many scripts than not enough, in order to comply with legal requirements. Issues with the display and functionality of some tools can occur, for example, when a script is loaded from external sources and accessed by a second script. If the provider does not ensure that the second script only accesses the first script after this "lazy" script has been loaded, the tool will not work as desired.


Watch the video

Wistia video thumbnail
2:49

.wistia_no_animate * { transition: none !important; -mozilla-transition: none !important; -ms-transition: none !important; -o-transition: none !important; -webkit-transition: none !important; }

This video was recorded in the old UI. We will update this video soon.


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 bottom 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 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 the "Elements" category in the left sidebar
  2. This will open a panel where you can 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 bottom right corner 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. At the moment, it's not possible to edit the HTML already on the website to ensure that the existing structures are working properly.


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 link of the website. 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 "More" in the top menu and select "SEO":

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 in the section on " HTML in the editor" under "{{content}}" in the "HTML" tab.

E.g. for Google Tag Manager you will have two types of codes. One for the head section which is implemented in the "meta-tags" section. The second snippet should be pasted immediately after the opening  <body> tag (open the code editor, switch to HTML, and insert the code there). For more information, there is a quick guide from Google.


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/


Become a part of our Community!

Exchange ideas with other web designers about current developments, tips, and tricks and show your favorite sites. Get advice and talk to us about possible features you would like to see on Sitejet. You can join the Sitejetters community here.

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