Tutorials & Documentation

Tutorials

1 Page in 3 Minutes

Style layout content

DWT Made Easy

How to Create a Full Site

Generate a Mobile Version of Your Site

Design Responsive Pages

Documentation

A. Templates Gallery

B. Layout Editor

C. FAQ

1. Can I use the license to build layouts for an unlimited number of websites?

Yes. This is a single user unlimited license and this means that you can use it to build layouts for an unlimited number of websites.

2. Are the templates from templates gallery available in the trial mode?

The basic templates are all available in the trial mode and only the first full site template is available in the trial version.

3. Can I use the license to work on my both work and home computers?

We offer a secondary free license at the user's request. All you have to do is send an e-mail to support[at]extendstudio.com and ask for a secondary free license.

4. How can I move the extension to a new computer?

You will have to download the extension from your extend studio account and install in on the new computer. Before registering, you will have have to reactivate the serial number by pressing the correspondent "Reset license" button from your account.

5. Does CSS Layouts have compatibility support for all major browsers?

Yes, all the code generated is compatible with all major browsers.

6. Can edit any website page in the FlexiLayouts Editor, even if they were not created using FlexiLayouts 2?

Yes, as long as the page is not dynamic.

A. Templates Gallery

FlexiLayouts 2 comes with several templates available: basic page templates, site templates with multiple pages that are defined in the current site. You will be able to create a page starting from a template or insert multiple template pages into the current site.

You will also be able to save your own templates. They will all be available to insert from "Saved Templates" section.
Once you have chosen the template type, all the related files will be inserted automatically by the extension.

A.1 Basic Templates

Basic templates are already made templates that appear in the main Layouts Editor at the time you press the Create/Edit Layout button.
You can easily add content to these pages using the snippets sidebar. If you want to insert an edit one of the basic templates you will have to select it and press the "Create" button. The basic template will open in the Layouts Editor and it will be available for editing.
The "Basic templates" window appears everytime you want to create a new layout. It can also be opened from the File Menu - "Apply quick layout".

A.2 Full Site Templates

The FlexiLayouts 2 gallery contains 10 full site templates availabe to insert and customize.
Before opening the Templates gallery, create a Dreamweaver site. Create a new page in your Dreamweaver site and save it. After that, open the Templates Gallery by pressing the "Insert template from galery" button.
You will be able to see all pages from each template by clicking on it. You can choose which pages from the template you want to insert in your site. After selecting the pages, press the "Insert" button. A Dreamweaver alert will appear saying that "Site template was loaded successfully".
You will be able to see all the template pages that you have inserted in your Dreamweaver site.

A.3 My Templates

In this gallery you will be able to see and manage all the templates that you have saved.

A.4 Edit Templates

All the templates have been created using CSS FlexiLayouts 2. This means that you can use the CSS FlexiLayouts 2 editor to modify their structure. To edit a layout, open the page where it has been inserted and press the "Create/Edit layout" button from the insert bar. The DWT files hold the big page layout of a template. The template interface will open and it will allow you to unlock and rename regions. You can edit templates from both .dwt and .html files.

A.5 Save in Templates Gallery

In order to save your template in gallery you must have the Editor opened. From the Toolbar, go to File> Save in Gallery and the layout will be saved. The layout will be available in the saved templates gallery.

B. Layout Editor

The Layout Editor opens after pressing the "Add/edit Layout" from the Dreamweaver insert bar.

Here you can add a new template or edit an existing one and you can see all your layout elements and each element of the template is highlighted once you hover it.
The layout Editor includes the toolbar, the snippets sidebar and the sidebar. All these allow you to easily edit your layout, add, style, copy, cut or remove elements.

The "Move" and "Settings" options will appear once you click on a layout element.

The "Generate for element" option is only available on mobile or tablet view. It allows you to generate the desktop version for the selected element.
For example, if you don't want the menu bar to be displayed as a dropdown list, you can reverse it to look like the desktop version. Click here to see a quick video.

The "Move" option allows you to move the element anywhere on the Layout area by dragging and dropping it to the desired place. To cancel the dragging of an element, press the ESC key from the keyboard. Click here to see a quick video.
Once you click the "Settings" button a tooltip with more options will open.
The "move up" and "move down" buttons specifies whether or not a box (an element) should float. You can either clear its float or make it float next to another element.
When you make an element float next to another one, the parent's width is calculated and, if the it is not fitting in, it will not float.
Before applying the float ("move up") property on an element you will have to make the necessary space for it.
The "hide" button hides the element in the Layouts editor.

 

B.1 Toolbar

B.1.a Splitting

The Split feature allows you to split a box into multiple rows or columns.

Layouts 2 Media Queries Tablet View

Select the box that you want to split. From the top right buttons of the toolbar you can choose to add rows or columns. The "add rows" button allows you to select 10 or more rows.

When the mouse is over the "add rows" button, the dropdown will appear and you can choose to add at least 10 rows. If you need to add more than 10 rows, you need to add the number of rows in the 11th box of the dropdown. All the rows added will have the same width and height and different classes by default ( row1, row2, row3 etc). You can customize each one by just selecting it.
The "add columns" button allows you to select 10 or more columns. when the mouse is over the "add columns" button, the dropdown will appear and you can choose to add at least 10 columns. If you need to add more than 10 columns, you need to add the number of columns in the 11th box of the dropdown. All the columns added will have the same width and height and different classes by default ( column1, column2, column3 etc). You can customize each one by just selecting it.

B.1.b Appending

Appending means to add another element next to the selected one. You have the option to append an element to top, right, bottom or left. In order to add another near element near one existing element in the layout, you will have to select the existing element.

Horizontal appending: If you want to add another element to the right, press the "append right" button from the toolbar. If there is no available space horizontally then the new element will take some of the width of the current element (max 100px) without affecting the parent.

Vertical appending: If you want to add an element horizontally, you can choose append top or append bottom. If there is enough available space, the new element will be added in the available space. If there is no available space vertically then the parent element will be expanded so that the current elements and the elements added fit in.

B.1.c Snippets sidebar

You can open the snippets sidebar by pressing the "Snippets Sidebar" button from the toolbar.

Once the snippets sidebar will open, you have the option to add: simple HTML elements: text, button, link, image, Headings (h1, h2, h3) and html lists.
Header Elements - these are the elements that are usually added in the header of a website.
Content elements - these elements usually appear on the content of a website page. You can add them in any place in your layout. This tab contains 26 types of articles each one with a different layout.
Sidebar elements - these elements usually appear on the sidebar of a website page. You can add them in any place in your layout.
Footer elements - html elements that usually appear on the content of a web page. You can add them in any place in your layout.

In order to have a preview of a snippet sidebar element, all you have to do is to hover the correspondent small thumbnail. After deciding what element you want to add to your layout, all you have to do is select it and drag it to the desired layout box.
You also have the option to add more than one element at once. All you have to do is to select a number from the right side of each element. That represents the number of elemets that will be inserted in the layout. All the elements from the drawer and all their content can be customized using the Layouts Editor. Once you add them into your layout you can easily customize each element and their content, by just selecting them.

B.1.d Media Queries (available only in PRO version)

Media Queries is a CSS3 module allowing content rendering to adapt to conditions such as screen resolution.

The Flexi Layouts 2 PRO version Media Queries menu allows you to enable the page versions for Mobile and Tablet and to switch between these versions in order to get a preview of your page.
From this menu you can generate the mobile page and to enable the media settings: the mobile and the tablet max width.
The Media Queries menu allows you to generate the mobile and tablet version, but also to remove the media query for mobile or tablet by disabling it.
It also allows you to navigate through the desktop, mobile and tablet versions and add specific settings for each of them.

 

Tablet view

Layouts 2 Media Queries Tablet View

Mobile view

Layouts 2 Media Queries Mobile View

Media query settings

The Media Queries settings allow you to set the max-width of the rendering surface of the output device
In this example, the style sheet will apply only to screens that have exactly 600 horizontal pixels for mobile and 1023 pixels for tablet. Note that the definition of the 'px' unit is the same as in other parts of CSS.
The browser measures the layout viewport and applies the desktop styles if it is wider than 1023 pixels or 600 pixels, and the tablet or mobile styles if it's smaller than that.

 

B.1.e Preview Button

The "preview" button allows you to preview your page in browser before closing the Layouts Editor.

You will be able to preview the layout in browser after applying all the changes and saving them.

B.1.f Editing buttons (delete, cut, copy, paste)

You can duplicate or move an element of your layout.

Copying an element - You can copy an element and its content by selecting it and pressing the copy button in the toolbar or Ctrl + C from your Keyboard (Command + C for MAC). Once the element is copyed, you need to select the place in the layout where the element will be pasted. After selecting the area where the element will be pasted, press the paste button from the toolbar or Ctrl + V (Command + V for MAC).
Cutting an element You can cut an element and its content by selecting it and pressing the cut button in the toolbar or Ctrl + X from your Keyboard. Once the element is cut, you need to select the place in the layout where the element will be pasted. After selecting the area where the element will be pasted, press the paste button from the toolbar or Ctrl + V (Command + V for MAC)

B.1.g Undo/ Redo

These buttons can be used to "Undo" or "Redo" the last operations.

They work in a similar way as in other processing applications.
The undo button can be used to reverse the last operation and/or remove the last entry that was typed in.
Keep clicking this button in order to reverse more than just the last operation.

The redo button can be used to reverse the last "Undo" operation.
Keep clicking this button in order to reverse more than just the last operation.

B.1.h File menu

Flexi Layouts 2 for Dreamweaver File Menu

This menu is helping you to manage your layout files. You can save your layout as template, access basic templates and page settings and it allows you to manage the css files.

B.1.h.i Save as Template

The save as template feature allows you to save your page as a template. After clicking the "save as template" button, the editor will switch to a different state where the you will have to choose the editable regions for the template.
Click here for a tutorial.
All your layout elements will be listed in the "Tree" tab in the right side of the editor and they will have a small lock icon in front of their name. You can make the elements editable by clicking the "lock".
An editable region will be added in that place. You can change the editable region's name by clicking on it. An opened lock will appear in front of their names. You can lock the regions back by clicking the "open lock" icon. You can also remove the editable region from the layout area, by pressing the "x" small button.
Once all the regions are set, press the "Done" button. A small window will appear asking you to enter the template name. Add a template name and press "OK".
The "Templates" folder will be created in your DW site and your template will be saved there.

B.1.h.ii Apply quick layout

The basic templates gallery will open. Basic templates are already made one page templates. You can choose to add any quick layout from the list with or without content. The basic template will open in the Layouts Editor and it will be available for editing.
The "Basic templates" window appears everytime you want to create a layout in a new page. You can disable it unchecking the "Show at start up".

B.1.h.iii Manage CSS files

This feature allows you to manage your site css files. Here you can choose to save the layout css in your page head tag or in an external css file.
You can also add/remove css files or rename your css files. Once you add more css files, the paths to them will be added within the head of your page.

B.1.h.iv Page Settings

The "Page properties" manager will open and here you can set your page title, the page meta description and insert page keywords.

You can also choose a Website icon, also known as favicon. A website icon is displayed in the browser's address bar and next to the page's name and in the list of bookmarks.
Browsers that support a tabbed document interface typically show a page's favicon next to the page's title on the tab.
The supported format of the website icon is .ico, .png, .gif, .jpeg the max dimensions supported are 64x64.

B.1.i Save and Close buttons

The Save button is saving the layout with all the current changes. It saves the code in the html page and the css style within the .css files.

The Close button allows you to close the editor without saving the layout.

B.2 Sidebar

Class

The "Class" feature allows you to add, remove or edit a class of an element.
The class attribute specifies one or more classnames for an element and it is mostly used to point to a class in a style sheet.

However, it can also be used by a JavaScript document. Select an element and its class will be shown in the Class input. You can edit the class of an elemet by either double-clicking the class name from the input or press the small "pen" icon.

 

State

The state allows you to choose different styles of an element depending on the state that it is in.

The three states in the Layout Editor are:
up - a normal, unvisited element;
over - an element when the user mouses over it;
down - an element at the moment it is selected;

At the moment you select an element it is in normal state by default. All the other states will have the same style as the normal state.
If you want to set other css styiling of the element for the other 2 states, select the state that you want to style from the dropdown list and start styling.

 

Size

Here you can set the element dimensions. You can add width and height values in px, em, percentage values or set them to liquid.
You are also allowed to set the min-width and height of each element and you can add a value in px within the inputs.

Responsive images: This feature allows you to make your site images adaptive to screen size. Once enabled the image is sized in relative units (up to 100%) so as to prevent them from displaying outside their containing element.
The width and height are automatically set to "auto" and the MW (max width) is set to 100% by default and you will be able to add any value you want.

 

Align

Any element can be aligned to left, center or right as long as it has a width set in px or em. Select the element that you want to align, and make sure it has a width.
After that, use the align buttons to align it in the layout.

 

Background

You can style the background of an element by:
1. adding background solid color- click on the "solid" button and then the color button to choose a solid color from the pallette. You can also set the color transparency using the "Alpha" property. It is set to 100 by default and you can add transparency by adjusting it. The Alpha can ba also adjusted from the right side of the color input.

2. adding background gradient. click on the "gradient" button and the gradient bar will appear. You can set the gradient direction and orientation. You can also set each color transparency by adjusting the Alpha value. Also, you can add as many droplets as you want by just clicking at the bottom of the gradient bar

3. adding background image The "browse" button allows you to choose an image from your computer abd set is a s background image to the selected element. Pressing the "Image settings" button will open a window where you can set: the background repeat, the attachemnt type, the horizontal position and the x and y position.

Important to know! background position: As soon as you added padding to a button and use images for the button background, the image will be placed in the entire space created inside the menu (the entire space between the borders can be used by the button image). To position corectly the button text over the button image, you have to set the background image to be aligned top or bottom and adjust the padding in a way the text is placed in the correct position.

 

Padding, Margin, Border

You can set the paddings, margins and borders of an element. You can either add different value for each element side or, enable "Top for all" and set a top value.
The top value will also be applied to all element sides (right, bottom and left)

Important to know! - The paddings, margins and borders are calculated in the total width of the element.

The padding: The padding is the distance between the button borders and the text. When you add padding on an element, the Layout Editor will adjust the space available for the element's children.

The margin: The margin is space that can be added outside the button background or image to create a distance between the menu container or the other buttons. When you add padding on an element, the Layout Editor will adjust the element size.

The border: Adding border to an elemet, will adjust the space available for the element's children.

 

Rounded corners

The "rounded corners" tab allows you to add rounded corners to an element. Select the element, go to rounded corners tab and add a value.
The "Use Top-Left for all" is enabled by default - the value added to top-left corner of the element will be applied to all corners.
If you want custom values for each corner, you will have to disable the "Use Top-Left for all".

 

The Advanced CSS Sidebar can be opened by clicking the "Advanced" tab from the Editor Sidebar. and it shows all the css properties that are applied on the selected element from the Layouts Editor.

Editing Styles:
Click the property name, and it will become editable. In order to add a property, click the blue plus sign and a new input will appear, where you can write the property name.
Also, valid properties name will be automatically suggested everytime you start typing a property. For example, if you try to add border to an element, by the time you type "bo", all the css properties starting with "bo", including "border" property are automatically suggested. If a property is not listed correctly it will be marked with a yellow exclamation mark.

Hiding css properties:
You can disable css properties from the Advanced CSS Sidebar. Once it is disabled it becomes grey and you have the option to re-enable it.

 

B.2.c Text Settings Tab

From the text settings tab you can edit the style to all text elements: headings, paragraphs and anchors that are placed within an element.
This tab allows you to edit font family, size, the align of the text, the style of the text, the color and the text highlight.
By clicking on the "Show all" text, the letter spacing and line height properties will be revealed. You can change the headings style by selecting the H1, H2, H3, H4 etc from the dropdown. If you want to edit all your paragraphs from an element just select the "p" button. If you have other texts that are not placed within the paragraph , just select "other text" from the dropdown.

You can change all the anchors by selecting the "a" button. Here you can also edit the style of an anchor in all states: hover, active, focus and visited.

 

B.2.d CSS 3 Effects Tab

The css3 effects tab let you add the css desired effect. By pressing the "+" button a dropdown will be revealed showing all css3 effects available.

Once you choose a css3 effect, a small editing window will open and there you can edit the effect's parameters. By pressing the "-" button, the css3 effect will be removed.
You can edit each css3 property by pressing the "Edit" button.

 

B.2.e Structure Tab

This panel is displaying the entire page structure in a tree structure.

The tree is allowing you to easily select small elements or elements that are not visible by default. Here you can see your site structures and all the elements from a parent.

The elements that are marked with light blue color represent the divs from your page.
The other elements, marked with grey are other elements than divs (paragraphs, headings, lists, other text).
By selecting one element from the tree, that element will also be selected on the editor and available to edit.
By double-clicking on any tree element you can edit its class. All modifications inside Structure tab are reflecting live into Sidebar and Canvas.
The small left arrow allows you to minimize the tree structure, by hiding all the content within a div.
The "hide" icon hides the element in the Layouts editor and on your page depending what version you use (desktop, mobile or tablet). Click