Skip to main content

Use custom HTML, CSS, and JavaScript code

Franziska Dienst
Updated

With website templates and section templates, you can master most design challenges without any knowledge of programming or design. However, if you like to use it you can also add custom code.

In this article, we explain what types of code you can insert and how to do it.

Table of contents

Basic knowledge

You can not only write and use your own code but also 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 be displayed correctly if you use the Cookie Consent Bar section template.

For the sake of security, we 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.

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. You can also open the code editor with the keyboard shortcut combination [Ctrl] + [Alt] + [C].

Code-Editor.png

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 section templates used on your website are provided as so-called "mixins". The Website Builder automatically inserts these mixins into the Config tab. This allows you to adjust CSS properties accordingly once you have inserted the first section template Note that deleting a section template in Website Builder 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 design and section template settings. For this, you have 3 options:

  • Section template settings: these can be reached by clicking double-clicking on a section or by right-clicking on the element and then clicking on Style
  • Via the Website Builder menu item Design
  • By using the shortcut [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 section template 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 Website Builder 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.

Code-Editor-1.png

Here you can add your own CSS styles, which can then be applied to the website. If you use section templates, 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 Files 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

Elements can be addressed in the code in various ways. 

Each element 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:

  • Double-click on the element and switch to the Style tab
  • Select the element and press [ENTER] and switch to the Style tab

The ID is displayed directly at the top of the left settings panel and...

Element-ID.png

...under Style > Element > ID & Class section. 

Element-ID-2.png

The IDs of <div> elements cannot be changed. 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 settings in one of the ways described above.
  • Under ID & Class in the Elements 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.

Code-Editor-2.png

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 shortcut [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].

Code-Editor-3.png

HTML

To insert HTML code directly, you have two options: 

  • Using an HTML element
  • Using the Code 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
  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 - i.e. all elements that you edit, move, add, or remove. 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 that is 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. To see the effect, you need to switch to the preview website which will open the website as it currently is (after saving) in a new tab. To open the preview website click on the eye icon and select Open preview website.

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 with every 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 > SEO:

Code-Editor-4.png

Here you can enter all relevant meta-information about your website. This could be titles, keywords, or a short description.

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 ID field. 

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 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. 

The Website Builder is '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/

Related articles

Comments

0 comments

Article is closed for comments.