Edit Page Content 1. Edit a Page 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 Build with Advantage 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. Replace Draft You will want to copy the live version to Draft. As a novice this is good practice, once you become familiar you do not need to replace 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 sections, 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. Click on Customize the zone classes 13. Click on Zone Setting Top Area 14. Click on Zone Container 15. Click on Zone 16. 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. 17. 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. 18. Click on Banner Settings Here you can edit the height of the banner. Click the arrow at the end for the dropdown menu. 19. Select Text Alignment Select whether you want the banner text aligned left, right or center from the dropdown menu. 20. Click on Title Here you will enter the title of the banner. 21. Click on Link Here you can select a link by selecting a page with your site or an external page. 22. Click on Select to add an image to your banner The Image Manager will open allowing you to select an image you've uploaded 23. 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. 24. Click on HTML The tabs below allow you to toggle between the WYSIWYG editor, HTML and Previewing your content. 25. Click on Update in both spots to save the work on your module. 26. Click Actions and Save Draft When back to the Content page be sure to Save Draft in the Actions menu. 27. Click on Full Width Here, you can change the size of the module. In the 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. 28. 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. 29. Delete a module Clicking the red garbage can icon will delete the module. Be careful you can't undo this. 30. 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. 31. 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. 32. 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. 33. 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. 34. Click on Smartphone View An example of the Device emulator in Smartphone mode. 35. 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. 36. Click on Actions 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 use the Schedule feature to schedule a time for the page to publish or unpublish. 37. Click on Go Live then Publish Here you can Publish your page. If you have multiple websites on the same Advantage installation you will be able to publish this page across multiple sites. 38. 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. 39. Click on Version Click on the drop-down-menu to view your historical versions available to you. 40. Click on Actions Click Copy to Draft to start working on that page and then publishing it for Live viewing. 41. 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. Actions Menu Features 1. Actions Menu 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; Save Draft, Delete Current Draft, Preview, and Schedule. More on each of these is found below. 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. Schedule Use the Schedule feature to automatically Publish or Unpublish a page that has been saved as a Draft. 11. Click on Calendar popup Set the Publish date. 12. Click on Time popup Set the time you want the page or tool to be published. 13. Update and Save Draft for that page or tool 14. 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. 15. Live Tab - Unpublish If you are in the Live tab the Actions menu will appear slightly different. Only Schedule, Unpublish, Preview and Replace 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. 16. Live tab - Replace 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 Replace 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.