Get the Panel elements -header, content, footer- from a bigger layout

Overview

Once you have the header, content and footer for the Panel as separate pictures, the next point is to set the cutting points for each element. The purpose of this step is to cut as separate pictures the (rounded) corners and a slice of the container background that will be either repeated either streched to match the height of the elements or fit the content.

1. Open the FlexiSlicer interface

In the FlexiPanels CSS Tab click on the FlexiSlicer button to open the FlexiSlicer Interface. There are 2 options to go ahead:

Cut the Panel elements - header, content, footer - from a bigger layout
You already have the Header, Content and Footer as separate pictures

2. Cut the Panel elements - header, content, footer - from a bigger layout

If your Panel layout is part of a bigger page layout, the first step is to separate the panel from the general layout using the crop function. Set the crop tool margins just outside the panel

Crop Panel

Once you have separated the Panel from the general layout, you should set the markers (cutting points) to cut and create separate images for your header, content and footer. Go to Step 2: Setting up the cutting points in FlexiSlicer

Separate Header, Footer, Content

3. You already have the Panel elements - header, content, footer - as separate pictures

In case you already have the Panel elements as separate picture, you just have to browse and import the pictures in the FlexiSlicer interface for each element. Go to Step 2: Setting up the cutting points in FlexiSlicer