Netigate Design Editor
Table of contents
In the tool there are two types of survey design templates, “Classic” and “Mobile-friendly” templates. The difference between these two types of design templates is the way they behave in different environments (like on desktop, tablets or smartphones). The classic designs are more customisable with colours 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 they are 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 to what they look like on a computer when the survey link is opened on a smartphone.
The mobile-friendly designs are produced in a way that will make them work identically on 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 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 customise 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 minimise/maximise 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 the last time you saved click the “Clear“-button in the upper right-hand 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, colour, 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 a desired banner, use a banner link and set position of the banner.
How do I edit the progress bar colour?
To edit the colour, click on the existing fill of the progress bar and select the desired colour from the colour picker or insert your own color via RGB or Hex codes.
How do I edit the back- and forward button?
To edit back- and forward-buttons, click on the button and select the desired button style from the pop-up menu of standardised 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 a button style and add a few basic colours. When you click on the “Generate“-button the Design Editor will auto generate a template based on the selected images and colours. 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 the background colour, upload an image or add an 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.
Colour: Edit background colour for the selected element. By clicking in the colour box you can choose a colour from our colour 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 for black to choose from.
Shadow: Edit the shadow for your selected element. Drag the indicator to make the shadow smaller or bigger.
Under the Properties tab you find different possible property settings:
Height – Edit the height of the selected element. Drag the indicator to in- or decrease the height. To the right you can maximise or auto-adjust the height for that element.
Width – Edit the width of the selected element. Drag the indicator to in- or decrease the width. To the right you can maximise 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 centre 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:
Colour – Edit the colour for your selected element’s borders. By clicking in the colour box you can choose a colour 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 the 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 smaller or bigger.
Under the Advanced tab you who are familiar with CSS (Cascade Style Sheets) can easily type in your own styles 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 them (changes won’t happen until you click 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.