Netigate Design Editor
In the tool there are two types of survey design templates, “Classic” and “Mobile-friendly” templates. The difference between these two design template types is the way they behave in different environments (like desktop, tablets or smartphones). The classic designs are more customizeable with colors and pictures, but they do behave differently depending on what environment they are opened in.
Classic templates are considered as something called “responsive design“. This means that they are designed to attempt to adjust to the device it is opened on, meaning that if you are using a smartphone the design template will be displayed in a very specific way that is suitable for that device. Some questions (matrixes for example) will be presented in a different way if the survey link is opened in a smartphone compared to how it would look on a computer.
The mobile-friendly designs are produced in a way that will make them work identically in all devices via a mobile-first focus. In other words, there will be no difference in how the questions are presented, no matter what device you are using. The surveys will be easy to answer, easy to read and look nice in whatever device the respondent is using.
We recommend you to use the mobile-friendly designs as the design of choice for all your survey projects. They make it so much easier for respondents to answer, and they look great!
What is the Netigate Design Editor?
The Netigate Design Editor is a WYSIWYG-editor (“what you see is what you get“) to design and customize classic design templates.
Please note: The Netigate Design Editor is only available for Classic Design Templates. These are only available for certain customers since it is recommended to use mobile-friendly designs.
How do I use the Netigate Design Editor?
Netigate Design Editor is available to all license customers and you can access it easily by clicking on “Netigate Design Editor” on the start menu inside Netigate.
The concept of the Netigate Design Editor is a click-and-edit application. It means you click on the element in the template you want to edit and then make the desired changes. All changes will be visible instantly on the screen.
The first view inside the Design Editor you will get is the Start tab. First thing you should do is to load an existing template for editing or create a new template.
Here you can add general settings for your template and flip between predefined test questions to see how your template looks with different question mechanisms. You can minimize/maximize the editor to get a better overall look and watch how the template looks in a mobile device in the mobile view. When a template is saved it will be selectable for surveys in the account. If you would like to clear all editing since last time you saved click the “Clear“-button in the upper hand right corner.
How to edit texts?
To edit texts just click on the text area you want to edit and a small toolbar will appear. Edit font, color, size and make it bold, italic or underlined.
How to edit main banner/logo?
To edit the main banner just click on the banner and a small toolbar will appear. Upload desired banner, use a banner link and set position of the banner.
How to edit progress bar color?
To edit the color, click on the existing fill of the progress bar and selected the desired color from the color picker or insert your own color via RGB or Hex codes.
How to edit back- and forward button?
To edit back- and forwardbuttons, click on the button and selected the desired button style from the pop-up menu of standardized button designs.
Under the Wizard tab you can let the Design Editor auto generate a template for you. This is the quickest way of creating a template!
Insert a background image (if wanted), a banner image, select button style and add a few basic colors. When you click on the “Generate“-button the Design Editor will auto generate a template based on the selected images and colors. Continue doing so until you are satisfied. When you are happy with the result, click “Save” and the template is ready to be used.
If you want a quick way to edit the background just click on it and a small toolbar will appear. Change background color, upload image or add image URL. Remove current settings by click the blue cross.
Under the Background tab you find different possible background settings (for the selected element):
Image: Add a URL to an image you want to use or upload a picture from your hard drive. To remove images click the blue cross icon. To the right you can set image position and image size.
Image-repeat: Choose repeat, no repeat, repeat y or repeat x for the image. Repeat is used for pattern images.
Color: Edit background color for the selected element. By clicking in the color box you can choose color from our color picker or manually type hex code in the text box. If you want a transparent background click the blue cross icon. To the right you can set opacity pattern for the selected element. There are three default options of black to choose from.
Shadow: Edit shadow for your selected element. Drag the indicator to make the shadow smaller or bigger.
Under the Properties tab you find different possible properties settings:
Height – Edit the height of the selected element. Drag the indicator to make the height smaller or bigger. To the right you can maximize or auto adjust the height for that element.
Width – Edit the width of the selected element. Drag the indicator to make the width smaller or bigger. To the right you can maximize or auto adjust the width for that element.
Margin – Edit the margin for the selected element. Drag the indicator to make the margin smaller or bigger. If you are unfamiliar with how margins work you can use the button to the right to center the selected element.
Padding – Edit the padding for the selected element. Drag the indicator to make the padding smaller or bigger.
Under the Borders tab you find different possible settings for borders:
Color – Edit color for your selected elements borders. By clicking in the color box you can choose color or add a hex code in the text box.
Type – Choose what type of borders to use. None, solid, dotted or dashed.
Size – Edit the size of selected borders. Drag the indicator to make the border size smaller or bigger.
Radius – Edit the radius (rounded corners) of the selected borders. Drag the indicator to make the radius (rounded corners) smaller or bigger.
Under the Advanced tab you who are familiar with CSS (Cascade Style Sheets) can type in your own styles easy and see your changes as you submit them.
If you prefer CSS by plain text format you can open the text-editor to view all current CSS and edit it (changes won’t happen until you save).
Here you can also tick to Display Validator to edit the design of the validator box that will appear if a required question is skipped in the survey.