Layout Manager

Introduction

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

Creating a Custom Layout with Advantage CSP

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

1. Click on Domain Management
Click on  Domain Management
2. Click on Layout Manager
Click on  Layout Manager
3. Click on Layouts…
Click on Layouts…
4. Click on Add new record…
Click on 	Add new record…
5. Or Edit and existing entry…
Or Edit and existing entry…
6. Or Clone and existing layout as a starting point
Or Clone and existing layout as a starting point
7. Click on Edit icon
Click on Edit icon
8. Now you can access the drag and drop Layout Builder
Now you can access the drag and drop  Layout Builder
9. Drag highlighted element
Drag highlighted element
10. Drag highlighted element
Drag highlighted element
11. Drag highlighted element
Drag highlighted element
12. Click to dynamically generated View of the HTML
Click to dynamically generated View of the HTML
13. View the code
View the code
14. Click on Ok to close
Click on Ok to close
15. Click on NAME…
Click on NAME…
16. Click on ZONE CONTAINER…
Click on ZONE CONTAINER…
17. Click on ZONE…
Click on ZONE…
18. Click on Update
Click on Update
19. Drag highlighted element
Drag highlighted element
20. Drag highlighted element
Drag highlighted element
21. Click on Properties…
Click on Properties…
22. Click on NAME…
Click on NAME…
23. Click on Update
Click on Update
24. Click on Container 2…
Click on Container 2…
25. Click on In-line Scripts
Click on In-line Scripts
26. Click on Add new record
Click on 	Add new record
27. Paste Scripts in the editor…
Paste  Scripts in the editor…
28. Click on CSS Files
Click on CSS Files
29. Select Yes from Combine Scripts
Select Yes from Combine Scripts
30. Click on Add new record
Click on 	Add new record
31. Select Top of Page
Select Top of Page
32. Click on Url/Location
Click on Url/Location
33. Click on Javascript Files
Click on Javascript Files
34. Select Yes from Combine Scripts
Select Yes from Combine Scripts
35. Click on Add new record
Click on 	Add new record
36. Select Top of Page
Select Top of Page
37. Click on Url/Location
Click on Url/Location
38. Click on Save
Click on  Save
39. Click on Back to List
Click on  Back to List
40. Go to the page manager and select your new layout
Go to the page manager and select your new layout
41. Note the new empty container
Note the new empty container
42. Click to enter visual editing if that is your preference
Click to enter visual editing if that is your preference
43. Note the module; the new container is directly below …
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 …
Note that the carrousel module has been dragged up and dropped into the new container			…

Adding Styling to Containers in Advantage CSP

Adding Styling to Containers in Advantage CSP

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

1. Click on Containers
Click on Containers
2. Click on Add new record…
Click on 	Add new record…
3. Click on highlight
Click on highlight
4. Click on Name
Click on Name
5. Click on Tag Name
Click on Tag Name
6. Click on CSS Classes
Click on Css Classes
7. Click on Inline Styles
Click on Inline Styles
8. Click on Update
Click on Update

Zones and Records

Zones and Records

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

1. Click on Zones
Click on Zones
2. Click on Add new record…
Click on 	Add new record…
3. Click on Wide
Click on Wide
4. Click on Contained
Click on Contained
5. Click on the Edit Icon
Click on the Edit Icon
6. Click on Name
Click on Name
7. Click on Tag Name
Click on Tag Name
8. Click on Container CSS Classes
Click on Container CSS Classes
9. Click on Container Inline Styles
Click on Container Inline Styles
10. Click on Tag Name
Click on Tag Name
11. Click on Zone Css Classes
Click on Zone Css Classes
12. Click on Zone Inline Styles
Click on Zone Inline Styles
13. Click on Update
Click on Update
Back to Top Button