GabrielSoft - The Side Panel Editor Explained

What is the Side Panel Editor?

The Side Panel Editor (pictured below) is the settings dialog for the Headline section and contains tools that will allow you to edit and modify your Headline section. It is comprised of a blue handlebar and four distinct drop-down tabs (indicated by a down arrow), which contain specific editing tools. 

You can access the Side Panel Editor in one of two ways:

1. The gear icon - Click on the gear icon within the Headline section to open the Side Panel Editor (pictured below).
2. Upload a photo - When a photo is uploaded to the Headline section, the Side Panel Editor will automatically open the Image Tab, so you can begin editing the section.

List of Side Panel Editor Tools

Here is a breakdown of the tools that appear in each Headline section tab. Each tool is listed in the order it appears.

1

Image Tab

The Image Tab contains tools that allow you to edit or replace your image, as well as edit color styles of your Headline section (if applicable).

Here are the tools available in the Image Tab:

Tool Image	Tool Name	Tool Description
	Directional Cursor	Move / reposition the visible area of the image
	Zoom In / Out	Zoom in and out of the photo to adjust the visible area of the image
	Image Alignment	Adjust the alignment of the image in the browser window
	Replace Image	Click to upload a new image to the section
	Color Overlay Selector & Opacity Slider	Choose a colored overlay to appear behind the text and adjust the opacity (i.e. transparency) of the selected overlay

2

Text + Buttons Tab

The Text + Buttons Tab contains tools that allow you to edit text paragraph styles as well as toggles to turn Headline section text on / off.

Here are the tools available in the  Text + Buttons Tab:

Tool Image	Tool Name	Tool Description
	Text Justification	Adjust the horizontal alignment of the text and buttons
	Text Alignment	Adjust the vertical alignment of the text and buttons
	Title, Caption, Buttons Toggle	Click to show / hide the title, caption, and/or buttons

3

Layout Tab

The Layout Tab allows you to choose from one of seven layouts in the following three categories: 

• Edge-to-Edge Layout - Display your image without any padding (i.e. white space) between the sections directly above and/or below the Headline section.
• Inset Layout - Display your image with padding (i.e. white space) between the sections directly above and/or below the Headline section.
• Text Only Layout* - This layout only includes the Title, Caption, and Button(s).

*NOTE: In the Side Panel Editor, the Text Only layout option appears as the last choice, under both the Edge-to-Edge and Inset layout options.

Pro Tips:

1. Inset layouts work great for smaller images or images with a portrait (vertical) orientation.
2. Use one of the Half Width layout options if you do not want the text, caption and button(s) to overlap the image.

Here are the layout options available in the Layouts Tab:

Image	Layout Name	Layout Description
	Layout Selector	Choose between an Edge-to-edge or Inset layout
Edge-to-Edge Layouts
	Full Width	Image extends across the full width of the screen, regardless of monitor size
	Two-Thirds Width	Image extends across 2/3 the width of the screen, regardless of monitor size
	Half Width	Image extends across 1/2 the width of the screen, regardless of monitor size
Inset Layouts
	Full Width	Image extends across the full site content width
	Two-Thirds Width	Image extends across 2/3 the site content width
	Half Width	Image extends across 1/2 the site content width
Text Only Layouts
	Text Only	Includes only title, caption, and button(s)

4

Design Tab

The Design Tab contains tools that allow you to modify the height and background styling of the Headline section. 

Here are the tools available in the  Design Tab:

Tool Image	Tool Name	Tool Description
	Section Height	Adjust the height of the section
	Section Styling	Use the drop-down menu to select one of the prebuilt section styling options