Documentation

A. Installation and Registration

A.1 Installation

For Dreamweaver CC 2015, download the extension installer from here: http://www.extendstudio.com/extension_manager/download
For Dreamweaver CS6, CC, CC 2014, CC 2014.1, CC 2014.1.1
- open the "CSSLayouts3_[version-no].zxp" file using Adobe Extension Manager;
- restart Dreamweaver.
For Dreamweaver CS5.5, CS5, CS4
- open the "CSSLayouts3_[version-no].mxp" file using Adobe Extension Manager;
- restart Dreamweaver.

Install Dreamweaver Reveal Effects using the Adobe Extension Manager

A.2 Where to find the extension in Dreamweaver


Extend Studio products are available in the "Insert" window in Dreamweaver. Click CTRL+F2 (Command+F2 for MAC) to display the Insert Window.
If the "Insert" window is displayed as Tabs, below the main Dreamweaver menu, the Extend products should appear on the right side of the Tabs.

Insert Flexi Layouts 3 for Dreamweaver


If the "Insert" window is displayed as Floating Panel (usually displayed on the left or right of the working area, depending on the Workspace settings: developer, designer etc) you need to click on the Common drop-down - marked with a down arrow.


Adobe Dreamweaver Insert Window - Dreamweaver Flexi Layouts 3

The Extend Studio products should appear in the pop-up list.

Insert Flexi Layouts 3 for Dreamweaver

A.3 Registration

A.3.1 How to register the extension

When you'll first start the extension, a registration pop-up will appear. Paste the code from the email that you have received from Extend Studio after buying the extension or click on "Use as trial" to use it free for 10 days.

Register Flexi Layouts 3 for Dreamweaver

In the trial mode, when you load the page into the browser you will get the following Javascript alert: "This page contains a gallery created with Flexi Layouts 3 . Not for commercial use!".
After you register the extension, all you have to do is to edit one of the effects that were created with the trial mode and update it in order to remove the "Commercial use" Javascript alert.
After registering the extension, the "Commercial use" Javascript alert will not appear when you view the page in browser.

A.3.2 Registration Errors
The error messages could be due to many different reasons - choose a solution from the list (below) which corresponds to the error code displayed on your screen.
301 : This message indicates that the license key which you have entered is already in use. If you are trying to install a single user license - you would have to reset the license from the Extend Studio website - "My orders" section.
License Invalid : this implies that the serial number entered by you is incorrect. Make sure you are entering the correct license key.
If it still doesn't work, go to Account "My orders" section and from there you can obtain the correct license key.
If you need more assistance regarding registration, you can email us to support [at] extendstudio.com

B. Create/ Edit Layout

B.1 Overview

In order to create a layout with Flexi Layouts 3, you need to create a html page inside a site. If you don't know how to define a site in Dreamweaver, check this page for help: http://www.adobe.com/devnet/dreamweaver/articles/first_website_pt1.html

After clicking the "Create/Edit Layout" button, the Flexi Layouts 3 Editor opens. Here you can choose the desired template:

- blank template;

- centered template;

- template with a sidebar on the left;

- template with a sidebar on the right;

Select the template that you want to insert and click the "Select" button to insert it.
All the files generated by the Flexi Layouts 3 - pages and folders with the dependent CSS and Javascript - will be located inside the root of the Dreamweaver local site.

Insert Flexi Layouts 3 for Dreamweaver

 

B.2 Workspace

The page is split in 3 sections: header, content and footer. The page is based on the template that has been chosen on the Insert step. The changes made inside the header and the footer will be applied on all pages that are based on the same template. Click on the blue area to enable the editing inside the header and footer regions.

Here is how to manage the templates in your site.

The content section is different on each page, so anything that will be edited inside this region will not affect the other pages.

Insert Flexi Layouts 3 for Dreamweaver

1. On the top left section of the Toolbar you can:

- Add Blocks;

Insert Flexi Layouts 3 for Dreamweaver

- Add Elements;

Insert Flexi Layouts 3 for Dreamweaver

2. Manage the Media Queries and edit the settings for the site.

Insert Flexi Layouts 3 for Dreamweaver

3. Preview the page in browser.

Insert Flexi Layouts 3 for Dreamweaver

4. Undo/ Redo, Save and Close.

Insert Flexi Layouts 3 for Dreamweaver

5. The Sidebar Panel is split in 3 tabs: Options, Styling and Structure.

Insert Flexi Layouts 3 for Dreamweaver

6. The Breadcrumbs bar helps you navigate through the elements easier.

Insert Flexi Layouts 3 for Dreamweaver

All the sections will be more detailed on the next chapter.

B.3 Toolbar

B.3.a Overview

Inside the Toolbar section you can Add Blocks, Add Elements, Manage Media Queries, Preview, Undo/ Redo, Save the page and Close the Editor.

B.3.b Add Blocks

In this section there is a collection of predefined blocks that you can add to your page. They include editable elemets that correspond to each page section. Here you can:

1. Click the Show All Blocks button to get the predefined blocks for each correspondent section: navigation, hero, showcase, features and more.

Insert Flexi Layouts 3 for Dreamweaver

2. Hover each block section to preview it before you insert it;

Insert Flexi Layouts 3 for Dreamweaver

3. Click the Use this block or Drag this block when you decide which one you want to use.

 

B.3.c Add Elements

Open the Add Elements section and a list of elements will be displayed:

Insert Flexi Layouts 3 for Dreamweaver

Drag and Drop
To add an element to the canvas select it, drag it to the desired location and drop it there. The container where the element is added will be highlighted in light orange color. At the same time, the structure tab opens to show you the location where the new element is dropped.

Insert Flexi Layouts 3 for Dreamweaver

Append
Drag an element to append it to an existing section or other existing element in the site. You will get info regarding the element you are appending to.
The circles give you more drop options - hover them and they will show the section/ element class name where you want to append the new one. The wider circles represent the existing element's parents.

Insert Flexi Layouts 3 for Dreamweaver

Here is the list of elements available in Flexi Layouts 3:
1. Layout Elements:

Insert Flexi Layouts 3 for Dreamweaver

- section: adds a section inside the layout. You can insert or append a section to another container/ section. The section has a full width.

- centered container: adds a centered container inside a section.

Insert Flexi Layouts 3 for Dreamweaver

- more sections - allows you to enter the number of sections/ rows that you want to add inside the layout.

Insert Flexi Layouts 3 for Dreamweaver

- 2 columns: instantly adds 2 equal columns to the layout.

- 3 columns: instantly adds 3 equal columns to the layout.

- more columns: allows you to enter the number of columns that you want to add inside the layout.

2. Basic Elements:

Insert Flexi Layouts 3 for Dreamweaver

- heading: adds a h1 element to inside the layout. The type of heading can be changed from the styling panel:

Insert Flexi Layouts 3 for Dreamweaver

- paragraph: adds a paragraph inside the page.

- image: adds an image to the page.

- video: adds a video inside the page. You can edit the video settings from the Options panel:

Insert Flexi Layouts 3 for Dreamweaver

- content swap: adds an element that displays different content when hovering over an image. You can edit the Content Swap settings from the Options panel:

Insert Flexi Layouts 3 for Dreamweaver

- button: adds a button to the page.

- link: adds a text with a link.

- inline text: adds inline text.

- list: adds a list to the page. You can change the list settings from the Options panel:

Insert Flexi Layouts 3 for Dreamweaver

- container (div): you can add a container inside an element or append it to other element.

- spacer: adds a spacer.

- horizontal line: adds a horizontal line.

3. Common Modules

Insert Flexi Layouts 3 for Dreamweaver

- horizontal menu bar: adds a horizontal menu bar to the page. The menu items and settings can be changed from the Options panel.

Insert Flexi Layouts 3 for Dreamweaver

- vertical menu bar: adds a vertical menu bar to the page. The menu items and settings can be changed from the Options panel.

- google maps: adds a Google map to the page. The address that is showed on the map and also other settings can be edited from the Options Panel.

Insert Flexi Layouts 3 for Dreamweaver

- social links: adds a list of social links (icons) to the page.

- back to top button: adds a back to top button.

- custom HTML: you can use this module to add a custom HTML code inside the page. Make sure that the code does not include any other script or css.

4. Social Modules

Insert Flexi Layouts 3 for Dreamweaver

- Facebook Like: adds a Facebook like button with all the functionality included.

- Facebook Share: adds a Facebook share module with all the functionality included.

- Facebook Follow: adds a Facebook follow button with all the functionality included.

- Facebook Comments: adds a Facebook comments module with all the functionality included.

- Facebook Activity Feed: adds a Facebook activity feed module with all the functionality included.

B.3.d Media Queries

 

Insert Flexi Layouts 3 for Dreamweaver

In the Media Queries Settings panel you can edit:

- the max-width;

- the interval of the rendering surface of the putput device;

- the grid width.

In the example below the mobile style sheet wipp apply to screens that have 0 to 767 horizontal pixels.
The interval for the tablet is between 798 and 991 pixels.
For desktop - 992 pixels and higher.

The grid width for mobile is 100% wide. For tablet 90% and the mobile grid is 80%. The max grid width is set to 1232 pixels.

Insert Flexi Layouts 3 for Dreamweaver

You can make a change inside the page on the desktop, mobile and tablet devices independently. Here is a short video about how to enter in each device mode to make changes:

 

B.4 Sidebar

The Sidebar includes 3 sections: Options, Styling and Structure.

Insert Flexi Layouts 3 for Dreamweaver

 

Inside the Options panel you can edit the settings of several modules and elements. In the example below the settings of the horizontal menu are displayed: Menu Items and Settings.

Insert Flexi Layouts 3 for Dreamweaver

From the Styling tab you can edit the Elements style:

1. Add/ Edit Class:

Inside the class section you can change the class name or add more classes to one element.

Insert Flexi Layouts 3 for Dreamweaver

2. Dimensions:

Inside the dimensions panel you can set the dimensions of one element: min-width, width, max-width, min-height, max-height. Click on the Advanced button to display advanced options.

The width can be set in px, percents and cols (columns).

The height can be set in px or auto.

Insert Flexi Layouts 3 for Dreamweaver

3. Typography - text:

Here you can edit the typography settings of a text on the page. Select the text and you can edit:

- font family - you can also add a web font by clicking the Add web font button;

- font-size;

- font-weight;

- font-color;

- line height;

- text style and alignment;

- background color and letter spacing.

Insert Flexi Layouts 3 for Dreamweaver

4. Display:

This section allows you to align an element inside its wrapper. Select the element and choose the alignment - left, center, right.

With the Move option you can make the element float near another one (if the necessary space is created) or move it below other element.

Click on the Advanced button to display the advanced options. Here you can also set the overflow, the display type, z-index, float, clear, position type and also custom position (which is set in px).

Insert Flexi Layouts 3 for Dreamweaver

5. Background:

It allows you to choose a solid or a gradient background. You can also use a background image and enable the parralax effect.

Click on the Advanced button to display more options like:

- background repeat;

- background attachment: fixed, scroll;

- background position;

- background-width: cover, auto, contain;

- background position custom offset X and Y.

Insert Flexi Layouts 3 for Dreamweaver

5. Box Settings:

Inside the Box Settings panel you can add margins, paddings, borders and rounded corners to an element.

Insert Flexi Layouts 3 for Dreamweaver

6. Typography - element:

By selecting an element that contains more text you can add the same typography settings to all the text inside that element.

Insert Flexi Layouts 3 for Dreamweaver

Add Web Font:

You can also add a web font that is applied to all type of elements in the correspondent cell. Click on the Add web font button to open the Web Fonts gallery.

Insert Flexi Layouts 3 for Dreamweaver

7. Effects:

Inside the Effects panel you can add: box shadow, text shadow, css 3 transform effects, appear on scroll effects.

Insert Flexi Layouts 3 for Dreamweaver

7.1. Effects - Box Shadow:

Insert Flexi Layouts 3 for Dreamweaver

7. Effects - Text Shadow:

Insert Flexi Layouts 3 for Dreamweaver

7. Effects - Appear on Scroll:

Insert Flexi Layouts 3 for Dreamweaver

7. Effects - Text Shadow:

Insert Flexi Layouts 3 for Dreamweaver

Inside the Structure panel you can see the structure of the page. Here you can:

- search for an element inside the layout;

- navigate through elements;

- select an element and move it inside the layout by clicking on the move left button and drag the element in the desired place.

Insert Flexi Layouts 3 for Dreamweaver

B.5 Breadcrumbs

The breadcrumb navigation helps you reveal the element location inside the page. As you select the element inside the Editor you will be able to see its wrapping parents and navigate easily through the elements.

Insert Flexi Layouts 3 for Dreamweaver

C. Edit a Flexi Layouts 3 Theme

A site created with Flexi Layouts 3 can be easily edited with the Flexi Layouts 3 Editor. Open the page that you want to edit inside Dreamweaver and click the Create/Edit Layout button.

The Editor will open and you will be able to make changes on the correspondent page, then save it.

Insert Flexi Layouts 3 for Dreamweaver

D. Insert Theme from Gallery

Click the Insert Template from Gallery button to open the Theme Gallery.

Insert Flexi Layouts 3 for Dreamweaver

As you hover any of the theme preview images there are 2 options: Preview (allows you to preview the theme into the browser) and Insert Theme. Once you choose the theme that you want to insert inside your Site, click Insert Theme and the theme will be instered.

Insert Flexi Layouts 3 for Dreamweaver

Some themes include one page, as they are OnePage sites and other contain more pages. All the pages included inside the theme are added in the DW site where you are working.

If you want to edit any of the pages, all you need to do is to open the page in Dreamweaver and click the Create/Edit Layout button to open the page inside the Flexi Layouts 3 Editor.

Insert Flexi Layouts 3 for Dreamweaver

E. Working with Templates

You can create a new page that is based on a template that exists on the site. Here is how:

1. Open a new blank page in your site inDreamweaver.

2. Click on the Create/ Edit Layout button.

3. There are 2 oprions:

- Inside the Use Template From section you will have the option to start from a template that already exists in your site. In the example below you may choose one of the 3 different templates: the template from the about, index or home page. The page created using this option will have the same header and footer and/ or sidebar as the template.

- Or you can Start from a Blank Template - the page will not inherit the structure and look of any other page.

Insert Flexi Layouts 3 for Dreamweaver

You can also change the structure of the header or the footer from the pages inside your site. If the page where you are editing the header or footer content is based on a template that is applied on other pages from the site too, you will be asked if you want to keep the changes on the correspondent page or if the change will be applied on all pages that are currently using the template.

Insert Flexi Layouts 3 for Dreamweaver

The new template will be listed inside the Use Template From section inside the editor when you create a new page and edit it with Flexi Layouts 3.

E. Requirements

1. The extensions works on PC or MAC on the following Dreamweaver versions: CS4, CS5, CS5.5, CS6, CC, CC 2014, CC 2014.1, CC 2014.1.1, CC 2015.
2. The page where you use the form must have a HTML5 Doctype, because it has datatype attributes that are HTML5 specific. Click here for more information about the doctype and its importance.

F. FAQ

1. Can I use the license to add the extension in an unlimited number of websites?
Yes. This is an unlimited sites license, therefore you can use it for an unlimited number of websites.

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

3. How can I move the extension to a new computer?
You will have to download the extension from your extend studio account and install it in on the new computer. Before registering, you will have have to reactivate the serial number by clicking the correspondent "Reset license" button from your account.

4. Can I edit a layout made with Flexi Layouts 2 PRO or other web page with Flexi Layouts 3?
Only pages built with Flexi Layouts 3 Theme Editor can be edited with Flexi Layouts 3.