what are sections

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 contenttemplate

NOTE: 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

Creating, editing and deleting a section

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


An example: Here we show you one of the section used in the smanager.net web site

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


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.


You also can manage the section by going to the Edit Design tab

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


If you choose to work with Layout Templates instead of Design Templates you will seethe section area here

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


The section manager (Section Gallery & My Section)

To go back to the website diagram, just click on the green/white arrow on the top


How to customize any pre-made widget

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


Creating a tab widget

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


Once you save it, the widget will be display under My Sections

To edit it, you can always click on the edit icon and you will see the code for the widget.


Here is the HTML code generate after you create your new tab widget

You can edit the HTML, CSS and JS code as you like.


How to work with sections when you edit a content template

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


Section Manager (Section Gallery & My Sections) while editing a content template

To go back to the content template list, click on the green/white arrow.


Sections when creating a new content template

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


Section Manager (Section Galley & My Section) while creating a content template

You can minimize the section manager by clicking on the blue arrow.


what are sections

Design

section code

section manager section

section box

section area herewhen

edit icon

html code

content template list

edit design tabunder