The Layout Editor defines the structure of the site - location, order, size and alignment of all site building blocks - logo, titles, navigations, content areas, as well as the appearance of these basic building blocks (backgrounds, paddings, margins). You can define different layouts for different pages (like Intro page, Home Page, Inner page, etc).
The Layout Editor uses three types of building blocks to define the complete structure of a the site:
Containers allow the designer to style parts of the layout using various CSS style properties (width, height, background color and images, margins and padding) to achieve a certain appearance.In the Layout Editor toolbar and on the canvas. They can be nested for complete flexibility. Each Container contains a single cell Layout by default.
Layouts are elements used to divide the space into cells, creating the basic grid of a site design. They are represented in the toolbar and on the canvas as white rectangles with a dashed outline. Layouts can be either columns or rows and can be nested one inside another to create any grid needed of any complexity. Layouts however cannot be styled - they are used only to define the rows and columns required by the design.
Content Elements define the position of client editable areas (such as Main Navigation, Main Content, Copyright, etc.). They can also be styled using CSS styles to achieve a certain appearance required by the design. Read more about the Content Elements
Watch the Layout Editor Introduction tutorial
Also, see the video on Creating a Simple Design from Scratch to see how the blocks are used in a real-world scenario.
The Style Editor allows you to visually define all text styles as well as the of appearance of navigation, page and site titles, section titles, form buttons, etc. Each element on the site can be styled using the Style Editor with a live preview showing the end-result during the process. You have the freedom to define multiple page color themes that can be used in different sections of the site (so you can color code thematically or just add emphasis to select pages). Watch the Style Editor Introduction Tutorial
The SiteKreator Pro framework offers 4 navigation panels (main, secondary and header, footer micro navigations). The main navigation panel supports 2-level nesting and all other panels support a single level of items.
For the main and secondary navigations there are several options:
- CSS-based text navigation, where the feel and look of the nav is defined from the CSS Editor. You can also select a combination for the appearance of the main items (beside each other in a row, or below each other in a vertical column) and the layout (as a stripe, as a dropdown, below its parent item or on the side) and animation (fade, slide, etc) for the sub-navigation
- Flash based menu, where the whole menu is pre-defined in a Flash movie. The sub-menu layouts/animation are part of the Flash. (this is under development currently)
- Dynamic Text2Images menu, where the control over the apperance is again in the CSS Editor (like a. above), but instead of text, the caption of the menu is dynamically generated as an image using a much bigger selection of fonts (not limited to limited set of cross-platform available fonts). All the effects available in the text-based menus are available here as well. (under development)
- Dynamic Text2Flash menu, similar to c. above, but with the caption rendered using Flash. (under development)
The header and footer micro navigation panels are text based, fully controled from the CSS Editor.
The secondary navigation can be defined per-page, allowing you to create site sections sharing the same nav panel for ease of maintenance.Images Library
The Images Library Editor allows you to create a set of images for your customers to use on their web site. When editing an existing page or creating a new one, your client will be able to select an appropriate image for the page header from the library crated by you.
Additionally you can decide to use the extremely rich images library created by SiteKreator for its stock designs - just select a size of image close to the one you want to have in your site and get a complete library in a matter of seconds. See how to create your own Stock Images LibraryAnimation Designer
The Animation Designer allows you to visually create catchy animations by rotating images and text with different effects and adding sound effects. It designed for easy and quick creation of splash pages or banners. The result can be inserted anywhere on the site as normal SiteKreator element. (under development)Shared Elements
Shared Elements allow designers to use a single element as many times as needed throughout the site with edits replicated on all locations. It's ideal for sidebars that have to reside on multiple pages with the same content - for example banners, contact boxes, address snippets, etc. If you are familiar with the current Shared Areas on SiteKreator (in the header and footer) - this feature works in a similar fashion but with the added benefit of adding the element anywhere on the page. (under development)