1. Create New Design
The basics about creating a new design.
Three options to choose from: CSS Layouts
1) If you mouse over "Info (layout name)," you can see the basic information about the layout.
2) You can click on "View all layouts" to see all the layouts available.
3) There is a link to download the template. You can work 100% online in Smanager to create your
design or you can choose any template, download it, make updates and upload it again to Smanager to
continue working on it.
Create New Design - 1
2. Three options to choose from: CSS Designs
1) If you mouse over "Info (design name)," you can see basic information about the layout.
2) You can click on "View all layouts" to see all the layouts available.
3) There is a link to download the template. You can work 100% online in Smanager to create your
design or you can choose any template, download it, make updates, and upload it again to Smanager
to continue working on it.
Create New Design - 2
3. Three options to choose from: Upload Your Own Design
You can upload your own design following the structure showed in the image above. Any js script you
have has to be under a folder named scripts. In the images folder, put all the images your design
needs. All of the CSS style needs to be in a file named styles.css. Your main website template needs
to be named index.html.
You need to zip it all and upload it.
Note: Do not use any spaces in the name of the folder you will zip.
More about template options:
You can have up to two main templates for each design - one for home and one for the inner pages.
You if choose to have two templates, you need to upload the same structure with the home template.
Later you will assign what template to use as the home design and what template to use as inner pages
design.
Create New Design - 3
4. Creating a design: Using CSS Layout
When you select any CSS layout, you will see a web site diagram on the left.
1) Use the blue arrow to minimize the diagram and have more work space for designing.
2) Use the green/white arrow to allocate where in the template you want each specific block.
3) When choosing the menu, you have three options: menu level 1, menu level 2 and menu level 3.
Menu level 1 will show the main pages, menu level 2 will show any page you allocate under those main
pages, and menu level 3 will show all the pages that you allocate under any page of the menu level 2.
4) You have all the control you need. You can use Design View, HTML View, CSS Style Sheet (to
handle all the css code for your design), and Edit Colors and Images.
Design View: This is a WYSIWYG editor that allows you to edit and add images in a more visual way.
HTML View: This is an editor that allows you to handle all the HTML code.
CSS Style Sheet: This is an editor to edit your CSS code.
Edit Colors & Images: This is an easy editor that allows you to edit any color and image you have in
Create New Design - 4
5. your CSS style sheet with just point and click.
5) Clicking the add icon allows you to create or add content for each specific block, for example: footer,
content, banner or menu.
Edit colors & images
1) When you mouse over "Click to view/edit image" you will see the image that is being used in that
class/id. You can easily change that image by just clicking on the link.
Edit all your code online
Edit HTML and CSS code online without needing to download or upload anything. Also you can use
our unique tools to edit any color and image easily with point and click.
Create New Design - 5
6. Use the wizard to clone any HTML block or edit color
If you choose the CSS design option or upload your own design, you will see a new tab called
WIZARD.
With the Wizard you can edit any color and text with just point and click. Also you can drag and drop
any structure across your design and clone any part of HTML. For more information, refer to Best
Practices for Designing for Smanager.
1) Drag and drop with your mouse.
Create New Design - 6
7. Manage sections
You can create and edit unlimited sections. You can place sections in your main template or in each
content template you have.
1) By clicking on the add icon, you can create your own section.
2) You can edit or delete any section you created.
3) To place any section in your design, you need to click on the design where you want to place the
section and then click on the section name.
Note: Custom sections are created automatically by Smanager with all the content you have in the
template you uploaded between the <header> </header> tags.
Create New Design - 7
