Home > Creating your first panel > Use the built in Panels gallery

Use the built in Panels gallery

In this section we will insert a CSS panel in your site using Flexipanels for Dreamweaver ; you will see that the panel creation process is straightforward and fast. Each Panel in the gallery comes with a predefined configuration and 5 or more color schemas to choose from.

Before going further, you need to install Flexipanels on your computer (a free trial or a licensed version); you can find Flexipanels on the Extend Studio Web site. More information about the extension installation and registering you can find in the Installation section of the documentation. You also need to have the page where you want to insert your panel as part of a Dreamweaver site, as Flexipanels creates a folder where its dependent files are kept.

To insert a panel in a page, follow these steps:

1. Open the FlexiPanels CSS interface

  1. Open Adobe Dreamweaver and create a new file; the file has to be part of a Dreamweaver site.
  2. Create new page

    Create new page

  3. In the Insert bar, select the FlexiPanels CSS tab;

    FlexiPanels CSS Tab

    FlexiPanels CSS Tab

  4. In order to open the Insert bar, click Window, Insert from the top menu in Dreamweaver or use the Ctrl + F2 keyboard shortcut.
  5. Window/insert

     

     

  6. Click on the FlexiPanels CSS button in the Tab.
  7. In the Appearance tab we will give the panel a name and let you select the predefined panel and color schema from the gallery. From the right column choose the panel width and if it should fit to content or not. You can set the header, content or footer to display or not.
  8. FlexiPanels CSS Appearance tab

    FlexiPanels CSS Appearance tab

  9. Switch to the Configuration tab. From this new window, for each panel element (header, content, footer) you can:
    • Use the embedded classes or your own
    • Select background behavior: repeat or strech
    • Set the element height or fit to content
    • Set the content properties (font style, padding, height, color)
    • Set the content padding
  10. FlexiPanels CSS configuration Tab

    FlexiPanels CSS configuration Tab

     

  11. Click the Save button at the bottom of the interface to save the changes; following, click the Close button to add the panel to your page. As you can see, the panel was embedded in Design View as well as in Code View.
  12. In the File panel, click Preview in Browser and select a browser from the list or click F12 to preview the page in your default browser.