In this tutorial we will start simple by using a Wizard, and then we’ll introduce workflows and cool features step by step as we find our way through the Editor.
Note: the template used for this example is older and belongs to Wizards. Our latest templates have Quick Edits instead. If you want to use one of our older templates that are Wizards, go ahead with this article. However, we recommend you read our other tutorials if you are using newer templates.
By the time you’re finished you will have fully customized a template, while learning how to create new content, as well as navigating and editing it using the Editor.
Tip: all steps in this tutorial have a See solution section. If you have already used the Editor to some extent or feel confident enough, you can try to achieve the objectives without checking the solution first. If you have never used the editor before, then expand and check the solutions for guidance.
1. New Project With A Wizard
Objective: create a new project using the Product suggesting test Wizard.
See solution
- Go to your dashboard, and under My Content click New Project
- Choose to Start with a Wizard
- Find the Product suggesting test Wizard
- Click View (opens a new tab) and explore the experience
- Close the new tab, and on the previous tab, and click Use this wizard and then Confirm
2. Configure The Wizard
In this step, we cover basic customization of our Product Suggesting Test Wizard.
Objective:
- Apply your brand: colors, logo, font, etc.
- Have two categories (personalities): Segment A and Segment B
- Each Category should have two products with product image, a title and a CTA
- Have Two questions: Question 1 and Question 2
- Each question should have four answers that link either to Segment A or B
- Setup a footer with two links: About us and Contact us
See solution
- Select a brand color. You can paste in a color hex value.
- To add your logo, click Choose image. You can then choose to upload an image or simply drag and drop an image into the interface
- Setup a background image the same way as you have added the logo
- Change title, description, and start button text
- Now is a good time to click Preview to see your current changes in effect
- Click Configure Results on the navigation menu to the left
- Expand Category 1 and change its name to Segment A
- Expand the existing Product in Segment A
- Enable and change the product title to Product A1 (or a product name if you have one to use already)
- Enable Call-to-action button and optionally add a product URL
- Click Add product to add a new product to Segment A
- Repeat steps 8. and 9. for the new Product, but name it Product A2 instead (or again a product name that you may already have ready to use)
- Click Add result category to add a new category
- Repeat steps 6. to 10. naming Segment B, Product B1, Product B2
- Click Create Questions on the navigation menu to the left
- Expand the single Question and change the title to Question 1
- Type Some question? in Question description
- Now expand the Answer, write Answer 1 under Answer and select Segment A. This means this answer will count towards Segment A in regards to which products to present.
- Now use Add another answer option to add three more answers and select a Segment of your choice for each of them.
- Now click Add another question and change the title to Question 2
- Type Some other question? in Question description
- Add four answers to Question 2 the same way you’ve added them to Question 1
- Enable Add Contact Us Link and Add About Us Link and configure them
- Save your work, then click Preview and experience the content you have configured so far
3. Enter The Advanced Editor
To spice things up, we will be using the advanced editor for editing. Whenever you choose a template that is not available as a Wizard, or whenever you wish to go beyond what a Wizard offers, you need to know how to use the advanced Editor.
Objective:
- Edit the Wizard in advanced mode (which is the Editor)
- Become comfortable with navigating the Editor
- Experience editing normal text as well as button text
- Add a third Personality to the Personality Test app
- Change the Personality of a button, to the newly added Personality
- Manually swap the position of two answers
- Edit content of a new stage, without having to add any layout
Tip: when you first arrive in the editor, you will notice some dashed lines between the layout. You can toggle those lines on and off by toggling the Layout mode.
See solution
- Start by clicking Edit in advanced more and confirming
- Once in the Editor, the first thing to do is open Page Overview ( shortcut [W] ).
- Take a moment to notice your content structure. If you are confused, you can learn more about stages.
- Now click on Question 1 to navigate to it
- Click on any of the the question text and experience editing it
- Change any button text by right-clicking the button and going to Button text
- To add a third personality, open the Personality Types menu and then Clone Segment B. Rename the new copy to Segment C.
- Change the Personality of an answer, by right-clicking its button, going to its Answer Settings and swapping to the new Segment C
- Navigate to Question 2 using the Personality Test drop-down on the breadcrumb menu
- Swap positions of answers 2 and 3, by turning Layout mode on, then dragging the container of one of the answers. Note the container is not the button, but the row that includes a column with the answer button and the answer description text.
- Now use the breadcrumb again to navigate to Segment C final stage
- Change the title text to Segment C and experience changin a product image by right-clicking it and selecting Change image (or just double-click)
- Save your work, click Preview to see your changes
If you have reached this far, you have now learned how to navigate the editor and do basic content editing.
4. Create A Layout Section From Scratch
Let’s assume you would like a different final result page, for example show a single product with some title, description and CTA in a different layout and style.
Objective:
- Replace existing content beneath the title row on Segment A Result and create a new layout section with centered content and 30px spacing above and below.
- The content should have a limited width of 700px and consist of two columns and the space between the content of the columns should always be 20px
- On the left column there should be a product title, a product description and a CTA button. There should be 20px bottom spacing on the description. The style of the CTA should be the exact same style as the answer buttons on Question stages, but with a width of 200px instead.
- On the right column there should be an image with 100% width of the column
- You should use responsive mode to make sure the text never gets too thin, and that the two columns break at a good screen size.
- Create a Template Part of the entire section for reutilizing in the future
- Copy the entire section, and paste it on the other result stages, and delete their previous content
See solution
- Start by making sure Layout mode is on
- Navigate to Segment A and delete all the content beneath the title row (left-click and then press delete, or right-click and select delete from the menu)
- Now from the Layout menu drag in a row with a single column
- Right-click the column, access its Column Style and give it: solid white background, 30px spacing above and below and align its contents to the center
- Now drag a row with two columns into the single column
- Right-click the new row, open its Row Style, and set its width to 700 px
- From the Multimedia menu drag a text component to the left column and change it to Product A, select the text and increase fontsize to 30.
- Then drag also an Image component to the right column, change its width to 100% and change the image to a product image
- Right-click one of the columns, go to its Column Style, and set spacing to all sides equal and 10px, then use the brush to copy that spacing to the other column and also to the parent row
- Now copy the text component, right-click its parent column and select paste
- Change the font of the new text to size 20 and add in some product description.
- Now turn Layout mode off, and then resize the canvas until you are not satisfied with the text’s width as it stretches, and make note of the canvas size number on the top right corner of a point before it becomes too stretched.
- Now turn Layout mode on again, right-click the row with the two columns, go to its Visibility menu, and set the number from step 12. under Responsive mode
- Repeat step 12. to verify this time that the text never stretches too much before the columns stack on eachother
- Now drag a CTA button from the Tools menu, and place it inside the first of the two columns, beneath the text
- Navigate to Question 1, then right-click and select Copy theme on one of the buttons
- Now navigate back to Segment A and apply the theme to the newly added button. Then press Finish.
- Right-click the button to access its context-menu, and set its width to 200px under its container style menu
- Then right-click the text above to open its menu and give it 20px bottom spacing
- Now right-click the top row that contains all the content, rename it to Product CTA Section, and select Create Template. This would now allow you to reuse this content on other projects.
- Now copy that same row, go to the remaining final stages, delete their content beneath their title row and paste in the new section on that column. You can then change the text and images content.
- Save your work, then click Preview to see your changes!
By this point you should now have a good level of knowledge to start creating your own content from scratch, or making specific layout and design adjustments to existing content.
5. Transition Effect On Final Result
Objective: add a transition effect to the personality test app when the final result is shown.
See solution
- While inside the app, open the When this personality test is finished… menu from the left sidebar
- At the bottom of the list of action sets, click Add action set and then Add action
- Search for personality and find the Show: personality test app action, and then select it
- Save your work
- Preview to see your changes
6. Add Reveal Component To Result
Objective: add and configure a Reveal Component, that the user much scratch to reveal the result.
See solution
- Navigate to the page stage (outside the app)
- Right-click the Personality Test app, open its container style menu and change its width to 1000px
- From the Tool menu, drag and drop a Reveal component on top of the personality test app
- Right-click the Reveal component to access its context menu, and click the name on the top of the menu and rename the component to RevealResult
- Then access its Reveal menu and change the scratching Radius to 100 and Percentage to reveal to 50.
- Then open the Visibility menu, and check Hide this component by default.
- Now enter the personality test app again, and open the When this personality test is finished menu
- At the bottom of the action set list, click Add action on the Action Set we created on step 5. of this tutorial.
- Search for RevealResult and find the Show: RevealResult action, then select it
- Save your work
- Preview to see your changes
7. Swap Progress Icons With Animated Bar
In this step, we make another change that introduces some cool features. We will take the progress icons out, and add a single progress animation bar.
Objective:
- Removing the default progress icons from each question stage
- Add a single progress animation bar that should be visible only while the user is answering questions
- The progress animation bar should start at 1 out of 2 questions, and when answering the second question should be on 2 out of 2 questions
- When the final result is shown the bar should disappear
See solution
- Navigate to each question and on each delete the row containing the progress icons
- Now navigate to the page stage, outside the app
- Drag in a row beneath the app, align its column’s contents to the center and give the column all sides equal 20px spacing
- From the Multimedia menu, drag a Progress animation to the column of the new row
- Right-click it to open its context menu, rename it to progress bar, then in its Container Style, set the width to 600px
- In its Visibility menu select to Hide this component by default (you can always use Reveal All to have access to hidden components!)
- In its Animation Settings, change Animate to to value from, click select formula…, click select forula, then Add formula, name it answered + 1.
- Then click the formula area to edit it, select Add data, type in answered. Search for Answered questions from Personality Test app and select it.
- Then type +1 after the data you have now inserted. Click Confirm, then select that formula, and click Confirm again.
- For Maximum Value, select formula…, click select formula, then Add formula, name it total questions – 1
- Then click the formula area to edit it, select Add data, type in questions. Search for Number of questions of Personality Test app and select it
- Then type – 1 after the data you have now inserted, so that the result of the formula is number of questions minus 1.
- Click Confirm, then select the formula, and click Confirm again.
- Navigate to the Start stage of the personality test app
- Edit the actions of the Click trigger of the Start button of the personality test, so that it also runs the action Show: Progress Bar
- Now open the When this personality test is finished menu from the left sidebar and at the bottom add a new action to Hide: Progress Bar (together with other actions on the last action set for example)
- Save your work, then click Preview to see your changes
8. Reuse Content From Other Templates
In this part of the tutorial, you will learn how to reuse content from other templates, which can spare you time so you don’t have to do it from scratch. In this case, we will spice up our product suggester with a Draw, once the user arrives at the final stage and has scratched to reveal the result.
Objectives:
- Create a Template Part from the main layout of the Game Stage of the Spin & Win Advent Calendar template
- After, navigate to the project from this tutorial, and add the spin & win template part to an extra final stage of the personality test
- Add a single button with the text Participate in draw that must only appear when a personality result is revealed. When clicked, that button must disappear and show the user the spin and win game stage.
See solution
- Make sure your work is saved
- Click Choose a Template from the top bar
- Filter for Marketing Games and find the Spin & Win Advent Calendar
- Click View (opens a new tab) to experience it
- Go back to previous tab and select Use it then Create as new page
- When in the editor use Page Overview and navigate to the Game stage
- Right-click the row named Wheel_fortune (tip: use the List View on the right sidebar to see a flat overview of the content) that contains the wheel as well as the text and button, select Create template, and call it Spin and Win Draw, and then then click create
- Now click on your Dot’s name on the top left corner to go to your Dashboard and enter the editor of the page we were editing before (subtitled Using product suggesting test wizard)
- Now navigate to any stage of the Personality Test app, and on the left sidebar open the Final stages and others menu.
- Click Add new stage and name it Spin and win draw
- Navigate to that stage (click the edit button or normal navigation) and start by adding a row with a single column, all sides equal 20px spacing and centered content
- Open the Content Panel, go to Template Parts > My Templates, and drag in the Spin and Win Draw template you have created
- Navigate to the page stage, drag a row with a single column beneath the Personality Test app, and give its column min height of 100px, all sides equal 20px spacing and centered content
- Now drag a Magic button from the Tools menu into the new column, edit text to Participate in draw
- Navigate to a question stage, right-click one of the answer buttons and select Copy theme, then navigate back to the page stage and apply it to the newly added button, then click Finish
- Now right-click the newly added button and rename it to AccessDrawButton
- In its actions menu, click Add action set under the Click trigger, then Add action, then search for personality stage, find the action Go to stage Spin and Win Draw of Personality Test app and select it. Add another action below it, search for AccessDrawButton and select Hide: AccessDrawButton action (so that the button disappears when clicked)
- Then open its Visibility menu, and toggle Hide this component by default (this will make it disappear)
- Make sure Reveal All is on, and then right-click the Reveal component, open its Actions menu, and click Add action beneath the existing Hide Reveal action.
- Search for AccessDrawButton, find the action Show: AccessDrawButton and select it.
- Save your work and then click Preview to see your changes
9. Add Gating To Access The Draw
The last step! If you’ve made it this far, worry not, you’re almost there.
Objective: add a new final stage to the Personality Test app named Lead Gate that should appear when the user clicks the Participate in Draw button, and should require the user to provide contact details before participating in the Spin and Win game.
See solution
- While inside the Personality Test app, open the Final stages and others menu on the left sidebar and add a new stage. Name it Lead Gate
- Then navigate to that stage and drag in a row with single column, and set the column to solid white background, all sides equal 20px spacing and centered content.
- Drag in a Lead Form from the Tools menu into the column, then press Confirm
- Enter the Lead Form app, right-click the submit button and under its Click actions, delete the Go to stage After Submit, and then add a new action after the Create new contact action, search for personality stage, find the Go to stage Spin and Win Draw of Personality Test app and select it
- Go to the page stage, make sure Reveal All is on so that you see the Participate in Draw button, right-click the button, go to its actions and change the target of the action from its current target to Lead Gate.
- Save your work and click Preview to see your changes
10. If You Have Reached This Far…
Congratulations! You have mastered most core aspects of editing Wizards on Dot.vu.
If you have done the tutorial using the See solution as guidance, and wish to challenge your skills and push your learning further, then refresh this page and try each step of this tutorial only opening the See solution after you have tried the step by yourself.
Tip: to get back on track quickly in case you deviate from the tutorial road, remember to Save often when you are on the right road, and then you can always refresh without saving changes to revert to the last saved state.