How to Edit a Page in Advantage

How to Edit a Page in Advantage: A Step-by-Step Tutorial

How to Edit a Page in Advantage: A Step-by-Step Tutorial

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

Creation Date: March 25, 2024
Created By: Oren Shapiro

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

Click on Live
3. Click on Preview

You can click on Preview to preview the page.

Click on  Preview
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 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.

Click on Copy to Draft
5. Click on Template drop-down

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

Click on Template drop-down
6. Click on Layout

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

Click on Layout
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.

Click on Versions
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.

Name your version
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.

View your Drag and Drop Widgets
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.

View Top Area…
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.

Edit a Module
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.

Edit a Banner
13. Click on Banner Settings

Here you can edit the height of the banner.

Click on Banner Settings
14. Select Left from Text Alignment

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

Select Left from Text Alignment
15. Select Title

Here you will enter the title of the banner.

Select Title
16. Select Link

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

Select Link
17. Click on Image

Here you can upload your image.

Click on 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.

Click on Content
19. Click on HTML

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

Click on HTML
20. Click on Update

Update the specific banner.

Click on Update
21. Click on Update

Click update again to update the module.

Click on  Update
22. 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
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.

Click on Deactivate
24. Click on Delete

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

Click on Delete
25. Click on the Computer Screen Icon

This will open the Live Preview Editor.

Click on the Computer Screen Icon
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.

Click on Widgets
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.

Edit a Module
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.

Move a Module
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.
Click on Tablet View
30. Tablet Portrait

Example of the Device emulator in Tablet Portrait mode.

Tablet Portrait
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.

Click on Create Task
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.

Click on Actions
33. Click on Functions

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

Click on Functions
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.

Click on Historical
35. Click on Version

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

Click on Version
36. Select a version

Select a version to view.

Select a 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. 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.

Bell Icon

Actions And Functions Features

Topics in this article, covers the following features built into the page management experience:

In the Page Manager when you've selected a page from your site navigation tree, in the Draft tab the Actions drop-down menu will have the following features for you to use; Preview, New Draft, and Clone Current. More on each of these is found below.

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.

Share a Preview 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.

If the admin wants to password-protect their preview URL, this is done by selecting the expiry duration from the drop-down, followed by typing in a password in the optional password field and then clicking Create A Share Link. Once the URL is shared, the recipient will be prompted to login before viewing the preview page.

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.

 

New Draft 

Within Advantage CSP, editing a live page is prohibited. As a result the CMS contains 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.

Clone Current Version

This feature allows an admin to copy a page’s working draft with all of its modules, associated content and data sources still intact within their zones. This feature can be used where 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.

 

Save

From the Draft tab, the Functions drop-down menu has the Save function that 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.

Publish

When work on a page is complete, click Functions and Publish to make that page live on your website.

Delete

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

 

From the Live tab we see that the Actions drop-down menu has changed and only one option is available, Copy to Draft, and Functions now has Unpublish as the option.

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 the Content Manager 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.

Unpublish

Available from the Live tab only in the Functions drop-down, 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 bell 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.

Creating A Password Protected Page

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. As an example, go to Content Manager > News > News Article.

  1. Select the page you wish to password protect by clicking on the pencil icon.

  2. Create a version of a draft by hovering over the Actions button near the top right and selecting Add Draft. This will give the page a Version and Version Name with the current date and time.

  3. Then click on Actions > Preview. This will open a new tab in your browser.

  4. In the Preview tab enter a password, use the time drop-down menu to select the time limit you wish to have the password on the page for and click Create A Share Link.  



  5.  Copy the link to send to managers for review.

Back to Top Button