The Thor rendering engine

In 2019 we released an improved, much faster page rendering system that highly increases page speed. All pages created after the release are rendered by the Thor Page Generator.

If you have an older page that is using the old generator instead of Thor, you will see a symbol next to that page in the Landing Pages tab of your account. Another method of checking is going to the live URL and right-clicking to go to the page source, then looking for window.__page_generator = true;
If this variable is not found in the page source, then the page is using the old generator.

Why are there still pages using the old generator?

The two rendering engines generate pages that have a different code structure in the backend. This means that custom code added to them might have to be written differently. 

In the time since the release of Thor, our team has transitioned all of the pages that did not have third-party code on them. We have not transitioned the ones with code because of the possibility that the code would stop working. 

As our Support Team is unable to assist with custom code, the provider of that code would need to adjust it to make sure it works for the page structure generated with Thor. You can find a list of differences to be taken into consideration at the bottom of the article.

How can I transition a page to Thor?

If you only have one page in this situation, simply create a copy of it by using the Duplicate option from the menu on its right side. Duplicating an older page will automatically make the copy page use the new generator while preserving all of its content and settings from both the page editor and the slideout. Please note, however, that the leads and analytics will remain attached to the old page. The new one will start with clean stats.

If you have several pages that you want to transition more easily than through duplicating each one individually, reach out to our Support Team on live chat or at help@instapage.com to request this. We can transition the originals from the backend. 

After you transition a page to the Thor render engine, you will have to check all the code added to it and make sure it still works. If it does not, it will need to be adjusted by the person that provided the code. We are unable to assist with editing the code through our Support Team.

How is the code structure of the page different?

1. Responsiveness and breaking points

Our main unit is rem, as opposed to px, that was used in our previous rendering engine. It depends on :root pseudo-element and its font-size property, where we are using a dynamic unit to make landing pages scalable at some resolutions.

@media screen and (max-width: 400px) {
  :root {
      font-size: 4vw;
  }
}

@media screen and (min-width: 768px) and (max-width: 1200px) {
  :root {
    font-size: 1.33vw;
  }
}

Our main breakpoint is 768px width. This is the moment where the desktop view changes into the mobile view. Note that there can be some larger mobile devices on which there might be a desktop view on the widescreen mode. We wanted to keep the responsiveness rules as simple as possible.To maintain and adhere to the scalability process, please use rem when you want the element to be scalable in lower resolutions. In other cases, if you don’t need your element to be scalable, px will be enough.

 

These are the breaking point differences between the old and new page generators:

For pages rendered by the older rendering engine:

  • device width < 620px : the mobile version will be displayed
  • 620px < device width < 960px : the desktop version will be displayed, with an horizontal scrollbar
  • device > 960px : the desktop version will be displayed, with no scrollbar

For pages rendered by out Thor Rendering Engine:

  • device width < 768px : the mobile version will be displayed
  • 768px < device width < 1200px : the desktop version will be displayed, but without any horizontal scrollbar, since the new page generator pages are responsive
  • device width > 1200px : the desktop version will be displayed, with no scrollbar

2. Generic classes

We have a few generic classes, which might be useful. Remember that these classes are in use in many different places inside the page HTML structure and using them might have an effect on more elements than required.

.item-absolute {
  position: absolute;
}
.item-block {
  display: block;
  height: 100%;
  width: 100%;
}
.item-cover {
  z-index: 1000001;
}
.item-breakword {
  word-wrap: break-word;
}
.item-content-box {
  box-sizing: content-box;
}
.clearfix {
  clear: both;
}
.hidden {
  display: none;
}
@media screen and (max-width: 620px) {
  .hidden-mobile {
      display: none;
  }
}

3. Javascript and jQuery

In general, pages rendered by the Thor Page Generator will accept any correctly added HTML | CSS | JavaScript code, but will not be loading the jQuery library by default, as the old rendering engine does. We implemented this change to ensure the fastest loading time that we can offer for our pages, so we recommend replacing any jQuery code with JavaScript only.

However, if any of the following tokens: jQuery( , ijQuery( or $( are detected in a page's code, jQuery will be automatically loaded (version 3.4.1) on the new rendering engine pages as well, but the page loading time might be slightly increased, as jQuery will be included synchronously in the Head section of the page.

Note that the jQuery validation methods, such as  jQuery.validator.addMethod() will not work on the new rendering engine and will have to be switched to a JavaScript only code.

4. Other rules

  • The new page generator does not use Base64 to encode form fields, but the old rendering engine was using it.
  • While the element IDs have kept the same structure on both rendering engines, most of the classes are different.