How to Edit a Page

Edit a Page

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

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.

Click on Drafts

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.

Click on Live

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

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.

Copy to Draft

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

Most websites will have one template.

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

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

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

View the available Layouts from the right side menu.

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.

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

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.

Click on Version Name to name your version

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.

Click on Modules to view your Drag and Drop Modules

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.

View Top Area…

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.

Edit a Module

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.

Edit a Banner

14. Click on Banner Settings

Here you can edit the height of the banner.

Click on Banner Settings

15. Select Text Alignment

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

Select Text Alignment

16. Click on Title

Here you will enter the title of the banner.

Click on Title

17. Click on Link

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

Click on Link

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

Click on Select to add an image to your banner

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.

Click on the Content Area

20. Click on HTML

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

Click on HTML

21. Click on Update for the banner content

Click on Update for the banner content

22. Click on Update again in the top right corner

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.

Click Actions and Save Draft

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.

Click on Full Width

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.

Click on Deactivate this module

26. Delete a module

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

Delete a module

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.

Click on Visual Editor

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.

Edit a Module

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.

Move a Module

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.

Click on Tablet View

31. Tablet Portrait

Example of the Device emulator in Tablet Portrait mode.

Tablet Portrait

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.

Click on Create Task…

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

Click on Action

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.

Click on Go Live then Publish

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.

Click on Historical

36. Click on Version

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

Click on Version

37. Click on Actions

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

Click on Actions

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.

Warning Icon
Back to Top Button