GabrielSoft - How it works: the Headline section

The Headline Section is an intuitive feature that helps you eliminate overwhelming website design decisions, so you can build a stunning website that compliments any of your existing images. The feature is only available on pages that are configured with a Sections Layout.

How to add a Headline section on your website

1

Add a Headline section to your homepage (or any interior page)

After selecting to use Sections Layouts for your compatible website theme, click on the + icon in the center of the page (pictured below). If you have already using a Sections layout, this + icon will appear at the top or bottom of the left side of any existing section.

This will open the Add Section dialog. Once the Add Section dialog appears, select the Headline section (pictured below).

3

Add an image

Once the Headline section is activated on your website, you can upload an image in one of the following ways:

• Drag-and-drop (pictured above) - To successfully drag-and-drop your image into the Headline section from your computer, simply grab your image and drag it inside the gray dashed line in the Headline section. When you see the dashed line's color change from gray to green, you can release (or "drop") your image and it will appear in your Headline section.
• Click on "Upload Image" text - Click on the linked text which reads, "Upload Image" at the bottom of your Headline section. This will open the File Source dialog, and you can choose to upload an image from your computer or your GabrielSoft File Manager.
• Click on the Image+ icon - Click on the linked Image+ icon (pictured below), to open the File Source dialog. From there you can choose to upload an image from your computer or your GabrielSoft File Manager.

PRO TIP: All image files uploaded to GabrielSoft websites must be below 20MB. Reduced file sizes ensure quick-loading images and improves performance on your website. For tips and resources on how to reduce the file size of your images, read How to reduce image file sizes.

After uploading an image, the Headline section will intuitively choose the best layout arrangement, based on your photo's size and orientation. If you'd like to change the layout style, you can do so in the Side Panel Editor, under the Layout tab.

Additionally, if you'd like to replace the image featured in your Headline section, you can do so in the Side Panel Editor, under the Image tab.

NOTE: The Headline section does not have the ability to feature videos or more than one image at a time. If you would like to feature multiple photos on your website, try using the following sections/modules:

• For your homepage: Homepage Feature Region
• For interior pages: Photo Gallery Module

What happens to my image after I upload it to the Headline section?

Whenever you upload an image to the Headline section, it will automatically save to your website's File Manager. Learn more about your File Manager here.

4

Edit the pre-populated text

After you have successfully uploaded a photo, you can begin editing the pre-populated Title and Caption text. Simply click into the text boxes and begin editing.

You can also toggle the Title or Caption text boxes between the "on" and "off" position in the Side Panel Editor, under the Text + Buttons.

NOTE: The Headline section's Title and Caption text boxes are displayed in fixed locations with fixed styles. That means that you are not able to rearrange the order of the Title and Caption text boxes or edit their style characteristics (eg. font size, color, etc.) as you normally would in a WYSIWYG editor.

5

Edit the call-to-action buttons

Now that you've added images and customized the text, it's time to edit your call-to-action buttons! You can add up to four buttons within each Headline section. Listed below are the three editing options (pictured below) available for a button in your Headline section:

1. Edit a button: On each individual button, click on the gear icon to open the button's settings dialog. In this settings dialog, you will be able to edit your button text, choose a link type, select an internal page to link to, paste a link URL, and choose one of two, preselected button design options.
2. Delete an existing button: On each individual button, click on the trash can icon to delete the button from the Headline section.
3. Add a new button: At the far right of the button sub-section, click on the + icon to add another button to the Headline section.

Don’t worry about the order you enter each button. You can always select the orange bar on the side of each individual button, hold your mouse button, and drag the button to change the order. Just hover your cursor over the button then drag the bar to rearrange.

6

Modify design styles using the Side Panel Editor

Now that you have the foundations of your Headline section in place, you can edit the design styles within your Headline section using the Side Panel Editor (pictured below). There are four tabs located in the Side Panel Editor, which contain the following tools, in order to help you make styling edits within the Headline section:

1. Image Tab - Edit the image’s style, position and cropping with the following tools:
   • Directional cursor
   • Zoom In/Out
   • Replace Image
   • Color Overlay selector + Opacity slider
2. Text + Buttons Tab - Change the text's paragraph and alignment styles with the following tools:
   • Horizontal alignment
   • Vertical alignment
   • Title, Caption, Button toggles
3. Layout Tab - Select from two distinct layout styles, and their various layout arrangements with the following tools:
   • Edge-to-edge layouts - Display the image without any padding (i.e., white space)
   • Inset layouts - Display the image with padding (i.e., white space) on both edges
   • Text-only layout - Includes only title, caption, and button(s)

Hints:

• Inset layouts work great for smaller images or images with a portrait (vertical) orientation.
• Use one of the Half Width layout options if you do not want the text, caption and button(s) to overlap the image.
• If you choose a Text Only layout or you have not yet uploaded a photo to your Headline section, the Side Panel Editor will appear with all of the tabs listed above, except for the Image tab.
4. Design Tab - Modify the image height and section background styling features with the following tools:
   • Image height selector
   • Styling drop-down menu

Still have questions?

For a more in-depth explanation of the Side Panel Editor, check out The Side Panel Editor Explained.

7

Review and publish

After you've completed editing and making styling adjustments to your Headline section, review your new section in your website's Design Studio. Then, you can hit the green publish button on your page to make your changes live!

Additionally, if you updated your Homepage layout to Sections only or upgraded your theme to a Sections Layout, be sure to also hit the green publish button in your Design Studio to ensure all these changes will appear on your website.