Documentation

A. Installation and Registration

A.1 Installation

Windows:

For Dreamweaver CS6, CC
- open the "PowerSlider2_[version-no].zxp" file using Adobe Extension Manager;
- restart Dreamweaver.
For Dreamweaver CS5.5, CS5, CS4
- open the "PowerSlider2_[version-no].mxp" file using Adobe Extension Manager;
- restart Dreamweaver.

OSX:

For Dreamweaver CS6, CC
- open the "PowerSlider2_[version-no]_osx.zxp" file using Adobe Extension Manager;
- restart Dreamweaver.
For Dreamweaver CS5.5, CS5, CS4
- open the "PowerSlider2_[version-no]_osx.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.

Adobe Dreamweaver Insert Tabs - Dreamweaver Reveal Effects


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 Reveal Effects

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

Adobe Dreamweaver Insert Window - Dreamweaver Reveal Effects

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 Dreamweaver Reveal Effects

In the trial mode, when you load the page into the browser you will get the following Javascript alert: "This page contains animated Hover FX created with DW Hover FX . 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. Add Power Slider

B.1 Overview

In order to add a jQuery Power Slider, 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

Insert Dreamweaver Reveal Effects selection message

After clicking the "Add Power Slider" button, the Editor will appear.

From here you can browse through the 10 templates. Each template can be edited and preview in browser. In order to start editing the template click the "Design" icon or the "Choose this template" button.

Insert Dreamweaver Reveal Effects

B.2 Templates

There are 10 templates included, each with custom elements added and different design. You can navigate through the templates by using the right/ left arrows.
All templates can be previewed in the browser by clicking the "Preview" button.

Insert Dreamweaver Reveal Effects

B.3 Design

Inside the "Design" tab, the slider layout, settings and elements can be customized.


Insert Dreamweaver Reveal Effects

B.3.a Adding Elements

By clicking the top "Add items" button the Drawer will open.

Insert Dreamweaver Reveal Effects

Inside the drawer there are the remaining available components that can be added inside the slider.
In order to add any component to the stage you need to drag it to the desired place. After the element is placed on the stage, it will disappear from the drawer. The element won’t be available in the Drawer anymore, unless you deleted from canvas.

Insert Dreamweaver Reveal Effects

To cancel the dragging of an element, press the ESC key from the keyboard.
Once an element is dragged and dropped to the stage, the drawer will be closed automatically.
Otherwise it can be closed by clicking the "Close" button.

B.3.b Responsive Settings

You can choose from 2 types of responsivevess: Auto-Responsive or Media Queries .

Insert Dreamweaver Reveal Effects

- Auto-responsive:
Enable the "Auto" module from the top toolbar. This option resizes the slider proportionally with the screen size. It works automatically without any configuration.
This module works great for simple, quickly made sliders, and dynamically adjusts the slider's width / height
accordingly to the display / device that views it.

- Media queries:
For greater customization and control, use media queries type.In this mode, you have complete control over the look and feel of your slider, for each target device : mobile , tablet, desktop. Complete control on every aspect , at breakpoint and slide element level.
It allows you to customize each slider component or element, on each device type.
Components and elements can also be made visible or hidden for each device type.

Desktop:

Insert Dreamweaver Reveal Effects

Tablet:

Insert Dreamweaver Reveal Effects

Mobile:

Insert Dreamweaver Reveal Effects

Define the Media Queries settings by adjusting max-width of the rendering surface of the output device.

You can edit the elements and styles separately for each device type:

Insert Dreamweaver Reveal Effects

B.3.c Stage

Power Slider Stage Editor opens after clicking the "Insert slider" button from the Dreamweaver insert bar.

Here you can add, remove, edit all the slider elements. The Slider Editor includes the slides manager, the responsive settings and the settings sidebar. All these allow you to easily edit the slider, add, style, copy, cut or remove elements.

Select

Select each element from the stage by clicking on it. When an element is selected it is highlighted with a blue rectangle that also includes a top-left label with the element name inside it.

Insert Dreamweaver Reveal Effects

Inside the selected element blue label a breadcrumb will appear. From there you can select the parent element to edit it.

Insert Dreamweaver Reveal Effects

Settings

From the top left label you can click on the settings icon to customize the element.

Insert Dreamweaver Reveal Effects

- copy/ paste element - you can copy and paste an element in the stage You can also use the keyboard shortcuts - CTRL + C (Cmd + C) and CTRL + V (Cmd + V).
- copy style/ paste style - you can copy the style from an element to another element of the same type. For example - you can apply the style of a text element only to another text element. You cannot paste the style of a text element to a button element.
You can copy the design of an element and add it to another element of its kind. For example - you can apply the style of a text element only to another text element. You cannot paste the style of a text element to a button element.
- edit html - you can edit the element as HTML.
- edit text - this option appears on text items, it opens the text editor.
Click on the "edit text" option or double click on the text to open the text editor. You can change the text and when you select a part of the paragraph the editing icons will appear.

Insert Dreamweaver Reveal Effects

Here you can edit text style, text color, add url to the selected text.
- delete

B.3.d Manage Slides


- add, move, delete slide - you can add a new slide by clicking the "New slide" button.
- copy slide - add a new identical slide by clicking the "copy" icon.

Insert Dreamweaver Reveal Effects

B.3.e Settings Sidebar - Overview

The slider and the components can be edited individually from the settings sidebar.

Insert Dreamweaver Reveal Effects

Slider Container

Settings:

Insert Dreamweaver Reveal Effects

- slider type - you can choose a full width slide or a fixed width slider;
- slider width and height - choose the slider dimensions - you can have fixed values in px or percentage values (%);
- slider position - choose the slider's position on the page - left, right or center;
- autoplay: this option autoplays the slider when the page is loaded;
- loop - this function makes the slider replay;
- shuffle slides - displays the slides randomly;
- stop at user interaction - the slider stops when the user interacts with it (clicks on a link, button, navigation bar item).

Background:

Insert Dreamweaver Reveal Effects

You can style the background of an element by:
1. adding background solid color
2. adding background gradient
3. adding a background image

Insert Dreamweaver Reveal Effects

- solid color -choose a solid color background from the color palette. You can also set the background color transparency by editing the "Alpha (%)" property.

Insert Dreamweaver Reveal Effects

- gradient background - click on the "Gradient" link and the gradient bar will appear. Here you can set:
- the gradient direction and orientation;
- add transparency to each gradient color, by adjusting the Alpha value;
- you can add as many droplets as you want by just clicking at the bottom of the gradient bar.

Insert Dreamweaver Reveal Effects

- background image - choose an image for the slider element's background. You can browse it in the computer, by clicking the folder icon from the background image input.
The minimum recommended image size for the slider container is 2560 x 1000px.
- parallax background effect - this is a visual effect that once enabled, you can create the perception of depth by moving elements at different speeds, either in the same direction or opposite.
- Set the parallax effect direction - from left or right and the speed.
- go to skin 3 from our sample page to see how the parallax scrolling works.

If you click on the "Choose from media library" button the image gallery opens.
You can choose a background image or a background pattern to add to the element from the media library:

Insert Dreamweaver Reveal Effects

Background Advanced settings:

Insert Dreamweaver Reveal Effects

From the advanced image settings you can set the background image align, repeat and width.

Shadow:

Insert Dreamweaver Reveal Effects

Once you enable the shadow you will be able to edit:
- shadow type - choose the shadow to be normal (drop shadow) or inset (inner shadow);
- distance - choose the shadow distance - the measurements are made in px;
- blur and angle - choose the shadow blur value and angle;
- shadow color and transparency - choose the shadow color and transparency. The transparency is measured in percents (alpha %).

Animation:

Insert Dreamweaver Reveal Effects

- effect - choose the animation effect from the predefined animation effects: slide, fade, backSlide, goDown, fadeUp.
- slide change - the effect is measured in milliseconds. It represents the time when a slide is changed;
- wait time - the effect is measured in milliseconds. It represents the time a slide waits before it's changed.

 

 

B.3.d Components - Overview

When a slider component is selected the settings sidebar will display 2 tabs: Slider Settings and Element Settings.
When a slider component is selected the settings sidebar will display 2 tabs: Slider Settings and Element Settings.
Inside the "Element Settings" tab you can edit the correspondent element properties and parameters. The slider components have the "state" and the "show on" functions.

State

Insert Dreamweaver Reveal Effects

The state tabs allow you to choose different styles of an element depending on the state that it is in. The three states are:
up - a normal, unvisited element;
over - an element when the user mouses over it;
selected - an element it is currently selected
In the over and the selected tabs you have the option to copy style from the other states.

Show on:

This function is active when the Media Queries module is active.

Insert Dreamweaver Reveal Effects

You can set the element to be displayed or hidden on the correspondent device.
Each slider component can be edited individually from the settings sidebar.

Slide

Insert Dreamweaver Reveal Effects

Inside the slide settings sidebar main tab there are displayed all the included elements.
Each element's animation can be edited. You can set the animation time and delay. These parameters are set in milliseconds units (example - 1000 ms = 1 second).
By clicking the "plus" icon you will be able to change the animation and easing effects.

Background:

Insert Dreamweaver Reveal Effects

You can style the background of an element by:
1. adding background solid color
2. adding background gradient
3. adding a background image

Insert Dreamweaver Reveal Effects

- solid color -choose a solid color background from the color palette. You can also set the background color transparency by editing the "Alpha (%)" property.

Insert Dreamweaver Reveal Effects

- gradient background - click on the "Gradient" link and the gradient bar will appear. Here you can set:
- the gradient direction and orientation;
- add transparency to each gradient color, by adjusting the Alpha value;
- you can add as many droplets as you want by just clicking at the bottom of the gradient bar.

Insert Dreamweaver Reveal Effects

- background image - choose an image for the slider element's background. You can browse it in the computer, by clicking the folder icon from the background image input.
The minimum recommended image size for the slider container is 2560 x 1000px.
- parallax background effect - this is a visual effect that once enabled, makes background images move slower than foreground images.
- Set the parallax effect direction - from left or right and the speed.
- Here is a live example of this effect.

If you click on the "Choose from media library" button the image gallery opens.

You can choose a background image or a background pattern to add to the element from the media library:

Insert Dreamweaver Reveal Effects

Background Advanced settings:

Insert Dreamweaver Reveal Effects

From the advanced image settings you can set the background image align, repeat and width.

- set the horizontal and vertical background image align;
- set the background position using the horizontal (X Offset) and vertical (Y offset) offsets;
- background repeat - sets if/how a background image will be repeated. By default, a background-image is repeated both vertically and horizontally.

Tip : The background image is placed according to the background-position property. If no background-position is specified, the image is always placed at the element's top left corner.

Box:

Insert Dreamweaver Reveal Effects

Inside this tab you can set the element paddings, borders and rounded corners settings.
Important to know! - The paddings and borders are calculated in the total width of the element.

The padding: The padding is the distance between the element borders and the text.

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

Insert Dreamweaver Reveal Effects

The "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".

Shadow:

Insert Dreamweaver Reveal Effects

Once you enable the shadow you will be able to edit:
- shadow type - choose the shadow to be normal (drop shadow) or inset (inner shadow);
- distance - choose the shadow distance - the measurements are made in px;
- blur and angle - choose the shadow blur value and angle;
- shadow color and transparency - choose the shadow color and transparency. The transparency is measured in percents (alpha %).

Back and Next Buttons

These are the main Back and Next navigation buttons of the Power Slider.

Insert Dreamweaver Reveal Effects

Settings:
- width and height - it can be set in px or percents (%);
- horizontal and vertical align that is relative to the slide;
- horizontal and vertical offsets - these represent the horizontal and vertical distances relative to the slide.;
- z-index : the z-index property specifies the stack order of an element. An element with greater stack order is always in front of an element with a lower stack order;
-show only on hover - you can choose to display the element when the user hovers the slider.

Background:

Insert Dreamweaver Reveal Effects

You can style the background of an element by:
1. adding background solid color
2. adding background gradient
3. adding a background image

Insert Dreamweaver Reveal Effects

- solid color -choose a solid color background from the color palette. You can also set the background color transparency by editing the "Alpha (%)" property.

Insert Dreamweaver Reveal Effects

- gradient background - click on the "Gradient" link and the gradient bar will appear. Here you can set:
- the gradient direction and orientation;
- add transparency to each gradient color, by adjusting the Alpha value;
- you can add as many droplets as you want by just clicking at the bottom of the gradient bar.

Insert Dreamweaver Reveal Effects

- background image - choose an image for the slider element's background. You can browse it in the computer, by clicking the folder icon from the background image input.

If you click on the "Choose from media library" button the imge gallery opens. You can choose a background image or a background pattern to add to the element from the media library:

Insert Dreamweaver Reveal Effects

Background Advanced settings:

Insert Dreamweaver Reveal Effects

From the advanced image settings you can set the background image align, repeat and width.

- set the horizontal and vertical background image align;
- set the background position using the horizontal (X Offset) and vertical (Y offset) offsets;
- background repeat - sets if/how a background image will be repeated. By default, a background-image is repeated both vertically and horizontally.

Tip : The background image is placed according to the background-position property. If no background-position is specified, the image is always placed at the element's top left corner.

Box:

Insert Dreamweaver Reveal Effects

Inside this tab you can set the element paddings, borders and rounded corners settings.
Important to know! - The paddings and borders are calculated in the total width of the element.

The padding: The padding is the distance between the element borders and the text.

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

Insert Dreamweaver Reveal Effects

The "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".

Shadow:

Insert Dreamweaver Reveal Effects

Once you enable the shadow you will be able to edit:
- shadow type - choose the shadow to be normal (drop shadow) or inset (inner shadow);
- distance - choose the shadow distance - the measurements are made in px;
- blur and angle - choose the shadow blur value and angle;
- shadow color and transparency - choose the shadow color and transparency. The transparency is measured in percents (alpha %).

Image

Insert Dreamweaver Reveal Effects

Settings:
- image path - You can browse for the image in the computer, by clicking the "folder" icon from the "image path" input.
- width and height - it can be set in px, percents (%) or auto;
- horizontal and vertical align that is relative to the slide;
- horizontal and vertical offsets - these represent the horizontal and vertical distances relative to the slide.;
- z-index : the z-index property specifies the stack order of an element. An element with greater stack order is always in front of an element with a lower stack order;

Animation:

Insert Dreamweaver Reveal Effects

- effect - choose from the predefined animation effects that appear in the dropdown list.
- easing - choose from the predefined easing effects that appear in the dropdown list.
- duration - choose the duration of the effect. It is measured in milliseconds;
- delay - the effect is measured in milliseconds.

Box:

Insert Dreamweaver Reveal Effects

Inside this tab you can set the element paddings, borders and rounded corners settings.
Important to know! - The paddings and borders are calculated in the total width of the element.

The padding: The padding is the distance between the element borders and the text.

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

Insert Dreamweaver Reveal Effects

The "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".

Shadow:

Insert Dreamweaver Reveal Effects

Once you enable the shadow you will be able to edit:
- shadow type - choose the shadow to be normal (drop shadow) or inset (inner shadow);
- distance - choose the shadow distance - the measurements are made in px;
- blur and angle - choose the shadow blur value and angle;
- shadow color and transparency - choose the shadow color and transparency. The transparency is measured in percents (alpha %).

Text

Settings:

Insert Dreamweaver Reveal Effects

- width and height - it can be set in px, percents (%) or auto;
- horizontal and vertical align that is relative to the slide;
- horizontal and vertical offsets - these represent the horizontal and vertical distances relative to the slide;
- z-index : the z-index property specifies the stack order of an element. An element with greater stack order is always in front of an element with a lower stack order.

Font:

Insert Dreamweaver Reveal Effects

- choose font type and size;
- font color - choose a color from the pallette or add the color code inside the input;
- font align and style - chose the font to be aligned to left, center or right and set the font style - normal, bold or italic;
- letter spacing : set the space between text letters;
- line height : The line-height property specifies the line height. you can set a line height in percent of the current font size;
- alpha : set the text transparency;
- Add web font :click the "Add web font" button to open the web fonts gallery;

Insert Dreamweaver Reveal Effects

Animation:

Insert Dreamweaver Reveal Effects

- effect - choose from the predefined animation effects that appear in the dropdown list.
- easing - choose from the predefined easing effects that appear in the dropdown list.
- duration - choose the duration of the effect. It is measured in milliseconds;
- delay - the effect is measured in milliseconds.

Background:

Insert Dreamweaver Reveal Effects

You can style the background of an element by:
1. adding background solid color
2. adding background gradient
3. adding a background image

Insert Dreamweaver Reveal Effects

- solid color -choose a solid color background from the color palette. You can also set the background color transparency by editing the "Alpha (%)" property.

Insert Dreamweaver Reveal Effects

- gradient background - click on the "Gradient" link and the gradient bar will appear. Here you can set:
- the gradient direction and orientation;
- add transparency to each gradient color, by adjusting the Alpha value;
- you can add as many droplets as you want by just clicking at the bottom of the gradient bar.

- background image - choose an image for the slider element's background. You can browse it in the computer, by clicking the folder icon from the background image input.

Insert Dreamweaver Reveal Effects

If you click on the "Choose from media library" button the imge gallery opens. You can choose a background image or a background pattern to add to the element from the media library:

Insert Dreamweaver Reveal Effects

Background Advanced settings:

Insert Dreamweaver Reveal Effects

From the advanced image settings you can set the background image align, repeat and width.

- set the horizontal and vertical background image align;
- set the background position using the horizontal (X Offset) and vertical (Y offset) offsets;
- background repeat - sets if/how a background image will be repeated. By default, a background-image is repeated both vertically and horizontally.

Tip : The background image is placed according to the background-position property. If no background-position is specified, the image is always placed at the element's top left corner.

Box:

Insert Dreamweaver Reveal Effects

Inside this tab you can set the element paddings, borders and rounded corners settings.
Important to know! - The paddings and borders are calculated in the total width of the element.

The padding: The padding is the distance between the element borders and the text.

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

Insert Dreamweaver Reveal Effects

The "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".

Text Shadow:

Insert Dreamweaver Reveal Effects

Once you enable the shadow you will be able to edit:
- shadow type - choose the shadow to be normal (drop shadow) or inset (inner shadow);
- distance - choose the shadow distance - the measurements are made in px;
- blur and angle - choose the shadow blur value and angle;
- shadow color and transparency - choose the shadow color and transparency. The transparency is measured in percents (alpha %).

Video

When you add a video to the stage you need to insert the embed code. After you add the embed code, click the "Add" button.
Here is an examle of an embed code: <iframe width="1280" height="720" src="//www.youtube.com/embed/RWMMdX6KYGM" frameborder="0" allowfullscreen></iframe>

Insert Dreamweaver Reveal Effects

Settings:

Insert Dreamweaver Reveal Effects

Settings:
- video embed code - Add/ change the video embed code.
- width and height - it can be set in px, percents (%) or auto;
- horizontal and vertical align that is relative to the slide;
- horizontal and vertical offsets - these represent the horizontal and vertical distances relative to the slide.;
- z-index : the z-index property specifies the stack order of an element. An element with greater stack order is always in front of an element with a lower stack order;
- autoplay when visible : by enabling this option the video will autoplay when the slider that contains it is visible.

Animation:

Insert Dreamweaver Reveal Effects

- effect - choose from the predefined animation effects that appear in the dropdown list.
- easing - choose from the predefined easing effects that appear in the dropdown list.
- duration - choose the duration of the effect. It is measured in milliseconds;
- delay - the effect is measured in milliseconds.

Background:

Insert Dreamweaver Reveal Effects

You can style the background of an element by:
1. adding background solid color
2. adding background gradient
3. adding a background image

Insert Dreamweaver Reveal Effects

- solid color -choose a solid color background from the color palette. You can also set the background color transparency by editing the "Alpha (%)" property.

Insert Dreamweaver Reveal Effects

- gradient background - click on the "Gradient" link and the gradient bar will appear. Here you can set:
- the gradient direction and orientation;
- add transparency to each gradient color, by adjusting the Alpha value;
- you can add as many droplets as you want by just clicking at the bottom of the gradient bar.

- background image - choose an image for the slider element's background. You can browse it in the computer, by clicking the folder icon from the background image input.

Insert Dreamweaver Reveal Effects

If you click on the "Choose from media library" button the imge gallery opens. You can choose a background image or a background pattern to add to the element from the media library:

Insert Dreamweaver Reveal Effects

Background Advanced settings:

Insert Dreamweaver Reveal Effects

From the advanced image settings you can set the background image align, repeat and width.

- set the horizontal and vertical background image align;
- set the background position using the horizontal (X Offset) and vertical (Y offset) offsets;
- background repeat - sets if/how a background image will be repeated. By default, a background-image is repeated both vertically and horizontally.

Tip : The background image is placed according to the background-position property. If no background-position is specified, the image is always placed at the element's top left corner.

Box:

Insert Dreamweaver Reveal Effects

Inside this tab you can set the element paddings, borders and rounded corners settings.
Important to know! - The paddings and borders are calculated in the total width of the element.

The padding: The padding is the distance between the element borders and the text.

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

Insert Dreamweaver Reveal Effects

The "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".

Shadow:

Insert Dreamweaver Reveal Effects

Once you enable the shadow you will be able to edit:
- shadow type - choose the shadow to be normal (drop shadow) or inset (inner shadow);
- distance - choose the shadow distance - the measurements are made in px;
- blur and angle - choose the shadow blur value and angle;
- shadow color and transparency - choose the shadow color and transparency. The transparency is measured in percents (alpha %).

Button

Settings:

Insert Dreamweaver Reveal Effects

Settings:
- button link - add the link where the user is taken when clicking on the button;
- width and height - it can be set in px, percents (%) or auto;
- horizontal and vertical align that is relative to the slide;
- horizontal and vertical offsets - these represent the horizontal and vertical distances relative to the slide.;
- z-index : the z-index property specifies the stack order of an element. An element with greater stack order is always in front of an element with a lower stack order;

Animation:

Insert Dreamweaver Reveal Effects

- effect - choose from the predefined animation effects that appear in the dropdown list.
- easing - choose from the predefined easing effects that appear in the dropdown list.
- duration - choose the duration of the effect. It is measured in milliseconds;
- delay - the effect is measured in milliseconds.

Background:

Insert Dreamweaver Reveal Effects

You can style the background of an element by:
1. adding background solid color
2. adding background gradient
3. adding a background image

Insert Dreamweaver Reveal Effects

- solid color -choose a solid color background from the color palette. You can also set the background color transparency by editing the "Alpha (%)" property.

Insert Dreamweaver Reveal Effects

- gradient background - click on the "Gradient" link and the gradient bar will appear. Here you can set:
- the gradient direction and orientation;
- add transparency to each gradient color, by adjusting the Alpha value;
- you can add as many droplets as you want by just clicking at the bottom of the gradient bar.

- background image - choose an image for the slider element's background. You can browse it in the computer, by clicking the folder icon from the background image input.

Insert Dreamweaver Reveal Effects

If you click on the "Choose from media library" button the imge gallery opens. You can choose a background image or a background pattern to add to the element from the media library:

Insert Dreamweaver Reveal Effects

Background Advanced settings:

Insert Dreamweaver Reveal Effects

From the advanced image settings you can set the background image align, repeat and width.

- set the horizontal and vertical background image align;
- set the background position using the horizontal (X Offset) and vertical (Y offset) offsets;
- background repeat - sets if/how a background image will be repeated. By default, a background-image is repeated both vertically and horizontally.

Tip : The background image is placed according to the background-position property. If no background-position is specified, the image is always placed at the element's top left corner.

Box:

Insert Dreamweaver Reveal Effects

Inside this tab you can set the element paddings, borders and rounded corners settings.
Important to know! - The paddings and borders are calculated in the total width of the element.

The padding: The padding is the distance between the element borders and the text.

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

Insert Dreamweaver Reveal Effects

The "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".

Font:
Set the font style of the text inside the button.

Insert Dreamweaver Reveal Effects

- choose font type and size;
- font color - choose a color from the pallette or add the color code inside the input;
- font align and style - chose the font to be aligned to left, center or right and set the font style - normal, bold or italic;
- letter spacing : set the space between text letters;
- line height : The line-height property specifies the line height. you can set a line height in percent of the current font size;
- alpha : set the text transparency;
- Add web font :click the "Add web font" button to open the web fonts gallery;

Insert Dreamweaver Reveal Effects

Shadow:

Insert Dreamweaver Reveal Effects

Once you enable the shadow you will be able to edit:
- shadow type - choose the shadow to be normal (drop shadow) or inset (inner shadow);
- distance - choose the shadow distance - the measurements are made in px;
- blur and angle - choose the shadow blur value and angle;
- shadow color and transparency - choose the shadow color and transparency. The transparency is measured in percents (alpha %).

Play/ Pause Button

This component stops an resumes the jQuery Slider slide transition.

Dots

Settings:

Insert Dreamweaver Reveal Effects

- width and height - it can be set in px, percents (%) or auto;
- horizontal and vertical align that is relative to the slide;
- horizontal and vertical offsets - these represent the horizontal and vertical distances relative to the slide.;
- z-index : the z-index property specifies the stack order of an element. An element with greater stack order is always in front of an element with a lower stack order;
-show only on hover - you can choose to display the element when the user hovers the slider.

Background:

Insert Dreamweaver Reveal Effects

You can style the background of an element by:
1. adding background solid color
2. adding background gradient
3. adding a background image

Insert Dreamweaver Reveal Effects

- solid color -choose a solid color background from the color palette. You can also set the background color transparency by editing the "Alpha (%)" property.

Insert Dreamweaver Reveal Effects

- gradient background - click on the "Gradient" link and the gradient bar will appear. Here you can set:
- the gradient direction and orientation;
- add transparency to each gradient color, by adjusting the Alpha value;
- you can add as many droplets as you want by just clicking at the bottom of the gradient bar.

- background image - choose an image for the slider element's background. You can browse it in the computer, by clicking the folder icon from the background image input.

Insert Dreamweaver Reveal Effects

If you click on the "Choose from media library" button the imge gallery opens. You can choose a background image or a background pattern to add to the element from the media library:

Insert Dreamweaver Reveal Effects

Background Advanced settings:

Insert Dreamweaver Reveal Effects

From the advanced image settings you can set the background image align, repeat and width.

- set the horizontal and vertical background image align;
- set the background position using the horizontal (X Offset) and vertical (Y offset) offsets;
- background repeat - sets if/how a background image will be repeated. By default, a background-image is repeated both vertically and horizontally.

Tip : The background image is placed according to the background-position property. If no background-position is specified, the image is always placed at the element's top left corner.

Box:

Insert Dreamweaver Reveal Effects

Inside this tab you can set the element paddings, borders and rounded corners settings.
Important to know! - The paddings and borders are calculated in the total width of the element.

The padding: The padding is the distance between the element borders and the text.

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

Insert Dreamweaver Reveal Effects

The "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".

Shadow:

Insert Dreamweaver Reveal Effects

Once you enable the shadow you will be able to edit:
- shadow type - choose the shadow to be normal (drop shadow) or inset (inner shadow);
- distance - choose the shadow distance - the measurements are made in px;
- blur and angle - choose the shadow blur value and angle;
- shadow color and transparency - choose the shadow color and transparency. The transparency is measured in percents (alpha %).

Dot item

Settings:

Insert Dreamweaver Reveal Effects

- width and height - set the dot item dimensions. It can be set in px or percents (%);

Background:

Insert Dreamweaver Reveal Effects

You can style the background of an element by:
1. adding background solid color
2. adding background gradient
3. adding a background image

Insert Dreamweaver Reveal Effects

- solid color -choose a solid color background from the color palette. You can also set the background color transparency by editing the "Alpha (%)" property.

Insert Dreamweaver Reveal Effects

- gradient background - click on the "Gradient" link and the gradient bar will appear. Here you can set:
- the gradient direction and orientation;
- add transparency to each gradient color, by adjusting the Alpha value;
- you can add as many droplets as you want by just clicking at the bottom of the gradient bar.

- background image - choose an image for the slider element's background. You can browse it in the computer, by clicking the folder icon from the background image input.

Insert Dreamweaver Reveal Effects

If you click on the "Choose from media library" button the imge gallery opens. You can choose a background image or a background pattern to add to the element from the media library:

Insert Dreamweaver Reveal Effects

Background Advanced settings:

Insert Dreamweaver Reveal Effects

From the advanced image settings you can set the background image align, repeat and width.

- set the horizontal and vertical background image align;
- set the background position using the horizontal (X Offset) and vertical (Y offset) offsets;
- background repeat - sets if/how a background image will be repeated. By default, a background-image is repeated both vertically and horizontally.

Tip : The background image is placed according to the background-position property. If no background-position is specified, the image is always placed at the element's top left corner.

Box:

Insert Dreamweaver Reveal Effects

Inside this tab you can set the element paddings, borders and rounded corners settings.
Important to know! - The paddings and borders are calculated in the total width of the element.

The padding: The padding is the distance between the element borders and the text.

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

Insert Dreamweaver Reveal Effects

The "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".

Shadow:

Insert Dreamweaver Reveal Effects

Once you enable the shadow you will be able to edit:
- shadow type - choose the shadow to be normal (drop shadow) or inset (inner shadow);
- distance - choose the shadow distance - the measurements are made in px;
- blur and angle - choose the shadow blur value and angle;
- shadow color and transparency - choose the shadow color and transparency. The transparency is measured in percents (alpha %).

Numbers

Settings:

Insert Dreamweaver Reveal Effects

- width and height - it can be set in px, percents (%) or auto;
- horizontal and vertical align that is relative to the slide;
- horizontal and vertical offsets - these represent the horizontal and vertical distances relative to the slide.;
- z-index : the z-index property specifies the stack order of an element. An element with greater stack order is always in front of an element with a lower stack order;
-show only on hover - you can choose to display the element when the user hovers the slider.

Background:

Insert Dreamweaver Reveal Effects

You can style the background of an element by:
1. adding background solid color
2. adding background gradient
3. adding a background image

Insert Dreamweaver Reveal Effects

- solid color -choose a solid color background from the color palette. You can also set the background color transparency by editing the "Alpha (%)" property.

Insert Dreamweaver Reveal Effects

- gradient background - click on the "Gradient" link and the gradient bar will appear. Here you can set:
- the gradient direction and orientation;
- add transparency to each gradient color, by adjusting the Alpha value;
- you can add as many droplets as you want by just clicking at the bottom of the gradient bar.

- background image - choose an image for the slider element's background. You can browse it in the computer, by clicking the folder icon from the background image input.

Insert Dreamweaver Reveal Effects

If you click on the "Choose from media library" button the imge gallery opens. You can choose a background image or a background pattern to add to the element from the media library:

Insert Dreamweaver Reveal Effects

Background Advanced settings:

Insert Dreamweaver Reveal Effects

From the advanced image settings you can set the background image align, repeat and width.

- set the horizontal and vertical background image align;
- set the background position using the horizontal (X Offset) and vertical (Y offset) offsets;
- background repeat - sets if/how a background image will be repeated. By default, a background-image is repeated both vertically and horizontally.

Tip : The background image is placed according to the background-position property. If no background-position is specified, the image is always placed at the element's top left corner.

Box:

Insert Dreamweaver Reveal Effects

Inside this tab you can set the element paddings, borders and rounded corners settings.
Important to know! - The paddings and borders are calculated in the total width of the element.

The padding: The padding is the distance between the element borders and the text.

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

Insert Dreamweaver Reveal Effects

The "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".

Shadow:

Insert Dreamweaver Reveal Effects

Once you enable the shadow you will be able to edit:
- shadow type - choose the shadow to be normal (drop shadow) or inset (inner shadow);
- distance - choose the shadow distance - the measurements are made in px;
- blur and angle - choose the shadow blur value and angle;
- shadow color and transparency - choose the shadow color and transparency. The transparency is measured in percents (alpha %).

Number item

Settings:

Insert Dreamweaver Reveal Effects

- width and height - set the number items dimensions. It can be set in px or percents (%);

Background:

Insert Dreamweaver Reveal Effects

You can style the background of an element by:
1. adding background solid color
2. adding background gradient
3. adding a background image

Insert Dreamweaver Reveal Effects

- solid color -choose a solid color background from the color palette. You can also set the background color transparency by editing the "Alpha (%)" property.

Insert Dreamweaver Reveal Effects

- gradient background - click on the "Gradient" link and the gradient bar will appear. Here you can set:
- the gradient direction and orientation;
- add transparency to each gradient color, by adjusting the Alpha value;
- you can add as many droplets as you want by just clicking at the bottom of the gradient bar.

- background image - choose an image for the slider element's background. You can browse it in the computer, by clicking the folder icon from the background image input.

Insert Dreamweaver Reveal Effects

If you click on the "Choose from media library" button the imge gallery opens. You can choose a background image or a background pattern to add to the element from the media library:

Insert Dreamweaver Reveal Effects

Background Advanced settings:

Insert Dreamweaver Reveal Effects

From the advanced image settings you can set the background image align, repeat and width.

- set the horizontal and vertical background image align;
- set the background position using the horizontal (X Offset) and vertical (Y offset) offsets;
- background repeat - sets if/how a background image will be repeated. By default, a background-image is repeated both vertically and horizontally.

Tip : The background image is placed according to the background-position property. If no background-position is specified, the image is always placed at the element's top left corner.

Box:

Insert Dreamweaver Reveal Effects

Inside this tab you can set the element paddings, borders and rounded corners settings.
Important to know! - The paddings and borders are calculated in the total width of the element.

The padding: The padding is the distance between the element borders and the text.

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

Insert Dreamweaver Reveal Effects

The "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".

Text Shadow:

Insert Dreamweaver Reveal Effects

Once you enable the shadow you will be able to edit:
- shadow type - choose the shadow to be normal (drop shadow) or inset (inner shadow);
- distance - choose the shadow distance - the measurements are made in px;
- blur and angle - choose the shadow blur value and angle;
- shadow color and transparency - choose the shadow color and transparency. The transparency is measured in percents (alpha %).

Settings:

Insert Dreamweaver Reveal Effects

- width and height - it can be set in px or percents (%);
- horizontal and vertical align that is relative to the slide;
- horizontal and vertical offsets - these represent the horizontal and vertical distances relative to the slide;
- orientation - choose the navbar to be oriented horizontally or vertically inside the slider;
- z-index : the z-index property specifies the stack order of an element. An element with greater stack order is always in front of an element with a lower stack order.
- items per page - set how many navbar items to be displayed on the slide;
-show only on hover - you can choose to display the element when the user hovers the slider.

Background:

Insert Dreamweaver Reveal Effects

You can style the background of an element by:
1. adding background solid color
2. adding background gradient
3. adding a background image

Insert Dreamweaver Reveal Effects

- solid color -choose a solid color background from the color palette. You can also set the background color transparency by editing the "Alpha (%)" property.

Insert Dreamweaver Reveal Effects

- gradient background - click on the "Gradient" link and the gradient bar will appear. Here you can set:
- the gradient direction and orientation;
- add transparency to each gradient color, by adjusting the Alpha value;
- you can add as many droplets as you want by just clicking at the bottom of the gradient bar.

- background image - choose an image for the slider element's background. You can browse it in the computer, by clicking the folder icon from the background image input.

Insert Dreamweaver Reveal Effects

If you click on the "Choose from media library" button the imge gallery opens. You can choose a background image or a background pattern to add to the element from the media library:

Insert Dreamweaver Reveal Effects

Background Advanced settings:

Insert Dreamweaver Reveal Effects

From the advanced image settings you can set the background image align, repeat and width.

- set the horizontal and vertical background image align;
- set the background position using the horizontal (X Offset) and vertical (Y offset) offsets;
- background repeat - sets if/how a background image will be repeated. By default, a background-image is repeated both vertically and horizontally.

Tip : The background image is placed according to the background-position property. If no background-position is specified, the image is always placed at the element's top left corner.

Box:

Insert Dreamweaver Reveal Effects

Inside this tab you can set the element paddings, borders and rounded corners settings.
Important to know! - The paddings and borders are calculated in the total width of the element.

The padding: The padding is the distance between the element borders and the text.

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

Insert Dreamweaver Reveal Effects

The "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".

Shadow:

Insert Dreamweaver Reveal Effects

Once you enable the shadow you will be able to edit:
- shadow type - choose the shadow to be normal (drop shadow) or inset (inner shadow);
- distance - choose the shadow distance - the measurements are made in px;
- blur and angle - choose the shadow blur value and angle;
- shadow color and transparency - choose the shadow color and transparency. The transparency is measured in percents (alpha %).

Pagination

Settings:

Insert Dreamweaver Reveal Effects

- width and height - it can be set in px, percents (%) or auto;
- horizontal and vertical align that is relative to the slide;
- horizontal and vertical offsets - these represent the horizontal and vertical distances relative to the slide;
- z-index : the z-index property specifies the stack order of an element. An element with greater stack order is always in front of an element with a lower stack order.
-show only on hover - you can choose to display the element when the user hovers the slider.

Background:

Insert Dreamweaver Reveal Effects

You can style the background of an element by:
1. adding background solid color
2. adding background gradient
3. adding a background image

Insert Dreamweaver Reveal Effects

- solid color -choose a solid color background from the color palette. You can also set the background color transparency by editing the "Alpha (%)" property.

Insert Dreamweaver Reveal Effects

- gradient background - click on the "Gradient" link and the gradient bar will appear. Here you can set:
- the gradient direction and orientation;
- add transparency to each gradient color, by adjusting the Alpha value;
- you can add as many droplets as you want by just clicking at the bottom of the gradient bar.

- background image - choose an image for the slider element's background. You can browse it in the computer, by clicking the folder icon from the background image input.

Insert Dreamweaver Reveal Effects

If you click on the "Choose from media library" button the imge gallery opens. You can choose a background image or a background pattern to add to the element from the media library:

Insert Dreamweaver Reveal Effects

Background Advanced settings:

Insert Dreamweaver Reveal Effects

From the advanced image settings you can set the background image align, repeat and width.

- set the horizontal and vertical background image align;
- set the background position using the horizontal (X Offset) and vertical (Y offset) offsets;
- background repeat - sets if/how a background image will be repeated. By default, a background-image is repeated both vertically and horizontally.

Tip : The background image is placed according to the background-position property. If no background-position is specified, the image is always placed at the element's top left corner.

Custom HTML

If you want to add custom HTML code to the slider you can drag the "custom HTML" element to the stage.
The HTML Editor window will open. You can add any HTML code inside it.

Insert Dreamweaver Reveal Effects

Settings:

Insert Dreamweaver Reveal Effects

- width and height - it can be set in px, percents (%) or auto;
- horizontal and vertical align that is relative to the slide;
- horizontal and vertical offsets - these represent the horizontal and vertical distances relative to the slide;
- z-index : the z-index property specifies the stack order of an element. An element with greater stack order is always in front of an element with a lower stack order.

Font:

Insert Dreamweaver Reveal Effects

- choose font type and size;
- font color - choose a color from the pallette or add the color code inside the input;
- font align and style - chose the font to be aligned to left, center or right and set the font style - normal, bold or italic;
- letter spacing : set the space between text letters;
- line height : The line-height property specifies the line height. you can set a line height in percent of the current font size;
- alpha : set the text transparency;
- Add web font :click the "Add web font" button to open the web fonts gallery;

Insert Dreamweaver Reveal Effects

Animation:

Insert Dreamweaver Reveal Effects

- effect - choose from the predefined animation effects that appear in the dropdown list.
- easing - choose from the predefined easing effects that appear in the dropdown list.
- duration - choose the duration of the effect. It is measured in milliseconds;
- delay - the effect is measured in milliseconds.

Background:

Insert Dreamweaver Reveal Effects

You can style the background of an element by:
1. adding background solid color
2. adding background gradient
3. adding a background image

Insert Dreamweaver Reveal Effects

- solid color -choose a solid color background from the color palette. You can also set the background color transparency by editing the "Alpha (%)" property.

Insert Dreamweaver Reveal Effects

- gradient background - click on the "Gradient" link and the gradient bar will appear. Here you can set:
- the gradient direction and orientation;
- add transparency to each gradient color, by adjusting the Alpha value;
- you can add as many droplets as you want by just clicking at the bottom of the gradient bar.

- background image - choose an image for the slider element's background. You can browse it in the computer, by clicking the folder icon from the background image input.

Insert Dreamweaver Reveal Effects

If you click on the "Choose from media library" button the imge gallery opens. You can choose a background image or a background pattern to add to the element from the media library:

Insert Dreamweaver Reveal Effects

Background Advanced settings:

Insert Dreamweaver Reveal Effects

From the advanced image settings you can set the background image align, repeat and width.

- set the horizontal and vertical background image align;
- set the background position using the horizontal (X Offset) and vertical (Y offset) offsets;
- background repeat - sets if/how a background image will be repeated. By default, a background-image is repeated both vertically and horizontally.

Tip : The background image is placed according to the background-position property. If no background-position is specified, the image is always placed at the element's top left corner.

Box:

Insert Dreamweaver Reveal Effects

Inside this tab you can set the element paddings, borders and rounded corners settings.
Important to know! - The paddings and borders are calculated in the total width of the element.

The padding: The padding is the distance between the element borders and the text.

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

Insert Dreamweaver Reveal Effects

The "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".

Shadow:

Insert Dreamweaver Reveal Effects

Once you enable the shadow you will be able to edit:
- shadow type - choose the shadow to be normal (drop shadow) or inset (inner shadow);
- distance - choose the shadow distance - the measurements are made in px;
- blur and angle - choose the shadow blur value and angle;
- shadow color and transparency - choose the shadow color and transparency. The transparency is measured in percents (alpha %).

B.4 Preview

The "Preview" button allows you to preview the slider in browser everytime you make a change.

C. Edit Power Slider

In order to edit the Power Slider you have to select it inside Dreamweaver.

Click on the "Edit PowerSlider" button to edit its settings.
The PowerSlider2 Editor will open and you will be able to edit it.

Insert Dreamweaver Reveal Effects

D. Add Existing Power Slider

The "Add Existing PowerSlider" function helps you insert an existing Power Slider on one or more pages, so that you won't have to recreate a slider with the same settings and elements.
In order to add an existing Power Slider, you need to place your mouse cursor on the place where you want to add it.
Then click the "Add Existing PowerSlider" button. A popup will appear where all the Power Sliders that were inserted on a page within the existing Dreamweaver site are listed.

Insert Dreamweaver Existing Slider

Choose the existing Power Slider that you want to be added to the selected page.

E. Delete Power Slider

In order to delete the Power Slider you have to select it inside Dreamweaver. If your mouse cursor is placed somewhere else on the page, you will get the following Dreamweaver alert message: "You must select a Power Slider before deleting it."

In order to remove a Power Slider from your page, click the "Delete PowerSlider" button. The Power Slider will be removed from the page.

F. How to

Coming Soon! We will make a list of short tutorials in this section.


G. Requirements

1. The extensions works on PC or MAC on the following Dreamweaver versions: CS4, CS5, CS5.5, CS6, CC.

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