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.

Side Panel Editor Tabs

  1. Image Tab
  2. Text + Buttons Tab
  3. Layout Tab
  4. Design Tab
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

Ready to get started?

If you're ready to activate the Headline section, follow this step-by-step guide!