How to Edit a Page

1. Once you've created a page in the Navigation you can go in and edit it. Click on Edit

2. Click on Drafts

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

3. 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.

4. From the Action menu you can select Preview to preview the page.

5. 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 CSP 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.

6. View the Templates by clicking on Layouts on the right side and use the Templates dropdown menu.

Most websites will have one template.

7. View the available Layouts from the right side menu.

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

8. Click on Version - the arrow at the end of the version name you are currently viewing

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

9. Click on Version Name to name your version

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

10. Click on Modules to view your Drag and Drop Modules

Use the arrows to expand each section of the modules. You can drag modules into the areas defined as "Top Area" or "Contained 1" etc.

11. View Top Area

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

12. 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.

13. Edit a Banner

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

14. Click on Banner Settings

Here you can edit the height of the banner.

15. Select Text Alignment

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

16. Click on Title

Here you will enter the title of the banner.

17. Click on Link

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

18. Click on Select to add an image to your banner

The Image Manager will open allowing you to select an image you've uploaded

19. Click on the Content Area

You can use the WYSIWYG editor to add content to your banner. You can choose to just have a title and not have any subtext.

20. Click on HTML

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

21. Click on Update for the banner content

22. Click on Update again in the top right corner

23. Click Actions and Save Draft

When back to the Content page be sure to Save Draft in the Actions menu.

24. Click on Full Width

Here, you can change the size of the module. With Advantage CSP'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.

25. Click on Deactivate this module

Click on the "Checkmark" to deactivate the module. This will hide the module from being seen when published and is indicated by the orange circle with a line through it. This is a good feature when you want to hide a piece of content but might want to use again in the future.

26. Delete a module

Clicking the red garbage can icon will delete the module. Be careful you can't undo this.

27. Click on Visual Editor

This will open the Live Preview Editor. Your Drag and Drop Modules are available on the right side for you to drag anywhere you need on the page.

28. Edit a Module

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

29. Move a Module

You can drag, drop and move any module that's highlighted, 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.

30. Click on Tablet View

At the top here you can use the Mobile Device Emulator - you can quickly get an idea of how your content will look on different devices.

31. Tablet Portrait

Example of the Device emulator in Tablet Portrait mode.

32. Click on Create Task…

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

33. Click on Action

The Actions button allows you to Save Draft or Delete Current Draft. You can 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 also create a New Draft or Clone the Current Draft. You can also use the Schedule feature to schedule a time for the page to publish or unpublish

34. Click on Go Live then Publish

Here you can Publish your page. If you have multiple websites on the same Advantage CSP installation you would also be able to publish this page across your multiple sites.

35. Click on Historical

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

36. Click on Version

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

37. Click on Actions

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

38. Warning Icon

This Warning icon means that the 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 on a Draft version that is not the current published live version.

2. Save Draft

The Save Draft function will allow you to save any edits you've made to that Draft and come back to it later and continue your work until you are ready to Publish and make the page live.

3. Delete Current Draft

Clicking Delete Current Draft will remove that Draft page and it will no longer be available in the Versions drop-down list.

4. Preview

Click on Preview and the preview window will load in a new tab of your browser, here you can see what that page will look like for your website as you are making edits to it. Be sure to allow popups in your browser for this new tab to open.

5. Preview window

6. Emulator

Along the top right of the Preview window are the Emulator options. You can emulate how the page will render on a Desktop, Tablet, Tablet - landscape, Smartphone, Smartphone - landscape, by clicking on the corresponding icon.

7. An example of Tablet view

8. Create A Share Link

In the top left corner of this Preview there is the option to Create A Share Link by clicking on that button a link will pop up that the admin can copy and email to the appropriate users for review. The default time for the link to be active is 4 hours and this can be adjusted by using the time dropdown menu first and then clicking Create A Share Link.

9. Password Protected Preview Link

Creating a password protected page is useful when you need to send a page out to select managers or executives or to test out what a public page would look like before a release.

1. Set the time from the dropdown menu
2. Enter a password
3. Click Create A Share Link
4. Copy URL and share where needed

10. New Draft

Within Advantage CSP, editing a live page is prohibited. As a result there is a feature called New Draft. This feature creates a new page with no content but with the same Layout and Zones as the page you were on for you to then add to and customize.

11. Clone Current

This feature allows an admin to copy a page’s working draft with all its modules, associated content and data sources still intact within their zones. This feature can be used when an admin needs to make subtle modifications to an existing page and does not want to recreate it from scratch, or in the event the admin would like to A/B test their content prior to taking it live.

12. Click on Schedule

13. Click on Calendar popup

Set the Publish date

14. Click on Time popup

Set the time you want the page or tool to be published

15. Update and Save Draft for that page or tool

16. Unpublish settings

If the page or tool only needs to be on your site temporarily you can also set it to Unpublish on a specific date and time by using the same calendar and time popup in the Unpublish field.

17. Live Tab - Unpublish

If you are in the Live tab the Actions menu will appear slightly different. Only Schedule, Unpublish, Preview and Copy to Draft functions are available.

The Unpublish button allows you to remove a page that was displaying on your Live site.

Once clicked it will take the content to the Draft tab and no longer be visible on your website and you will see the Changes Pending notification with the Warning icon. From the Draft tab you can make necessary edits and then Save and Publish the content again when it's ready to be shown on your website.

18. Live tab - Copy to Draft

This action is used when editing Live content only, where a user brings a copy of the production version of the selected content into the Draft view. The Copy to Draft feature can be found on the right corner within the Live tab of both Structured Tools and Page Manager. Once clicked, the content of the live version of the record is copied to the Draft tab. The window switches to the Draft tab where the admin can choose to further edit the draft content and then Save and Publish the record once the modifications are made.