In this tutorial we walk you through some of the key functions of editing a page in Advantage.

# Editing a Page

1. Click on Drafts

When you first arrive on the editing canvas you will see the Draft tab active. In Advantage you're always working in "Draft Mode" so you don't have to worry about mistakenly making changes to the live page.

2. Click on Live

You will click on Live - this the current Live version of the page you are editing. Live mode is 'read only' meaning you can't make any changes.

3. Click on Preview

You can click on Preview to preview the page.

4. Click on Copy to Draft

You will want to copy the live version to Draft. As a novice this is good practice, once you become familiar with Advantage you do not need to copy the live version to draft every time. It is good habit to form as the Live version is the latest copy of that page. In Draft Mode, if multiple people have roles at your organization to edit content, different people could make different edits, without you being aware.

5. Click on Template drop-down

Here you can select the template. Most website will have one template.

6. Click on Layout

Here you can select the pre-defined layout for your page.

7. Click on Versions

Here, you can view preview draft versions of the page. They can be named or timestamped with the user who created the draft.

8. Name your version

You can either leave the default naming convention of a timestamp and user ID or you can name it to be me familiar.

9. View your Drag and Drop Widgets

On the right hand side you can view your Drag and Drop Widgets. You can drag the widget into the areas defined as "Top Area" or "Contained 1" etc.

10. View Top Area…

These section, this one called "Top Area" are your containers. Your containers make up layout of your page. The containers help organize your widgets and content but can also have more advance functions by controlling the CSS and design specific to that container zone.

11. Edit a Module

When you click on the Pencil icon, you will open a view to edit that module. For this particular example we are editing a banner.

12. Edit a Banner

Every module will have a different view, but they essentially share the same elements. Because the banner module has multiple instance, you will click on the specific banner you want to edit by clicking on the Pencil Icon.

13. Click on Banner Settings

Here you can edit the height of the banner.

14. Select Left from Text Alignment

Select whether you want the banner text to be aligned left, right or center.

15. Select Title

Here you will enter the title of the banner.

16. Select Link

Here you can select a link by selecting a page with your site or an external page.

17. Click on Image

Here you can upload your image.

18. Click on Content

Here you can enter the content of your banner if you have content to enter. You can choose just to have the title and not have any subtext.

19. Click on HTML

The tabs below allow you to toggle between the WYSIWYG editor, HTML and Previewing your content.

20. Click on Update

Update the specific banner.

21. Click on Update

Click update again to update the module.

22. Click on Full Width

Here, you can change the size of the module. With Advantage's grid system modules will automatically adjust on screen size and by changing the module width you are free to design as you wish. You can have one module as 23% and another 75% - just remember you only have 100% of each line - therefore you can't have 3 modules as 25%, 25% and 50%, it would have to be 33.33% each or 1/3rd.

23. Click on Deactivate

Click on the "Checkmark" to deactivate the module. This will hide the module from being seen when published. This is good feature when you want to hide a piece of content but might want to use it in the future.

24. Click on Delete

This Red X will delete the module. Be careful you can't undo this.

25. Click on the Computer Screen Icon

This will open the Live Preview Editor.

26. Click on Widgets

In the Live Preview Editor you can see all you Drag and Drop Modules on the right hand here. Like previous you can drag and drop them anywhere on the page.

27. Edit a Module

As you scroll and hover you can see which modules can be editing as they will be highlighted and this toolbar will appear. To edit a module simply click on the Pencil Icon.

28. Move a Module

You can drag, drop and move any module that's highlight, just hold and drag it to where you want it to go. Move a module from the bottom of the page and back up, etc.

29. Click on Tablet View

At the top here you can view the Mobile Device emulator - you can quickly get an idea of how you content might look on different devices.

30. Tablet Portrait

Example of the Device emulator in Tablet Portrait mode.

31. Click on Create Task

Back to the Canvas, at the top right you have you page toolbar. Here you can create a task and assign it to someone of your team to review the page for example.

32. Click on Actions

The Actions button allows you to Preview the page, which will open in a new browser (or tab). It will be like the Live Preview Editor without the ability to edit modules. You can create a New Draft or Clone the Current Draft.

33. Click on Functions

Here you can Publish the page or Save it or Delete. If you have multiple website on the same Advantage installation you would also be able to publish this page across your multiple sites.

34. Click on Historical

The Historical Tab at the top will show you all the previous published version of the page you are working on. Like the Live tab, you can Preview it or copy it to Draft. I good usecase for this is if someone happens to have made an unwanted change you can revert back to a previous state.

35. Click on Version

Click on the drop-down-menu to view your historical versions available to you.

36. Select a version

Select a version to view.

37. Click on Actions

Click Copy to Draft to start working on that page and then publishing it for Live viewing.

38. Bell Icon

This Bell icon means that Draft version you are working on contains changes from the current live version that is public. If you do not see this icon it means you are working in a Draft version that is not the current published live version.