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



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 - Wprdpress Site Designer 2

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

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.

Adobe Dreamweaver Wprdpress Site - CloudPress For Dw

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. Install MAMP/XAMPP on your computer

XAMPP (for Windows) and MAMP (for MAC - OS) are free and open source cross-platform web server solution stack package, consisting mainly of the Apache HTTP Server, MySQL database, and interpreters for scripts written in the PHP and Perl programming languages, that makes it extremely easy for developers to create a local web server for testing purposes.

B.1 Install the XAMPP For Windows

1. Download

Download the software from here: https://www.apachefriends.org/download.html
Download the XAMPP for Windows, latest version. Once downloaded, the installer works like most Windows installers.

2. Installation

Double-click the .exe file you downloaded.
If a warning dialog appears click the "Allow" option to install XAMPP. A Setup Wizard window appears, ready to step you through the setup process. Click "Next".

Select the components that you want to install. You can click on the components to get a detailed description. If you want to remove some of them, make sure to leave the MySQL and the phpMyAdmin. When you’re done, click "Next".

The installer suggests putting the application on your main drive at C:XAMPP - you can pretty much install it anywhere, but it’s recommended to install it in C:XAMPP.

The installer places all the files onto your system. This process takes a while, since a lot of programs and files are being installed.

3. XAMPP Control Panel

Start the XAMPP Control Panel (see screenshot below).

The XAMPP Control Panel lets you start and stop the Apache Web server and MySQL database server

Both Apache and MySQL are currently NOT running, as indicated by the word Start to the right of their names. Click the Start buttons to turn the servers on.

That's it, from now on you can create sites using the extension.
Always remember to start the Apache and MySQL services whenever you restart your computer so you can create wordpress sites using the extension.

B.2 Install the MAMP For MAC-OS

1. Installation Requirements

To use the MAMP, your system must meet the following requirements:
Operating system: Apple OS X 10.6.6 or later;
Mac with 64-Bit CPU from Intel (x84);
User account that allows to administer the computer (Administrator).

2. Download

Download MAMP from here: http://www.mamp.info
Download the XAMPP for Windows, latest version. Once downloaded, the installer works like most Windows installers.

3. Installation

Double click on the file MAMP_MAMP_PRO_3.0.pkg in your Downloads folder. The System Installer will guide you through the installation process.

4. MAMP Manager

After successful installation you can launch your local servers. Start MAMP and click on the Start Servers button. In the status display in the upper right corner, the launch status of the servers is displayed. If necessary, you will be asked for your administrator password.

Note: You may need to restart MAMP each time you restart your computer and ALWAYS start Apache and MySQL services when this happens.

The web server (Apache) starts by default on port 8888, the database server (MySQL) on port 8889.

5. Change ports

Important! To get the site to work you need to set the Apache Port to 80 and MySQL to 3306. For that you need to open the Preferences - Ports section.

Then click on the button Set Apache & MySQL ports to 80 & 3306 . That’s it, you can now use the extension to build WordPress sites.

C. Create a new Wordpress Site

Before starting to use the Cloudpress for Dreamweaver application you need to open XAMPP (on Windows) / MAMP (on MAC-OS) and start the MySQL and Apache Server. If you don’t know how to do that, please check this tutorial first:

Install XAMPP for Windows
Install MAMP for MAC - OS

1.Create a new Wordpress Site

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
From the Insert window select the WP Site Desiger 2 and click the New WordPress Site button.


2.Wordpress site settings
The Create Site wizard opens. Here you need to add the info that corresponds to the new Wordpress site.

2.a. Site Name - it represents the name of the new wordpress site.

2.b. Site Folder (on local server) - it’s the location of the site inside the XAMPP/ WAMP/ MAMP folder (i.e. C:xampphtdocssite1);
The site folder has to be inside the " htdocs " folder (for XAMPP/ MAMP) or "www " (WAMP). You can browse for the htdocs folder by clicking the grey "folder" icon.

2.c. Site Local Address - it’s usually localhost. That’s the local URL address of the site (i.e. localhost/site1).

2.d. Choose password for WordPress admin - with this password you’ll be able to login inside WordPress with the admin account.

2.e. Database server - it’s usually "localhost"

2.f. Database name - the name of the database of the new site (just write a name and it will be created automatically). It’s usually best to keep it short (i.e. "wp") and it must be unique (so you need to create one for each wordpress site)

2.g. Database user - it’s the database username and it can be changed from phpMyAdmin. If you haven’t changed it, the default user for the database is "root" (for both MAMP and XAMPP).

2.h. Database password - it’s the database password and it can be changed from phpMyAdmin. If you haven’t changed it, the default password for MAMP is "root" while for XAMPP you should leave it empty.

After adding all the info for the new WordPress site, click the "NEXT" button. If you receive an error message, go back to site settings and be sure all the info is correct.

For example, if you get the message below, make sure to check the 2 following things:

1. That you have started the Apache server and MySQL from the XAMPP/ MAMP Control Panel - check the tutorial here (link MAMP/ XAMPP) to see what you need to do.

2. That the site folder that you had chosen is in the correct location on your computer. Make sure to have the site folder inside the "htdocs" folder (for XAMPP/ MAMP) or "www" (WAMP).

If you believe that all settings are correct but it still doesn’t seem to work, send us an email at support@extendstudio.com and we’ll see what’s wrong.

After the site is created, you’ll notice that the site will be open automatically inside Dreamweaver’s "Files" panel, with the name you’ve chosen for the site.

Next, creating the site may take a while before the site is created, as many files are being generated on the computer.

Next , the CloudPress Site Designer will open. Here you are able to start designing the new wordpress site that you had created.

(see screenshot below)



D. Wordpress Site Designer

D.1 Workspace Overview

WP site designer’s workspace is compact and layered, allowing you to see everything clear and separated, based on the functionalities or separate pages you are working on.

WP site designer allows you to:

  • Access an unlimited number of designs for your future site’s appearance and functionality

  • Enables easy design management for amateurs with powerful, ready-made options

  • Helps you create highly responsive web platforms

  • Offers user-friendly, intuitive tools for design and development

  • Video customization for each media query


Our team has reevaluated the place and importance of HTML and CSS and it turned the headache of learning code into the simple and ready-made art of drag and drop. WordPress Site Designer works with predefined blocks and elements, so all you need to do is open the app and analyze the panels, observe and use all functionalities.

The primary way of creating elements in site designer is by adding sections that you can ultimately fill up with all the visual and written details you fancy.

You have more than 80 content blocks that cover the most widely used types of content. You can easily combine header, content and footer blocks to prototype pages in only a few minutes.

The default page is already structured in, as we have realized that a web page is simply too big a unit. We have broken it into smaller components to enable it to bend and change, to better serve its authors and users.

It has a very practical and fluid interface which helps you focus on design. It does that by deciding for itself where it needs to save each piece of the page. Site Designer uses complex algorithms to send each piece of code or content in the right file or database, while letting you focus on looks and efficiency. It is a user-friendly DIY, drag and drop Wordpress builder that allows you to create complex web pages.


The design page template is separated as it follows:

  • The header section: placed on the upper side of the page. The header section allows you to place your menu bar, the logo of your company and a headline, if you find it suitable

  • The page content section: this is where you will place all design elements, blocks, images and text from your site.

  • The footer section: This is where you will place all details related to your company, such as contact forms, terms and conditions, maps and so on

D.2 The "Pages" panel

Here, you can see an extensive list of page templates. You will find a series of predefined pages, which meet popular queries, contexts or situations:

D.2.a The Home Page

This is your main objective, this is where it all starts from. This is the page you need to pay most attention to and here is where your connected ideas will mix and match with the design elements of your site. If you choose to work with a theme, the home page will reveal the exact elements and blocks from your chosen theme, just like in the example below


D.2.b The Error Page

This is a predefined template for the common "error pages" we oftentimes see on our computer screens, after accessing a certain platform, page or service online. The default Error Page in WP Site Designer has the standard information, all you have to do is customize and change its styling. Change the colors, fonts, backgrounds if needed.


D.2.c The Search Results Page

This section is a ready-made, standardized page which shows the exact results of a certain search query on your future site. The default information and structure are added already, but you can always customize or completely change the way the search results page looks on your site. The drag and drop builder anticipates your needs and offers some basic alternatives for your design needs.

D.2.d The templates

These sets of pages help you better structure and organize your way towards the end result of your work. We have gathered and put together common design situations, with a basic composition that you can improve. However, the styling elements allow you to modify everything on the template. You can take this as web design software for beginners, if you have a more insightful perspective on web development, or you can see our templates as a helping hand and time saver for your effort to build an online identity. To insert a template into the structure of your site, all you need to do is click on the + icon you see at the site pages menu bar and select the exact template you need. Press "create page" and your template will instantly link to your site’s structure.

Inside the page templates panel you can find predefined structures for common situations, as it follows:

Default page template: It has a header section, a content box and a footer area. Everything can be easily customized and you have a good and structured starting point. The header inside a default page template is styled with a simple menu bar and a logo while the footer is styled with the basic contact info and resume.

The Centered Page: Will place the entire amount of content you want to use on the predefined grids, for a better design management. The fluid grid provides a visual way to create different layouts corresponding to devices on which the website is displayed. CloudPress grid system uses 12 columns. Most of the elements have their width measured in columns (cols).

The Landing Page This is basically a content block that needs serious styling. A landing page normally doesn’t need a header and a footer section, it comes as the result of a user’s query. You can style it up as you desire, add elements, paragraphs, blocks of text and image.

The Page with Left Sidebar: If you need a separate page on your site with different sections, categories, lists of elements, the page with left sidebar template is a great choice. It can be used as a default blog page, as a forum page, or any other informational type of content section on your site. You can also use this page to showcase your portfolio, by filling it either with text elements or visual details, arranged in categories.

The Page with Right Sidebar: A simple page with a basic menu, content section and a right sidebar where you can organize your content into categories. It is highly suitable for blog sections, informational content structures or even a visual portfolio. Make use of the categories and efficiently structure the content.

The Page with Two Sidebars: If you have a complex and diverse range of content, the page with two sidebars works perfectly to help you structure your content blocks. The categories on the left and right side of your page will work to differentiate your content approaches. You can choose to place your written content cues on the left side of the page and your visual cues on the right, or you can simply decide for yourself which goes where, you have enough categories on both sides of your potential page.

D.2.e The Default Blog Template

This is the basic structure of a blog page. You basically have a content section and a right sidebar as your blog menu. Set the desired categories for it, link it to your general page structure and there you have it, a simple, clean and clear blog page without much fuss, trials and tribulations. The WordPress Site Designer software has made your design tasks easy and prepared default pages for common design situations:

Inisde the blog template pages you will also find:

  • An Archive Page

  • A Post Page

  • A Blog Index

All the mentioned pages can be styled up and edited upon desire and expectation. They are designed as basic templates you can always use inside your site’s structure.



D.2.f The Apps Pages

The apps pages can be defined as dynamic structures that help you complete your design project by adding predefined elements which enhance the site’s relevance. Apps work as complex elements, automatically linked to each other, which completely define, separate and organize some sections on your website.

You can access app widgets for:


  • Portfolio

  • Teams

  • Clients

  • Testimonials

  • Custom Apps


All these three sections are mandatory for the infrastructure of a website and now you can create them in no time with WordPress Site Designer. The apps elements will send your visitor to an automatically linked "details page", available for each and every item in your list( either portfolio, clients, team or testimonials). The user can see either a "details" page for every item in the section or he can access an "archive" of the section. First you have to choose a certain app element, either for portfolio, teams or testimonials or all three at a time, then you need to style them up and adapt them to your desires and wishes and ultimately align all information with both the details and the archive page.

Find the app elements in the elements pane:  

  • You can edit the Portfolio section on your website by structuring both a details page and an archive page, containing all the work you want to share

  • You can create a Teams section on your site, as you have a predefined structure both for Details and the Archive Page.

D.3 The Add Blocks panel


Reveals blocks for various design situatios:

Call to action
Hero images
Navigation
Contact
Features
Team Members
Showcase
Testimonials
Portfolio
Client list
Footer
Pricing list


D.4 The Add Elements panel


The "Add Elements" panel reveals various types of elements which help you create new sections on your website. Here you can find buttons, headline sections, paragraph sections, sliders, carousels, image and video sections and so on.

The elements are separated in:
Basic elements, including, buttons, paragraphs, list sections, columns, inline text, containers, lists, content swaps, etc.

The elements are separated in:
Common modules, including: search boxes, social links, sliders, horizontal menu bars, widget areas, image grids, contact forms, custom shortcode, custom html, etc

Wordpress Widgets

Widgets are designed to provide an extremely simple and user friendly way of offering design and structure control of the Wordpress Theme. These elements help you organize, arrange and better position all the elements on your site. A Wordpress widget is a discrete block that performs a specific function. Widgets can be easily added in sidebars, also known as widget-ready areas on a page. CloudPress allows you to design your own, personal widget-ready area wherever you find it fit on your site. However, even if our site builder gives you all the creative freedom you need for your design, keep in mind that you must respect a certain structure, to keep users away from confusion. Widgets will help you avoid that as well.

These simple and highly recommendable elements are most useful in blog structures. Your blog page will be complete and perfectly organized only after you add the most suitable widgets to your content sections. You will see categories, navigation menus, search, calendar, recent posts and other important elements.

Apps: Portfolio, Teams, Testimonials, Clients. Apps can be displayed as lists, carousels or sliders.

Wordpress Page Data

These are simple Wordpress tags that users usually ignore but considering a blog works like some sort of public journal, those tags must be there to make the content legit. These are post dates, blog description elements, page shortlinks and other structures that strengthen a blog post’s value and enhance its meaning.
The Wordpress page data is actually a general reference that completes your posts. If you want to highlight a certain author, you should choose to add the author’s name and the author’s number of posts.Wordpress page data can be defined as added value to the content you post on your blog.


D.5 The Options Panel


Depending on the element or block you choose or you have on your layout, the options panel offers you variable alternatives for editing. You can create new sections or parameters from there and set the general landmarks for your specific element. The options panel is highly variable depending on the structure of the element you are using. CloudPress website editor is ideally designed to help you set the perfect set of options for your page design.


D.5 The Styling Panel


This functionality allows you to personalize all the elements you work with. Depending on the element you choose to edit, the styling panel slightly changes its features. For certain elements you can use all features while for others some of them won’t be available. You can change extremely fine details on your workspace from the styling panel. WordPress Site Designer has ideally structured the personalization elements so that you can find it easy and intuitive to modify, adjust, adapt and improve everything. You can create classes, completely integrate or isolate a certain element on your page, change colors, styles, font, alignments and so on.

D.5.a Class

Generally, a class is defined as a set or category of elements which have a certain property or attribute in common and is differentiated from others by kind, type or quality. If you create classes for elements, you can easily duplicate by attributing the class you previously created to another template.

Select the parameters for the class you want to build ( shape/color/dimensions/element). Any adjustments you make to the class on the styling panel will be automatically added to your initial parameters. If you want to use it again, all you have to do is drag the same element onto the page and paste the previous class in the styles box.

D.5.b State

A state can be defined as movement in appearance once a user places the mouse over a picture or a video. The normal state does not imply any changes once the mouse is placed over a certain section on the site. The hover state makes the image or video fade out, change its color or changes the text inside it. You can choose to change either: colors of the text state of pictures ( fade out states on hover) insert fade out effects for either text, image or video The active state is suitable for menu items only. It highlights the menu item that corresponds to the page your user is on.


D.5.c Typography

From this section you can apply styling, change dimensions, colors or replace text sections inside the infrastructure of your web page.

You can either choose an existing font or select a web font from our list
You can change the height and width of the text
You can change the alignment
You can set custom letter spacing ( in pixels )
You can change the color of the text

The typography tab which applies to containers on your site

If you select a certain div or container on your workspace, you can set general typography rules for headings or simple elements of text inside the selected cell. You can set special styling rules for all headings, all or a certain paragraph, styling rules for hover or active states, provided you select the element from the typography pane.


D.5.d Dimensions

This tab is designed to work in a very simple and intuitive manner. Your DIY website design is made easy with the help of some basic functionalities that allow you to build complex structures.

The dimensions tab works with measurement parameters such as:
percentages
pixels
columns (col)
auto setting of dimensions (the default measurements)
You can set the exact measurement parameters you find comfortable working with and adjust :
The width of your image
The height of your image
The minimum width
The minimum height
the maximum width
the maximum height

The minimum and maximum parameters set the basic limits of your element. These are secondary values that create a complementary restriction, so that your visual element does not cross a preset "maximum" or "minimum" width or height. In fewer words, the formula can be translated as " a 50% dimension, not wider/higher than 1200 pixels".

D.5.e Display

This functionality specifies the type of positioning and general appearance you use for an HTML element. Your DIY website design will be improved after you go through the basics of CSS arrangements. You don’t need to get too much into it but simply find out how you can use specific image styling options.

The Overflow Option

The overflow property specifies what happens if the content overflows another element’s box. You can adjust the state of your overflow option as it follows:

Visible: The overflow is not clipped, it renders outside the element’s box. This is the default option
Hidden: The overflow is clipped and the rest of content will be invisible
Scroll: The overflow is clipped but a scrollbar is added to see the rest of the content
Auto: If overflow is clipped, a scroll bar should be added to see the rest of the content
Initial: Sets this property to its default value
Inherit: Inherits this property from its parent element

Play a little with the functionality and see how it can change the way your picture is arranged in the general ensemble. WordPress Site Designer allows you to do, undo and redo anything until you get the right result of your work.


D.5.f Background

From here you can change or adjust the background. Usually, an image doesn’t require a certain background but if you set up image grids or images in a slider element, you may need a proper background. WordPress Site Designer allows you to choose from either a plain color background or gradient shades. You can also choose another image as a background but it is not recommended.

Adjust the color from the colors panel or fill in a color code
You can adjust the opacity, set in percentages
If you choose a gradient background, you can change gradient orientation easily
You can add multiple colors or change the default shades for your gradient color arrangement

D.5.g Box

This design feature allows you to properly frame your picture and properly set the spaces in between your photo and other elements. The box is designed in such a way that you can actually see which means what. Your DIY web design endeavor will work fluidly if you get things clear around how all the features work. You can adjust image functionalities, as it follows:

Margins: the margin clears an area around an element (outside the border). It does not have a background color and it is completely transparent. The top, right, bottom and left margin can be changed separately, using different parameters

Padding: The padding clears a certain area around the content (inside the border) of an element. Padding is affected by the background color of that certain element.
The top, bottom, right and left padding can easily be changed independently, using completely separate properties. A shorthand padding property can be used as well, to change all paddings at once. Make sure the small square in the middle of the box settings has all its sides gathered together

Border: The border-style property specifies what kind of border to display. You can adjust the settings for all sides equally or chose to set a certain border for a single side of your element. Below the dimensions box you can see that there are some complementary options.
You can preset the border for your DIY website design project as it follows:

Dotted border - defines a dotted border
Dashed - defines a dashed border
Solid - defines a solid border
Double - defines two borders
Groove - defines a 3D grooved border. The effect is usually dependable on the border-color value
Ridge: defines a 3D ridged border and the effect depends on the border-color value
Inset: defines a 3D inset border. The effect depends on the border-color value.
Outset: Defines a 3D outset border and the effect depends on the border-color value

D.5.h Effects

This feature allows you to add special effects to any element on the site, not only the visual structures but the texts, buttons and other small items as well. Your DIY web design endeavor will be perfectly completed by the effects you add.

The shadow effect
It allows you to add shadows to any item on your site. You can either use drop shadow or inner shadow, depending on how you want to the items to appear.

Text shadow - allows you to add shadow to the text. You can easily define the shadow color, opacity, offsets and blur - this feature is activated only when you have text boxes you want to work with

The Appear on Scroll effect becomes active under scrolling commands. You can either choose to let the elements slide, fade or zoom under the scroll, as it follows:
The Appear on Scroll - Slide effect
This effect creates a dynamic dimension that makes your image appear more vivid. Once you scroll through or open a certain page, the image discreetly slides from the upper, bottom, left or right side You can easily adjust the delay, the distance from which the slide effect initiates and the easing type Easing type is the type of effect that is played
The Appear on Scroll - Fade effect It makes the image appear as it is fading or it rises from a fading state. You can also play with duration, delay and easing type from the effects box and set the right parameters for your end result.
The Appear on Scroll - Zoom effect
It makes the image appear as it zooms out of the screen up to a point of natural size and appearance. You can adjust:
the zoom level: the zoom value that is represented in percentages. It helps the effect unfold at your site’s scale
Fade from: the point where the object fades in while playing the effect. It is measured in percents
Delay: The time before the effect plays
Easing type: the type of effect that is played

The Transform Effect
This effect makes your element ”go round”, namely move around an axis you can set the parameters for. You can define both the X and Y scales and axes and also set the skew.
Rotation can be set to negative or positive parameters.


D.7 Structure


The structure pane helps you see all HTML details of your site’s draft so that you can actively move, edit or delete details and elements.

When you click on a certain element on your site, you can see that the HTML code for it highlights in blue, at the bottom of the page. You can move the element from one side of the page to another with drag and drop.


D.8 Media Queries


In the Media Queries Settings panel you can edit:
- the max-width;
- the interval of the rendering surface of the output device;
- the grid width.

In the example below the mobile style sheet applies to screens that have 0 to 767 horizontal pixels.
The dimension paramteters for the tablet are set 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.

You can easily reset dimensions for all mobile devices you want to align your site design to.


D.9 Breadcrumbs


The breadcrumb trail is a graphical control element used as a navigational aid in user interfaces.
It allows you to keep track of your location/div/box/section within the workspace. The basic structure of an element within the breadcrumb is HTML and as you click on an html code inside it, the equivalent section in the workspace will be highlighted, so that you can easily perform a design change.

E. Edit a Wordpress Site

! Only websites that have been built with WP Site Designer for Dreamweaver extension can be edited with WP Site Designer
Open Dreamweaver. Make sure that inside the Dreamweaver "Files" tab you have selected the site that you want to edit.

From the main menu go to Site and choose "Edit WordPress Site".
The Wordpress Site Designer will open.


F. Export the Site

Before starting to use the Cloudpress for Dreamweaver application you need to open XAMPP (on Windows) / MAMP (on MAC-OS) and start the MySQL and Apache Server. If you don’t know how to do that, please check this tutorial first:
Install XAMPP for Windows
Install MAMP for MAC - OS

After you’ve created the site using the WP Site Designer extension, you must export the site and import it on the hosting server of your choice, inside an WordPress instance.

Here are the steps:

1. Export Site

Open Dreamweaver.
Make sure that inside the Dreamweaver Files tab you have selected the site that you want to be exported.

From the Insert panel select Wordpress Site Designer 2 and Export WordPress Site.


2. Export Options

You get 2 export options:
2.a. Complete site
This is recommended to be used the first time you export the DW site as it generates a theme with all your site files (html, css, plugins and also the created pages, posts and images added). Also, you should choose this option every time you create new pages, posts or add new images.

2.b. Site Without Content
Use this when you make Design changes to your site and you want to update them. This operation only generates the files that correspond to the site design - the html, css and plugins.

After you click the "EXPORT SITE" button you need to browse on your computer for the folder where you want the site to be exported to.

After choosing the folder click "OK".

Make sure that you have started the Apache and MySQL services from the XAMPP/ MAMP Control Panel - check the tutorial here (link MAMP/ XAMPP) to see what you need to do.

If you believe that all settings are correct but it still doesn’t seem to work, send us an email at support@extendstudio.com and we’ll see what’s wrong.

Exporting the site may take a while, as many files are being generated on the computer.

After the site is exported you will get the "Export Was Successful!" message and the steps about what to do next.
Important! Inside the folder where the site has been exported you will get 2 zip files - the uploads.zip file and the [site-name].zip file

G. Import the Site on Wordpress

1. Upload the uploads.zip folder to the wp-uploads folder on the server

On your public server make sure to upload the uploads.zip folder. The location where it needs to be uploaded is wordpress/wp-content/uploads folder.
Important! If the uploads folder does not exist, you must create it on the server.

2. Install the theme from WordPress dashboard on the live server

Open the Wordpress Dashboard and go to "Appearance > Themes"

Click "Add new" to add a new theme.

Inside the "Add Themes" section, choose "Upload Theme".

Click on "Choose File" and browse for the theme you want to upload.

After choosing the theme, click "Install now"

3. Activate the theme

Wait for Wordpress to install the theme and after the message "Translation updated successfully" appears, click "Activate".

You need to install the "WP Importer" plugin (if you don't have it already installed), that helps you import themes on your Wordpress site. Click "Get WP Importer".

After the importer is installed, click "Activate Plugin".

Note that importing the new theme, all existing content from Wordpress (pages and posts) will be replaced with the content from the theme you're installing. When you want to imort the theme to Wordpress, click "Yes, replace all content".


H. Requirements

1. To use this extension you must install the latest Wordpress version on your live server.
2. The WP Site Designer for Dreamweaver web application requires PHP version 5.4 or higher.
3. You need to install XAMPP (for Windows) and MAMP (for MAC - OS) local web server on your computer. Check the tutorials here:
Install XAMPP for Windows
Install MAMP for MAC - OS
4. The WP Site Designer for Dreamweaver is compatible with Dreamweaver CS4, CS5, CS5.5, CS6, CC, CC2014.1, CC 2015.

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