How to get to the Netigate Design Editor
Netigate Design Editor is available to our license customers and you get to it easily by clicking on Settings at the bottom of the homepage inside Netigate. This takes you to different settings.
Click on Netigate Design Editor. Done!
Now you are ready to start designing your templates!
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.
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. Save. 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. Here we have 3 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.
How to edit texts
To edit texts just click on the text area you want to edit. A small bar will appear. Edit font, color, size and make it bold, italic or underlined.
How to edit main banner
To edit the main banner just click on it. A small toolbar will appear. Upload desired banner, use a banner link and set position of the banner.
How to edit progress bar fill
To edit color, click on the fill of the progress bar and selected desired color from the color picker.
How to edit back- and forward button
To edit back- and forwardbuttons, click on the button and selected desired buttonstyle from menu.