Migrating your pages to the Thor Render 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?

We have added a 'Migrate' button inside the page slide-out. Use this button to transition the page to the Thor generator immediately, if you are satisfied with the functionality of the page. You will have to check and adjust your code before migrating any page to ensure that it works.

There are two options to migrate your non-Thor pages to Thor from inside your Instapage dashboard:

1) Make the changes directly on your page, migrate the page, and then check the live URL. You can adjust the code as necessary by checking the live page each time.

2) Create a duplicate page, adjust the code on the duplicate to ensure that it works. 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 slide-out. Once you are satisfied, adjust your working code to your original page and migrate the non-Thor page to Thor. 

If you have several pages that you want to transition in bulk, please reach out to our Support Team on live chat or at help@instapage.com to request this. We can help with a bulk migration from the backend. However, please make sure that the code on each page has already been tested to ensure that it works on the new page generator before we do a bulk migration.

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.

To see an extended table of Thor versus non-Thor differences, please refer to the PDF linked here.: https://d.pr/hD8Z0S