Banners

Audience: All editor roles

Please note this product is in development and you may find videos and documentation don't reflect current functionality. 

Topic covers how to add and edit a banner component on a page.

The banner component is typically used to display a large visual impact page element containing an image and text, and can link to other pieces of content. Banners are recommended for use in wide page regions.

Timed transcript

• After opening a page, click the blue plus icon at the top of the page to add a new section. Select ‘Banner’ from the pop-up window.
• In the banner window:
  • On the 'Layout' tab, select from the range of layout options available.
  • On the 'Content' tab, add an optional banner link.
  • On the 'Styles' tab, set the banner width and optional anchor link.
• Click 'Apply' to insert the banner on the page.

• A banner has four editable areas. Hover over each area and click the blue plus icon to edit.
  • Heading (mandatory): Add the heading text and select the heading level from the drop-down menu. If using the banner at the top of the page, the page title should always be an H1.
  • Text (optional): Add and format the text. The text should be short, clear and purposeful.
  • Button (optional): Add the text, link, optional icon and icon settings.
  • Image (mandatory): Click 'Add media'. Then you can either:
    • 'Choose file' to upload an image from your computer. Please read the advice about using suitable images (i.e. image dimensions, file size, format).
    • Select from the images already available.
    • Click 'Insert' and add an optional link and captions.
• Click 'Apply' to add each element to the banner.
• After adding a banner, you can amend any of the areas by clicking on them and using the edit pane which automatically opens on the right-hand side of the screen.
• Any changes you make are immediately updated in the preview page to the left.

Image

Use the toolbar to:

• Move the component up or down the page
• Edit the component settings, e.g. layout
• Copy the component
• Save the component as a reusable template to use elsewhere on your site
• Delete the component from the page.

0:02
In this video, you'll learn how to add and edit a banner in Fresco.

0:07
Banners help to make your page more visually appealing and draw attention to important messages or calls to action. Let's get started.

0:16
After signing into Fresco, go to the 'Content' section and find the page you want to edit.

0:24
Click the 'Edit' button to open a draft. 

0:31
At the top of the page, click the blue '+' icon to add a new section.

0:37
In the pop-up window, select 'Banner'.

0:40
Please note, not all of these section types will be available to you immediately.

0:49
The 'Create New Banner' window will appear and defaults to the 'Layout' tab.

0:54
Here you can choose the type of banner you would like.

1:04
On the 'Content' tab, you can add a banner link and on the 'Styles' tab, you can set the banner width from the drop-down menu and add an optional anchor link.

1:18
Click 'Apply' to insert the banner on your page.

1:23
A banner has four editable areas: a heading text, button, and image.

1:31
As you move your cursor around the banner, you will see the prompts to add these elements.

1:38
So let's start with the heading.

1:41
Hover over the heading area and click the blue '+' icon.

1:48
In the 'Create New Heading' window, you can add your heading text and you can select a heading tag from the drop-down menu.

2:00
This is usually a Heading one for a page title.

2:05
On the 'Styles' tab, you can make further styling adjustments.

2:09
To learn more about this, visit the Fresco Help site.

2:14
Click 'Apply' and the page title will appear in the banner.

2:21
Next, hover over the text area.

2:25
This text is optional, but if you wish to include it in your banner, click the blue '+' icon.

2:32
Add your text to the 'Create New Text' window.

2:37
You can use the WYSIWYG toolbar to format your text.

2:45
This text is the first thing your users will read on the page.

2:49
It sets the tone and tells them what to expect from the page.

2:55
When you're done, you can go to the 'Styles' tab to make further adjustments.

3:01
Click 'Apply' and your text will appear in the banner.

3:05
Next, hover over the button area.

3:09
Buttons are also optional if you wish to include one.

3:14
Click the blue '+' icon. In the 'Create New Button' window,

3:20
you can enter your button text, add a link, add an optional icon, and select from some of the other icon settings in the accordion.

3:40
You can also select the icon position from the drop-down menu.

3:48
You can make further styling adjustments under the 'Styles' tab and then click 'Apply' and the button will appear in your banner.

3:59
Lastly, hover over the image area and click the blue '+' icon.

4:05
In the 'Create New Image' window, click 'Add Media' to add an image to your banner.

4:17
You can either add an image by using the 'Choose File' button.

4:22
This will allow you to browse your computer and select an image, or you can select an image from the options available.

4:34
Click 'Insert' and you will return to the 'Create New Image' window.

4:44
You can add an optional image link and you can override the caption for your image.

4:52
In the 'Styles' tab, you can make further styling adjustments.

4:58
When you're done, click 'Apply' and the image will appear in the banner. 

5:08
On the banner toolbar, you also have the ability to copy the banner, or save the banner as a reusable template to use elsewhere on your site, or delete the banner using the bin icon.

5:21
This toolbar functionality is covered elsewhere on our Fresco Help site.

5:27
When you've finished, click 'Save' and then click 'Exit Editing' to preview your changes.

5:38
And that's it. You've successfully added and edited a banner in Fresco.

5:43
You can find more detailed information about banners on the Fresco Help site.

Back to top