Netigate Design Editor
Table of contents
There are two types of survey design templates in the tool: “Classic” and “Mobile-friendly“. The difference between these two design templates is the way they behave in different environments (i.e. 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 designed to be “responsive“, meaning that they are designed to adjust to the device they are opened on. For example, if you are using a smartphone to open the survey, the design template will automatically transform itself to work and look better on that device. Some questions (matrixes, for example) will also appear differently depending on the kind of device the survey is opened on.
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 across different devices. The surveys will be easy to answer, easy to read and look nice on whatever device the respondent is using.
We recommend that 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 (“what you see is what you get“) editor 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 thing you will see inside the Design Editor is the Start tab. On this screen, you can either create a new template or load an existing one.
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 also minimise/maximise the editor to get a clearer sense of how the template will look on 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 of the screen.
How to edit texts?
To edit texts, click on the text area you want to edit and a small toolbar will appear. You can edit font style, colour, size and make text bold, italic or underlined.
How to edit main banner/logo?
To edit the main banner, click on it and a small toolbar will appear. You can upload your 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 colour 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 amending your design until you are satisfied. When you are happy with the result, click “Save” and the template is ready to be used.
If you want to quickly edit the background, simply click on it and a small toolbar will appear. Here, you can change the background colour, upload an image or add an image URL. Remove current settings by clicking the blue cross.
Under the Background tab you will find different possible background settings (for the selected element):
Image: Add a URL directing to an image that 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 will find various property settings:
Height – Edit the height of the selected element. Drag the indicator to increase 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 increase 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 narrower or wider. 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 thicker or thinner.
Under the Borders tab you find various settings:
Colour – Edit the colour of 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 thicker or thinner.
Radius – Edit the radius (rounded corners) of the selected borders. Drag the indicator to make the radius smaller or larger.
Under the Advanced tab, those who are familiar with CSS (Cascade Style Sheets) can easily type in their own styles and see changes as they are submitted. If you prefer to work with CSS in plain text format, you can open the text editor to view all current code and edit it. Note that changes won’t be confirmed until you click “Save”.
Here you can also tick Display Validator to edit the design of the validator box that will appear if a required question is skipped in the survey.