What are sections


Published on

Learn all about the sections in Smanager CMS.

Sections are HTMl, JS and CSS code that you can embed at any part of your template. You can add sections to your main template and to any content template you create.

Published in: Design
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

What are sections

  1. 1. What Are Sections?Sections are HTMl, JS and CSS code that you can embed at any part of your template. You can addsections to your main template and to any content template you create.For example: Any widget, such as carrousel, tab navigation system, modal window or any customprogramming can be setup as a section. You can easily edit each section and use it across your entirewebsite.When you add a section in your main template, it will be display in all your pages. When you add asection in a content template, it will be display only in the pages you created using that specific contenttemplateNOTE: Sections are relative to each account. So you can use the same sections for any design youhave created or will create under the same account.What Are Sections? - 1
  2. 2. Creating, editing and deleting a sectionCreate a section: Click on the plus icon to create a section. You just need to copy and paste the code ineach relative tab.Edit a section: Click on the edit icon to edit the section.Delete a section: Click on the delete icon to delete the section.What Are Sections? - 2
  3. 3. An example: Here we show you one of the section used in the smanager.net web siteWhen you click the edit icon you will see the section code. You just need to place the right code in theright tab. All the javascript code has to be placed in the JS tab. The CSS code has to be placed in theCSS tab and the HTML code has to be placed in the HTML tab.What Are Sections? - 3
  4. 4. Where can I manage my sections?When you create a new design or edit any existing design, you will see a box on the left where you seethe "Section Gallery" and "My Sections".Section Gallery: Are pre-made widgets that you can customize easily. You can customize tabs, modalwindow, carrousel, tooltip and many more.My Sections: Are all the custom widgets or sections you create. Any widget you customize from thesection galley will be display under "My Sections" after your customization.What Are Sections? - 4
  5. 5. You also can manage the section by going to the Edit Design tabUnder the Edit Design tab, you will see in the section box in the website diagram. Click on any of thethree different icons to add, edit or delete a section.What Are Sections? - 5
  6. 6. If you choose to work with Layout Templates instead of Design Templates you will see the section area hereWhen you select any Layout template (Option 1 in the first step when creating a new design), you willsee on the left a website diagram and a section area. Click the plus icon in the section area and thewebsite diagram will flip over to display the Section Manager.What Are Sections? - 6
  7. 7. The section manager (Section Gallery & My Section)To go back to the website diagram, just click on the green/white arrow on the topWhat Are Sections? - 7
  8. 8. How to customize any pre-made widgetBy clicking GET [widget name], window will open where you can customize any widget. For example, ifwe click on "Get Tabs" we can start customizing a set of tabs for our web site.What Are Sections? - 8
  9. 9. Creating a tab widget1) Choose the name you want for the tab.2) Choose the color you want for your tab.3) Add the content you want to display when the tab is clicked.And click on "Set/Save" to create your custom tab widget.What Are Sections? - 9
  10. 10. Once you save it, the widget will be display under My SectionsTo edit it, you can always click on the edit icon and you will see the code for the widget.What Are Sections? - 10
  11. 11. Here is the HTML code generate after you create your new tab widgetYou can edit the HTML, CSS and JS code as you like.What Are Sections? - 11
  12. 12. How to work with sections when you edit a content templateWhen you edit a content template, you see a list of all your content templates in your left panel. If youclick on the green/white arrow on the top, the panel will flip to the Section Manager.What Are Sections? - 12
  13. 13. Section Manager (Section Gallery & My Sections) while editing a content templateTo go back to the content template list, click on the green/white arrow.What Are Sections? - 13
  14. 14. Sections when creating a new content templateWhen you create a content template, you can also manage and create sections. Click on the blue arrowon the left and you see the Section Manager displayed.What Are Sections? - 14
  15. 15. Section Manager (Section Galley & My Section) while creating a content templateYou can minimize the section manager by clicking on the blue arrow.What Are Sections? - 15