Introduction The Layout Manager in Advantage CSP is a robust tool equipped with three tabs for configuring various elements of your website’s structure, each designed for specific functionalities. Layouts: This tab allows for the addition or importation of different layouts, toggling their active status, and editing them with ease. You can also duplicate any layout using the copy function. Layout Builder: Adding a new layout is intuitive with the Layout Builder, where you can craft a custom layout by dragging and dropping the Container and Row widgets into the work area, designing your page structure visually. Containers: In the Containers tab, you can create a new container by naming it and specifying the Tag Name, along with any CSS Classes and Inline Styles you require. Save your updates to make the container available for use on your site. Zones: To establish Zones, you’ll start by creating a zone container. Simply fill in the necessary fields, then save your updates. These Zones will then be ready to organize and display content on your pages as designated areas within the layout. Layouts 1. Click on Domain Management 2. Click on Layout Manager 3. Click on Layouts… 4. Click on Add new record… 5. Or Edit and existing entry… 6. Or Clone and existing layout as a starting point 7. Click on Edit icon 8. Now you can access the drag and drop Layout Builder 9. Drag highlighted element 10. Drag highlighted element 11. Drag highlighted element 12. Click to dynamically generated View of the HTML 13. View the code 14. Click on Ok to close 15. Click on NAME… 16. Click on ZONE CONTAINER… 17. Click on ZONE… 18. Click on Update 19. Drag highlighted element 20. Drag highlighted element 21. Click on Properties… 22. Click on NAME… 23. Click on Update 24. Click on Container 2… 25. Click on In-line Scripts 26. Click on Add new record 27. Paste Scripts in the editor… 28. Click on CSS Files 29. Select Yes from Combine Scripts 30. Click on Add new record 31. Select Top of Page 32. Click on Url/Location 33. Click on Javascript Files 34. Select Yes from Combine Scripts 35. Click on Add new record 36. Select Top of Page 37. Click on Url/Location 38. Click on Save 39. Click on Back to List 40. Go to the page manager and select your new layout 41. Note the new empty container 42. Click to enter visual editing if that is your preference 43. Note the module; the new container is directly below … 44. Note that the carrousel module has been dragged up and dropped into the new container … Adding Styling to Containers in Advantage CSP 1. Click on Containers 2. Click on Add new record… 3. Click on highlight 4. Click on Name 5. Click on Tag Name 6. Click on CSS Classes 7. Click on Inline Styles 8. Click on Update Zones and Records 1. Click on Zones 2. Click on Add new record… 3. Click on Wide 4. Click on Contained 5. Click on the Edit Icon 6. Click on Name 7. Click on Tag Name 8. Click on Container CSS Classes 9. Click on Container Inline Styles 10. Click on Tag Name 11. Click on Zone Css Classes 12. Click on Zone Inline Styles 13. Click on Update