Create new design

398 views

Published on

Create website design in a powerful CMS platform with smanager

Published in: Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
398
On SlideShare
0
From Embeds
0
Number of Embeds
21
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Create new design

  1. 1. Create New DesignThe basics about creating a new design. Three options to choose from: CSS Layouts1) 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 yourdesign or you can choose any template, download it, make updates and upload it again to Smanager tocontinue working on it.Create New Design - 1
  2. 2. Three options to choose from: CSS Designs1) 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 yourdesign or you can choose any template, download it, make updates, and upload it again to Smanagerto continue working on it.Create New Design - 2
  3. 3. Three options to choose from: Upload Your Own DesignYou can upload your own design following the structure showed in the image above. Any js script youhave has to be under a folder named scripts. In the images folder, put all the images your designneeds. All of the CSS style needs to be in a file named styles.css. Your main website template needsto 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 pagesdesign.Create New Design - 3
  4. 4. Creating a design: Using CSS LayoutWhen 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 mainpages, 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 (tohandle 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 inCreate New Design - 4
  5. 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 & images1) When you mouse over "Click to view/edit image" you will see the image that is being used in thatclass/id. You can easily change that image by just clicking on the link. Edit all your code onlineEdit HTML and CSS code online without needing to download or upload anything. Also you can useour unique tools to edit any color and image easily with point and click.Create New Design - 5
  6. 6. Use the wizard to clone any HTML block or edit colorIf you choose the CSS design option or upload your own design, you will see a new tab calledWIZARD.With the Wizard you can edit any color and text with just point and click. Also you can drag and dropany structure across your design and clone any part of HTML. For more information, refer to BestPractices for Designing for Smanager.1) Drag and drop with your mouse.Create New Design - 6
  7. 7. Manage sectionsYou can create and edit unlimited sections. You can place sections in your main template or in eachcontent 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 thesection and then click on the section name.Note: Custom sections are created automatically by Smanager with all the content you have in thetemplate you uploaded between the <header> </header> tags.Create New Design - 7

×