Flexi CSS Layouts for Dreamweaver

Download a free trial of   Flexi CSS Layouts for Dreamweaver
Buy Flexi CSS Layouts for Dreamweaver
Download Flexi CSS Layouts trial
See video Flexi CSS Layouts
box Flexi CSS Layouts for Dreamweaver

Flexi CSS Layouts is a Dreamweaver Extension that helps you create browser compliant table-less web pages with ease. Unlike other products that are limited to templated CSS layouts with 1, 2 or 3 columns, with Flexi CSS Layouts for Dreamweaver you can build your own custom layout structure without coding.

Not only that you can create fixed, liquid or elastic layouts in seconds, but you can generate custom website sections with unlimited DIV levels, following even the most detailed mock-ups from your designer.


Special offer

Flexi CSS Layouts documentation

Insert Page Section layout inside a Wordpress Post

In this tutorial we will show how you can create a page section layout in Dreamweaver using the Flexi CSS Layouts extension and then use the section inside a Wordpress post.

Note: the basics of creating a Flexi CSS layout are covered here and we will assume you have a site defined in Dreamweaver. We will assume you already know how to create a page section layout.

Requirements for this tutorial:

  • Adobe Dreamweaver CS5 (you can also follow this tutorial with Dreamweaver CS3 or CS4)
  • Flexi CSS Layouts
  • Testing server (XAMPP or WampServer) – here is a tutorial on how to setup a testing server.
  • Wordpress installed on the Testing server

Create the section layout using Flexi CSS Layouts extension

For this tutorial we will create a page section layout using Flexi CSS Layouts extension then see what changes are necessary to use the section layout inside a Wordpress post. You can create your own section layout by clicking on "Insert New Page Section Layout" but to speed up things in the tutorial we will use one of the page section layouts included in the template gallery.

Open Dreamweaver and create a new page: section.html. Find the Flexi CSS Layouts tab (here is a short tutorial on how to install and locate the extension in Dreamweaver) and click on Insert Layout from Template Gallery. Go to Section Layouts, select Articles category and then select Simple article page section.

Add a page section CSS Layout

Click on Insert - this will generate the DIVs and CSS in the section.html page (you have to give a name to the layout and choose the CSS to be in an external file).The extension will generate an "includes" folder which you need to upload on the testing server. Let's have a look at the generated code to understand what changes we will need to do.

Changing links in the head

These are the links from the head of the page section layout:

<link href="includes/CSSLayouts/CSSLayouts.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="includes/CSSLayouts/debug_plus.js"></script>
<link href="includes/CSSLayouts/sdimpla.css" rel="stylesheet" type="text/css" />
<link href="includes/CSSLayouts/sdimpla_user.css" rel="stylesheet" type="text/css" />

As you can probable imagine, these links will not work in Wordpress because the usual URL rewrite that is done by Wordpress (called permalinks). So we will need to change the links in complete links that include your domain (I skipped the <script type="text/javascript" src="includes/CSSLayouts/debug_plus.js"></script> because it's only needed for debuggin, so you can completely delete this line). For example:

<link href="http://www.yourdomain.com/location to /includes/CSSLayouts/CSSLayouts.css" rel="stylesheet" type="text/css" />
<link href="http://www.yourdomain.com/location to includes/CSSLayouts/sdimpla.css" rel="stylesheet" type="text/css" />
<link href="http://www.yourdomain.com/location to includes/CSSLayouts/sdimpla_user.css" rel="stylesheet" type="text/css" />

Changing paths to images

You might have some images in your section layout. In my example, we have this image: <img src="includes/CSSLayouts/articleblog1_assets/picture0.jpg" width="180" height="300" alt="picture" style="border:1px solid #CCC" />. You need to change the paths to the images the same way you did for the header links:

<img src="http://www.yourdomain.com/location to includes/CSSLayouts/articleblog1_assets/picture0.jpg" width="180" height="300" alt="picture" style="border:1px solid #CCC" />

If you used background images

If you used background images in your section layout, then we need to change the paths to them as well. To do this, you need to upload the images you use as background to the testing server. Let's say you create a folder "images" and put an image there "background.jpg" that is used as a background image in one of the cells of the design. The path to this image is http://www.yourdomain.com/images/background.jpg . Edit the page section layout, click on the cell that has a background image and click on "change".

Change background Image

In the pop-up you need to change the path to the background image to the correct path: http://www.yourdomain.com/images/background.jpg save the changes and re-upload the includes folder to the testing server:

Change background Image

Copy the page section layout in the Wordpress post

You have everything ready to go for Wordpress now. Create a new page in Wordpress and switch the content editor to HTML. Copy the links from the header section that we have previously edited and the code between <body> from Dreamweaver code view. Should work now!


Download Flexi CSS Layouts for Dreamweaver trial
  • Adobe Dreamweaver CS3
  • Adobe Dreamweaver CS4
  • Adobe Dreamweaver CS5
  • Adobe Dreamweaver CS5.5
  • Adobe Dreamweaver CS6