# Content area & form layout
The **Content** section defines the layout and appearance of the main flow area—where steps are presented to the responder. This area includes multiple styling options to control the visual layout and structure of the flow.
#### Content Settings
At the top of the **Content** page, you’ll find list of global styling controls for the flow. Some of the more important settings are:
* **Favicon** → Upload a favicon for your deployed page.
* **Loading indicator image** → Display a custom image while the page is loading.
* **Show navigation sidebar** → Table-of-contents-style panel on the left side of the flow
* **Padding** → Adjust inner spacing for the content container.
* **Background color** → Set the background color of the content area.
* **Content column and text alignment** → Justify content horizontally.
* **Max width** → Set a maximum width for the content container.
* **Vertical alignment** → Control vertical placement of the content block.
{% hint style="info" %}
Refer to our CSS Reference guide for full details on configurable properties.
{% endhint %}
***
### Action Bar Styling
The **Action Bar** is the area where navigation buttons (Next, Back, etc.) and other elements like the progress bar may reside. Styling options include:
* **Background color**
* **Bar shadow** (visual effect similar to box-shadow)
***
### **Footer**
The **Footer** section supports customization for:
* **Background color**
* **Padding**
* **Vertical positioning** (above or below the bottom action bar)
You can also enable:
* **Show cookie management link** → Loads Osano (if configured in your privacy policy) to let users manage cookie preferences. If Osano is not used, Formsort will use local storage.
***
### Inline Steps
The **Show all steps inline** setting renders all steps in a single, scrollable column. This layout makes the entire flow appear as a continuous vertical page. You can also control the **opacity of inactive steps** to help responders see where they are.
{% hint style="warning" %}
This feature is still in Beta.
{% endhint %}
***
### Layout editor
Flows are rendered inside a layout that may include persistent elements like a logo, navigation buttons, and a progress bar.
### Grid template
The Layout editor uses a grid system for positioning UI elements. You can define the number of **rows and columns** for each Action Bar (top, inline, bottom), then drag and drop components such as:
* **Buttons** (Next, Previous, Exit, Select)
* **Progress bar**
* **Logo**
This gives you fine control over positioning and layout.
## Button Styling
Click any button to open its styling menu. Options include:
* **X/Y position** → Adjust button placement.
* **Alignment** → Set horizontal and vertical alignment.
* **Height/Width** → Define how many rows or columns the button spans.
To access additional styling properties, click the **Style →** link at the bottom of the button menu to open the advanced button styling page.
